Layered images with text
Table of Contents
The appearance of the Layered images with text #
You can create a section with four images and a text block, including an optional button to guide customers to a new page. Use this layout to highlight a specific product, collection, or blog post. Share details about availability, and style, or even feature a customer review to enhance the section’s impact.
Section settings #
| Settings | Description |
| First image | Uploading the main image of the department, the first image is mandatory. |
| Second image | The second image for the section. |
| Third image | The third image for the section. |
| Fourth image | The fourth image for the section. |
| Image ratio | The image ratio for the product images: Adapt to image (default) – Uses the aspect ratio of the images. This prevents the images from being cropped. –Square – Crops the images to use a 1:1 ratio. –Portrait – Crops the images to use a 2:3 ratio. –Landscape – Crops the images to use a 3:2 ratio. –Wide – Crops the images to use a 16:9 ratio. |
| Desktop layout | The layout for the section on the desktop: –Images first – Displays the images on the left. –Text first – Displays the text on the left. |
| Desktop content position | Sets the vertical position of the content on desktop: –Top – Displays the content at the top. –Middle – Displays the content in the middle. –Bottom – Displays the text at the bottom. |
| Desktop content alignment | Sets the alignment of the content on the desktop: –Left – Aligns the content to the left. –Center – Aligns the content to the center. –Right – Aligns the content to the right. |
| Make section full width | Makes the section the full width of the browser window. |
| Mobile content alignment | Sets the alignment of the content on mobile: Left – Aligns the content to the left. Center – Aligns the content to the center. Right – Aligns the content to the right. |
| Color scheme | You can change the color of the section. |
| Round corner | Click on the checkbox to images round corner |
Caption block #
| Settings | Description |
| Caption Text | Input caption text here |
| Caption Text style | Select caption text style here |
Heading block #
| Settings | Description |
| Heading | Large text for the title of the section. |
| Heading size | The size of the heading text: -Small -Medium -Large |
| Heading tag | Select heading tag |
Text block #
| Settings | Description |
| Description | Displays paragraph-style text in the section. |
| Description size | The size of the description text: -Small -Medium -Large |
Button block #
| Settings | Description |
| Button label | The text that displays on the button. |
| Button link | The URL that you want the button to link to. |
| Button size | Select button size here: – Small – Medium -Large |
| Use a secondary button style | Select button style here |
Section padding settings #
| Settings | Description |
| Desktop: Padding top | The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px, It will affect the desktop. |
| Desktop: Padding bottom | The section’s bottom inner space height is determined. From 0 to 150 px, will be incremented by 5px, It will affect the desktop. |
| Mobile: Padding top | The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the mobile. |
| Mobile: Padding bottom | The section’s bottom inner space height is determined. From 0 to 150 px, will be incremented by 5px, It will affect the desktop. |