How to Use the Text + Image Block in Zibster
Overview
The Text + Image Block lets you combine an image with written content in one section of your Zibster website. It is useful when your image and text support the same message, such as introducing your business, highlighting a service, explaining your process, or promoting an offer.
You can start with a blank block or one of 7 predesigned starting designs, choose from 36 layouts, and customize the text, image, styling, colors, background, fonts, and other settings. You can also add an optional call-to-action button and use ASK ZIBSTER AI to create or rewrite text and generate image alt text.
This guide walks you through adding and customizing a Text + Image Block in the Zibster Website Builder.
When to Use a Text + Image Block
A Text + Image Block is a good choice when written content and an image should work together within the same section of a page.
Common uses include:
- Introducing yourself or your business with a photo and bio
- Highlighting a service with an image and description
- Explaining your process or customer experience
- Promoting seasonal offers or specialty services
- Pairing a testimonial or story with an image
- Creating alternating image-and-text sections throughout a page
If your section is primarily written content, consider using a Text Editor Block. If images are the main focus, an Images Block may be a better choice. Use a Banner Block when you want a larger visual section, such as a hero image or promotional banner.
STEP ONE
Log into your Zibster account and click WEBSITE in the left-side menu.
This opens the Website Builder, where you can create pages and manage the blocks on your website.
STEP TWO
Choose the page where you want to add the Text + Image Block, or create a new page.
In the Block Editor on the right side of the screen, click TEXT + IMAGE.
STEP THREE
The SELECT TEXT IMAGE BLOCK panel opens on the right side of the Website Builder.
Choose Blank if you want to start with an empty Text + Image Block.
You can also choose one of the Text + Image 1 through Text + Image 7 predesigned starting designs. These provide sample content, imagery, and styling that you can replace and customize.
Click SELECT below the option you want to use.
You can continue changing the content, layout, and design after the block has been added to your page.
STEP FOUR
Add or edit the title and written content using the side menu.
If you selected a predesigned Text + Image Block, replace the sample content with your own text and use the available editing tools to format it.
When pasting text from another program or website, consider pasting it as plain text to help prevent hidden formatting from affecting the appearance of your website.
On a Mac, use Command + Shift + V.
On a PC, use Ctrl + Shift + V.
Click SAVE CHANGES when you are finished.
STEP FIVE
Add or replace the image in your Text + Image Block.
If you selected a predesigned starting design, a stock image may already be included. You can replace it with your own image, paste an image from your clipboard when available, or choose another image from the Stock Photos library.
After adding your own image, you can adjust the FOCAL POINT to control which part of the image remains visible when the image is cropped or displayed at different screen sizes.
Focal Point is not available for images selected from the Stock Photos library.
You can also add alt text to your image. Enter your own alt text or use ASK ZIBSTER AI to analyze the image and create a suggested description.
Alt text helps describe meaningful images for visitors using screen readers and can also help search engines understand the image.
Each time you use ASK ZIBSTER AI to generate alt text, it counts as 1 request toward your monthly AI request total.
Click SAVE CHANGES when you are finished.
STEP SIX
Use the Button settings in the side menu if you want to add an optional call-to-action button to your Text + Image Block.
Enter the text you want visitors to see in the BUTTON TEXT field, then use LINK TO to choose what happens when someone clicks the button.
If you leave BUTTON TEXT blank, no button will appear.
To remove an existing button, delete the text from the BUTTON TEXT field and click SAVE CHANGES.
Use clear button text that tells visitors what to expect, such as VIEW SERVICES, LEARN MORE, or BOOK NOW.
Click SAVE CHANGES when you are finished.
FINAL STEP
Review the completed Text + Image Block on your page.
Check that:
- Your text is easy to read.
- The important part of your image remains visible.
- The block displays properly on both desktop and mobile.
- Any button you added opens the correct destination.
Click SAVE CHANGES after making any final adjustments.
Your saved changes are applied to your Zibster website, so there is no separate publish button.
Blank and Predesigned Starting Designs
When you first add a Text + Image Block, Zibster lets you choose between a blank block and 7 predesigned starting designs.
Available options include:
- Blank
- Text + Image 1
- Text + Image 2
- Text + Image 3
- Text + Image 4
- Text + Image 5
- Text + Image 6
- Text + Image 7
The Blank option gives you an empty block to customize.
The numbered Text + Image options provide predesigned starting points with sample content, imagery, and styling.
Starting designs are different from the block's LAYOUT setting. After adding the block, you can change the Layout to control how the image and written content are positioned.
Text + Image Layout Options
Zibster includes 36 layouts for the Text + Image Block.
Each layout changes how the image and written content are positioned and displayed. The selected layout can also affect which settings are available under STYLING.
For complete instructions on changing layouts, see How to Change the Text + Image Block Layout.
Text Overlay Layouts
These layouts place the written content over the image.
- Text Overlay Left
- Text Overlay Right
- Text Overlay Center
- Text Overlay Bottom
- Text Overlay Center Left
- Text Overlay Center Right
- Text Circle Overlay Left
- Text Circle Overlay Right
Side-by-Side Text and Image Layouts
These layouts position the image and written content beside each other using different image sizes, shapes, and cropping styles.
- Text Left
- Text Right
- Profile Text Left
- Profile Text Right
- Image Square Left
- Image Square Right
- Image Circle Left
- Image Circle Right
- Image Large Left
- Image Large Right
- No Crop Image Center Left
- No Crop Image Center Right
Parallax Layouts
These layouts create a scrolling effect as visitors move through the page.
- Image Parallax Left
- Image Parallax Right
- Landscape Parallax Left
- Landscape Parallax Right
Image Overlay Layouts
These layouts use overlapping image and text treatments for a layered or editorial-style design.
- Image Overlay Text Left
- Image Overlay Text Right
- Image Overlay Left
- Image Overlay Right
- Image Overlay Top
- Image Border Text Bottom
- Image Overlay Bottom Left
- Image Overlay Bottom Right
- Overlay Split Left
- Overlay Split Right
- Overlay Box Left
- Overlay Box Right
Button Link Options
Buttons are optional on Text + Image Blocks. A button appears only when text is entered in the BUTTON TEXT field.
Use LINK TO to control what happens when a visitor clicks the button.
Available options include:
- None: The button does not open a destination.
- External Link: Opens a website or online resource outside your Zibster website.
- Page: Opens another page on your Zibster website or moves to a specific block using an anchor link.
- Form: Opens a form created in your Forms Dashboard.
- Marketing: Opens a supported campaign or landing page from the Marketing Dashboard.
- File: Opens a supported file uploaded to the Documents section of your Files area.
- Phone: Creates a click-to-call link using the phone number you enter.
- Email: Opens the visitor's default email application with your email address entered as the recipient.
- Address: Opens the address you enter in Google Maps.
- Video: Opens a supported YouTube or Vimeo video in a lightbox.
- Pop-Up: Opens an existing website pop-up, such as a promotion, announcement, discount, or newsletter signup.
When using External Link, enter the complete web address and test the button after clicking SAVE CHANGES.
Styling Options
Click STYLING in the Text + Image Block side menu to customize the appearance and spacing of the block.
The settings available under STYLING depend on the Layout you selected. Depending on the layout, available settings may include:
- Overlay Opacity: Adjusts the transparency of the overlay used with supported layouts.
- Title Alignment: Controls whether the title is aligned to the left, center, or right.
- Button Alignment: Controls the alignment of the optional button.
- Image Border Thickness: Adjusts the thickness of the border around the image when supported by the selected layout.
- Space Below Blocks: Controls the amount of spacing below the block. Options include None, Ultra Thin, Thin, Medium, and Thick.
- Space Inside Blocks: Controls the amount of spacing inside the block. Options include None, Ultra Thin, Thin, Medium, and Thick.
- Text Wrap: Allows text to wrap around the image on supported layouts.
- Flushing: Controls how supported layouts use the available page width.
Click SAVE CHANGES after making your adjustments.
For complete instructions on wrapping text around an image, see How to Use Text Wrap on the Text + Image Block.
If you want the text area of a supported Text + Image layout to be transparent, see How to Make a Text + Image Block Have a Transparent Text Background.
Color Options
Click COLORS in the Text + Image Block side menu to customize the colors used within the block.
Your Text + Image Block can use your website's global color settings, or you can customize individual colors for that specific block.
Select the color setting you want to change, choose one of your website's accent colors or select a different color, then click OK.
Click SAVE CHANGES when you are finished.
Block-level colors allow you to customize an individual section without changing the global colors used throughout the rest of your website.
Background Options
Click BACKGROUND in the Text + Image Block side menu to add or customize a background behind the block.
You can upload your own background image or choose an image from the Background Library. Use the available Background Settings to control how the background image is displayed.
Click SAVE CHANGES when you are finished.
Font Options
Click FONTS in the Text + Image Block side menu to customize the typography used within the block.
You can customize the following font areas:
- TITLE
- PARAGRAPH
- HEADING H1
- HEADING H2
- HEADING H3
- BUTTON TEXT
For each font area, you can adjust:
- Font
- Size
- Letter Spacing
- Line Height
These settings let you override your website's global font styling for the individual Text + Image Block.
Click SAVE CHANGES after making your adjustments.
For complete instructions, see How to Change Fonts on Text + Image Blocks.
Button Animations
Click ANIMATION in the Text + Image Block side menu to control how the optional button responds when a visitor hovers over it.
Available BUTTON HOVER ANIMATION options include:
- None: No hover animation is applied.
- Fill: Adds a fill-style animation when the visitor hovers over the button.
- Overlay: Adds an overlay-style hover effect.
- Scale: Changes the scale of the button during the hover effect.
- Arrows: Adds an arrow-style animation when the visitor hovers over the button.
Select the animation you want to use, then click SAVE CHANGES.
If your Text + Image Block does not include a button, this setting will not affect the block.
Using Ask Zibster AI
You can use ASK ZIBSTER AI to create new text or rewrite existing text in your Text + Image Block.
Click ASK ZIBSTER AI to have Zibster create new text or rewrite your existing content using information from your Branding Profile.
Your Branding Profile gives Zibster AI context about your business and brand so it can create content that better fits your website.
If you want to provide more specific instructions, click the text below ASK ZIBSTER AI to enter a custom prompt. A custom prompt can tell Zibster AI to focus on a particular service, audience, message, or writing style.
Each time you use ASK ZIBSTER AI to create or rewrite text, it counts as 1 request toward your monthly AI request total.
Review the generated text, make any changes you want, then click SAVE CHANGES.
Using Ask Zibster AI for Alt Text
You can also use ASK ZIBSTER AI to generate alt text for the image in your Text + Image Block.
Ask Zibster AI analyzes the image and creates a suggested image description. Review the generated alt text and make any changes needed before saving.
Each time you use ASK ZIBSTER AI to generate image alt text, it counts as 1 request toward your monthly AI request total.
Using Text + Image Blocks with DuoBuild
The Text + Image Block supports DuoBuild, a built-in layout feature in the Zibster Website Builder.
DuoBuild allows you to place two supported blocks side by side. When you drag a Text + Image Block next to another DuoBuild-compatible block, the two blocks snap into a two-column layout.
DuoBuild is limited to two blocks side by side. To separate a DuoBuild layout, drag either block up or down so it appears by itself again.
For complete instructions, see the DuoBuild Introduction Guide.
Helpful Notes
- A call-to-action button is optional. Leave BUTTON TEXT blank if you do not want a button to appear.
- To remove an existing button, delete the BUTTON TEXT and click SAVE CHANGES.
- The Blank option and 7 predesigned starting designs are different from the 36 Layout options available within the block settings.
- Styling options can vary depending on the selected Layout.
- Font controls are available for the same text areas across all Text + Image layouts.
- Your Text + Image Block can use your website's global styling or individual block-level settings.
- Review your page on both desktop and mobile after making significant layout or image changes.
- Use FOCAL POINT when an important subject needs to remain visible as your image adapts to different screen sizes.
- Focal Point is not available for images from the Stock Photos library.
- Add descriptive alt text when an image provides meaningful information to visitors.
- Using ASK ZIBSTER AI for block text and image alt text counts toward your monthly AI request total.
Want Help Building Your Website?
If you would rather have a professional help build or customize your Zibster website, learn more about We Build It For You or Custom Website Design.
Need Help?
Zibster Support Hours: Monday–Friday, 9am–6pm EST
Phone: 844.353.3412
Channels: Phone, Live Chat, Support Ticket
