The Text with Image component contains multiple elements, giving you quick access to some of the most common options when building site content: a heading, text, image, and button. This saves you time from adding them individually.
Layout
The component supports two layout options: columns and float, shown using vertical bars and a cloud, respectively. The columns option will display the image to the left or right of the text, centered vertically, with all text in a column next to it. With the float option, text will wrap around the image (note that while editing we keep them in columns to make it easier to edit).
Heading
The heading has a couple of options for you:
- Hide Heading - Toggle this on to hide the heading entirely
- Heading Text color - Selecting custom will let you set a custom color for your heading text. While the formatting options on the text editing toolbar are all available for your heading, this is a quicker way to change the color of the heading text as a whole.
Body
Like the Rich Text component, you can format body text using common formatting options on the text-editing toolbar. Like the text color option for your heading, there is a single option for your body text to change the text color of all of the entire body text, which is faster than using the text editing toolbar.
Image
There are a few different options for the image you include with the component:
- Image Position - There are three options available for how you position the image. The first is to the left of your text, the second is to the right of your text, and the last hides the image entirely.
- Image - Click on this to upload an image. If you want to change it later, simply click on it again to upload a different image.
- Image Size - This option controls the size of the image proportionally to the size of the component itself. Note that this option is only used with the float component layout.
- Alt Text - A description of the image used by screen readers and with SEO.
Button
The button included with the component has several options for you:
- Hide Button - With this option toggled on you can hide the button entirely.
- Button Label - Edit this to change the text on your button.
- Button Link - Click Edit Link to link the button using our standard link options.
- Shape - By default your button shape will use what you have set in your site design options. You can use this option to change it to something else, though. You can also click the desktop/mobile icon to set shapes specifically for large and small screens.
- Button Background - With this option you can change the button background to a color, gradient, or image, or even nothing.
Spacing
The Margin option allows you to control the spacing around the component on all four sides. If you click the desktop/mobile icon you can specify these separately for different screen sizes.
Hover
There are some additional options available on hover for the component. These options are configured in the same manner as anything covered previously, but you’ll only see these show when a visitor hovers over the element with their mouse. Click on Hover near the top of the options panel and you’ll see three different options:
- Heading Text Color
- Body Text Color
- Button Background