Native templates

From Service Manual Kadam.net
Revision as of 11:18, 1 March 2023 by Admin (Talk | contribs)

Jump to: navigation, search

In the native template designer, you can select one of the ready-made basic templates and customize it for your design.

Adaptive design targeting
A feature of our designer is the ability to target designs for different screen resolutions, as well as how your design adapts to the permissions of user screens.

DisplayAds5.png


By default, the new template will be displayed over the entire width range of your users' screens.
But if you plan that for desktop devices the block should be horizontal (for example, 4 announcements in a row), and for mobile devices it becomes vertical (for example, a column of 2 announcements), then you just need to make 2 templates that will be targeted to resolve pages (0 - 500px and 500px - ∞).

Block grid


A grid is a tool that determines how many ads will be shown horizontally and vertically.
By controlling the sliders, you can determine the number of blocks that will be displayed in the advertising block.
In addition to adaptive design targeting, the horizontal grid of blocks is also adaptive. This means that the number of advertising blocks horizontally will depend on the width of the framing container and the "base width" parameter of the advertisement, but not more than the maximum value of the number of advertising materials horizontally.

In the preview area, you can evaluate how the block will be displayed in different framing containers. To do this, you can specify the width and height of the container.

DisplayAds6.png


Set up a block


All basic designs have a standard set of block settings:

  • Indent height
  • The value of the upper and lower indentation of the block in px
  • Indent Width
  • The value of the right and left indents of the block in px
  • The collection of these parameters is similar to the css property margin: indent _ height _ indent _ width;
  • Round corners. The value of the css border-radius property for the entire ad block.
  • Background colors. Background Selection and Transparency Selector for Ad Block
  • Advertising labeling. The Ad Marking Selector, if set to is enabled, adds the phrase "Ads" to ads and adds a menu with advertiser information.


Title


Enabling this setting will add the Kadam logo above the ad block and allow you to add additional text above it.

DisplayAds7.png


  • Title text. Additional text to be added above the block on the left
  • Font size. Header text size in px
  • Font color. Font color of the header text
  • Bold. Font Size Switch
  • Logo. Activates the title display and allows you to choose which text will be displayed next to the Kadam logo


Material Setup


The appearance of the advertisement can also be customized, for this there is the following set of settings:

  • Height. Material height in px
  • Width. Base width in px. The base width of the material around which the horizontal mesh adaptability is drawn. Rough example of calculating the number of teasers horizontally: width of the framing container/base width of the material = integer number of materials horizontally
  • Top indent\bottom indent\left indent\right indent. The personal indentation dimensions of the advertisement in px, for css property margin
  • Stroke thickness. The size in px of the initial stroke of the advertisement
  • Round corners. The css value of the border-radius property of the material in px
  • Stroke color. Ad Stroke Color Selector
  • Background color. Ad Background Color Selector
  • Hover background color. Hover Background Color Selector
  • Shadow. Shadow Off On Ad Selector


General layout of advertising unit dimensions:

DisplayAds8.png


Image customization

  • Height. The height of the image in px. It is present in the Graphic template with text below (adaptive) and determines the height of the image. In other templates, the height of the image is equal to the height of the material
  • Width. The width of the image in px. Present in the Graphic with text on the right (adaptive) and Graphic with text on the left (adaptive) templates, determines the width of the image
  • Bottom indent. The indentation from the bottom of the image in px. Present in the Graphic template with text below (adaptive)
  • Round corners. The css value of the border-radius property of the image in px. Only for the Graphic template with text on the right (adaptive)


Text Setup

You can change the visual style of texts in all templates:

  • Indent height. Indent size at top and bottom of text in px
  • Indent width. Indent size to the right and left of text in px

The set of parameters gives the following css property: margin: indent height

  • Maximum length of text. Maximum number of characters in the ad header
  • Шрифт. Селектор выбора шрифтов
  • Font. Font Selection Selector
  • Line spacing. The css value of the line-height property, we recommend setting the value to more than a few px than the value of the “font size” parameter
  • Font color. Font Color Selector
  • Bold. Font Size Switch
  • Underline the link. Hover underscore mode radio button
  • Hover font color. Font Color Selector

Setting the button

Some templates have the ability to add an additional button to the design, allowing the user to be interested in the advertisement.
When the button is activated, a button appears in the block template, which can be additionally customized for your site style:

  • Text. The text selector that will be displayed on the button (Next, More, Read more, Learn more →)
  • Font color\hover font color. Font Color Selectors
  • Background color\hover background color\stroke color\hover stroke color. Background Color Selectors
  • Location. Button position selector (left, center, right)

Graphic with text from below (adaptive)

Адаптив1.png

Graphic with text on top (adaptive)

Адаптив2.png

Graphic with text on the right (adaptive)

Адаптив3.png

Graphic with text on the left (adaptive)

Адаптив4.png

See also