MENU

Website Builder Overview

By: Zibster Support Hub

Zibster Website Builder Overview and Getting Started Guide

Overview

The Zibster Website Builder gives you the tools to create, organize, and customize your website without writing code. Your website contains pages, and each page uses blocks to display text, images, forms, products, services, Mood Boards, and other content.

This guide explains how the Website Builder is organized and introduces its primary page, block, navigation, design, tracking, and preview tools. You will also find links to detailed guides for each feature.

Prerequisites

Use a desktop or laptop computer with a mouse or trackpad when organizing pages, navigation items, or blocks. Some drag-and-drop Website Builder controls are not supported on phones or tablet touchscreens.

How the Zibster Website Builder Works

The Zibster Website Builder uses the following structure:

  • Your website contains pages.
  • Pages contain blocks.
  • Blocks contain content such as text, images, forms, products, services, or Mood Boards.
  • Your template controls the website’s overall design framework.
  • Global design settings control colors, fonts, spacing, backgrounds, animations, and other site-wide styles.
  • Page settings apply only to the page currently open.
  • Advanced block settings customize an individual block.

Changes made directly to pages and blocks are automatically saved and applied to your website. There is no separate publish button.

When a settings panel includes SAVE CHANGES, click it to apply your selections before closing the panel.

Connecting your domain and launching your website are separate from building and editing your website.

Getting Started

Log in to your Zibster account and click WEBSITE in the left-side menu. The Website Builder will open under BUILDER.

If you have a new or eligible Zibster account, the Zibster AI Website Creator may guide you through creating an initial website draft.

During setup, you can:

  • Select your website template
  • Upload your logo
  • Upload your images
  • Add your business profile information

The initial draft takes approximately 10 minutes to generate. After it is ready, you can edit or replace its pages, content, images, design, and settings through the Website Builder.

For complete instructions, see Getting Started with the Zibster AI Website Creator.

How the Website Builder Is Organized

The BUILDER section opens by default when you access the Website Builder.

The Website Builder contains five primary sections across the top of the control panel:

  • BUILDER: Manage pages, blocks, navigation, site links, website icons, and your footer.
  • DESIGN: Select a template and customize the overall appearance of your website.
  • SETTINGS: Manage 301 redirects and Blog Widgets.
  • TRACKING: Manage your sitemap, website title, Google Analytics, and website-wide tracking code.
  • VIEW SITE: Preview your website on desktop, tablet, and mobile.

Under BUILDER, your pages and website sections appear on the left, the selected page and its content appear in the center, and the available Website Builder blocks appear on the right.

Click a page in the left-side panel to open it. The selected page is highlighted, and its name and URL appear above the page content.

The COPY, SEO, and SETTINGS tools in the upper-right corner apply to the page currently open. The AUTOSAVED status shows when your latest page changes were saved.

Adding a New Page

Click NEW PAGE above your page list, then select NEW PAGE.

The guided Page Creation process will open. It includes three sections:

  1. SELECT YOUR PAGE TYPE
  2. PAGE DETAILS
  3. UPLOAD YOUR IMAGES

Select Your Page Type

Start by selecting the type of page you want to create. Each page type includes a layout designed to help organize your content.

Use FILTER BY to browse layouts in the following categories:

  • HOME
  • ABOUT
  • SERVICES
  • CONTACT
  • LANDING PAGES
  • SOCIAL PAGES
  • UNDER CONSTRUCTION
  • OTHERS

Click SELECT beneath a layout to choose it, then click CONTINUE.

Enter the Page Details

Under PAGE DETAILS, enter the page information requested by the setup process, including the navigation name and visibility settings.

Click CONTINUE to move to the next section.

Upload Your Images

Under UPLOAD YOUR IMAGES, add the images you want to use with the selected page layout.

Complete the guided setup to create the page. The new page will appear at the bottom of your page list, where you can open it and customize its blocks, content, SEO, and settings.

You can also click SKIP SETUP if you do not want to continue through the guided Page Creation process.

For complete instructions, see How to Add New Pages to Your Zibster Website

Adding a Drop-Down Menu

A drop-down menu is a navigation container that holds related pages or links under one main label. The drop-down label opens the menu and does not lead to a page of its own.

Click NEW PAGE, then select DROP DOWN. Enter the navigation name, select the visibility, and click SAVE CHANGES.

To place a page or link inside the drop-down menu, click and hold the navigation item and drag it beneath the drop-down label. Release it when the drop-down highlights.

You can also drag pages and links out of a drop-down menu.

