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.

Main

On this Page

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.

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.

Alt text here

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.

Next Section

Looking for Developer Docs?

We have a whole section for that, including: Developer Training Series, Template Language docs, Module Development tutorials and much, much more.

Head to the Developer Section

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

Accept

Copyright © 1997 – 2021 Miva©, Miva Merchant©, MivaPay©, MivaCon© Miva, Inc. All Rights Reserved.