The Zibster Website Package includes the Text Editor block, which allows you to add and style titles and text on your website. This guide will walk you through how to add, customize, and optimize your Text Editor blocks in Zibster.
STEP ONE
Log into your Zibster account and click on WEBSITE in the left-side menu.
STEP TWO
Select the page where you want to add a text block or create a new page.
On the right side of your screen, find the icon labeled "T EDITOR." Hover over it, then click and hold to drag the editor block to your desired location on the page. A teal-colored bar will indicate where the block will be placed once you release the mouse button.
For quick positioning at the bottom of the page, you can also click once on the "T EDITOR" icon.
STEP THREE
To add text, click inside the newly placed block or click the pencil icon in the upper right corner and select Advanced.
STEP FOUR
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 to generate text based on prompts you provide.
You get 50 Ask Zibster AI Requests each month that are included with your Zibster Website Package membership.
PRO TIP!
When copying and pasting text from external sources (like websites or Word documents), formatting issues may occur. To avoid this, use the following keyboard shortcuts to paste as plain text:
- Mac Users: Command + Shift + V
- Windows/PC Users: Ctrl + Shift + V
ASK ZIBSTER AI
Zibster AI can help you generate text. Simply click "Ask Zibster AI" and provide a prompt. Here are a few example prompts:
- Write a blog post for a [business type] that provides helpful tips or insights related to [specific topic], aimed at educating potential clients
- Write a blog post for a [business type] that explains how to choose the right service for specific needs, aimed at educating potential clients on the benefits of each option
- Write a blog post for a [business type] that offers practical tips clients can use between appointments to maintain their results and stay engaged with your services
Click on the Generate Text button to have the copy created by Zibster AI.
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.
ADDING A BUTTON TO YOUR TEXT EDITOR BLOCK
You can easily add a button to the text editor block with various action options:
- NONE: The button does not link anywhere and is for visual purposes only.
- EXTERNAL LINK: Direct users to resources outside your website.
- PAGE: Link to another page within your website.
- FORM: Connect to a custom form created in the FORM BUILDER.
- MARKETING: Link to a campaign or landing page created in the MARKETING tool.
- FILE: Open a file (PDF, JPG, PNG, GIF) uploaded to the FILES section.
- PHONE: Link to a phone number for click-to-call functionality.
- EMAIL: Open the user's default mail client to send an email.
- ADDRESS: Open a location in Google Maps.
- VIDEO: Embed a video from YouTube, Vimeo, or other video players.
- POP-UPS: Trigger a pop-up for promotions, discounts, or newsletter sign-ups.
- VIDEO: Embed a video from YouTubr, Vimeo, or other 3rd party video players.
- POP-UPS: Trigger a pop-up with promotions, discounts, or newsletter sign-ups.
LAYOUT OPTIONS FOR TEXT EDITOR BLOCK
Choose from these layout options for your text block:
- One Column: Displays text in a single block.
- Two Columns: Breaks text into two blocks.
- Editorial Left: Ideal for callouts or emphasized text like quotes or testimonials.
- Editorial Top: Best for detailed content or sections you want to highlight.
STYLING
Depending on the layout you've selected, you can control appearance of your text editor block with the following options:
- Text Wrap: Wrap your text content around your title.
- Title Alignment: Align the title left, right, or center.
- Button Alignment: Align the button left, right, or center.
- Editor Left-Right Padding: Adjust space to the left and right of the block.
- Space Below Blocks: Set space before the next block begins.
- Space Inside Blocks: Set space at the top and bottom of the block.
After setting your styling options, click Save Changes to apply them.
COLORS
You can override your global color scheme to customize the colors used in your text block. Adjust the following:
- Title Color: Font color of the title section.
- Text Color: Font color in the text section.
- Button Text Color: Font color on the button.
- Button Background Color: Background color of the button.
- Background Color: Background color of the text editor block.
Click Save Changes to apply your color customizations.
BACKGROUND
You can add a background image to your text editor block. Customize how the image is displayed with these options:
- Tile: Repeat the image to fill the background.
- Top Left: Align the image to the top left.
- Centered: Center the image.
- Cover: Scale the image to cover the entire background.
Click Save Changes to apply your background settings.
FONTS
Override the global fonts for your text block by adjusting the following:
- TITLE
- PARAGRAPH
- HEADING H1
- HEADING H2
- HEADING H3
- BUTTON TEXT
Adjust the font, size, letter spacing (kerning), and line height as needed. Click Save Changes to apply your font customizations.
ANIMATIONS
You can choose from the following 5 options for BUTTON HOVER ANIMATIONS:
- NONE
- FILL
- OVERLAY
- SCALE
- ARROWS
Click on SAVE CHANGES to apply your button hover animation selection.