A drop-down menu cannot contain content blocks or another drop-down menu.

For complete instructions, see How to Create a Drop-Down Menu.

Adding a Link to Your Navigation

A navigation link directs visitors to another page, resource, or action.

Click NEW PAGE, then select LINK.

Enter the NAVIGATION NAME, select the PAGE VISIBILITY, and choose a destination under LINK TO.

Available link destinations include:

  • NONE
  • EXTERNAL LINK
  • PAGE
  • FORM
  • MARKETING
  • FILE
  • PHONE
  • EMAIL
  • ADDRESS
  • VIDEO
  • POP-UPS
  • PRODUCT
  • SERVICE
  • SCHEDULER SERVICE
  • MOOD BOARD

Additional settings appear based on the link type you select. Complete the required information and click SAVE CHANGES.

When linking to a page, you can direct visitors to the top of the page or to a specific named block on that page.

For complete instructions, see How to Add a Navigation Menu Link.

Reordering Pages and Navigation Items

Click and hold the page, link, or drop-down menu you want to move. Drag it to the preferred location in your navigation and release it.

You can also drag pages and links into or out of a drop-down menu.

Drag-and-drop navigation editing requires a desktop or laptop computer with a mouse or trackpad.

For complete instructions, see How to Reorder Pages.

Page Management Tools

When you open a standard page under BUILDER, three page-management tools appear in the upper-right corner:

  • COPY
  • SEO
  • SETTINGS

These tools apply only to the page currently open.

Copying a Page

Click COPY to create a new page based on the page currently open.

The COPY PAGE panel allows you to:

  • Enter a name for the copied page
  • Include the existing blocks and their content
  • Copy the page structure without its existing content
  • Select the page visibility

Click CREATE COPY to add the copied page to your website.

If you copy a page inside a drop-down menu, the copied page appears directly beneath the original page inside the same drop-down menu.

Copying a page can help you create similar service pages, location pages, seasonal pages, or multiple pages that use the same structure.

For complete instructions, see How to Create a Copy of a Page on Your Zibster Website.

Managing Page SEO

Click SEO to manage information that helps search engines understand the page.

The Page SEO panel includes:

  • METAS: Manage the page’s meta title, meta description, meta keywords, and search engine preview.
  • FRIENDLY URL: Review or customize the URL slug that appears after your domain name.
  • TRACKING: Add tracking code that applies only to the current page.
  • SCHEMA: Add structured data that helps search engines understand the page’s content.

You can use ASK ZIBSTER AI under METAS to generate suggested metadata based on the page content or your custom instructions.

Under SCHEMA, click ASK ZIBSTER AI to generate schema markup based on the content displayed on the page.

Review AI-generated metadata and schema before saving your changes.

Changing a Friendly URL changes the page address. If the previous URL has already been shared or indexed by search engines, create a 301 redirect from the previous URL to the new one.

For complete instructions on metadata, Friendly URLs, page tracking, and schema, see How to Customize SEO for Pages.

Managing Page Settings

Click SETTINGS to control the display and access settings for the page currently open.

The Page Settings panel includes:

  • NAVIGATION NAME: Changes the page name displayed in your website navigation.
  • PAGE VISIBILITY: Controls whether the page appears in your navigation and whether its URL remains accessible.
  • PAGE PASSWORD: Adds an optional password that visitors must enter to access the page.
  • DISPLAY HEADER: Controls whether the website header appears on the page.
  • DISPLAY FOOTER: Controls whether the website footer appears on the page.

Page visibility works as follows:

  • VISIBLE: Displays the page in your navigation and allows visitors to access it.
  • HIDDEN: Removes the page from your navigation, but visitors can still access it using the direct URL.
  • DISABLED: Removes the page from your navigation. Anyone who visits its URL sees a 404 Page Not Found message.

Selecting NO under DISPLAY HEADER hides the logo, navigation menu, site links, and social media icons from that page.

Click SAVE CHANGES after updating the page settings.

Adding and Editing Website Blocks

Every standard website page is built using blocks. Blocks allow you to add and arrange content without writing code.

The block menu appears on the right side of the BUILDER. Click a block type to add it to the bottom of the page.

You can also drag a block from the menu into a specific location. A placement line shows where the new block will be added.

Zibster includes 19 Website Builder block types:

Managing an Existing Block

Click directly on a block to edit its content.

