The Text + Image block allows you to create dynamic content easily by incorporating an image with your text. You can enhance user engagement by including a call-to-action button below your text content. This guide will walk you through the different options available for the Text + Image block in your Zibster Website Builder.
STEP ONE
Log into your Zibster account and click on WEBSITE in the left-side menu.
STEP TWO
In the Block Editor on the right side of the screen, click on the Text + Image block to add it to your page.
STEP THREE
Once the TEXT + IMAGE block has been added to your page, click inside the block to customize it.
ADDING TITLE + TEXT
You can now add a Title and Text to the block using the editor. If you don’t have content prepared, click on "Ask Zibster AI" in the top-right corner of the text editor, and it will help you generate text based on prompts you provide.
PRO TIP!
When copying text from external sources (like Word documents or websites), use the following keyboard shortcuts to avoid formatting issues:
- Apple/MAC: Command + Shift + V
- Windows/PC: Ctrl + Shift + V
Ask Zibster AI
Zibster AI is built into the text editor and can generate text for you. Simply click "Ask Zibster AI" and provide a prompt. Here are a few example prompts:
- "Write a bio for a senior photographer with 10 years of experience based in Boston."
- "Help me write a personal and approachable 'About Me' page, focusing on my passion for photography and client connection."
- "Create an engaging description for my photography services, emphasizing my style and experience."
Type in your Zibster AI prompt and click on GENERATE TEXT to create the initial draft of your copy.
Once the AI generates the text, you can review it, make edits, and click Save Changes to finalize it. If you’re not satisfied, you can submit another prompt to the AI.
ADDING AN IMAGE
Next, add an image to the block. You may upload a new image, insert an image from the clipboard, or use a stock image.
The ALT TEXT section allows you to include alternative text (also known as an alt tag) for the image you've uploaded to your Text + Image block. If needed, adjust the focal point of the image and add alt text. Click Save Changes to finalize your image selection.
ADDING A BUTTON
You can use the button to provide your website visitors a call-to-action after reading your text content. Your button can be linked in various ways:
- NONE: Your button will not link anywhere.
- EXTERNAL LINK: Direct your clients to helpful resources outside your website.
- PAGE: Direct your visitors to an existing page on your website.
- FORM: Connect to a custom form you’ve created in the Form Builder.
- MARKETING: Direct users to a campaign or landing page created in the Marketing tool.
- FILE: Allow users to open a PDF, JPG, PNG, or GIF file uploaded to the Documents area.
- PHONE: Connecting your button to a phone number allows users to click to call you.
- EMAIL: Connecting your button to an email address opens the user's default mail client to send you an email.
- ADDRESS: Opens a location in Google Maps for easy navigation.
- VIDEO: Embed a video from YouTube or Vimeo to play in a lightbox.
- POP-UPS: Trigger a pop-up for marketing tools such as videos or forms.
LAYOUT OPTIONS
The Text + Image block offers over 30 different layouts to display the text, image, and button you’ve added. Some layout options include:
- Text Overlay Layouts: Title, text, and button overlay a portion of your image, with adjustable background opacity.
- Text Left/Right Layouts: Title, text, and button appear to the left or right of your image without overlap.
- Image Parallax Layouts: Title, text, and button with a scrolling animation.
- Profile Text Layouts: Smaller image displayed next to text.
- Image Overlay Layouts: Innovative designs with a magazine-like flair.
Click Save Changes to apply your chosen layout.
STYLING OPTIONS
Customize options depending on the layout you’ve selected, including:
- Text Wrap: Wrap text around your image for non-overlay layouts.
- Title Alignment: Align the title section left, right, or center.
- Button Alignment: Align the button left, right, or center.
- Image Border Thickness: Choose between Ultra Thin, Thin, Medium, and Thick for your image border.
- Space Below Blocks: Control the space before the next block begins.
- Flushing: Fill the screen width or center the block for Image Parallax layouts.
Click Save Changes to apply your styling options.
COLOR OPTIONS
Customize the colors of your Text + Image block independently from your global settings. Select from your accent colors or pick a new color. Click OK, then Save Changes when you are satisfied with your selection.
BACKGROUND OPTIONS
You can add a background image to display behind your Text + Image block. Upload your own custom background image or choose one from the Background Library. Customize how the background image is displayed in the Background Settings. You can choose from the following background settings:
- TILE: Will tile your image to fill the background
- TOP LEFT: Will align your image to the top left
- CENTERED: Will align your image at the center of the available space
- COVER: Will scale your image to be as large as possible to completely cover the background
Click on Save Changes to apply your background settings.
FONTS
Easily customize the fonts used in your Text + Image blocks to override your global font settings. Change the font, size, letter spacing (kerning), and line height for:
- TITLE
- PARAGRAPH
- HEADING H1
- HEADING H2
- HEADING H3
- BUTTON TEXT
Click Save Changes at the bottom of the control panel menu to apply your changes.
ANIMATIONS
You can choose from any of the following BUTTON HOVER ANIMATIONS:
- NONE
- FILL
- OVERLAY
- SCALE
- ARROWS
Click on SAVE CHANGES to apply your selection for your button hover animations.
