Image with text section

Setting Description
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 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 image (Choose content layout - Overlap)

  • Top: Image aligned with the top of the content container (heading, description).
  • Middle: Centered within the height of the content container.
  • Bottom: Aligned with the bottom of the content container (heading, description).
Desktop content alignment

Choose the horizontal alignment of the content:

  • Left
  • Center
  • Right
Content layout

Allows the image and text boxes to overlap with one another. If No overlap is selected, the content will adjust to accommodate the text and image.

  • No overlap
  • Overlap
Color scheme You can apply a different color scheme for the entire section to highlight the container with a content.
Container color scheme Applying a color scheme to a content container automatically updates all associated colors set in the theme settings according to the created color schemes. You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used. Learn more about color schemes.

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.
  • Zoom in on scroll: Gradually zooms in on the image as the user scrolls.

Mobile layout 


Mobile content alignment 

Choose the horizontal alignment of the content on mobile:

  • Left
  • Center
  • Right

Section paddings


Setting Description
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 “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