Click the pencil icon in the upper-right corner of a block to open its management menu. The available options depend on the selected block type and may include:

  • COPY: Creates a copy of the block and its content.
  • MOVE: Moves the block to another page or to the top or bottom of the current page.
  • RENAME: Changes the block’s internal name. This name is also used in the block anchor-link selector.
  • CHANGE LAYOUT: Displays the layouts available for blocks that support more than one layout.
  • ADVANCED: Opens the block’s advanced content, design, and display settings.
  • DELETE: Permanently removes the block and its content.

Renaming a block does not add or change a visible heading on your website. Use a Title Block or a heading inside a supported text area when you want visitors to see a title.

Deleted individual blocks cannot be restored through DELETED PAGES.

Using DuoBuild

DuoBuild allows two supported blocks to appear side by side.

Drag one supported block beside another until the DuoBuild placement indicator appears, then release it. The blocks display in two columns on larger screens and automatically adjust for smaller screens.

For complete instructions, see How to Use DuoBuild.

Builder Shortcuts

The shortcuts menu appears near the lower-right corner of the Builder and can make longer pages easier to manage.

Available shortcuts include:

  • UP ARROW: Moves to the top of the page.
  • DOWN ARROW: Moves to the bottom of the page.
  • COLLAPSE ICON: Collapses all blocks on the page.

You can also use the collapse icon on an individual block to collapse or expand it.

Collapsing blocks only changes how they appear inside your control panel. It does not hide or remove content from your website.

Managing Site Links and Website Icons

Site links, social media icons, the website search icon, and the shopping cart icon are managed from the BUILDER.

Look beneath your website pages in the navigation panel on the left and click SITE LINKS / ICONS.

The panel contains three sections:

  • SITE LINKS
  • SOCIAL MEDIA
  • SEARCH / CART

Site Links

Site links provide quick access to important information or actions. Depending on your template, they may appear in the website header or another supported area.

Site links can connect visitors with:

  • A website page
  • A phone number
  • An email address
  • Business hours
  • A physical address
  • A call-to-action button

Click NEW SITELINK to create a site link.

Existing site links display their link type, destination, label, and value. Click an existing item to edit it.

To remove one or more site links, select the corresponding checkbox and click DELETE.

For complete instructions, see What Are Site Links?.

Social Media Icons

Click SOCIAL MEDIA to add or update links to your social media profiles.

When you configure a supported social media profile, its icon can appear in the header or another supported area of your website. Visitors can click the icon to open the connected profile.

For complete instructions, see How to Add Social Media Icons.

Search and Shopping Cart Icons

Click SEARCH / CART to control whether the search and shopping cart icons appear and where they are displayed.

Under DISPLAY SEARCH, select:

  • NO: Does not display the search icon.
  • WITH SOCIAL MEDIA ICONS: Displays the search icon alongside your social media icons.
  • WITH SITE LINKS: Displays the search icon alongside your site links.

Under DISPLAY CART, select:

  • NO: Does not display the shopping cart icon.
  • WITH SOCIAL MEDIA ICONS: Displays the shopping cart icon alongside your social media icons.
  • WITH SITE LINKS: Displays the shopping cart icon alongside your site links.

The search icon allows visitors to search supported website content. The shopping cart icon gives customers access to their cart while shopping through your website.

Click SAVE CHANGES after selecting your display options.

For complete instructions, see How to Add a Search Bar and Shopping Cart to Your Website.

Understanding the Website Header

Your website header commonly contains your logo, navigation menu, site links, social media icons, search icon, and shopping cart icon.

The selected template determines the general layout and placement of these items.

You can:

  • Manage the logo under DESIGN
  • Manage site links and icons under SITE LINKS / ICONS
  • Manage pages and navigation under BUILDER
  • Hide the complete header from an individual page using DISPLAY HEADER under the page’s SETTINGS

Editing Your Website Footer

The footer appears at the bottom of your website and can display information visitors may need from any page, including:

  • Website navigation
  • Contact information
  • Business hours
  • Social media icons
  • Newsletter sign-up forms
  • Policies and legal information
  • Other important links

To edit the footer, look beneath your pages in the left navigation panel and click FOOTER, located directly below SITE LINKS / ICONS.

Available footer blocks include:

Click a footer block type to add it to the bottom of the footer, or drag it into a specific location.

Click an existing footer block to edit it. You can also use its pencil menu to access the available management options.

Drag footer blocks up or down to change their order. Supported footer blocks can also appear side by side.

Footer changes apply everywhere the footer is displayed. You can hide the footer from an individual page using the page’s DISPLAY FOOTER setting.

For complete instructions, see How to Set Up Your Website Footer.

Restoring Deleted Pages and Navigation Items

