1. What is media with text?
The "Media with text" layout typically consists of one or more media elements, such as images or videos, alongside text content. The media elements serve to capture attention, evoke emotions, or showcase products, while the text content provides explanations, descriptions, or calls to action.
2. How to set up the media with text?
In the Theme editor, select your desired page, and under the "Template" section group, add the Media with text section to your preferred location. Then follow these simple steps:
- Choose image/video: Choose one or two images or a video to feature in the section.
- Locate the “Show sound control” checkbox. Check the box to enable the sound control feature. By default, this checkbox is set to false. Once enabled, an icon will appear on the storefront, allowing customers to toggle sound on or off as needed.
- Use text blocks to add content such as subheadings, headings, and descriptions to the section.
- Select the heading tag for this section to enhance the SEO of the page.
- Use the "Default Content Height" setting to control how much content is shown before the "Read more" button is clicked. You can select from 4 options: Show full content, Small, Medium, or Large, based on your preference for how much content is visible initially.
- Customize the color of the heading and text, choosing between light or dark options.
- Configure buttons with labels and links to facilitate user interaction and engagement by using button blocks.
- Then, set up layout & padding:
- Adjust the height and width of the images separately for desktop and mobile devices to ensure optimal display.
- Customize the layout and corner radius of the images to suit your design.
- Align the images as desired and configure the content layout and text position for optimal presentation.
- Enable the "Add spacing between images" option. When selected, a small fixed spacing will be added between two images. This spacing only applies when there are exactly two images.
- Choose whether the section should span the full width of the device or adhere to a predefined width.
- Select the background color for the section, opting for either a light or dark theme.
- Set padding for the top and bottom of the section to control spacing.
3. How to set up Text columns with icons inside the Media with text section?
✍️ How to add Text columns with icons?
Step 1:
Under Template, tap on the Media with text section
Step 2:
Click “Add block” or “+”, and select the Text columns with icons block.
Step 3:
Press “Save”.
Repeat the steps to add more Text columns with icons as you need. After adding blocks, you can set up the icon and the content for each.
✍️ How to arrange the layout of all Text columns with icon blocks?
To do it, you need to set up the numbers of columns appearing on a row both inside the Media with text section and Text columns with icons block.
🖥️ For desktop:
|
Media with text section |
Text columns with icons block |
|
Step 1: Click on the Media with text section. Step 2: Scroll down to find the Number of columns on desktop setting. Step 3: Adjust the number of columns you want to display on desktop (from 1 to 4) |
Step 1: Click on the Text columns with icons block. Step 2: Scroll down to find the Number of columns wide setting under Desktop layout section. Step 3: Adjust the number of columns wide. This will determine the width of each block inside the Media with text section. |
📱 For mobile:
|
Media with text section |
Text columns with icons block |
|
Step 1: Click on the Media with text section. Step 2: Scroll down to find the Number of columns on mobile setting. Step 3: Choose the number of columns you want to display on mobile. (1 or 2) |
Step 1: Click on the Text columns with icons block. Step 2: Scroll down to find the Number of columns wide setting under Mobile layout section. Step 3: Adjust the number of columns wide. This will determine the width of each block inside the Media with text section. |
