Image with text overlay

The "Image with Text Overlay" section allows you to create visually appealing content blocks with an image background and overlaid text. This section is perfect for highlighting promotions, featuring products, or conveying important messages in a stylish and effective manner.

Section Settings

The section settings control the overall appearance and behavior of the Image with Text Overlay section. These settings include options for layout, image selection, and text overlay configuration.

Full Width

Checkbox: When checked, the section spans the full width of the page.

Content Width

Slider: Adjust the width of the content area (text and button) within the section. This slider ranges from narrow to wide, giving you control over how much space the content occupies.

Image Size

Dropdown: Select the size of the image. Options typically include Small, Medium, Large, and Full.

Image

Select Image: Opens a media library where you can upload or select an image to be used as the background.
Explore Free Images: Provides access to a collection of free images to choose from.

Mobile Image

Upload Image: Allows you to upload or select a different image specifically for mobile devices to ensure optimal display.

Appearance

The appearance settings customize the look of the text overlay and overall section styling.

Overlay Color and Opacity

Color Picker: Choose a color for the overlay that sits between the image and the text, helping to improve text readability.
Opacity Slider: Adjust the transparency of the overlay. Ranges from 0% (completely transparent) to 100% (completely opaque).

Padding

Padding Top: Set the amount of space above the content. Measured in pixels.
Padding Bottom: Set the amount of space below the content. Measured in pixels.

Color Scheme

Dropdown: Select a predefined color scheme for the text and button. Clicking on "Edit" allows for customization of the color scheme.

Desktop and Mobile Content Alignment

These settings control the alignment and positioning of the text content within the section.

Desktop Content Alignment

Alignment Options: Align content to the left, center, or right within the section.
Content Position: Position content at the top, center, or bottom of the section.

Mobile Content Alignment

Alignment Options: Align content to the left, center, or right on mobile devices.
Content Position: Position content at the top, center, or bottom on mobile devices.

Theme Settings and Custom CSS

For further customization, you can adjust theme settings or add custom CSS.

Theme Settings

Link: Provides access to the theme’s general settings for broader changes.

Custom CSS

Text Field: Enter custom CSS to override default styles and apply additional customizations to the section.

Block Level Settings

Within the Image with Text Overlay section, you can add various content blocks such as subheadings, headings, paragraphs, and buttons. Each block has its own set of settings.

Subheading

Text: Enter the text for the subheading.

Heading

Heading: Enter the main heading text.
Size: Choose the size for the heading (e.g., H1, H2, etc.).

Paragraph

Content: Enter the paragraph text. This is a great place for additional details or descriptions.

Button

Label: Enter the text for the button.
Link: Specify the URL the button should link to. You can paste a link or search for an internal page.
Action: Choose whether the link opens in a new tab or the same tab.