When you delete a page or navigation item, Zibster may move it to DELETED PAGES so you can restore it if needed.

Click DELETED PAGES beneath FOOTER in the navigation panel.

Zibster stores the 15 most recently deleted items. As you delete additional items, the oldest entries are removed from the recoverable list.

The DELETED PAGES panel displays each item’s name and the date it was deleted.

To restore an item, select the checkbox beside it and click RESTORE PAGE.

To permanently remove an item, select its checkbox and click DELETE FOREVER. Permanently deleted items cannot be restored through the Website Builder.

The Deleted Pages area does not restore an individual block deleted from an existing page.

For complete instructions, see How to Recover a Deleted Page from Your Zibster Website.

Customizing Your Website Design

Click DESIGN at the top of the Website Builder to manage the overall appearance of your website.

The Design area displays your current template and a live preview of your website. Use the desktop, tablet, and mobile icons above the preview to review how the design appears at different screen sizes.

Click EDIT DESIGN SETTINGS to open the global design editor.

Changing Your Website Template

Your template controls the website’s overall design framework, including the menu style, logo placement, site width, header structure, footer structure, and other high-level design elements.

Changing your template does not delete your:

  • Pages
  • Blocks
  • Block content
  • Uploaded images
  • Files
  • Navigation structure

You can preview a template using your existing website content before applying it.

When adding a template, you can choose whether to keep your current fonts, colors, and styling or use the new template’s default design settings.

Your live website does not change until you click SAVE to apply the selected template.

For complete instructions, see How to Change Your Template in Zibster.

Global Design Settings

The EDIT DESIGN SETTINGS area includes:

  • LOGO: Manage the logo, favicon, compact logo, and other available branding images.
  • COLORS: Customize your global website color palette.
  • FONTS: Choose the fonts used throughout your website.
  • STYLING: Adjust content width, spacing, padding, and other global layout settings.
  • GRAPHICS: Customize design elements used for icons, forms, and buttons.
  • SITE BG: Customize the background used across your website.
  • FOOTER BG: Customize the background displayed behind your footer.
  • CSS/JS: Add custom CSS or JavaScript.
  • DETAIL PAGE LAYOUTS: Customize supported Blog, Products, Services, and Scheduler detail pages.
  • ANIMATIONS: Manage block-load, image-hover, and button-hover animations.

These settings establish the global appearance of your website. Some supported blocks also allow you to override selected global settings at the individual block level.

Logo and Branding

Under LOGO, select how the website uses your account branding:

  • AUTO: Uses the branding configured for your Zibster account.
  • CUSTOM: Uses branding selected specifically for this website.

Depending on your template, this area may also include your standard logo, favicon, compact logo, and other logo placements.

Colors, Fonts, Styling, and Graphics

Use the following guides for complete instructions:

Website and Footer Backgrounds

Use SITE BG to manage the background displayed across your website.

Use FOOTER BG to manage the background displayed behind the website footer.

For complete instructions, see:

Custom CSS and JavaScript

Use CSS/JS to add custom code to your website.

Custom code can affect the appearance or functionality of the entire website. Only add code from a source you trust. Zibster Support may not be able to troubleshoot or repair third-party custom code.

For more information, see How to Add Custom CSS to Your Zibster Website.

Detail Page Layouts

Use DETAIL PAGE LAYOUTS to customize the individual detail pages created by supported Zibster tools:

These settings affect the detail page opened when a visitor selects an individual blog post, product, service, or Scheduler service.

Website Animations

Use ANIMATIONS to manage the global animation settings for your website.

Available settings include:

  • BLOCK LOAD ANIMATION: Select NONE, FADE IN, or SLIDE UP.
  • BLOCK LOAD SPEED: Select SLOW, MEDIUM, or FAST.
  • IMAGE HOVER ANIMATION: Select NONE, SCALE, BLUR, SCALE BLUR, or BOUNCE.
  • BUTTON HOVER ANIMATION: Select NONE, FILL, OVERLAY, SCALE, or ARROWS.

Block-load animations apply globally and cannot be customized for individual blocks.

Image-hover and button-hover animations can be customized within individual supported blocks.

Click SAVE CHANGES after selecting your animation settings.

Managing Website Settings

Click SETTINGS at the top of the Website Builder to manage 301 redirects and blog widgets.

The Settings area contains two sections:

  • 301 REDIRECTS
  • BLOG WIDGETS
  • RESET WEBSITE

301 Redirects

Click 301 REDIRECTS to manage redirects for your website.

