Image banner settings


Setting Description
Hide first and second images You can hide the first and second images by marking the checkbox to display only the background for the section and, for example, the background for the content container instead of using images.
First image

Choose the first image for your banner. Click on “Select Image” to access your media library, upload a new image, or explore free images. Also, you can connect a dynamic source by clicking the source button. Once an image is chosen, you can use the “Change” button to remove, replace, or delete it.

Note: If add only one image, it will be on the whole width of the section. If add two images, the images will be aligned vertically and placed next to each other.
Second image Choose the second image for your banner. Select the second image for your banner and follow the same steps as described for the first image.
Image overlay opacity The “Image overlay opacity” setting allows you to adjust the transparency of the overlay that is applied to images on your website. Use the slider to make changes.
Banner height

Choose banner height from dropdown list:

  • Adapt to first image
  • Small
  • Medium
  • Large

For best results, use an image with a 3:2 aspect ratio. Learn more
Enable custom border radius When this option is turned on, you can adjust the border radius of images.
Border radius Adjust the border radius of images to make them straight, less rounded, or more rounded.
Desktop content position

Select the vertical alignment of the content:

  • Desktop Content Position: Select the vertical alignment of the content:
    • Top left
    • Top center
    • Top right
    • Middle left
    • Middle left full height: This option allows for custom positioning of content within a container. To enable this, mark the checkbox “Show Container on Desktop”.
    • Middle center
    • Middle right
    • Middle right full height: This option allows for custom positioning of content within a container. To enable this, mark the checkbox “Show Container on Desktop”.
    • Bottom left
    • Bottom center
    • Bottom right
Show container on desktop Show the container to display text with a colored background on desktop. This will apply to the heading, description, and button text.
Remove the space inside the container You can remove top and bottom space of content container by this option.
Desktop content alignment

You have three alignment options to align content horizontally on desktop:

  • Left
  • Right
  • Center
Container background color Choose a background for the content container. There are six options: Background main, Background section 1,2,3,4,5. Colors for these backgrounds can be set in the Theme Settings/Colors block.
Container custom background Set a custom background for the container.
Container opacity Adjust the opacity level of the container. For example, you can add an image as the background, then choose the container's opacity, so the image is visible behind the container.
Container opacity mobile Customize the opacity level for the container specifically on mobile devices.

Animations


Setting Description
Image behavior 

Choose how the image behaves:

  • None
  • Ambient movement: This creates a subtle, slow movement effect, making the image appear dynamic.


Mobile layout 


Setting Description
Mobile content alignment

Choose the horizontal alignment of the content on mobile:

  • Left
  • Center
  • Right
Stack images on mobile If you enable this option and disable “Show Container on Mobile” the layout on mobile devices will display the first image, followed by text on the first image, and then the second image. However, if you enable “Stack Images on Mobile” and also enable “Show Container on Mobile” the layout will show the first image, followed by text within a container, and then the second image. If you disable “Stack images on mobile” the images will be displayed in a single column, aligned vertically, and placed next to each other.
Show container on mobile Enabling this option will display text within a container after the image on mobile screens. Disabling it will place the text directly on top of the image on mobile screens.

Section overlay


You can add from one to three image overlays to this section.


Setting Description
Image overlay This setting allows you to apply an overlay effect on the banner image, such as a color shape, pattern, line, or transparent image to enhance its appearance or create visual contrast with other elements on the page.
Image width  This setting allows you to adjust image width to ensure it aligns well with other components within the section.
Image vertical position  The setting enables you to control the vertical position of the image within the section. You can adjust it to place the image wherever it fits best within the layout, ensuring optimal visual balance and alignment with other elements.
Image horizontal position  This setting enables you to control the horizontal position of the image within the section. You can adjust it to place the image wherever it fits best within the layout.
Image width mobile  This setting lets you adjust image width on mobile devices separately. It's important for optimizing the visual appearance and layout, as mobile screens have different requirements than desktop screens. Adjustments like decreasing shape width can improve mobile usability.
Image vertical position mobile The setting enables you to control the vertical position of the image within the section. Adjustments like changing placement can improve mobile usability.
Image horizontal position mobile  This setting enables you to control the horizontal position of the image within the section. Adjustments like changing placement can improve mobile usability.
Animation 

Two options:

  • None 
  • Ambient

You can liven up the site using animation.

Shape divider


Setting Description
Shape position

Choose the position of shape:

Top: The shape is displayed only at the top of the section.

Bottom: The shape is displayed only at the bottom of the section.

Both: The shape is shown at both the top and bottom of the section.
Type Select the shape type that enhances the visual appeal of your banner the most.
Color You can select the color of the shape to complement the color of the banner.
Width Adjust the shape width using the slider. But notice that it has an impact on section width. 

Section settings 


Setting Description
Full width First image and second image will be on full width. If remove checkbox, they will be in limited container.
Background image You can add a background image instead of a solid background, and make the first and second images overlay on top of the background image.
Background image height You can control background image height using a slider.
Background image height mobile You can control background image height using a slider on mobile.
Background color There are six options for section background: Background main, Background section 1,2,3,4,5. Colors for these backgrounds can be set in the Theme Settings/Colors block.
Background gradient Use the gradient picker to create a custom gradient for your section background.
Remove space from the sides When the “Show container on desktop” option is selected, space between the container and the section edges can be removed, allowing the container to start directly at the left edge or end directly at the right edge, without padding, depending on the container’s position. If the content is displayed without a container, the space to the edges will also be reduced.
Top padding The “Top padding” setting allows you to adjust the amount of space at the top of the section using a slider. 
Bottom padding The “Bottom padding” setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section. 
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us