BOWWE University
Basics of Web Design: Containers and Common Regions. What Do You Need to Know About Them?
Creating websites is governed by several unchanging rules. Knowing them is necessary to develop your knowledge and skills and build high-quality websites. One of these rules is the knowledge of the website's key elements: Header, Navbar, Body, Footer, Side-Panels and Fixed-Panels. In this tutorial, you'll learn how to use them to build compelling websites, online stores and landing pages in BOWWE.
What are the website's key elements?
Most websites are made up of several key components:
- Navbar
- Header
- Body
- Footer
- Left or right Side-panel (optional)
- Fixed-Panel (optional)
These main parts of websites are called containers because they collect all the other page elements.
Containers are used for easy and quick management and editing of content on the website. You can put specific items into each container and quickly and conveniently manage all of them just by changing the container settings.
Common Region - a unique case of the Container
Common Region is a common container for your entire website and all its subpages. It looks and works the same on every page. You will change its operation and appearance on all other subpages by editing it once on one subpage.
In the Common Region, as well as in a container, you can place many widgets and elements of your website and then easily manage them. The use of containers and Common Regions is a standard in creating modern websites, which should be followed, especially by novice web designers and developers.
Remember!
The Header and Body containers are not Common Regions!
Each website or e-commerce subpage should have unique content in the Header and the Body!
Common Regions available in BOWWE
When creating a page in BOWWE, you can use all types of containers. Four of them are Common Regions, and they are:
- Navigation (Navbar)
- Footer
- Right or Left Side-Panel (optional)
- Fixed-panel (optional)
What are Side-Panels?
Side-Panels are optional Common Regions (not all websites have them). You can quickly turn them on and off at any time on each website subpage. To do this, you must enter the subpage Settings, open the Layout tab and select one of the layouts with a right or left side column.
- Left column top
- Right column top
- Left column
- Right column
- Left column top in
- Right column top in
How to change Side-Panel width in BOWWE?
Below the page layout selection panel you will find a slider with which you can specify the width of the side panel.
What are Fixed-Panels?
Fixed-Panel is a common region, the content of which is always displayed in a specific place on the screen, regardless of the resolution of the device the website visitors are using.
In Fixed-Panel, social media plugins are most often placed. They redirect visitors to the appropriate social media profiles.
Fixed-panel is an optional common region, so you don't have to use it on your website.
As the page scrolls, items in Fixed-Panels "move with the user" but do not change where they are displayed. To understand this better, see the video below, for example. Note that the Facebook icon on the right does not change its position as you scroll the page.
How to create a website without Navbar and Footer?
If you don't need these two Common Regions, you can turn them off very quickly. Just select CUSTOMIZED in Page Composition; your page will not contain Navigation and Footer (not recommended for beginners and intermediate web designers and developers).
The most common mistakes in working with containers
1. Container <body> not broken down into section!
An excellent practice when creating a website is to divide the content into multiple sections.
If you want to put much different content on any of the subpages of your website (e.g. pictures, texts, Google maps, advertising banners, videos), do not place them directly in the <body> container. Instead, put multiple sections in <body> first and add final content directly to them.
Follow the rule that one section should correspond to one element on the page and (if need be) related sub-elements.
Example:
You want to put the following types of content on the subpage yourdomain/xyz.com:
- Video about your company
- Descriptive text for the video
- The header "Contact us!"
- Contact form to contact you
In that situation, you should divide the content into sections as follows:
- Section 1: Video + Descriptive text for the video
- Section 2: The header "Contact us!" + Contact form
This is very important because placing too many elements in one section will make the page "incomprehensible" both to search engine crawlers and visitors. Likely, it will seriously damage your website and lower its positioning in search engines like Google.
2. Putting all your site's content in just one Container!
It is common for novice page creators to put the entire content of a subpage in only one Container, e.g., <header> or <body>. This is a grave mistake because it makes the page incomprehensible to both search engine robots and visitors.
Remember that each Container has a different function on the site. Ideally, you should include the following in each of them:
1
Navbar - is used to navigate and move around your site. Place the Page Navigation Menu in Navbar.
2
Header - a banner should be placed here, the purpose of which is to encourage the visitor to read the content of the subpage. Often there is also an individual H1 header for each subpage.
3
Body - there you should put all the main content on the subpage: texts, H2-H5 headers, videos, and buttons.
4
Footer - here should be placed: sitemap, logo, claim or short description, contact details (e-mail, phone number, address), social media icons, contact form (optional).
5
Right / Left Side-Panel - there you can place additional elements, e.g. newsletter form, advertisements, or links to your blog articles.
6
Fixed-Panel - there you can place icons that redirect to your social media.