A 301 redirect automatically sends visitors and search engines from an old page URL to a new URL. Redirects are helpful when you change a page address or replace an older page and want visitors to reach the updated content.

Click NEW REDIRECT to create a redirect.

You can create 301 redirects after launching your website with a domain name.

For complete instructions, see How to Create 301 Redirects with Zibster.

Blog Widgets

Click BLOG WIDGETS to manage the additional navigation and information displayed with your blog posts.

Click NEW WIDGET to add a widget. Existing widgets appear in a list showing the WIDGET TYPE, LABEL, and VALUE.

Click an existing widget to edit it. To remove one or more widgets, select the corresponding checkbox and click DELETE.

Under DISPLAY RELATED POSTS, select:

  • YES: Displays related posts at the bottom of individual blog posts.
  • NO: Does not display related posts.

Click SAVE CHANGES after updating the related-post setting.

For complete instructions, see How to Add Blog Widgets.

Resetting The Website Builder

Eligible accounts that have not launched a website with a domain may have the option to reset the Website Builder and start again.

Resetting the Website Builder permanently deletes its existing pages and Builder content. This action cannot be reversed. Only reset your website when you are certain you no longer need the existing version.

For eligibility details and complete instructions, see How to Reset Your Zibster Website and Start Over.

Managing Tracking Settings

Click TRACKING at the top of the Website Builder to manage site-wide SEO, analytics, and tracking features.

The Tracking area includes:

  • SITEMAP: View your XML sitemap link and access instructions for submitting the sitemap to Google.
  • WEBSITE TITLE: Set the website name that may appear in search engines and as part of automatically generated page meta titles.
  • GOOGLE ANALYTICS: Add the tracking code provided by Google Analytics.
  • HEAD: Add approved code that needs to appear within the head section of your website.
  • BODY: Add approved code that needs to appear within the body of your website.

After making major website updates, you can resubmit your sitemap through Google Search Console to help Google discover the latest version of your website.

These advanced integrations are not required before you begin building your website.

Only add analytics or tracking code from a source you trust. Incorrect or unsupported code may affect how your website displays or functions.

Click SAVE CHANGES after updating your Tracking settings.

For complete instructions, see:

Previewing Your Website

Click VIEW SITE at the top of the Website Builder to open a preview of your website.

Use the device icons at the top of the preview to switch between:

  • Desktop preview
  • Tablet preview
  • Mobile preview

Review your layout, navigation, text, images, links, forms, and spacing in each view.

Click GO BACK in the upper-left corner to return to the Website Builder.

Click GO TO WEBSITE in the upper-right corner to open your website directly.

Previewing does not create a separate version of your website or require you to publish your changes.

Device previews provide a helpful estimate. Before launching, also review the website on an actual phone or tablet and test all important links, forms, and shopping features.

Recommended Website Setup Order

If you are creating your first Zibster website, the following order can help you stay organized:

  1. Create your initial website with the Zibster AI Website Creator or select a template.
  2. Organize your pages and website navigation.
  3. Add and edit the blocks on each page.
  4. Add your logo and customize your colors, fonts, and other design settings.
  5. Configure your footer, site links, social media icons, search icon, and shopping cart icon.
  6. Review the SEO settings for each important page.
  7. Test your forms, links, ECommerce, Scheduler, and other interactive content.
  8. Review any Mood Boards linked to your website.
  9. Preview the website on desktop, tablet, and mobile.
  10. Connect your domain when you are ready to launch.

Before You Launch

Review the following items before connecting your domain:

  • Confirm that your page names and navigation order are correct.
  • Test every navigation link and drop-down menu.
  • Review each page on desktop and mobile.
  • Confirm that your logo and contact information are correct.
  • Test your forms and confirm that you receive the submissions.
  • Test ECommerce and Scheduler features if you use them.
  • Review any Mood Boards linked to your website.
  • Confirm that unfinished or private pages use the appropriate visibility setting.
  • Review the SEO title and description for each important page.
  • Check your footer, social media icons, site links, and policy links.
  • Proofread your text and confirm that your images display correctly.

Need Help?

Zibster Support Hours: Monday–Friday, 9am–6pm EST

Phone: 844.353.3412

Channels: Phone, Live Chat, Support Ticket

Previous Post Next Post

Related Posts

How To Use Predesigned Page Layouts

June 20, 2023

How do I set up a custom page on my Builder?

November 5, 2025

How To Use Video Blocks

October 7, 2025

How To Create 301 Redirects with Zibster

April 10, 2026

CLOSE