The Image and Text component allows you to create a combination of a text area and an image to grab customers’ attention and deliver a specific marketing message.
Component Name: The name of the component. The default value is Image and Text but it can be edited as needed.
Link: Allows you to set a destination for the component on click. The options are URL, Product, Category and Page.
Image Position: This determines the side of the page the image will be on. The options are Left Side or Right Side.
Column Width Distribution: This allows you to set how the text area and the image will break down the width available in the component. The slider allows you to distribute the column width in percentages, by 10. For example, you could choose to have the text area take up 30 percent of the width while the image takes the remaining 70 percent.
The Image section of the Properties tab is where you configure the image and settings for the image part of the component.
Image: This is the image associated with the component. Clicking the icon next to the file name box opens the Add Image page. You can upload a new image, select an image that is already in your system or add an image that is already on your server by using the path to the image.
The Image Settings subsection allows you to set specific images for when your website is viewed on a mobile device or tablet. If you don’t set specific images, the main image you used will be resized to fit.
Alt/Title Text: The Alt/Title Text is text that displays when a website visitor hovers their mouse over the image in question and its use is considered a best practice, particularly when it comes to SEO.
Image Height: This sets the height of the image. The options are: Defined by Image Size, Small, Medium and Large. It’s important to remember, if the height of the image is adjusted, the height of the text area changes also.
Text Alignment: This determines how the text elements, and the button if being used, are aligned horizontally in relation to the image. There are three options: Left, Center and Right.
For the rest of the configuration options for elements like Heading Text, Subheading Text, Body Text and Button Text, please visit the Text Settings document, here.
The Spacing section of the Advanced tab allows you to alter the spacing, or padding, on the top and the bottom of the component. This establishes the space between this component and the page elements adjacent to it. It is set in pixels.
To enable the Text Background, click the slider.
Next, you will choose the color of the background. Click the box next to the code to open the color picker.
You can use Slider Mode to find a desired color. Clicking the drop down opens up three options: RGBa, HSLa and CMYKa. You can also input a color code. There are five Input Modes: RGBa, HSLa, CMYKa, HEX and HEXa.
Content Theme: The Content Theme setting allows you to quickly change the text and button colors when they are used over light or dark backgrounds. Rather than needing to go into each text element and individually changing them due to the background, you can change the theme of all of the elements quickly in one spot.
The Content Theme settings are: