Media with text

This component allows you to create dynamic layouts on your store through the use of multiple elements, for which you can define how these are gonna be displayed within the section.

To better understand how it works, we will refer as Content to the column in which elements such as Subtitle, Title, Text and Link are displayed; and Media to the one where Images or Video.

By clicking on the component name you will find general options to customize it, which will determine how the section will look and behave. The available options for this component are the following:

Media position

This option allows to define the position in which the Media will be displayed:

• Left: will be displayed at the left side of the section on desktop devices, and before the Content on mobile devices.
• Right: will be displayed at the right side of the section on desktop devices, and after the Contenton mobile devices.
  • When choosing this, another option will become visible with which you can force the Media column to stay ater the Content on mobile devices. If disabled, it will be position before.

Note: both sections will use 6 columns of the total of 12 within the available space of the section.

---

Media options

This group allows you to define what type of Media element you will use in the component.

Image

With this option you will be able to upload images for desktop and mobile devices. If the mobile image isn’t uploaded, the first one will be used on all devices.

Embed video

When choosing this option a field will be displayed in which you can add the Embed code from platforms like Youtube or Vimeo.

Video URL

This option allows you to display a video from platforms like Youtube or Vimeo, by just copy and pasting the web address URL from the browser. You can also upload videos from any other URL where there’s a video, like for example if you have them stored in another server or domain.

Note: both video options will display another one called Video ratio with which you can define the dimension for the video.

---

Content options

This group contains several options for you to add Content and choose how it will look.

Alignment

You’ll find two options for choosing the alignment for both desktop and mobile devices.

Vertical position (desktop)

This option allows you to define the vertical position of the Content column compared to the Media. This will be noticeable when the the height of it is less tall than the Media column.

Content elements

You’ll also find the fields for adding a Subtitle, Title, Text and Link (button) within the column.

When choosing a Link, the following options will be displayed to customize it:

• Link text: Text that will be displayed within the button.
• Outline style: It will display a border around it and a transparent background.
• Arrow in button: displays an arrow icon on the right side of the button text.
• External link: If enabled, the link will open in a new browser tab.

---

Appearance

This group contains the following options to customize the component:

• Top margin: allows to control the upper margin of the section.
• Bottom margin: allows to control the lower margin of the section.
• Content colors: allows to choose the Color Pack for the component.

---

Animations

The Customize options allows to adjust the animations for this specific component. You can read which ones are available in this page.