The Text + Image block allows you to create dynamic content easily by incorporating an image with your text content. You can give your readers a "next step" by including a call-to-action button below your text content.
Begin by adding a title and text to your block. You can use the options in the toolbar at the top of the text editor to format your text to your liking. Make sure to click save changes once you're done.
Next, add an image to the block. You may upload a new image, insert an image from the clipboard, or use a stock image.
If needed, you can adjust the focal point of the image and add alt text. Click save changes to finalize your image selection.
You can use the Button to provide your website visitors a call-to-action after reading your text content. You can use your button in 10 different ways!
Link options include:
NONE: Your button would not link anywhere.
EXTERNAL LINK: Direct your clients to helpful resources that exist in a place other than your website.
PAGE: Direct your visitors toan existing web page on your website. FORM: Connect to a Custom Form you have created in your FORM BUILDER. MARKETING: Direct users to a Campaign or Landing Page you have created in the MARKETINGtool. FILE: Allow usersto open a PDF, JPG, PNG, or GIF file that has been uploaded to the DOCUMENTS area of your account's FILES section. PHONE: Connecting your button to a phone number allows users to quickly click to call you. EMAIL: Connecting your button to an email address opens a user's default mail client to easily send you an email. ADDRESS: Allow users to find where you are by opening an address in Google Maps. VIDEO: Add a video embed code obtained from YouTube or Vimeo to play in a light-box.
Now that you've added your text, image, and button, choose how they are displayed by picking the perfect layout. Click the change button at the top of your screen to see the available layouts.
Text Overlay Layouts: The title, text, and button will lay over a portion of your image. You can adjust the opacity of the background behind the text in the Styling section.
Text Left/Right Layouts: The title, text, and button will appear to the left or right of your image without an overlap. This layout will display a larger image in comparison to your text.
Image Parallax Layouts: The title, text, and button appear to the left or right of your image with a scrolling animation.
Profile Text Layouts: Similar to the Text Left and Text Right layouts, the Profile Text layouts display your image to the left or right of your text, however the image is smaller in comparison to the text area.
Click save changes to apply the layout of your choice.
The Styling area allows you to customize the Space Below Blocks, Space Inside Blocks, and Flushing.
Space Below Blocks: Controls the amount of space before the next block begins.
Space Inside Blocks: Controls the amount of space at the top and bottom of a block.
Flushing: This choice only applies to the Image Parallax layouts. Turning Flushing on will flush your Text + Image block to fill the width of the screen, whereas turning Flushing off will contain your block in the center of your site.
You may customize the colors of your Text + Image block to be different from your global settings selections. Click on the color box to change your colors. You may select from your accent colors or pick a new color. Press OK followed by save changes when you are happy with your color selection.
You can add a background image to display behind your Text + Image block. You can upload your own custom background image or choose one from the Background Library. You can customize how the background image is displayed in the Background Settings.
Do not copy and paste your text from an external source (such as another website, Microsoft Word, Pages, etc.). Unintentional formatting can be included with what you paste, negatively impacting your text.
If copying and pasting are required, paste your text into Text Edit (on a Mac) or Notepad (on a PC) before pasting into the Text Editor.