PageBuilder - Image and Text Component

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.

Properties: Layout

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.

Properties: Image

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.

Image Settings

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.

Properties: Text

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.

Note

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.

Advanced: Spacing

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.

Advanced: Text Background

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:

Light: This is the default color scheme. It's good for use over light/white backgrounds.
Dark (Always): This is good for use over dark backgrounds and images and applies a color scheme to the text and button elements that is more suitable for dark backgrounds. The (Always) indicator means it applies to all screen sizes; mobile, tablet and desktop.
Dark (Desktop Only): This is good for use over a dark image, or if you have a dark background for desktop devices, but are using the default light or white colors on mobile and tablet devices. Like the Dark (Always) selection, it applies a color scheme to the text and button elements that is more suitable for dark backgrounds.
Inverted: This selection should be used carefully, because it inverts the hues of all the colors of the elements inside a content area. For example, if an element is normally white, it will now be black. If it was red, it would be cyan, etc. This works well for monochromatic color schemes over dark backgrounds, but may not be great for colorful themes.