How to Use the Text Editor Block in Zibster
Overview
The Text Editor Block lets you add and format written content on your Zibster website. You can use it for page introductions, business bios, service descriptions, pricing information, policies, calls to action, and other text-focused content.
You can start with a blank block or choose a predesigned Text Editor Block. Predesigned options include starter title and text content based on the design you select and information in your Business Profile. After adding the block, you can customize the text, layout, colors, fonts, background, button, spacing, and other design settings.
This guide explains how to add a Text Editor Block, edit its content, customize its appearance, manage the block, and delete it when it is no longer needed.
What You Can Use a Text Editor Block For
The Text Editor Block is a good choice whenever written content is the main focus of a section on your website.
You can use a Text Editor Block for:
- Page introductions and welcome messages
- About or business bio content
- Service descriptions
- Session details and pricing information
- Policies and instructions
- Calls to action with a button
- Headings and supporting text between other website blocks
- Contact or booking information
- Testimonials or client quotes
- SEO-focused page content
- Content written or rewritten with Ask Zibster AI
If you want text and an image to appear together as part of the same block, consider using a Text + Image Block instead.
STEP ONE
Log in to your Zibster account and click WEBSITE in the left-side menu.
This opens the Website Builder, where you can manage your website pages and content blocks.
STEP TWO
Click the page where you want to add the Text Editor Block.
The selected page will open in the Website Builder, and the available block types will appear in the toolbar on the right side of the screen.
STEP THREE
Locate T EDITOR in the block toolbar on the right side of the Website Builder.
Click T EDITOR once to automatically add a new Text Editor Block as the last block on the page.
If you want to add it in a specific location, click and hold T EDITOR, drag it to the position you want on the page, and release it.
STEP FOUR
The SELECT EDITOR BLOCK panel will open on the right side of the Website Builder.
Select BLANK if you want to start with an empty Text Editor Block, or choose one of the predesigned EDITOR options.
BLANK gives you an empty block that uses your website's existing design settings as the starting point.
If you select a predesigned Text Editor Block, Zibster adds starter title and text content based on the design you selected and information from your Business Profile. You can edit, replace, or remove any of this content after the block is added.
Scroll through the available designs, then click SELECT on the option you want to use.
STEP FIVE
The EDIT EDITOR panel will open on the right side of the Website Builder.
If you selected BLANK, enter a heading in the TITLE field if needed and add your main content in the TEXT editor.
If you selected a predesigned block, review the title and text Zibster added for you. Edit, replace, or remove the content as needed for your website.
Use the formatting toolbar to style text, create lists, adjust alignment, add links or images, and choose paragraph or heading styles.
You can switch between the VISUAL and HTML tabs. Use VISUAL for standard editing. Use HTML when you need to view or edit the HTML within the text field.
You can also click ASK ZIBSTER AI to create or improve content and provide custom instructions for what you want Zibster AI to change.
FINAL STEP
Review your content and click SAVE CHANGES.
Your changes are applied to your website when they are saved. You do not need to publish the Website Builder separately.
Formatting Text
The Text Editor Block includes formatting tools for:
- Bold, italic, and underline
- Bulleted and numbered lists
- Text alignment
- Links
- Images
- Paragraph and heading styles
Use the VISUAL tab for standard editing or HTML when you need to work directly with the HTML inside the text field.
Adding Links to Text
Highlight the words you want visitors to click, then click the link icon in the formatting toolbar.
Enter the destination in the URL field. The selected words will appear in TEXT TO DISPLAY.
Use TARGET to control how the link opens. NONE opens the destination in the same browser window, while NEW WINDOW opens it in a new browser tab or window.
Click OK, then click SAVE CHANGES when you are finished.
Adding an Image Inside the Text Editor
You can embed an image or animated GIF directly inside the Text Editor Block when you need the image to appear within your formatted text.
For most website layouts, however, we recommend using a Text + Image Block, Images Block, or List Block when images are an important part of the design. These blocks provide more control over how images are positioned and displayed within your website layout.
See How To Add an Image or GIF Inside a Text Editor Block in Zibster for complete instructions.
Using Ask Zibster AI
Click ASK ZIBSTER AI to create content or improve text in the block.
Zibster AI can use information from your Business Profile to help create content that reflects your business, services, location, style, and approach. You can also provide custom instructions when you want a specific change, such as making the content shorter, warmer, more professional, or focused on a particular service.
Each use of Ask Zibster AI to generate or rewrite content counts as one AI request.
AI-generated content remains fully editable. Review it carefully before saving, especially when it includes pricing, policies, services, locations, or other business-specific information.
Managing Your Text Editor Block
The icons along the right side of the Text Editor Block provide direct access to its main settings, including TEXT, BUTTON, LAYOUT, STYLING, COLORS, BACKGROUND, FONTS, and ANIMATION.
You can also click the pencil icon on the block to open its management menu.
Available options include:
- COPY: Creates a duplicate of the Text Editor Block directly below the original. For complete instructions, see How to Move or Copy Blocks Between Pages.
- MOVE: Moves the block to another page or to a different position on the current page. For complete instructions, see How to Use the Move Function With Blocks in Your Zibster Website.
- RENAME: Changes the internal name of the block to make it easier to identify in the Website Builder. Renaming a block can also be useful when creating anchor links. For complete instructions, see How to Rename Blocks and Add Anchor Links.
- CHANGE LAYOUT: Opens the layout options for the block.
- ADVANCED: Opens the Text Editor Block editing controls.
- DELETE: Opens the confirmation panel for permanently deleting the block.
Deleting a Text Editor Block
To delete a Text Editor Block, click the pencil icon on the block and click DELETE.
The DELETE BLOCK panel will open and ask you to confirm the action.
Zibster warns that deleting the block cannot be undone. The Text Editor Block and all content within it will be permanently deleted and cannot be recovered.
Click YES, DELETE IT to permanently remove the block.
If you do not want to delete the block, click CANCEL or close the panel.
Important: Deleted Text Editor Blocks cannot be recovered. Make sure you no longer need the block or its content before confirming the deletion.
Adding a Button
Click BUTTON in the Text Editor Block settings to add a button to the block.
Enter the text you want visitors to see in the BUTTON TEXT field.
Next, use the LINK TO menu to choose what happens when a visitor clicks the button.
Available options include:
- NONE: Do not assign a link to the button.
- EXTERNAL LINK: Link to a website or URL outside your Zibster website.
- PAGE: Link to another page on your website.
- FORM: Link to a form in your Zibster account.
- MARKETING: Link to available content in Marketing.
- FILE: Link to a file stored in your account.
- PHONE: Create a click-to-call link.
- EMAIL: Open the visitor's default email application.
- ADDRESS: Open an address in a map application.
- VIDEO: Link to video content.
- POP-UPS: Open one of your website pop-ups.
- PRODUCT: Link directly to a product.
- SERVICE: Link directly to a service.
- SCHEDULER SERVICE: Link directly to a service available through Scheduler.
- MOOD BOARD: Link directly to a Mood Board project.
After you select the link type, complete any additional fields that appear for that option, then click SAVE CHANGES.
For complete instructions about each destination and how the Link Picker works, see How to Use the Link Picker in Zibster.
Changing the Layout
Click LAYOUT to change how the content inside the Text Editor Block is arranged.
The available layouts include:
- One Column
- Two Column
- Editorial Left
- Editorial Top
- Overlay One Column
- Overlay Two Columns
- Overlay Border
- Contemporary Border
- Contemporary Title
- Contemporary Horizontal
- Contemporary Center
- Contemporary Vertical
Select the layout you want and click SAVE.
Changing the layout rearranges the existing content. It does not change the block into a different type of Website Builder Block.
Styling
Click STYLING to adjust the spacing and positioning of elements within your Text Editor Block.
Available settings vary depending on the layout you are using.
Options may include:
- OVERLAY OPACITY: Adjust the transparency of the overlay when supported by the layout.
- TEXT WRAP: Allow paragraph text to wrap beneath the title when supported.
- TITLE ALIGNMENT: Align the title to the left, center, or right.
- BUTTON ALIGNMENT: Align the button to the left, center, or right.
- EDITOR LEFT/RIGHT PADDING: Adjust the space along the sides of the block.
- SPACE BELOW BLOCKS: Adjust the space between this block and the next block.
- SPACE INSIDE BLOCKS: Adjust the space at the top and bottom inside the block.
Click SAVE CHANGES when finished.
Color Options
Click COLORS to customize the colors used in your Text Editor Block.
The available settings can vary depending on the layout and button style you are using.
Options may include:
- TITLE COLOR: Controls the color of the block title.
- TEXT COLOR: Controls the color of the paragraph text.
- BACKGROUND COLOR: Controls the background color of the block.
- BUTTON TEXT COLOR: Controls the text displayed inside the button.
- BUTTON BORDER COLOR: Controls the button border.
- BUTTON CONTRAST COLOR: Controls the contrasting color used by supported button animations or styles.
- OVERLAY COLOR: Controls the overlay color for layouts that use an overlay.
- LINE COLOR: Controls decorative lines used by supported layouts.
You can select a color or enter a specific hexadecimal color value.
Click SAVE CHANGES to apply your color settings.
Background
Click BACKGROUND to control the background image used in your Text Editor Block.
Under BACKGROUND IMAGE, choose one of these options:
- NO BACKGROUND: Remove the background image from the block.
- CUSTOM BACKGROUND: Upload your own background image.
- BACKGROUND LIBRARY: Select an image from the Zibster Background Library.
For a custom background, Zibster accepts JPG or PNG files. Background images can be up to 3000 pixels wide by 1730 pixels high.
After choosing an image, use BACKGROUND SETTINGS to control how it displays.
Available options include:
- TILE: Repeat the image to fill the background.
- TOP LEFT: Align the image to the top-left of the block.
- CENTERED: Position the image in the center of the available space.
- COVER: Scale the image as large as needed to completely cover the background area.
Click SAVE CHANGES to apply your background settings.
FONTS
Click FONTS to customize the typography used in your Text Editor Block.
The Text Editor Block uses your website's global font settings by default. Changes made here override those global font settings for this individual block.
You can customize fonts for:
- Title
- Paragraph
- Heading H1
- Heading H2
- Heading H3
- Button Text
Depending on the text type, you can adjust the font family, size, letter spacing, and line height.
Click SAVE CHANGES when you are finished.
For complete step-by-step instructions, see How to Change Fonts on Text Editor Blocks.
Button Hover Animation
Click ANIMATION to choose the hover effect used by the button in your Text Editor Block.
Available options include:
- NONE: Do not apply a hover animation.
- FILL: Adds a fill effect when a visitor hovers over the button.
- OVERLAY: Applies an overlay effect on hover.
- SCALE: Applies a scaling effect when the button is hovered over.
- ARROWS: Adds an arrow-style hover effect.
Click SAVE CHANGES to apply your selection.
If your Text Editor Block does not contain a button, this setting does not affect the block.
For more information about button hover effects, see Adding Hover Animations to Your Buttons.
Using DuoBuild with the Text Editor Block
The Text Editor Block supports DuoBuild, which lets you place two supported blocks side by side.
DuoBuild is not a separate page template or setting.
Supported blocks include:
- Text Editor Block
- Text + Image Block
- Images Block
- List Block
- Banner Block
- Video Block
- Form Block
- Button Block
- HTML Block
Drag the Text Editor Block horizontally next to another supported block. When the side-by-side placement indicator appears, release the block.
Each block remains independent and keeps its own content and settings.
To return to a full-width layout, drag one of the blocks above or below the other.
For complete instructions, see DuoBuild Introduction.
What Your Website Visitors See
After you click SAVE CHANGES, the Text Editor Block appears on your website using the content, layout, fonts, colors, background, and other design settings you selected.
Visitors can read your text, follow any links you have added, and click the button if the block includes one. The button's destination depends on the option you selected under LINK TO.
Your Text Editor Block follows your website's global fonts and colors unless you override those settings within the individual block.
Helpful Notes
Predesigned Editor options are starting designs. They are separate from the layouts available under LAYOUT after the block has been added.
Different layouts may provide different styling and color controls. Review the available settings after changing your layout to make sure the block appears the way you want.
When copying text from Microsoft Word, another website, or another formatted source, paste without formatting whenever possible. This helps prevent unwanted fonts, colors, sizes, and spacing from carrying into your Text Editor Block.
Use Command + Shift + V on Mac or Ctrl + Shift + V on Windows.
Clicking SAVE CHANGES applies your updates to the website. You do not need to publish the Website Builder separately.
Want Professional Help with Your Zibster Website?
If you would like professional help creating or improving your Zibster website, Zibster offers Custom Website Design.
Need Help?
Support Hours: Monday to Friday, 9am to 6pm EST
Phone: 844.353.3412
Support Channels: Phone, Live Chat, Support Ticket
