Image with Text

Image with Text is used to showcase detailed information about products, services, or brands, attracting users' attention through a combination of images and text. It supports two display forms: overlapping and non-overlapping images and text, allowing for flexible configuration.

(I) Image with Text

• Image: Upload or change the image. It is recommended to use high-resolution images.

• Height: There are four modes available: Adapt to Image, Small, Medium, Large.

• Width: There are three modes available: Small, Medium, Large.

• Placement: There are two modes available, where the corresponding image can be placed on the left or right, with two layout designs.

• Animation: There are three modes available: No Animation, Ambient Movement, Zoom on Scroll.

(II) Content

• Layout: You can choose between overlapping and non-overlapping layouts. Configure flexibly according to the page style.

• Position: For the entire text content block, there are three positions available: Top, Middle, Bottom.

• Alignment: There are three text alignment options: Left-aligned, Center-aligned, Right-aligned.

• Mobile alignment: For mobile text alignment, there are three options: Left-aligned, Center-aligned, Right-aligned.

(III) Colors

• Color scheme: Select or edit a color scheme to define the color styles of all elements on the page, including background color, text color, etc.

• Container color scheme: Select or edit a color scheme to define the color styles of all elements in the text content area, including background color, text color, etc.

(IV) Padding

• Top: Manually drag the slider to adjust the top margin, with a minimum of 0px and a maximum of 100px.

• Bottom: Manually drag the slider to adjust the bottom margin, with a minimum of 0px and a maximum of 100px.

(V) Template Settings

• Thickness: Manually drag the slider to adjust the value, with a minimum of 0px and a maximum of 24px. When the value is greater than 0, a corresponding opacity option will appear.

• Opacity: Manually drag the slider to adjust the opacity of the thickness, with values ranging from 0% to 100%.

(VI) Heading

• Heading: Set a main title to attract users' attention.

• Heading size: Set the size of the heading (Small, Medium, Large, Extra Large, Maximum).

(VII) Text

• Text: Add descriptive text to further explain relevant information.

• Style: There are two styles available: Body, Subheading.

(VIII) Button

• Label: Enter the button name; the button will be automatically hidden if left blank.

• Link: Select the location the button jumps to; the button will be in a grayed-out state if left blank.

• Outline style: Enable this option to change the button style accordingly.