Using a website template is a great way to get a head start on designing and building a website. Zibster’s Website Builder is a template-based platform and features a great collection of templates. But what is a template? And how does it work?
Think of a website template as a house without furniture or the bones of the website. When you move in, it may have a look already established, or be a blank slate with white walls and neutral carpets. You might choose to change the carpets to hardwood floors, paint the walls a different color, update the light fixtures, you name it. Once you furnish the house and add your style, the house becomes a home. The structure can remain the same, while the look and feel changes.
A Zibster website template is very similar. It is a design or structure built on a platform of tools to run your business that is ready for you to personalize. Different templates have different menu styles and placements. And they can each take on a variety of looks by changing colors, fonts, page layouts, and more.
When you select a template for the first time, you are choosing a structure (aka the bones of the house). Then the fun can begin as you add your logo, select the color scheme, upload your images, and populate the pages with content. There are millions of options to customize each website template. The pages of Zibster websites are built with “blocks” of content (images and text). You can add and remove blocks to suit your needs. As you make your website your own, the main structure or bones remain the same, but there is a lot you can do to modify your website’s style and content.
In this article, we’ll break down common elements to look for when you select a template, how you can change the blocks within the pages of your website, and how easy it is to switch between Zibster website templates (with as little as one click).
How templates work
Templates are designed frames that house your website content. You can change the colors, fonts, and content blocks within the structure itself, but there are rules to keep the template frame intact. Let’s review the main components of a template:
-
Logo placement: Where the logo is located on the site.
-
Website menu: Where and how the menu is displayed on the site. Either at the top, bottom, from the side, or floating. Plus, if it is a standard inline menu, or a split menu (with a logo as a dividing point).
-
Social media icons: Where your social media icons are displayed.
-
Site links area (if enabled): Where additional buttons or call to action links are staged.
-
Shopping cart area (if enabled): If you have a traditional online store or offer online appointment booking, the cart icon can be enabled, encouraging visitors to review their items and check out. This icon is located in a specific area on each template.
-
Mobile structure: How your design changes to be viewed on phones and other mobile devices. Our templates are responsive which means the logo menu, and other icons conform to fit different screen sizes and while maintaining the website look and feel.
These are the core elements of a template and can not be moved, but colors and fonts can be personalized. Now let’s look at these elements in action on a variety of website design styles:
Template styling #1: Top menu (standard inline)
Example shown irving.zibster.com
This template style uses a top menu structure. The logo also lives at the top of the design. Then there is a thin strip at the bottom of the design that anchors to the bottom of the screen and displays the site’s social media icons, cart, and site links. The placements of these elements varies between templates. Within this type of template, sometimes the top portion stays or sticks to the top as you scroll down the page, in other designs the menu minimizes or disappears completely (as you scroll past it). In other designs, the logo can be found on the left, center, or right of the template and there are even a few designs where the logo floats separately from the menu items.
If you prefer a website design with a standard inline menu at the top, check out these templates:
Template styling #2: Top menu split
Example shown parker.zibster.com
A split menu type features the logo in the center of the top portion of the screen and divides the menu items in half placing them to the left and right sides of the logo. Some templates have menus that are close to the logo and others feature menus that are further away from the logo. As you scroll down the page the menu may adjust in different ways. In some templates, the logo is minimized and in others, it is replaced with a sticky menu that follows you as you scroll.
If you prefer a website design with a split menu at the top, check out these templates:
Francis
Rivera
Frank
Almas
Parker
Vincent
Template styling #3: Floating logo and menu
Example shown bowie.zibster.com
Some website templates feature places for the logo and menu to seemingly float. It’s like another layer that hovers over the content of the site. Sometimes these elements are static, meaning they do not move as you scroll, while other times the elements stay towards the top. There are different layouts for the floating menu items as well. Some feature a list or a hamburger-style menu icon you click to reveal a menu page. The logo and menu text may also be on a transparent background or within a colored block. There are many different options.
If you prefer a website design with a floating logo and menu, check out these templates:
Template styling #4: Sidebar menu
Example shown fitzgerald.zibster.com
A sidebar menu clings to the left or right side of the screen, allowing content to have a vertical feel to the design. This layout feels a bit book-like.
If you prefer a website design with a sidebar menu, check out the following templates:
Dickenson
Fitzgerald
Presley
Template styling #5: Bottom menu
Example shown walker.zibster.com
An inverse to a top menu layout, the bottom menu style features the logo and menu at the bottom of the page. This menu style is static and does not leave the screen when people scroll. As a result of the location, it also acts as the footer.
If you prefer a website design with a bottom menu, check out the following templates:
Walker
Harper
Francesca
Edgar
Template styling #6: Compact design
Example shown beckett.zibster.com
A template with a compact design features compressed elements in a more narrow layout. It allows the website background to become an element of the design. There is a library of background designs you can choose from, you can upload one you like, or choose to have none at all. Our compact website designs feature a variety of logo and menu layouts. They can stay at the top with the logo on the left, center, or right of the menu items or even split. The menu may be static or stick to the top when scrolling, or disappear entirely.
If you prefer a website with a compact design, consider the following templates:
Once you select a template to work with, you can personalize the design to fit your branding and load your content on the site.
Modifying a template
You can change the overall look of a template by changing the colors scheme and fonts. These are editable from the global setting of the design menu (in the top menu of the website builder). We recommend updating the color scheme to match your branding. A template with a sample design that is light and airy can be modified to be dark and moody and vice versa. For example:
While much of a template’s design is fixed (menu items, social media icons, and site links), you can modify the look by changing the layout of the individual pages on your website. Keep reading to learn how!
Tip: It is possible to make further modifications to a template with custom CSS code, but you don’t need to know any code to build a website with Zibster.
Modifying the content of your website
Each template comes pre-loaded with placeholder content that you can replace and personalize (or delete altogether).
The pages are built with blocks of content that can be modified, rearranged, and removed. By default, each block inherits global website settings, or you can change each block’s settings to suit your needs. Learn how to edit, add, and delete content blocks:
How can you recognize placeholder content? This is how the template will load in comparison to the sample you select:
The placeholders retain the overall look and feel of the template and act as a guideline for you to place your content in. It is a starting place and you can do what you please with it. You have the ability to do nearly anything with millions of combinations of settings and layouts.
Changing your template
If you just aren’t feeling your template or after a few years get an itch to revamp your website, you can easily update your template with just a few clicks. Zibster allows you to preview your content on different templates and change your template while retaining all your content. It is easy to change your template anytime you like.
Learn how to change your template
Tip: You can save variations of the same template, to update your website with a seasonal look.
Q&A
When I switch templates, my content doesn’t look like the sample, why?
When you switch templates, your content and block settings will move with you. The content will inherit the overarching style of the new template (logo and menu placement, fonts, color scheme), but the specific layouts you’ve selected within each block will remain. Only global changes to the template itself will take place and no new content blocks will be added to your site (unless you add them yourself).
I want to start from scratch, can I?
Unfortunately, once you start building a website, you can’t restart from scratch. You are able to switch templates anytime, making revamps or new directions less of a burden.
My block setting, colors, and spacing didn’t change when I changed templates, why?
There are global settings and block-level settings within your website. If you make changes to a block’s settings, that overrides the global settings. Global settings change when you switch your template but individual block settings remain.
I don’t see my business type in a template, will my business work with your templates?
Yes, our website templates can be used for any type of business. We have a variety of samples to inspire you, but you can change any of them to conform to any style of business. If you have questions give us a call at 844.353.3412
I have a website hosted elsewhere, can I use a Zibster website template on that hosting platform?
No. All Zibster templates are built within our proprietary platform system. We’d be happy to talk with you about the benefits of switching to Zibster. You’ll get a collection of templates, managed hosting, a suite of integrated tools, and access to our support team to help you along the way.
If you have any questions about choosing or modifying a website template, give our team a call or log into your account and chat with our support team. We’d be happy to assist you.
0 Comments