Using the Text + Image Block
The Text + Image block lets you pair engaging text with a photo to create dynamic content. It's perfect for showcasing information, telling a story, or encouraging visitors to take action with a call-to-action (CTA) button.
In this guide, we’ll walk you through how to:
- Add and customize a Text + Image block
- Choose a layout
- Add your content, image, and CTA button
- Style and personalize the block
STEP ONE
Log into your Zibster account and click WEBSITE in the left-hand menu.
STEP TWO
Choose the page (or create a new page) where you want to use the Text + Image block. In the Block Editor on the right-hand side, click the TEXT + IMAGE block to add it to your page.
STEP THREE
SELECT A LAYOUT
Browse the library of professionally designed layouts and click SELECT on the one you want to use.
- Blank layouts use your website’s global styling.
- Predesigned layouts include their own design settings to match the preview exactly.
STEP FOUR
ADD YOUR CONTENT
Add a Title and Text in the side panel.
If you selected a predesigned layout, it will contain placeholder content. Just click the text to start editing.
When you’re done, click SAVE CHANGES to apply.
PRO TIP!
When pasting text from outside sources (like Word or websites), use these keyboard shortcuts to strip hidden formatting:
- Mac: Command + Shift + V
- PC: Ctrl + Shift + V
STEP FIVE
ASK ZIBSTER AI
Need help writing? Use the built-in Zibster AI tool!
Click ASK ZIBSTER AI, enter a prompt, and press GENERATE TEXT.
Here are a few example prompts:
- “Write a bio for a senior photographer with 10 years of experience in Boston.”
- “Create a friendly About Me page focused on my passion for photography and connecting with clients.”
- “Describe my photo services highlighting my style and professionalism.”
Edit the generated content as needed, then click SAVE CHANGES.
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.
STEP SIX
ADD AN IMAGE
If you selected a predesigned block, a stock image will be in place that you can keep or replace.
You can upload your own photo, insert one from your clipboard, or choose a different stock image.
You can also:
- Adjust the image focal point
- Add alt text (Ask Zibster AI will automatically scan your image and create a description of it for you).
Click SAVE CHANGES when finished.
STEP SEVEN
ADD A BUTTON
Add a call-to-action (CTA) button under your text to guide visitors to the next step. You can link your button in 10 different ways:
- None – No link
- External Link – Link to another website
- Page – Link to another page or specific block on another page in your website
- Form – Link to a form created in the FORM BUILDER
- Marketing – Link to a campaign or landing page
- File – Link to a file (PDF, JPG, PNG, GIF)
- Phone – Click-to-call functionality
- Email – Opens a new email to your address
- Address – Opens a location in Google Maps
- Video – Embed a video (YouTube/Vimeo)
- Pop-Up – Trigger a marketing pop-up (like a form or video)
LAYOUT OPTIONS
There are over 30 layout styles to choose from:
Text Overlay Layouts – Text appears over the image. You can adjust background opacity.
- Left, Right, Center, Bottom
- Center Left, Center Right
Text Left/Right Layouts – Text sits beside the image. The image appears larger.
- Text Left, Text Right
Image Parallax Layouts – Adds a scrolling animation.
- Image Parallax Left, Right
- Landscape Parallax Left, Right
Profile Text Layouts – Similar to Left/Right layouts, but the image is smaller.
- Profile Text Left, Right
Image Overlay Layouts – Stylish magazine-inspired designs.
- Overlay Text Left, Right
- Overlay Left, Right, Top, Bottom Left, Bottom Right
- Border Text Bottom
Other Layouts
- Square or Circle Left/Right
- No Crop Center Left/Right
STYLING OPTIONS
You can customize your block’s appearance, these options may vary depending on the layout you've selected:
- Overlay Opacity - Controls the overlay opacity for the block
- Text Wrap – Wrap text around the image
- Title & Button Alignment – Left, right, or center
- Image Border Thickness – Ultra Thin, Thin, Medium, or Thick
- Spacing – Adjust space above and inside the block
- Flushing (Parallax layouts only) – Choose full-width or centered layout
COLOR OPTIONS
You can customize colors for your Text + Image block separately from your global settings.
Click the color box to change your colors. You may select from your accent colors or pick a new custom color. Press OK and then SAVE CHANGES when done.
BACKGROUND OPTIONS
You can add a background image to display behind your Text + Image block.
Upload your own image or choose one from the Background Library. Customize how it displays 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
You can override your global font settings for this block. You may change the font, font size, letter spacing (kerning), and line height for:
- Title
- Paragraph
- Heading H1
- Heading H2
- Heading H3
- Button Text
Click SAVE CHANGES to apply.
ANIMATIONS
Choose a hover animation for your button:
- Fill
- Overlay
- Scale
- Arrows
Click SAVE CHANGES to apply.
