Each banner occupies its own block on the page — a banner line. For each banner line, you need to define its location on the page and the type of banner that will be configured for it.
There are no restrictions on the number of banner lines and their location on the Homepage, which allows you to make the home page informative and attractive to customers. Keep in mind that a large number of banners can slow down page loading, so think carefully about which images you need.
To place a banner on the home page, you need to:
Determine which banners you want to display on the main page.
If necessary, create new lines or change the existing ones.
Prepare images of the correct size for each banner.
Upload images, customize and enable banners in the admin panel.
Preparing banner lines for loading banners
You need to determine the number of banners you want to place on the main page, as well as their type and size.
Example of banner lines on the main page
An example of displaying banners in the Shaniya design gallery template:
Banner line 1: wideblock, size L;
Banner line 2: 3x, size M, padding: S, rounding: S;
Banner line 3: 2x, size: M, padding: S; rounding: S;
Banner line 4: block, size: L.
You can see other banner combinations in our design gallery.
Creating or changing banner lines
To create new banner lines, change banner parameters in existing lines, or change their location, go to the Website → Design → Design editor section of the admin panel and expand the Homepage item. Click Add banner or expand an existing banner line and set the necessary banner parameters. A preview in the design editor allows you to immediately evaluate the changes you've made.
Important: Before changing the banner lines, we recommend that you save the images you used before. After applying the changes, your previous images may be deleted.
Preparing images for banners
To display banners correctly, images must meet the following requirements:
The image size must fully correspond to the selected banner type and size.
The image should be in JPEG or PNG format.
If you choose a cover type banner, you should leave a 500px indents from the left and right edges, and place important information in the center.
If you choose the padded setting, when preparing the image, you should allow 10-15px from the edge to be covered by the indent.
Images should be of high quality.
Setting up and enabling banners on your website
Once the necessary banner lines are created, upload the images to the admin panel and enable banners:
Go to Website → Banners and click Add.
In the Page field, select Homepage.
In the Placement field, select the desired line.
Make sure that the Template field is set to Image.
Upload the banner file to the Image field , set the URL and additional settings as needed.
Select the Active checkbox and click Save.
URL
In the URL field, you can set the address to be redirected to by clicking on the banner — a website page or a link to a third-party resource. To customize the URL, select:
Site page name — in this case, the second part of the field will display a relative link to this page, different for each language version of the site.
Own link — in this case, you can specify a link to any page (both on your site and in other sources) in the second part of the field.
If a customer should be redirected to the page with a specific product or the filtering results by clicking on a banner, you need to select Own link and enter a relative link (without a domain) in the second part of the field.
If a customer should be redirected to the page of another website by clicking on a banner, the link should be absolute (for example, https://cartum.io/functions/)
Banners for different language versions
For each language version of the site, you can upload different images, set different links, and write the appropriate alt and title meta tags.
Please note:
If no banner is uploaded for an additional language version, the banner set for the main language version of the site will be displayed.
If a banner is not set up for the main language of the site, banners from other language versions will not be displayed. If such a banner is enabled, a blank space will be displayed on the site.
Creating a slider (changing images)
For banners of the block, wideblock, cover, blockplus type (only large banners), you can set up a slider — images that automatically change at a certain interval.
To set up the slider, you need to create several banners in one banner line.
The order of displaying banners in a line
The order in which banners are displayed in a slider and in a line with multiple banners is determined by their positions in the Banners section list.
You can change the display sequence by dragging the banners by the arrows in the left column.
