Image

Image Settings

Set the image background and its styling properties.

  • Image: Upload your chosen image (e.g., yerb.webp).

  • Image Border Radius: 10px Rounds the corners of the image.

  • Image Content Position Horizontal (Desktop): 50% Controls horizontal content alignment over the image.

  • Image Content Position Vertical (Desktop): 50% Controls vertical alignment for text on desktop.

Text Settings

Customize the overlay text that appears on top of the image.

  • Image Text Description: NIKE SPRING SEASON The headline or message that appears over the image.

  • Font Size (Desktop): 23px

  • Font Size (Mobile): 17px

  • Text Color: #FFFFFF

  • Text Background Color: #686868

  • Text Background Opacity: 19%

  • Enable Text Background: Toggle ON to display a background behind the text for contrast.

  • Text Horizontal Position (Desktop): 5%

  • Text Horizontal Position (Mobile): 26%

  • Text Background Border Radius: 8px

📐 Layout Settings

Control section layout, spacing, and responsiveness.

  • Enable Full Width Section: Toggle ON to span edge-to-edge across the screen.

  • Content Width Limit: 1300px Maximum width inside the section container.

  • Section Padding Top (Desktop): 50px

  • Section Padding Bottom (Desktop): 50px

  • Left and Right Padding (Desktop): 15px

  • Image Height (Desktop): 70vh Minimum height of the image section on larger screens.

Mobile Settings

Responsive layout for mobile devices.

  • Section Padding Top (Mobile): 40px

  • Section Padding Bottom (Mobile): 40px

  • Left and Right Padding (Mobile): 20px

  • Image Height (Mobile): 50vh

  • Image Horizontal Content Position (Mobile): 50%

  • Image Vertical Content Position (Mobile): 50%

Advanced Media Settings

Control image/video spacing and media type.

  • Image Top Margin: 0px

  • Image Bottom Margin: 0px

  • Use Video Instead of Image: Toggle ON to replace the image with a background video.

  • Video URL: Paste an MP4 video link for dynamic background.

Customization

  • Display Section On: All Devices Control visibility on desktop, tablet, or mobile.

  • Lazyload Images: Enable to delay loading until the image is in view (improves page speed).

  • Custom CSS: Add extra styles if needed for advanced control.

This Image Overlay Section gives you creative control to display a bold visual message with overlaid text, ideal for seasonal collections, announcements, or branding moments. Adjust the layout, typography, colors, and responsiveness for a polished experience across devices.

PreviousSlideshow ProNextVideo

Last updated