Image with text settings


Setting Description
Layout

Visible when shape divider is added. Shape divider settings you can find in section settings almost in the end of settings. When you add a specific type, you can try what layout fits to your preferences.

  • Default: The content remains within the section;
  • Shift: Expands an image beyond the bottom of the section to enhance layout variability.
Image Choose an image for the section. 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.
Image on mobile You can add a separate image for mobile devices to provide the good look of the image on smaller devices.
Add media shape You can add image shape instead of usual view of image.
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.
Border radius mobile Adjust the border radius of images to make them straight, less rounded, or more rounded image on mobile.
Enable video Check this box to enable the display of a video.
Video  Click the 'Select video' button and upload your chosen video file.

URL

 Enter a YouTube or Vimeo URL to the video you want to display.
Autoplay Enable autoplay for the video to start playing automatically when the page is loaded.
Play video on loop Enable this option to make the video play continuously in a loop.
Icon Add an icon to the image. Click on “Select Image” to access your media library or upload a new icon. Also, you can connect a dynamic source by clicking the source button. Once an icon is chosen, you can use the “Change” button to remove, replace, or delete it. 
Image height
  • Adapt to image: The height of the image will remain unchanged, preserving their original aspect ratios.
  • Small: Set a small height for the image.
  • Medium: Set a medium height for the image.
  • Large: Set a large height for the image
Desktop image width

Choose the width of the image for desktop view:

  • Small
  • Medium
  • Large
Desktop image placement

Adjust the placement of the image on the desktop view:

  • Image First: This option displays the image on the left side.
  • Image Second: This option displays the image on the right side.
Desktop content position 

Select the vertical alignment of the content:

  • Top: Aligned with the top of the image.
  • Middle: Centered within the height of the image.
  • Bottom: Aligned with the bottom of the image.
Desktop content alignment

Choose the horizontal alignment of the content:

  • Left
  • Center
  • Right
Desktop content width

Adjust the width of content to the image:

  • Small
  • Large

Mobile layout 


Mobile content alignment 

Choose the horizontal alignment of the content on mobile:

  • Left
  • Center
  • Right

Icon settings


Settings to highlight image or video and text container using captivating icons. For best results better to have content in two columns

Example

Settings in customizer

To add different background you can here, or if background is none here, you can add.


Setting Description
Icon You can add an icon to be visible at the top of the content container. The icon is attached to the image and text.
Hide icon on mobile If needed, you can hide the icon on mobile devices.
Image width  This setting allows you to adjust image width of the icon.
Image vertical position  The setting enables you to control the vertical position of the icon at the top of the content container.
Image horizontal position  This setting enables you to control the horizontal position of the icon at the top of the content container.
Image width mobile  This setting lets you adjust icon width on mobile devices separately. It's important for optimizing the visual appearance and layout.
Image vertical position mobile The setting enables you to control the vertical position of the icon at the top of the content container on mobile. Adjustments like changing placement can improve mobile usability.
Image horizontal position mobile  This setting enables you to control the horizontal position of the icon at the top of the content container. Adjustments like changing placement can improve mobile usability.


Setting Description
Icon You can add an icon to be visible at the bottom of the content container. The icon is attached to the image and text.
Hide icon on mobile If needed, you can hide the icon on mobile devices.
Image width  This setting allows you to adjust image width of the icon.
Image vertical position  The setting enables you to control the vertical position of the icon at the bottom of the content container.
Image horizontal position  This setting enables you to control the horizontal position of the icon at the bottom of the content container.
Image width mobile  This setting lets you adjust icon width on mobile devices separately. It's important for optimizing the visual appearance and layout.
Image vertical position mobile The setting enables you to control the vertical position of the icon at the bottom of the content container on mobile. Adjustments like changing placement can improve mobile usability.
Image horizontal position mobile  This setting enables you to control the horizontal position of the icon at the bottom of the content container. Adjustments like changing placement can improve mobile usability.

Section overlay


If you don't use top settings and bottom settings for icons to the content container (image with text), and you require icons to be flexible within the entire section, you can add images overlay.


Example

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, or line, 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
Background color 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.
Background gradient Use the gradient picker to create a custom gradient for your section background.
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