Extended Banners Pro
We have developed a complex and professional banner creating add-on called “Extended Banner Pro”, so that you may create beautiful and advanced modern HTML banners. The add-on allows you to create professional responsive banners for each device type. In other words, the same banner on desktop version can have either a minimized version for mobile devices (for better loading times on mobiles), or it can be totally different (in case you want to deliver a different information to mobile users only). So, creating such banners is very useful in case you want to deliver different content separately, specific for certain device users.
The “Extended Banners Pro” add-on have plenty of options so you can build beautiful responive banners: add your custom images, add and customize your own HTML text, buttons, fonts, colors, links, image and text animations, image and text positions, backgrounds, etc... Any banner you create can be an Extended Banner. For VIVAshop Multi-Vendor version, vendors can also create Extended Banners for their own store homepages, thus being able to create beautiful stores in your Marketplace, increasing its quality.
Here’s how the desktop homepage main slider banner looks like with the same content on phones and tables, as well as how it looks like with totally diffrent conent on phones and tablets:
SLIDER BANNER ON DESKTOP
THE SAME SLIDER BANNER WITH THE SAME CONTENT ON PHONE & TABLET
THE SAME SLIDER BANNER WITH DIFFERENT CONTENT ON PHONE & TABLET
We have developed a very simple and straight forward way to build such banners, so let’s see how it is done and what options you have by recreating the main slider banner called “VIVAshop - Homepage - Main slider - Banner 1” from our demo site. So please follow the steps below:
- Step 1
In your admin panel, go to “Marketing” - “Banners”
- Step 2
Scroll down and look for the “VIVAshop - Homepage - Main slider - Banner 1” banner, and click on it
- Step 3
In the newly opened window, you can now set individual banner settings for DESKTOP, PHONE and TABLET. Below we’ll explain each of them.
Setting up the banner for DESKTOP version
Basic settings:
These are the basic settings for your banner. Choose them as per the indications below:
A: Update for all languages - If you have more than one language you can check this box in order to update any modifications you make to a banner to the other language(s) as well
B: Name - Type your desired banner name
C: Pos. - This stands for “position” but it is not relevant
D: Type - Select “Extended banner” from the dropdown
E: Image - Choose the banner main image. We recommend using an image of 2048px width. The image height would be at your choice (our demo image has a height of 600px). This is how the main image looks like in our “VIVAshop - Homepage - Main slider - Banner 1” banner:
F: Image background color - Behind the image you upload we have added a customizable background. This is useful especially when the main banner image is transparent, and you want to add a certain background color to it (see “Image 1” below). Also, you can add a smaller width non-transparent image with a certain color on the left and right of the image, and, by choosing the same background color, you can obtain a full with banner effect (see “Image 2” below). Also, this background is useful when you do not want to upload any image, but you simply want a full width background. (see “Image 3” below). So, pick the background color from the color picker.
G: Open link in new window - Check this box if the link you add to the banner should open in a new browser window
H: URL - The URL to forward visitors when they click on the banner
I: Creation date - Date when you create the banner
J: Status - Choose if the banner should ve active, hidden or disabled
Additional Image settings
In addition to the banner main image you can also add another image inside the banner, which will be displayed above the banner main image/background. There are several settings that you can choose form for this image, including adding different animations.
When you add an additional image. your banner will be divided in two sections, either horizontally or vertically, one section will be the one which includes the Additional Image, the other section being the one which includes the Info Block. The Info Block consists of the text that you’ll use in the banner (tile and description), as well as the banner button.
The width of each section is determined by the Additional Image width (if it is positioned horizontally with the Info Block). In other words, the width of the section where Additional Image is located is equal to the image width, and the rest of banner width will belong to the Info Block section. Also, (if it is positioned vertically with the Info Block, the height of each section is determined by the Additional Image height. In other words, the height of the section where the Additional Image is located is equal to the image height, and the rest of banner height will belong to the Info Block section.
The additional image should preferably be in .png format with a transparent background. It can have any size of your choice, but keep in mind that this should only be an image in addition to the already existing main image (if you choose to add a main image), so its size will pretty much depend on the main image you have chosen in the above steps. The size of the additional image that we used in the “VIVAshop - Homepage - Main slider - Banner 1” demo banner is 705pxX581px.
These are the settings for your additional image. Choose them as per the indications below:
A: Image - Simply upload your image
B: Image URL - The URL to forward visitors when they click on the banner. This URL can be totally different form the URL you have set to the banner main image/background
C: Image position - This is the image position relative to the Info Block.
- Horizontal with the Info Block - Both the Additional Image and the Info Block are positioned horizontally (one next to the other)
- Vertical with the Info Block - Both the Additional Image and the Info Block are positioned vertically (one below the other)
- Inside the Info Block - Both the Additional Image and the Info Block are in the same section, so the two sections that we talked about above become only one
Points D and E depend on what you have chosen at point C. Therefore, if at point C you have chosen “Horizontal with the Info Block” for the image position, points D and E will be as follows:
D: Image position horizontal - Set the location for the Additional Image, with the following horizontal options:
- Left (of the Info Block) - The Additional Image will be placed on the left side of the Info Block, so the Info Block will be placed on the right side section. Note that if no margins are selected (see point F below), the Additional Image will be placed by default at the very left of the banner.
- Right (of the Info Block) - The Additional Image will be placed on the right side of the Info Block, so the Info Block will placed on the left side section. Note that if no margins are selected (see point F below), the Additional Image will be placed by default at the very right of the banner.
E: Vertical align - Set the location for the Additional Image, with the following vertical options:
- Top - The Additional Image will be placed on top of its section
- Center - The Additional Image will be placed in the center of its section
- Bottom - The Additional Image will be placed on the bottom of its section
If at point C you have chosen “Vertical with the Info Block” for the image position, points D and E will be as follows:
D: Image position vertical - Set the location for the Additional Image, with the following vertical options:
- Above (the Info Block) - The Additional Image will be placed above the Info Block, so the Info Block will placed in the section below. Note that if no margins are selected (see point F below), the Additional Image will be placed by default at the very top of the banner.
- Below (of the Info Block) - The Additional Image will be placed below the Info Block, so the Info Block will placed in the section above. Note that if no margins are selected (see point F below), the Additional Image will be placed by default at the very bottom of the banner.
E: Horizontal align - Set the location for the Additional Image, with the following horizontal options:
- Left - The Additional Image will be placed on the left side of its section
- Center - The Additional Image will be placed in the center of its section
- Right - The Additional Image will be placed on the right side of its section
If at point C you have chosen “Inside Info Block” for the image position, points D and E will be as follows:
D: Image position inside - Set the location for the Additional Image, with the following options inside the Info Block:
- Above the TITLE - The Additional Image will be placed above the Info Block title
- Above the DESCRIPTION - The Additional Image will be placed the Info Block description
- Above the BUTTON - The Additional Image will be placed above the button from the Info Block
- Below the BUTTON - The Additional Image will be placed below the button from the Info Block
E: Horizontal align - Set the location for the Additional Image, with the following horizontal options:
- Left - The Additional Image will be placed on the left side of its section
- Center - The Additional Image will be placed in the center of its section
- Right - The Additional Image will be placed on the right side of its section
For the “VIVAshop - Homepage - Main slider - Banner 1” banner we have used the following options for sections C, D and E:
C: Image position - Horizontal with the Info Block
D: Image position horizontal - Left (of the Info Block)
E: Vertical align - Center
F: Image margin - Set the spaces you want to add outside the Additional Image. The margins will push the image accordingly. For example, if you set a margin to the left of the image, the image will be pushed to the right. If you set a margin up, the image will be pushed down, and so on. The setting format is like for example “TTpx RRpx BBpx LLpx”, where “TT” is the size of the margin top (image is pushed to the bottom), “RR” is the size of the margin right (image is pushed to the left), “BB” is the size of the margin bottom (image is pushed up), and “LL” is the size of the margin left (image is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the banners' container. In case the banner is full width, the percent will be relative to the browser full width.
For the “VIVAshop - Homepage - Main slider - Banner 1” we have used “0px 0px 0px 200px”, meaning that, after applying the settings from the above points (C, D and E), we have applied a 200 pixels margin left, so we have pushed the image 200 pixels to the right.
G: Image animation - Set the animation for the Additional Image. More specifically, where do you want the image to appear from during the loading time:
- Auto - Image will come from a predefined direction depending on the image position settings
- Left - Image will come from the left side
- Right - Image will come from the right side
- Top - Image will come from the top
- Bottom - Image will come from the bottom
- Off - Turn off the image animation
For the “VIVAshop - Homepage - Main slider - Banner 1” banner we have chosen the “Left” option, so the Additional Image will come from the left.
Title settings
Your banner can have any text title of our choice which can either be simple text or HTML. There are several settings that you can choose form for the Info Bock title, including adding different animations.
These are the settings for your Info Block title. Choose them as per the indications below:
A: Title text - Add the text for your title.
B: Add a title shadow - Choose whether or not to add a shadow to your title
C: Title light-height - Set the height of a the title line box. It's used to set the distance between lines of text.
D: Title font size - The size of the title text in pixels
E: Title font weight - Set the wight of the title text. You have 3 options here:
- Normal
- Light
- Bold
F: Title font style - Set the style of the title text. You have 2 options here:
- Normal
- Italic
G: Title text color - Set the color of the title text. Simply choose from the color picker
H: Title text background - Title can have a customizable background. The “VIVAshop - Homepage - Main slider - Banner 1” demo banner does not have a background. However, we have added a background as it may be seen in the image below, for exemplification purposes:
So, if you choose to add a background to your title, firstly check the “Title text background” option. Then, you will have the following options:
- Color - From the color picker choose the color for your title background (we used a yellow color for the background)
- Opacity - Enter the desired opacity level, in percentages (we used 90% in this example)
- Padding - Paddings are used to generate space around an element's content, inside of any defined borders. In our case, the element is the title text and the borders are defined by the title background borders. Paddings create space around the title text accordingly. For example, if you set a padding to the left of the title text, there will be a space created to the left of the title text, and the title text will move to the right. The more padding to the left, the more the title text will move to the right. The setting format is similar to margins, “TTpx RRpx BBpx LLpx”, where “TT” is the size of the padding top (space is created on top, so title text is pushed to the bottom), “RR” is the size of the padding right (space is created on the right, so the title text is pushed to the left), “BB” is the size of the padding bottom (space is created at the bottom, so the title text is pushed up), and “LL” is the size of the padding left (space is created on the left, so title text is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the title container. The values that we have set for the “Title text background” in the example above are “50px 30px 50px 30px”, meaning that, we have created a space of 50px above and below the title text, and 30px to the right and to the left of the title text, inside the title text background.
- Rounded corners - Set the corners for your title text background. The setting format is same as margins and paddings, meaning “TLpx TRpx BRpx BLpx”, where “TL” is the value for the top left corner, “TR” is the value for the top right corner , “BR” is the value for the bottom right corner, and “BL” is the value for the bottom left corner. These values are in pixels. In the above example we have used “10px 10px 10px 10px”, meaning that all background corners have a 10px radius.
For the “VIVAshop - Homepage - Main slider - Banner 1” we have not enabled this option, meaning the title does not have a background.
I: Title margin - Set the spaces you want to add outside the title. The margins will push the title accordingly. For example, if you set a margin to the left of the Title, the title will be pushed to the right. If you set a margin up, the title will be pushed down, and so on. The setting format is like for example “TTpx RRpx BBpx LLpx”, where “TT” is the size of the margin top (title is pushed to the bottom), “RR” is the size of the margin right (title is pushed to the left), “BB” is the size of the margin bottom (title is pushed up), and “LL” is the size of the margin left (title is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the title container.
For the “VIVAshop - Homepage - Main slider - Banner 1” we have used “0px 0px 0px 0px”, meaning that we have not set any margins for the title in this case.
J: Text align - Set the alignment for the Title. You have 3 options here:
- Left - Place the title text on the left, inside the Info Block
- Center - Place the title text in the center, inside the Info Block (this is the option that we have selected for the demo “VIVAshop - Homepage - Main slider - Banner 1” banner)
- Left - Place the title text on the right, inside the Info Block
The Info Block width is determined by the widest element (from Title, Description and Button). If the title is the widest element, then the “Text align” option will not have any effect.
K: Title animation - Set the animation for the title text. More specifically, where do you want the Title text o appear from during the loading time:
- Auto - Title will come from a predefined direction depending on the image position settings
- Left - Title will come from the left side
- Right - Title will come from the right side
- Top - Title will come from the top
- Bottom - Title will come from the bottom
- Off - Turn off the Title text animation
For the “VIVAshop - Homepage - Main slider - Banner 1” we have chosen the “Top” option, so the title text will come from the top.
Description settings
Your banner can have any text description of our choice which can either be simple text or HTML. There are several settings that you can choose form for the Info Bock description, including adding different animations.
These are the settings for your Info Block description. Choose them as per the indications below:
A: Description text - Add the text for your description.
B: Add description text shadow - Choose whether or not to add a shadow to your description
C: Description light-height - Set the height of a the description line box. It's used to set the distance between lines of text.
D: Description font size - The size of the description text in pixels
E: Description font weight - Set the wight of the description text. You have 3 options here:
- Normal
- Light
- Bold
F: Description font style - Set the style of the description text. You have 2 options here:
- Normal
- Italic
G: Description text color - Set the color of the description text. Simply choose from the color picker
H: Description text background - Description can have a customizable background. The “VIVAshop - Homepage - Main slider - Banner 1” demo banner does not have a background. However, we have added a background as it may be seen in the image below, for exemplification purposes:
So, if you choose to add a background to your description, firstly check the “Description text background” option. Then. you will have the following options:
- Color - From the color picker choose the color for your description background (we used a yellow color for the background)
- Opacity - Enter the desired opacity level, in percentages (we used 90% in this example)
- Padding - Paddings are used to generate space around an element's content, inside of any defined borders. In our case, the element is the description text and the borders are defined by the description background borders. Paddings create space around the description text accordingly. For example, if you set a padding to the left of the description text, there will be a space created to the left of the description text, and the description text will move to the right. The more padding to the left, the more the description text will move to the right. The setting format is similar to margins, “TTpx RRpx BBpx LLpx”, where “TT” is the size of the padding top (space is created on top, so description text is pushed to the bottom), “RR” is the size of the padding right (space is created on the right, so the description text is pushed to the left), “BB” is the size of the padding bottom (space is created at the bottom, so the description text is pushed up), and “LL” is the size of the padding left (space is created on the left, so description text is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the description container. The values that we have set for the “Description text background” in the example above are “40px 50px 40px 50px”, meaning that, we have created a space of 40px above and below the description text, and 50px to the right and to the left of the description text, inside the description text background.
- Rounded corners - Set the corners for your description text background. The setting format is same as margins and paddings, meaning “TLpx TRpx BRpx BLpx”, where “TL” is the value for the top left corner, “TR” is the value for the top right corner , “BR” is the value for the bottom right corner, and “BL” is the value for the bottom left corner. These values are in pixels. In the above example we have used “50px 0px 50px 0px”, meaning that the top left and bottom right of the background have a radius of 50px, whereas the top right and bottom left corners do not have any roundness at all.
I: Description margin - Set the spaces you want to add outside the description. The margins will push the description accordingly. For example, if you set a margin to the left of the description, the description will be pushed to the right. If you set a margin up, the description will be pushed down, and so on. The setting format is like for example “TTpx RRpx BBpx LLpx”, where “TT” is the size of the margin top (description is pushed to the bottom), “RR” is the size of the margin right (description is pushed to the left), “BB” is the size of the margin bottom (description is pushed up), and “LL” is the size of the margin left (description is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the description container.
For the “VIVAshop - Homepage - Main slider - Banner 1” we have used “10px 0px 0px 0px”, meaning that we have set a margin top of 10px.
J: Description align - Set the alignment for the description. You have 3 options here:
- Left - Place the description text on the left, inside the Info Block
- Center - Place the description text in the center, inside the Info Block (this is the option that we have selected for the demo “VIVAshop - Homepage - Main slider - Banner 1” banner)
- Left - Place the description text on the right, inside the Info Block
The Info Block width is determined by the widest element (from Title, Description and Button). If the description is the widest element, then the “Description align” option will not have any effect.
K: Description animation - Set the animation for the description text. More specifically, where do you want the description text o appear from during the loading time:
- Auto - Description will come from a predefined direction depending on the image position settings
- Left - Description will come from the left side
- Right - Description will come from the right side
- Top - Description will come from the top
- Bottom - Description will come from the bottom
- Off - Turn off the description text animation
For the “VIVAshop - Homepage - Main slider - Banner 1” we have chosen the “LEFT” option, so the description text will come from the left.
Button settings
In your extended banner you can include a button that you can customize in plenty of ways, from colors, shapes, borders, alignments, shadow, to font styles and animations. Also, the link you add to this button can be completely different from the link you add to the background image and/or the additional image.
These are the settings for your Info Block button. Choose them as per the indications below:
A: Button text - Enter the text that you want to appear inside the button
B: Button URL - The URL to forward users when clicking on the button. The link may be totally different from the link you have set for the banner background image and/or additional image
C: Add button shadow - Choose whether to add a shadow to the button or not
D: Button font size - Set the size, in pixels, for the button font
E: Button font weight - Set the weight of the button font. You have 3 options here:
- Normal
- Light
- Bold
F: Button font style - Set the style of the button text. You have 2 options here:
- Normal
- Italic
G: Button rounded corners - Set the corners for your button font. The setting format is same as margins and paddings, meaning “TLpx TRpx BRpx BLpx”, where “TL” is the value for the top left corner, “TR” is the value for the top right corner , “BR” is the value for the bottom right corner, and “BL” is the value for the bottom left corner. In the above example we have used “30px”, meaning that all corners have a radius of 30px.
H: Button text color - Pick the color for the button text, from the color picker
I: Button background - If this option is checked, you’ll have 2 options:
- Color - From the color picker choose the color for your button background (we used a yellow color for the background)
- Opacity - Enter the desired opacity level, in percentages (we used 0% in this example, which means that the button backgammon is transparent)
J: Button hover text color - Pick the color for the button text when hovering over the button
K: Button hover background - If this option is checked, you’ll have 2 options:
- Color - From the color picker choose the color for your button background (we used a yellow color for the background)
- Opacity - Enter the desired opacity level, in percentages (we used 0% in this example, which means that the button backgammon is transparent)
L: Button border - If this option is checked, you’ll have 6 options:
- Border size - Enter the size in pixels for the button border
-
Border style - Here you have 3 options that you can select from the dropdown:
- - Solid
- - Dashed (this is the option we have used in this example)
- - Dotted
- Color - Pick the color for your button border
- Opacity - Set the opacity level for your border, in percentages (we used 100% in our example here)
- Hover color - Pick the color of for the button border, when hovering over the button
- Hover opacity - Set the opacity level for your border when hovering over the button, in percentages (we used 100% in our example here)
M: Button padding - Paddings are used to generate space around an element's content, inside of any defined borders. In our case, the element is the button text and the borders are defined by the button background borders. Paddings create space around the button text accordingly. For example, if you set a padding to the left of the button text, there will be a space created to the left of the button text, and the button text will move to the right. The more padding to the left, the more the button text will move to the right. The setting format is similar to margins, “TTpx RRpx BBpx LLpx”, where “TT” is the size of the padding top (space is created on top, so button text is pushed to the bottom), “RR” is the size of the padding right (space is created on the right, so the button text is pushed to the left), “BB” is the size of the padding bottom (space is created at the bottom, so the button text is pushed up), and “LL” is the size of the padding left (space is created on the left, so button text is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the button container. The values that we have set for the “Button padding” in the example above are “10px 30px 10px 30px”, meaning that, we have created a space of 10px above and below the button text, and 30px to the right and to the left of the button text, inside the button.
N: Button align - Set the alignment for the button. You have 3 options here:
- Left - Place the button on the left, inside the Info Block
- Center - Place the button in the center, inside the Info Block (this is the option that we have selected for the demo “VIVAshop - Homepage - Main slider - Banner 1” banner)
- Left - Place the button on the right, inside the Info Block
The Info Block width is determined by the widest element (from Title, Description and Button). If the button is the widest element, then the “Button align” option will not have any effect.
O: Button margin - Set the spaces you want to add outside the button. The margins will push the button accordingly. For example, if you set a margin to the left of the button, the button will be pushed to the right. If you set a margin up, the button will be pushed down, and so on. The setting format is like for example “TTpx RRpx BBpx LLpx”, where “TT” is the size of the margin top (button is pushed to the bottom), “RR” is the size of the margin right (button is pushed to the left), “BB” is the size of the margin bottom (button is pushed up), and “LL” is the size of the margin left (button is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the button container.
For the “VIVAshop - Homepage - Main slider - Banner 1” we have used “20px 0px 0px 0px”, meaning that we have set a margin top of 20px.
P: Button animation - Set the animation for the Additional button. More specifically, where do you want the button to appear from during the loading time:
- Auto - Button will come from a predefined direction depending on the Button position settings
- Left - Button will come from the left side
- Right - Button will come from the right side
- Top - Button will come from the top
- Bottom - Button will come from the bottom
- Off - Turn off the Button animation
For the “VIVAshop - Homepage - Main slider - Banner 1” banner we have chosen the “Bottom” option, so the Additional Image will come from the bottom.
Info Block settings
As mentioned previously, the banner Info Block includes the banner Title, Description and Button. There are several settings that you can choses from for the Info Block including adding a background which can also be customized.
These are the settings for your Info Block. Choose them as per the indications below:
A: Info block width - Select the width for your Info Blocks. The value should be in pixels. You can also set the withs as “auto”, meaning that the width will be determined by the widest element (from Title, Description and Button).
B: Vertical align - Select the location of the Info Block, with the following vertical options:
- Top - The Info Block will be placed on the top of the banner
- Center - The Info Block will be placed in the center of the banner. This is the option we have selected for our example banner
- Bottom - The Info Block will be placed at the bottom of the banner
C: Horizontal align - Select the location of the Info Block, with the following horizontal options:
- Left - The Info Block will be placed on the left of the banner. This is the option we have selected for our example banner.
- Center - The Info Block will be placed in the center of the banner.
- Right - The Info Block will be placed on the right of the banner.
D: Info Block margin - Set the spaces you want to add outside the Info Block. The margins will push the Info Block accordingly. For example, if you set a margin to the left of the Info Block, the Info Block will be pushed to the right. If you set a margin up, the Info Block will be pushed down, and so on. The setting format is like for example “TTpx RRpx BBpx LLpx”, where “TT” is the size of the margin top (Info Block is pushed to the bottom), “RR” is the size of the margin right (Info Block is pushed to the left), “BB” is the size of the margin bottom (Info Block is pushed up), and “LL” is the size of the margin left (Info Block is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the Info Block container.
For the “VIVAshop - Homepage - Main slider - Banner 1” we have used “0px 0px 0px 230px”, meaning that, we have applied a 230 pixels margin left, so we have pushed the Info Block 230 pixels to the right.
E: Info block background - Info block can have a customizable background. The “VIVAshop - Homepage - Main slider - Banner 1” demo banner does not have a background. However, we have added a background as it may be seen in the image below, for exemplification purposes:
So, if you choose to add a background to your Info Block, firstly check the “Info block background” option. Then, you will have the following options:
- Color - From the color picker choose the color for your Info Block background (we used a yellow color for the background)
- Opacity - Enter the desired opacity level, in percentages (we used 80% in this example)
- Padding - Paddings are used to generate space around an element's content, inside of any defined borders. In our case, the element is the Info Block text and the borders are defined by the Info Block background borders. Paddings create space around the Info Block text accordingly. For example, if you set a padding to the left of the Info Block text, there will be a space created to the left of the Info Block text, and the Info Block text will move to the right. The more padding to the left, the more the Info Block text will move to the right. The setting format is similar to margins, “TTpx RRpx BBpx LLpx”, where “TT” is the size of the padding top (space is created on top, so Info Block text is pushed to the bottom), “RR” is the size of the padding right (space is created on the right, so the Info Block text is pushed to the left), “BB” is the size of the padding bottom (space is created at the bottom, so the Info Block text is pushed up), and “LL” is the size of the padding left (space is created on the left, so Info Block text is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the Info Block container. The values that we have set for the “Info Block background” in the example above are “50px 30px 50px 30px”, meaning that, we have created a space of 50px above and below the Info Block text, and 30px to the right and to the left of the Info Block text, inside the Info Block text background.
- Rounded corners - Set the corners for your Info Block text background. The setting format is same as margins and paddings, meaning “TLpx TRpx BRpx BLpx”, where “TL” is the value for the top left corner, “TR” is the value for the top right corner , “BR” is the value for the bottom right corner, and “BL” is the value for the bottom left corner. These values are in pixels. In the above example we have used “50px 0px 50px 0px”, meaning that the top left and bottom right of the background have a radius of 50px, whereas the top right and bottom left corners do not have any roundness at all.
Setting up the banner for MOBILE version
Basic settings:
These are the basic settings for your banner. Choose them as per the indications below:
A: Enable - Check this box if you want to enable the banner for the mobile version specifically. Once you select this box, all of the settings you have already implemented for the banner for DESKTOP version, will automatically be imported in the MOBILE version, so you will take it from there.
B: Image - Choose the banner main image. We recommend using an image of 480px width. The image height whould be at your choice (our demo image has a height of 460px). This is how the main image looks like in our “VIVAshop - Homepage - Main slider - Banner 1” banner:
C: Image background color - Behind the image you upload we have added a customizable background. This is useful especially when the main banner image is transparent, and you want to add a certain background color to it (see “Image 1” below). Also, you can add a smaller width non-transparent image with a certain color on the left and right of the image, and, by choosing the same background color, you can obtain a full with banner effect (see “Image 2” below). Also, this background is useful when you do not want to upload any image, but you simply want a full width background. (see “Image 3” below). So, pick the background color from the color picker.
D: Open link in new window - Check this box if the link you add to the banner should open in a new browser window
E: URL - The URL to forward visitors when they click on the banner
Additional Image settings
In addition to the banner main image you can also add another image inside the banner, which will be displayed above the banner main image/background. There are several settings that you can choose form for this image, including adding different animations.
When you add an additional image. your banner will be divided in two sections, either horizontally or vertically, one section will be the one which includes the Additional Image, the other section being the one which includes the Info Block. The Info Block consists of the text that you’ll use in the banner (tile and description), as well as the banner button.
The width of each section is determined by the Additional Image width (if it is positioned horizontally with the Info Block). In other words, the width of the section where Additional Image is located is equal to the image width, and the rest of banner width will belong to the Info Block section. Also, (if it is positioned vertically with the Info Block, the height of each section is determined by the Additional Image height. In other words, the height of the section where the Additional Image is located is equal to the image height, and the rest of banner height will belong to the Info Block section.
The additional image should preferably be in .png format with a transparent background. It can have any size of your choice, but keep in mind that this should only be an image in addition to the already existing main image (if you choose to add a main image), so its size will pretty much depend on the main image you have chosen in the above steps. The size of the additional image that we used in the “VIVAshop - Homepage - Main slider - Banner 1” demo banner is 705pxX581px.
These are the settings for your additional image. Choose them as per the indications below:
A: Image - Simply upload your image
B: Image URL - The URL to forward visitors when they click on the banner. This URL can be totally different form the URL you have set to the banner main image/background
C: Image position - This is the image position relative to the Info Block.
- Horizontal with the Info Block - Both the Additional Image and the Info Block are positioned horizontally (one next to the other)
- Vertical with the Info Block - Both the Additional Image and the Info Block are positioned vertically (one below the other)
- Inside the Info Block - Both the Additional Image and the Info Block are in the same section, so the two sections that we talked about above become only one
Points D and E depend on what you have chosen at point C. Therefore, if at point C you have chosen “Horizontal with the Info Block” for the image position, points D and E will be as follows:
D: Image position horizontal - Set the location for the Additional Image, with the following horizontal options:
- Left (of the Info Block) - The Additional Image will be placed on the left side of the Info Block, so the Info Block will be placed on the right side section. Note that if no margins are selected (see point F below), the Additional Image will be placed by default at the very left of the banner.
- Right (of the Info Block) - The Additional Image will be placed on the right side of the Info Block, so the Info Block will placed on the left side section. Note that if no margins are selected (see point F below), the Additional Image will be placed by default at the very right of the banner.
E: Vertical align - Set the location for the Additional Image, with the following vertical options:
- Top - The Additional Image will be placed on top of its section
- Center - The Additional Image will be placed in the center of its section
- Bottom - The Additional Image will be placed on the bottom of its section
If at point C you have chosen “Vertical with the Info Block” for the image position, points D and E will be as follows:
D: Image position vertical - Set the location for the Additional Image, with the following vertical options:
- Above (the Info Block) - The Additional Image will be placed above the Info Block, so the Info Block will placed in the section below. Note that if no margins are selected (see point F below), the Additional Image will be placed by default at the very top of the banner.
- Below (of the Info Block) - The Additional Image will be placed below the Info Block, so the Info Block will placed in the section above. Note that if no margins are selected (see point F below), the Additional Image will be placed by default at the very bottom of the banner.
E: Horizontal align - Set the location for the Additional Image, with the following horizontal options:
- Left - The Additional Image will be placed on the left side of its section
- Center - The Additional Image will be placed in the center of its section
- Right - The Additional Image will be placed on the right side of its section
If at point C you have chosen “Inside Info Block” for the image position, points D and E will be as follows:
D: Image position inside - Set the location for the Additional Image, with the following options inside the Info Block:
- Above the TITLE - The Additional Image will be placed above the Info Block title
- Above the DESCRIPTION - The Additional Image will be placed the Info Block description
- Above the BUTTON - The Additional Image will be placed above the button from the Info Block
- Below the BUTTON - The Additional Image will be placed below the button from the Info Block
E: Horizontal align - Set the location for the Additional Image, with the following horizontal options:
- Left - The Additional Image will be placed on the left side of its section
- Center - The Additional Image will be placed in the center of its section
- Right - The Additional Image will be placed on the right side of its section
For the “VIVAshop - Homepage - Main slider - Banner 1” banner we have used the following options for sections C, D and E:
C: Image position - Inside the Info Block
D: Image position inside - Above the BUTTON
E: Vertical align - Center
F: Image margin - Set the spaces you want to add outside the Additional Image. The margins will push the image accordingly. For example, if you set a margin to the left of the image, the image will be pushed to the right. If you set a margin up, the image will be pushed down, and so on. The setting format is like for example “TTpx RRpx BBpx LLpx”, where “TT” is the size of the margin top (image is pushed to the bottom), “RR” is the size of the margin right (image is pushed to the left), “BB” is the size of the margin bottom (image is pushed up), and “LL” is the size of the margin left (image is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the banners' container. In case the banner is full width, the percent will be relative to the browser full width.
For the “VIVAshop - Homepage - Main slider - Banner 1” we have used “20px 0px 20px 0px”, meaning that, after applying the settings from the above points (C, D and E), we have created a space of 20px above and below the image.
G: Image animation - Set the animation for the Additional Image. More specifically, where do you want the image to appear from during the loading time:
- Auto - Image will come from a predefined direction depending on the image position settings
- Left - Image will come from the left side
- Right - Image will come from the right side
- Top - Image will come from the top
- Bottom - Image will come from the bottom
- Off - Turn off the image animation
For the “VIVAshop - Homepage - Main slider - Banner 1” banner we have chosen the “Left” option, so the Additional Image will come from the left.
Title settings
Your banner can have any text title of our choice which can either be simple text or HTML. There are several settings that you can choose form for the Info Bock title, including adding different animations.
These are the settings for your Info Block title. Choose them as per the indications below:
A: Title text - Add the text for your title.
B: Add a title shadow - Choose whether or not to add a shadow to your title
C: Title light-height - Set the height of a the title line box. It's used to set the distance between lines of text.
D: Title font size - The size of the title text in pixels
E: Title font weight - Set the wight of the title text. You have 3 options here:
- Normal
- Light
- Bold
F: Title font style - Set the style of the title text. You have 2 options here:
- Normal
- Italic
G: Title text color - Set the color of the title text. Simply choose from the color picker
H: Title text background - Title can have a customizable background. The “VIVAshop - Homepage - Main slider - Banner 1” demo banner does not have a background. However, we have added a background as it may be seen in the image below, for exemplification purposes:
So, if you choose to add a background to your title, firstly check the “Title text background” option. Then, you will have the following options:
- Color - From the color picker choose the color for your title background (we used a yellow color for the background)
- Opacity - Enter the desired opacity level, in percentages (we used 90% in this example)
- Padding - Paddings are used to generate space around an element's content, inside of any defined borders. In our case, the element is the title text and the borders are defined by the title background borders. Paddings create space around the title text accordingly. For example, if you set a padding to the left of the title text, there will be a space created to the left of the title text, and the title text will move to the right. The more padding to the left, the more the title text will move to the right. The setting format is similar to margins, “TTpx RRpx BBpx LLpx”, where “TT” is the size of the padding top (space is created on top, so title text is pushed to the bottom), “RR” is the size of the padding right (space is created on the right, so the title text is pushed to the left), “BB” is the size of the padding bottom (space is created at the bottom, so the title text is pushed up), and “LL” is the size of the padding left (space is created on the left, so title text is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the title container. The values that we have set for the “Title text background” in the example above are “50px 30px 50px 30px”, meaning that, we have created a space of 50px above and below the title text, and 30px to the right and to the left of the title text, inside the title text background.
- Rounded corners - Set the corners for your title text background. The setting format is same as margins and paddings, meaning “TLpx TRpx BRpx BLpx”, where “TL” is the value for the top left corner, “TR” is the value for the top right corner , “BR” is the value for the bottom right corner, and “BL” is the value for the bottom left corner. These values are in pixels. In the above example we have used “10px 10px 10px 10px”, meaning that all background corners have a 10px radius.
For the “VIVAshop - Homepage - Main slider - Banner 1” we have not enabled this option, meaning the title does not have a background.
I: Title margin - Set the spaces you want to add outside the title. The margins will push the title accordingly. For example, if you set a margin to the left of the Title, the title will be pushed to the right. If you set a margin up, the title will be pushed down, and so on. The setting format is like for example “TTpx RRpx BBpx LLpx”, where “TT” is the size of the margin top (title is pushed to the bottom), “RR” is the size of the margin right (title is pushed to the left), “BB” is the size of the margin bottom (title is pushed up), and “LL” is the size of the margin left (title is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the title container.
For the “VIVAshop - Homepage - Main slider - Banner 1” we have used “0px 0px 0px 0px”, meaning that we have not set any margins for the title in this case.
J: Text align - Set the alignment for the Title. You have 3 options here:
- Left - Place the title text on the left, inside the Info Block
- Center - Place the title text in the center, inside the Info Block (this is the option that we have selected for the demo “VIVAshop - Homepage - Main slider - Banner 1” banner)
- Left - Place the title text on the right, inside the Info Block
The Info Block width is determined by the widest element (from Title, Description and Button). If the title is the widest element, then the “Text align” option will not have any effect.
K: Title animation - Set the animation for the title text. More specifically, where do you want the Title text o appear from during the loading time:
- Auto - Title will come from a predefined direction depending on the image position settings
- Left - Title will come from the left side
- Right - Title will come from the right side
- Top - Title will come from the top
- Bottom - Title will come from the bottom
- Off - Turn off the Title text animation
For the “VIVAshop - Homepage - Main slider - Banner 1” we have chosen the “Top” option, so the title text will come from the top.
Description settings
Your banner can have any text description of our choice which can either be simple text or HTML. There are several settings that you can choose form for the Info Bock description, including adding different animations.
These are the settings for your Info Block description. Choose them as per the indications below:
A: Description text - Add the text for your description.
B: Add description text shadow - Choose whether or not to add a shadow to your description
C: Description light-height - Set the height of a the description line box. It's used to set the distance between lines of text.
D: Description font size - The size of the description text in pixels
E: Description font weight - Set the wight of the description text. You have 3 options here:
- Normal
- Light
- Bold
F: Description font style - Set the style of the description text. You have 2 options here:
- Normal
- Italic
G: Description text color - Set the color of the description text. Simply choose from the color picker
H: Description text background - Description can have a customizable background. The “VIVAshop - Homepage - Main slider - Banner 1” demo banner does not have a background. However, we have added a background as it may be seen in the image below, for exemplification purposes:
So, if you choose to add a background to your description, firstly check the “Description text background” option. Then. you will have the following options:
- Color - From the color picker choose the color for your description background (we used a yellow color for the background)
- Opacity - Enter the desired opacity level, in percentages (we used 90% in this example)
- Padding - Paddings are used to generate space around an element's content, inside of any defined borders. In our case, the element is the description text and the borders are defined by the description background borders. Paddings create space around the description text accordingly. For example, if you set a padding to the left of the description text, there will be a space created to the left of the description text, and the description text will move to the right. The more padding to the left, the more the description text will move to the right. The setting format is similar to margins, “TTpx RRpx BBpx LLpx”, where “TT” is the size of the padding top (space is created on top, so description text is pushed to the bottom), “RR” is the size of the padding right (space is created on the right, so the description text is pushed to the left), “BB” is the size of the padding bottom (space is created at the bottom, so the description text is pushed up), and “LL” is the size of the padding left (space is created on the left, so description text is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the description container. The values that we have set for the “Description text background” in the example above are “20px 30px 20px 30px”, meaning that, we have created a space of 20px above and below the description text, and 30px to the right and to the left of the description text, inside the description text background.
- Rounded corners - Set the corners for your description text background. The setting format is same as margins and paddings, meaning “TLpx TRpx BRpx BLpx”, where “TL” is the value for the top left corner, “TR” is the value for the top right corner , “BR” is the value for the bottom right corner, and “BL” is the value for the bottom left corner. These values are in pixels. In the above example we have used “30px 0px 30px 0px”, meaning that the top left and bottom right of the background have a radius of 30px, whereas the top right and bottom left corners do not have any roundness at all.
I: Description margin - Set the spaces you want to add outside the description. The margins will push the description accordingly. For example, if you set a margin to the left of the description, the description will be pushed to the right. If you set a margin up, the description will be pushed down, and so on. The setting format is like for example “TTpx RRpx BBpx LLpx”, where “TT” is the size of the margin top (description is pushed to the bottom), “RR” is the size of the margin right (description is pushed to the left), “BB” is the size of the margin bottom (description is pushed up), and “LL” is the size of the margin left (description is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the description container.
For the “VIVAshop - Homepage - Main slider - Banner 1” we have used “10px 0px 0px 0px”, meaning that we have set a margin top of 10px.
J: Description align - Set the alignment for the description. You have 3 options here:
- Left - Place the description text on the left, inside the Info Block
- Center - Place the description text in the center, inside the Info Block (this is the option that we have selected for the demo “VIVAshop - Homepage - Main slider - Banner 1” banner)
- Left - Place the description text on the right, inside the Info Block
The Info Block width is determined by the widest element (from Title, Description and Button). If the description is the widest element, then the “Description align” option will not have any effect.
K: Description animation - Set the animation for the description text. More specifically, where do you want the description text o appear from during the loading time:
- Auto - Description will come from a predefined direction depending on the image position settings
- Left - Description will come from the left side
- Right - Description will come from the right side
- Top - Description will come from the top
- Bottom - Description will come from the bottom
- Off - Turn off the description text animation
For the “VIVAshop - Homepage - Main slider - Banner 1” we have chosen the “LEFT” option, so the description text will come from the left.
Button settings
In your extended banner you can include a button that you can customize in plenty of ways, from colors, shapes, borders, alignments, shadow, to font styles and animations. Also, the link you add to this button can be completely different from the link you add to the background image and/or the additional image.
These are the settings for your Info Block button. Choose them as per the indications below:
A: Button text - Enter the text that you want to appear inside the button
B: Button URL - The URL to forward users when clicking on the button. The link may be totally different from the link you have set for the banner background image and/or additional image
C: Add button shadow - Choose whether to add a shadow to the button or not
D: Button font size - Set the size, in pixels, for the button font
E: Button font weight - Set the weight of the button font. You have 3 options here:
- Normal
- Light
- Bold
F: Button font style - Set the style of the button text. You have 2 options here:
- Normal
- Italic
G: Button rounded corners - Set the corners for your button font. The setting format is same as margins and paddings, meaning “TLpx TRpx BRpx BLpx”, where “TL” is the value for the top left corner, “TR” is the value for the top right corner , “BR” is the value for the bottom right corner, and “BL” is the value for the bottom left corner. In the above example we have used “30px”, meaning that all corners have a radius of 30px.
H: Button text color - Pick the color for the button text, from the color picker
I: Button background - If this option is checked, you’ll have 2 options:
- Color - From the color picker choose the color for your button background (we used a yellow color for the background)
- Opacity - Enter the desired opacity level, in percentages (we used 0% in this example, which means that the button backgammon is transparent)
J: Button hover text color - Pick the color for the button text when hovering over the button
K: Button hover background - If this option is checked, you’ll have 2 options:
- Color - From the color picker choose the color for your button background (we used a yellow color for the background)
- Opacity - Enter the desired opacity level, in percentages (we used 0% in this example, which means that the button backgammon is transparent)
L: Button border - If this option is checked, you’ll have 6 options:
- Border size - Enter the size in pixels for the button border
-
Border style - Here you have 3 options that you can select from the dropdown:
- - Solid
- - Dashed (this is the option we have used in this example)
- - Dotted
- Color - Pick the color for your button border
- Opacity - Set the opacity level for your border, in percentages (we used 100% in our example here)
- Hover color - Pick the color of for the button border, when hovering over the button
- Hover opacity - Set the opacity level for your border when hovering over the button, in percentages (we used 100% in our example here)
M: Button padding - Paddings are used to generate space around an element's content, inside of any defined borders. In our case, the element is the button text and the borders are defined by the button background borders. Paddings create space around the button text accordingly. For example, if you set a padding to the left of the button text, there will be a space created to the left of the button text, and the button text will move to the right. The more padding to the left, the more the button text will move to the right. The setting format is similar to margins, “TTpx RRpx BBpx LLpx”, where “TT” is the size of the padding top (space is created on top, so button text is pushed to the bottom), “RR” is the size of the padding right (space is created on the right, so the button text is pushed to the left), “BB” is the size of the padding bottom (space is created at the bottom, so the button text is pushed up), and “LL” is the size of the padding left (space is created on the left, so button text is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the button container. The values that we have set for the “Button padding” in the example above are “10px 30px 10px 30px”, meaning that, we have created a space of 10px above and below the button text, and 30px to the right and to the left of the button text, inside the button.
N: Button align - Set the alignment for the button. You have 3 options here:
- Left - Place the button on the left, inside the Info Block
- Center - Place the button in the center, inside the Info Block (this is the option that we have selected for the demo “VIVAshop - Homepage - Main slider - Banner 1” banner)
- Left - Place the button on the right, inside the Info Block
The Info Block width is determined by the widest element (from Title, Description and Button). If the button is the widest element, then the “Button align” option will not have any effect.
O: Button margin - Set the spaces you want to add outside the button. The margins will push the button accordingly. For example, if you set a margin to the left of the button, the button will be pushed to the right. If you set a margin up, the button will be pushed down, and so on. The setting format is like for example “TTpx RRpx BBpx LLpx”, where “TT” is the size of the margin top (button is pushed to the bottom), “RR” is the size of the margin right (button is pushed to the left), “BB” is the size of the margin bottom (button is pushed up), and “LL” is the size of the margin left (button is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the button container.
For the “VIVAshop - Homepage - Main slider - Banner 1” we have used “0px 0px 0px 0px”, meaning that there is no margin.
P: Button animation - Set the animation for the Additional button. More specifically, where do you want the button to appear from during the loading time:
- Auto - Button will come from a predefined direction depending on the Button position settings
- Left - Button will come from the left side
- Right - Button will come from the right side
- Top - Button will come from the top
- Bottom - Button will come from the bottom
- Off - Turn off the Button animation
For the “VIVAshop - Homepage - Main slider - Banner 1” banner we have chosen the “Bottom” option, so the Additional Image will come from the bottom.
Info Block settings
As mentioned previously, the banner Info Block includes the banner Title, Description and Button. There are several settings that you can choses from for the Info Block including adding a background which can also be customized.
These are the settings for your Info Block. Choose them as per the indications below:
A: Info block width - Select the width for your Info Blocks. The value should be in pixels. You can also set the withs as “auto”, meaning that the width will be determined by the widest element (from Title, Description and Button).
B: Vertical align - Select the location of the Info Block, with the following vertical options:
- Top - The Info Block will be placed on the top of the banner. This is the option we have selected for our example banner
- Center - The Info Block will be placed in the center of the banner.
- Bottom - The Info Block will be placed at the bottom of the banner.
C: Horizontal align - Select the location of the Info Block, with the following horizontal options:
- Left - The Info Block will be placed on the left of the banner.
- Center - The Info Block will be placed in the center of the banner. This is the option we have selected for our example banner.
- Right - The Info Block will be placed on the right of the banner.
D: Info Block margin - Set the spaces you want to add outside the Info Block. The margins will push the Info Block accordingly. For example, if you set a margin to the left of the Info Block, the Info Block will be pushed to the right. If you set a margin up, the Info Block will be pushed down, and so on. The setting format is like for example “TTpx RRpx BBpx LLpx”, where “TT” is the size of the margin top (Info Block is pushed to the bottom), “RR” is the size of the margin right (Info Block is pushed to the left), “BB” is the size of the margin bottom (Info Block is pushed up), and “LL” is the size of the margin left (Info Block is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the Info Block container.
For the “VIVAshop - Homepage - Main slider - Banner 1” we have used “40px 0px 0px 0px”, meaning that we have set a margin top of 40px.
E: Info block background - Info block can have a customizable background. The “VIVAshop - Homepage - Main slider - Banner 1” demo banner does not have a background. However, we have added a background as it may be seen in the image below, for exemplification purposes:
So, if you choose to add a background to your Info Block, firstly check the “Info block background” option. Then, you will have the following options:
- Color - From the color picker choose the color for your Info Block background (we used a yellow color for the background)
- Opacity - Enter the desired opacity level, in percentages (we used 80% in this example)
- Padding - Paddings are used to generate space around an element's content, inside of any defined borders. In our case, the element is the Info Block text and the borders are defined by the Info Block background borders. Paddings create space around the Info Block text accordingly. For example, if you set a padding to the left of the Info Block text, there will be a space created to the left of the Info Block text, and the Info Block text will move to the right. The more padding to the left, the more the Info Block text will move to the right. The setting format is similar to margins, “TTpx RRpx BBpx LLpx”, where “TT” is the size of the padding top (space is created on top, so Info Block text is pushed to the bottom), “RR” is the size of the padding right (space is created on the right, so the Info Block text is pushed to the left), “BB” is the size of the padding bottom (space is created at the bottom, so the Info Block text is pushed up), and “LL” is the size of the padding left (space is created on the left, so Info Block text is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the Info Block container. The values that we have set for the “Info Block background” in the example above are “5px 5px 5px 5px”, meaning that, we have created a space of 5px above and below the Info Block text, and 5px to the right and to the left of the Info Block text, inside the Info Block text background.
- Rounded corners - Set the corners for your Info Block text background. The setting format is same as margins and paddings, meaning “TLpx TRpx BRpx BLpx”, where “TL” is the value for the top left corner, “TR” is the value for the top right corner , “BR” is the value for the bottom right corner, and “BL” is the value for the bottom left corner. These values are in pixels. In the above example we have used “20px 20px 20px 20px”, meaning that every corner of the background has a radius of 20px.
Setting up the banner for TABLET version
Basic settings:
These are the basic settings for your banner. Choose them as per the indications below:
A: Enable - Check this box if you want to enable the banner for the tablet version specifically. Once you select this box, all of the settings you have already implemented for the banner for DESKTOP version, will automatically be imported in the TABLET version, so you will take it from there.
B: Image - Choose the banner main image. We recommend using an image of 768px width. The image height whould be at your choice (our demo image has a height of 768px). This is how the main image looks like in our “VIVAshop - Homepage - Main slider - Banner 1” banner:
C: Image background color - Behind the image you upload we have added a customizable background. This is useful especially when the main banner image is transparent, and you want to add a certain background color to it (see “Image 1” below). Also, you can add a smaller width non-transparent image with a certain color on the left and right of the image, and, by choosing the same background color, you can obtain a full with banner effect (see “Image 2” below). Also, this background is useful when you do not want to upload any image, but you simply want a full width background. (see “Image 3” below). So, pick the background color from the color picker.
D: Open link in new window - Check this box if the link you add to the banner should open in a new browser window
E: URL - The URL to forward visitors when they click on the banner
Additional Image settings
In addition to the banner main image you can also add another image inside the banner, which will be displayed above the banner main image/background. There are several settings that you can choose form for this image, including adding different animations.
When you add an additional image. your banner will be divided in two sections, either horizontally or vertically, one section will be the one which includes the Additional Image, the other section being the one which includes the Info Block. The Info Block consists of the text that you’ll use in the banner (tile and description), as well as the banner button.
The width of each section is determined by the Additional Image width (if it is positioned horizontally with the Info Block). In other words, the width of the section where Additional Image is located is equal to the image width, and the rest of banner width will belong to the Info Block section. Also, (if it is positioned vertically with the Info Block, the height of each section is determined by the Additional Image height. In other words, the height of the section where the Additional Image is located is equal to the image height, and the rest of banner height will belong to the Info Block section.
The additional image should preferably be in .png format with a transparent background. It can have any size of your choice, but keep in mind that this should only be an image in addition to the already existing main image (if you choose to add a main image), so its size will pretty much depend on the main image you have chosen in the above steps. The size of the additional image that we used in the “VIVAshop - Homepage - Main slider - Banner 1” demo banner is 705pxX581px.
These are the settings for your additional image. Choose them as per the indications below:
A: Image - Simply upload your image
B: Image URL - The URL to forward visitors when they click on the banner. This URL can be totally different form the URL you have set to the banner main image/background
C: Image position - This is the image position relative to the Info Block.
- Horizontal with the Info Block - Both the Additional Image and the Info Block are positioned horizontally (one next to the other)
- Vertical with the Info Block - Both the Additional Image and the Info Block are positioned vertically (one below the other)
- Inside the Info Block - Both the Additional Image and the Info Block are in the same section, so the two sections that we talked about above become only one
Points D and E depend on what you have chosen at point C. Therefore, if at point C you have chosen “Horizontal with the Info Block” for the image position, points D and E will be as follows:
D: Image position horizontal - Set the location for the Additional Image, with the following horizontal options:
- Left (of the Info Block) - The Additional Image will be placed on the left side of the Info Block, so the Info Block will be placed on the right side section. Note that if no margins are selected (see point F below), the Additional Image will be placed by default at the very left of the banner.
- Right (of the Info Block) - The Additional Image will be placed on the right side of the Info Block, so the Info Block will placed on the left side section. Note that if no margins are selected (see point F below), the Additional Image will be placed by default at the very right of the banner.
E: Vertical align - Set the location for the Additional Image, with the following vertical options:
- Top - The Additional Image will be placed on top of its section
- Center - The Additional Image will be placed in the center of its section
- Bottom - The Additional Image will be placed on the bottom of its section
If at point C you have chosen “Vertical with the Info Block” for the image position, points D and E will be as follows:
D: Image position vertical - Set the location for the Additional Image, with the following vertical options:
- Above (the Info Block) - The Additional Image will be placed above the Info Block, so the Info Block will placed in the section below. Note that if no margins are selected (see point F below), the Additional Image will be placed by default at the very top of the banner.
- Below (of the Info Block) - The Additional Image will be placed below the Info Block, so the Info Block will placed in the section above. Note that if no margins are selected (see point F below), the Additional Image will be placed by default at the very bottom of the banner.
E: Horizontal align - Set the location for the Additional Image, with the following horizontal options:
- Left - The Additional Image will be placed on the left side of its section
- Center - The Additional Image will be placed in the center of its section
- Right - The Additional Image will be placed on the right side of its section
If at point C you have chosen “Inside Info Block” for the image position, points D and E will be as follows:
D: Image position inside - Set the location for the Additional Image, with the following options inside the Info Block:
- Above the TITLE - The Additional Image will be placed above the Info Block title
- Above the DESCRIPTION - The Additional Image will be placed the Info Block description
- Above the BUTTON - The Additional Image will be placed above the button from the Info Block
- Below the BUTTON - The Additional Image will be placed below the button from the Info Block
E: Horizontal align - Set the location for the Additional Image, with the following horizontal options:
- Left - The Additional Image will be placed on the left side of its section
- Center - The Additional Image will be placed in the center of its section
- Right - The Additional Image will be placed on the right side of its section
For the “VIVAshop - Homepage - Main slider - Banner 1” banner we have used the following options for sections C, D and E:
C: Image position - Horizontal with the Info Block
D: Image position horizontal - Left (of the Info Block)
E: Vertical align - Center
F: Image margin - Set the spaces you want to add outside the Additional Image. The margins will push the image accordingly. For example, if you set a margin to the left of the image, the image will be pushed to the right. If you set a margin up, the image will be pushed down, and so on. The setting format is like for example “TTpx RRpx BBpx LLpx”, where “TT” is the size of the margin top (image is pushed to the bottom), “RR” is the size of the margin right (image is pushed to the left), “BB” is the size of the margin bottom (image is pushed up), and “LL” is the size of the margin left (image is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the banners' container. In case the banner is full width, the percent will be relative to the browser full width.
For the “VIVAshop - Homepage - Main slider - Banner 1” we have used “0px 0px 0px 50px”, meaning that, after applying the settings from the above points (C, D and E), we have applied a 50 pixels margin left, so we have pushed the image 50 pixels to the right.
G: Image animation - Set the animation for the Additional Image. More specifically, where do you want the image to appear from during the loading time:
- Auto - Image will come from a predefined direction depending on the image position settings
- Left - Image will come from the left side
- Right - Image will come from the right side
- Top - Image will come from the top
- Bottom - Image will come from the bottom
- Off - Turn off the image animation
For the “VIVAshop - Homepage - Main slider - Banner 1” banner we have chosen the “Left” option, so the Additional Image will come from the left.
Title settings
Your banner can have any text title of our choice which can either be simple text or HTML. There are several settings that you can choose form for the Info Bock title, including adding different animations.
These are the settings for your Info Block title. Choose them as per the indications below:
A: Title text - Add the text for your title.
B: Add a title shadow - Choose whether or not to add a shadow to your title
C: Title light-height - Set the height of a the title line box. It's used to set the distance between lines of text.
D: Title font size - The size of the title text in pixels
E: Title font weight - Set the wight of the title text. You have 3 options here:
- Normal
- Light
- Bold
F: Title font style - Set the style of the title text. You have 2 options here:
- Normal
- Italic
G: Title text color - Set the color of the title text. Simply choose from the color picker
H: Title text background - Title can have a customizable background. The “VIVAshop - Homepage - Main slider - Banner 1” demo banner does not have a background. However, we have added a background as it may be seen in the image below, for exemplification purposes:
So, if you choose to add a background to your title, firstly check the “Title text background” option. Then, you will have the following options:
- Color - From the color picker choose the color for your title background (we used a yellow color for the background)
- Opacity - Enter the desired opacity level, in percentages (we used 100% in this example)
- Padding - Paddings are used to generate space around an element's content, inside of any defined borders. In our case, the element is the title text and the borders are defined by the title background borders. Paddings create space around the title text accordingly. For example, if you set a padding to the left of the title text, there will be a space created to the left of the title text, and the title text will move to the right. The more padding to the left, the more the title text will move to the right. The setting format is similar to margins, “TTpx RRpx BBpx LLpx”, where “TT” is the size of the padding top (space is created on top, so title text is pushed to the bottom), “RR” is the size of the padding right (space is created on the right, so the title text is pushed to the left), “BB” is the size of the padding bottom (space is created at the bottom, so the title text is pushed up), and “LL” is the size of the padding left (space is created on the left, so title text is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the title container. The values that we have set for the “Title text background” in the example above are “40px 20px 40px 20px”, meaning that, we have created a space of 40px above and below the title text, and 20px to the right and to the left of the title text, inside the title text background.
- Rounded corners - Set the corners for your title text background. The setting format is same as margins and paddings, meaning “TLpx TRpx BRpx BLpx”, where “TL” is the value for the top left corner, “TR” is the value for the top right corner , “BR” is the value for the bottom right corner, and “BL” is the value for the bottom left corner. These values are in pixels. In the above example we have used “10px 10px 10px 10px”, meaning that all background corners have a 10px radius.
For the “VIVAshop - Homepage - Main slider - Banner 1” we have not enabled this option, meaning the title does not have a background.
I: Title margin - Set the spaces you want to add outside the title. The margins will push the title accordingly. For example, if you set a margin to the left of the Title, the title will be pushed to the right. If you set a margin up, the title will be pushed down, and so on. The setting format is like for example “TTpx RRpx BBpx LLpx”, where “TT” is the size of the margin top (title is pushed to the bottom), “RR” is the size of the margin right (title is pushed to the left), “BB” is the size of the margin bottom (title is pushed up), and “LL” is the size of the margin left (title is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the title container.
For the “VIVAshop - Homepage - Main slider - Banner 1” we have used “0px 0px 0px 0px”, meaning that we have not set any margins for the title in this case.
J: Text align - Set the alignment for the Title. You have 3 options here:
- Left - Place the title text on the left, inside the Info Block
- Center - Place the title text in the center, inside the Info Block (this is the option that we have selected for the demo “VIVAshop - Homepage - Main slider - Banner 1” banner)
- Left - Place the title text on the right, inside the Info Block
The Info Block width is determined by the widest element (from Title, Description and Button). If the title is the widest element, then the “Text align” option will not have any effect.
K: Title animation - Set the animation for the title text. More specifically, where do you want the Title text o appear from during the loading time:
- Auto - Title will come from a predefined direction depending on the image position settings
- Left - Title will come from the left side
- Right - Title will come from the right side
- Top - Title will come from the top
- Bottom - Title will come from the bottom
- Off - Turn off the Title text animation
For the “VIVAshop - Homepage - Main slider - Banner 1” we have chosen the “Top” option, so the title text will come from the top.
Description settings
Your banner can have any text description of our choice which can either be simple text or HTML. There are several settings that you can choose form for the Info Bock description, including adding different animations.
These are the settings for your Info Block description. Choose them as per the indications below:
A: Description text - Add the text for your description.
B: Add description text shadow - Choose whether or not to add a shadow to your description
C: Description light-height - Set the height of a the description line box. It's used to set the distance between lines of text.
D: Description font size - The size of the description text in pixels
E: Description font weight - Set the wight of the description text. You have 3 options here:
- Normal
- Light
- Bold
F: Description font style - Set the style of the description text. You have 2 options here:
- Normal
- Italic
G: Description text color - Set the color of the description text. Simply choose from the color picker
H: Description text background - Description can have a customizable background. The “VIVAshop - Homepage - Main slider - Banner 1” demo banner does not have a background. However, we have added a background as it may be seen in the image below, for exemplification purposes:
So, if you choose to add a background to your description, firstly check the “Description text background” option. Then. you will have the following options:
- Color - From the color picker choose the color for your description background (we used a yellow color for the background)
- Opacity - Enter the desired opacity level, in percentages (we used 90% in this example)
- Padding - Paddings are used to generate space around an element's content, inside of any defined borders. In our case, the element is the description text and the borders are defined by the description background borders. Paddings create space around the description text accordingly. For example, if you set a padding to the left of the description text, there will be a space created to the left of the description text, and the description text will move to the right. The more padding to the left, the more the description text will move to the right. The setting format is similar to margins, “TTpx RRpx BBpx LLpx”, where “TT” is the size of the padding top (space is created on top, so description text is pushed to the bottom), “RR” is the size of the padding right (space is created on the right, so the description text is pushed to the left), “BB” is the size of the padding bottom (space is created at the bottom, so the description text is pushed up), and “LL” is the size of the padding left (space is created on the left, so description text is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the description container. The values that we have set for the “Description text background” in the example above are “10px 20px 10px 20px”, meaning that, we have created a space of 10px above and below the description text, and 20px to the right and to the left of the description text, inside the description text background.
- Rounded corners - Set the corners for your description text background. The setting format is same as margins and paddings, meaning “TLpx TRpx BRpx BLpx”, where “TL” is the value for the top left corner, “TR” is the value for the top right corner , “BR” is the value for the bottom right corner, and “BL” is the value for the bottom left corner. These values are in pixels. In the above example we have used “30px 0px 30px 0px”, meaning that the top left and bottom right of the background have a radius of 30px, whereas the top right and bottom left corners do not have any roundness at all.
I: Description margin - Set the spaces you want to add outside the description. The margins will push the description accordingly. For example, if you set a margin to the left of the description, the description will be pushed to the right. If you set a margin up, the description will be pushed down, and so on. The setting format is like for example “TTpx RRpx BBpx LLpx”, where “TT” is the size of the margin top (description is pushed to the bottom), “RR” is the size of the margin right (description is pushed to the left), “BB” is the size of the margin bottom (description is pushed up), and “LL” is the size of the margin left (description is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the description container.
For the “VIVAshop - Homepage - Main slider - Banner 1” we have used “10px 0px 0px 0px”, meaning that we have set a margin top of 10px.
J: Description align - Set the alignment for the description. You have 3 options here:
- Left - Place the description text on the left, inside the Info Block
- Center - Place the description text in the center, inside the Info Block (this is the option that we have selected for the demo “VIVAshop - Homepage - Main slider - Banner 1” banner)
- Left - Place the description text on the right, inside the Info Block
The Info Block width is determined by the widest element (from Title, Description and Button). If the description is the widest element, then the “Description align” option will not have any effect.
K: Description animation - Set the animation for the description text. More specifically, where do you want the description text o appear from during the loading time:
- Auto - Description will come from a predefined direction depending on the image position settings
- Left - Description will come from the left side
- Right - Description will come from the right side
- Top - Description will come from the top
- Bottom - Description will come from the bottom
- Off - Turn off the description text animation
For the “VIVAshop - Homepage - Main slider - Banner 1” we have chosen the “LEFT” option, so the description text will come from the left.
Button settings
In your extended banner you can include a button that you can customize in plenty of ways, from colors, shapes, borders, alignments, shadow, to font styles and animations. Also, the link you add to this button can be completely different from the link you add to the background image and/or the additional image.
These are the settings for your Info Block button. Choose them as per the indications below:
A: Button text - Enter the text that you want to appear inside the button
B: Button URL - The URL to forward users when clicking on the button. The link may be totally different from the link you have set for the banner background image and/or additional image
C: Add button shadow - Choose whether to add a shadow to the button or not
D: Button font size - Set the size, in pixels, for the button font
E: Button font weight - Set the weight of the button font. You have 3 options here:
- Normal
- Light
- Bold
F: Button font style - Set the style of the button text. You have 2 options here:
- Normal
- Italic
G: Button rounded corners - Set the corners for your button font. The setting format is same as margins and paddings, meaning “TLpx TRpx BRpx BLpx”, where “TL” is the value for the top left corner, “TR” is the value for the top right corner , “BR” is the value for the bottom right corner, and “BL” is the value for the bottom left corner. In the above example we have used “20px 0px 20px 0px”, meaning that the top left and bottom right of the background have a radius of 20px, whereas the top right and bottom left corners do not have any roundness at all.
H: Button text color - Pick the color for the button text, from the color picker
I: Button background - If this option is checked, you’ll have 2 options:
- Color - From the color picker choose the color for your button background (we used a yellow color for the background)
- Opacity - Enter the desired opacity level, in percentages (we used 0% in this example, which means that the button backgammon is transparent)
J: Button hover text color - Pick the color for the button text when hovering over the button
K: Button hover background - If this option is checked, you’ll have 2 options:
- Color - From the color picker choose the color for your button background (we used a yellow color for the background)
- Opacity - Enter the desired opacity level, in percentages (we used 0% in this example, which means that the button backgammon is transparent)
L: Button border - If this option is checked, you’ll have 6 options:
- Border size - Enter the size in pixels for the button border
-
Border style - Here you have 3 options that you can select from the dropdown:
- - Solid
- - Dashed (this is the option we have used in this example)
- - Dotted
- Color - Pick the color for your button border
- Opacity - Set the opacity level for your border, in percentages (we used 100% in our example here)
- Hover color - Pick the color of for the button border, when hovering over the button
- Hover opacity - Set the opacity level for your border when hovering over the button, in percentages (we used 100% in our example here)
M: Button padding - Paddings are used to generate space around an element's content, inside of any defined borders. In our case, the element is the button text and the borders are defined by the button background borders. Paddings create space around the button text accordingly. For example, if you set a padding to the left of the button text, there will be a space created to the left of the button text, and the button text will move to the right. The more padding to the left, the more the button text will move to the right. The setting format is similar to margins, “TTpx RRpx BBpx LLpx”, where “TT” is the size of the padding top (space is created on top, so button text is pushed to the bottom), “RR” is the size of the padding right (space is created on the right, so the button text is pushed to the left), “BB” is the size of the padding bottom (space is created at the bottom, so the button text is pushed up), and “LL” is the size of the padding left (space is created on the left, so button text is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the button container. The values that we have set for the “Button padding” in the example above are “10px 30px 10px 30px”, meaning that, we have created a space of 10px above and below the button text, and 30px to the right and to the left of the button text, inside the button.
N: Button align - Set the alignment for the button. You have 3 options here:
- Left - Place the button on the left, inside the Info Block
- Center - Place the button in the center, inside the Info Block (this is the option that we have selected for the demo “VIVAshop - Homepage - Main slider - Banner 1” banner)
- Left - Place the button on the right, inside the Info Block
The Info Block width is determined by the widest element (from Title, Description and Button). If the button is the widest element, then the “Button align” option will not have any effect.
O: Button margin - Set the spaces you want to add outside the button. The margins will push the button accordingly. For example, if you set a margin to the left of the button, the button will be pushed to the right. If you set a margin up, the button will be pushed down, and so on. The setting format is like for example “TTpx RRpx BBpx LLpx”, where “TT” is the size of the margin top (button is pushed to the bottom), “RR” is the size of the margin right (button is pushed to the left), “BB” is the size of the margin bottom (button is pushed up), and “LL” is the size of the margin left (button is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the button container.
For the “VIVAshop - Homepage - Main slider - Banner 1” we have used “20px 0px 0px 0px”, meaning that we have set a margin top of 20px.
P: Button animation - Set the animation for the Additional button. More specifically, where do you want the button to appear from during the loading time:
- Auto - Button will come from a predefined direction depending on the Button position settings
- Left - Button will come from the left side
- Right - Button will come from the right side
- Top - Button will come from the top
- Bottom - Button will come from the bottom
- Off - Turn off the Button animation
For the “VIVAshop - Homepage - Main slider - Banner 1” banner we have chosen the “Bottom” option, so the Additional Image will come from the bottom.
Info Block settings
As mentioned previously, the banner Info Block includes the banner Title, Description and Button. There are several settings that you can choses from for the Info Block including adding a background which can also be customized.
These are the settings for your Info Block. Choose them as per the indications below:
A: Info block width - Select the width for your Info Blocks. The value should be in pixels. You can also set the withs as “auto”, meaning that the width will be determined by the widest element (from Title, Description and Button).
B: Vertical align - Select the location of the Info Block, with the following vertical options:
- Top - The Info Block will be placed on the top of the banner. This is the option we have selected for our example banner
- Center - The Info Block will be placed in the center of the banner.
- Bottom - The Info Block will be placed at the bottom of the banner.
C: Horizontal align - Select the location of the Info Block, with the following horizontal options:
- Left - The Info Block will be placed on the left of the banner.
- Center - The Info Block will be placed in the center of the banner. This is the option we have selected for our example banner.
- Right - The Info Block will be placed on the right of the banner.
D: Info Block margin - Set the spaces you want to add outside the Info Block. The margins will push the Info Block accordingly. For example, if you set a margin to the left of the Info Block, the Info Block will be pushed to the right. If you set a margin up, the Info Block will be pushed down, and so on. The setting format is like for example “TTpx RRpx BBpx LLpx”, where “TT” is the size of the margin top (Info Block is pushed to the bottom), “RR” is the size of the margin right (Info Block is pushed to the left), “BB” is the size of the margin bottom (Info Block is pushed up), and “LL” is the size of the margin left (Info Block is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the Info Block container.
For the “VIVAshop - Homepage - Main slider - Banner 1” we have used “0px 0px 0px 15px”, meaning that,we have applied a 15 pixels margin left, so we have pushed the Info Block 15 pixels to the right.
E: Info block background - Info block can have a customizable background. The “VIVAshop - Homepage - Main slider - Banner 1” demo banner does not have a background. However, we have added a background as it may be seen in the image below, for exemplification purposes:
So, if you choose to add a background to your Info Block, firstly check the “Info block background” option. Then, you will have the following options:
- Color - From the color picker choose the color for your Info Block background (we used a yellow color for the background)
- Opacity - Enter the desired opacity level, in percentages (we used 80% in this example)
- Padding - Paddings are used to generate space around an element's content, inside of any defined borders. In our case, the element is the Info Block text and the borders are defined by the Info Block background borders. Paddings create space around the Info Block text accordingly. For example, if you set a padding to the left of the Info Block text, there will be a space created to the left of the Info Block text, and the Info Block text will move to the right. The more padding to the left, the more the Info Block text will move to the right. The setting format is similar to margins, “TTpx RRpx BBpx LLpx”, where “TT” is the size of the padding top (space is created on top, so Info Block text is pushed to the bottom), “RR” is the size of the padding right (space is created on the right, so the Info Block text is pushed to the left), “BB” is the size of the padding bottom (space is created at the bottom, so the Info Block text is pushed up), and “LL” is the size of the padding left (space is created on the left, so Info Block text is pushed to the right). All of these values can be set in percentages as well, the percent value representing a percent of the Info Block container. The values that we have set for the “Info Block cv background” in the example above are “20px 30px 20px 30px”, meaning that, we have created a space of 20px above and below the Info Block text, and 30px to the right and to the left of the Info Block text, inside the Info Block text background.
- Rounded corners - Set the corners for your Info Block text background. The setting format is same as margins and paddings, meaning “TLpx TRpx BRpx BLpx”, where “TL” is the value for the top left corner, “TR” is the value for the top right corner , “BR” is the value for the bottom right corner, and “BL” is the value for the bottom left corner. These values are in pixels. In the above example we have used “30px 0px 30px 0px”, meaning that the top left and bottom right of the background have a radius of 30px, whereas the top right and bottom left corners do not have any roundness at all.