How to Use the Design Tab and Live Preview in the Zibster Website Builder
The Design tab in your Zibster Website Builder controls the overall look and feel of your website. From this area, you can update your logo, colors, fonts, backgrounds, animations, and other global styling elements.
These settings are considered global design settings, meaning they apply across your entire website unless you customize styling within an individual block.
This guide explains how to access the Design tab, update global settings, understand how global and block-level settings work together, and how changes affect your live website.
STEP ONE
Log into your Zibster account and click WEBSITE in the left-side menu of your dashboard.
This opens your Website Builder, where you manage your pages and site design.
STEP TWO
At the top of the Website Builder, click the DESIGN tab.
This opens your website’s global design settings.
STEP THREE
Click the EDIT DESIGN SETTINGS button inside the Design tab.
The right-side settings panel will open. This panel contains your global design controls.
You can customize:
-
Logo
-
Colors
-
Fonts
-
Styling
-
Graphics
-
Site Background
-
Footer Background
-
CSS/JS
-
Detail Page Layouts
-
Animations
When you click SAVE, your design changes are applied to your live website immediately. There is no separate publish step required for design updates.
HOW GLOBAL DESIGN SETTINGS WORK
The Design tab controls your site-wide default styling.
These settings apply across your entire website unless you override them within a specific block.
For example:
-
Your global font selection applies to headings and body text throughout your website
-
Your global color palette controls button styles and accent elements
-
Your global background settings apply to your overall page layout
You can still customize individual blocks to override your global design settings.
If you adjust styling inside a specific block, that change only affects that block. It does not modify your global design settings.
This allows you to maintain brand consistency while customizing specific sections when needed.
TEMPLATE CHANGE
You can change your website template at any time.
Inside the DESIGN tab, select the option to change your template. Zibster provides access to the full template catalog included with your website.
When you switch templates:
-
Your existing content remains in place
-
You do not need to rebuild your pages
After changing templates, carefully review your website to confirm that spacing, images, and layout appear as expected.
Understanding Global Design Settings
Below is a breakdown of the main design sections available inside the Design tab.
Logo
Upload or replace your logo. This section also supports a favicon (.ico) for your website. This update applies across your entire website.
Colors
Adjust your primary and secondary color palette. These colors affect buttons, backgrounds, text accents, and other design elements.
Fonts
Select heading and body fonts to match your brand style.
Styling
Adjust spacing, borders, button shapes, and other visual details.
Graphics
Choose decorative design elements that support your branding.
Site Background
Set the background styling for your main website pages.
Footer Background
Customize the background appearance for your footer section.
CSS/JS
Add custom code for advanced customization. This area is typically used for custom styling or third-party integrations.
Detail Page Layouts
Control how individual blog posts, services, or product detail pages display.
Animations
Enable or adjust animation effects as visitors scroll through your website.
Live Preview Tips
The live preview inside the Design tab allows you to:
-
View changes before saving
-
Test different font and color combinations
-
Compare styling updates instantly
-
Refine your design before applying it
Design changes are not visible to visitors until you click SAVE.
FINAL STEP
After making your design updates, click SAVE to apply the changes to your live website.
Then visit your website in a separate browser tab to confirm that your updated design appears as expected.
