Containers and Common Regions
What are the page’s layout elements?
What’s a Container?
Common region - a unique case of the Container
How to change page layout?
The most common mistakes in working with containers
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 page’s layout elements?
Most websites are made up of several key components:
- Navbar
- Header
- Body
- Footer
- Left or right Side-panel (optional)
These main parts of websites are called containers because they collect all the other page elements.
What’s a container?
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.
Navbar (Navigation)
Navbar is used to navigate and move around your site. It refers to the menu system used to allow users to navigate through a website. Here you should include:
- Links to important pages or sections of the site, such as Home, About, Services, Products, Contact, etc.
- Drop-down menus to access sub-pages or sections of the site
- CTA (Call to Action) buttons, such as "Sign Up," "Buy Now," "Learn More," etc.
- Hamburger menu icon for mobile devices to expand the navigation menu’
Header
.jpg?2869361.0999999642)
Here you should place a banner, the purpose of which is to encourage the visitor to read the content of the subpage. Often there is also an individual H1 heading for each subpage.
- Site logo or brand name
- A main navigation menu with links to important pages or sections of the site
- A search bar or search icon for users to search for content on the website
- Contact information such as phone number, email or physical address
Body
The body of the site is where most of the content is located. It can be divided into sections, each of which contains specific information related to the purpose of the site.
- The main content of the page, such as text, images, videos, audio or other multimedia elements
- Headings and subheadings to divide the content into sections and make it easier to read
- Links to other relevant pages or external sources
- Interactive elements, such as forms, surveys, quizzes, etc.
- Social media icons to allow users to follow or share site content
Footer
The footer is located at the bottom of the website and usually contains copyright information, contact information and links to important sites.
- Copyright information and disclaimer
- Links to important pages such as Privacy Policy, Terms of Use, Disclaimer, etc.
- Contact information, such as email, phone number or physical address
- Social media icons that allow users to follow or share site content
- Site map or navigation links to help users navigate the site
Left or Right Side Panel
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 by changing page’s layout in Settings. There are used to display additional information, for example:
- Advertising, which can generate revenue for the website owner.
- Links to the website's social media profiles, allowing users to easily connect with the website on various social media platforms.
- Related content, such as articles or products, that may be of interest to the user.
- Search bar, allowing users to quickly search for content within the website.
Common Regions - 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.
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)
Remember about:
- Every Common Region is a container. But not every Container is a Common Region.
- 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!
How to change the layout of the page in BOWWE
Open your project in BOWWE Builder
Select “Pages” from the Left Side Panel
Hover over the page's title and open its Settings.
Go to the Layouts Tab
Choose a page layout and composition
Click SAVE to complete
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 heading "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 heading "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:
