Learn About Website Layout


In this article, I will give an overview of the layout of the website. For you to imagine what areas / components are on it, what are their tasks.

Layout (layout) of a website

Also depending on the field, depending on the type of website, the layout will also be different. Here I would like to give a common layouts for your reference. This layout has 4 areasthe location of each area you can see in the picture below.

Profile of a blog website

Profile of a blog website

  • HEADER – the top of the page, this is the area where people usually put the logo, banner, slogan of the website/blog;
  • NỘI DUNG – the content section, it can be the content of an article or a list of articles;
  • SIDEBAR: is the column next to (left – right or two sides) of the content – content. This is the area to place the widgets (widgets) of the website.
  • FOOTER – footer, the bottom area of ​​a website. This is the place for a brief introduction to the website/blog, contact information, maps, etc.

Areas on layout

In the areas stated above will include small parts inside iteach part will take on a separate role as follows:

The header area is where people usually put social network icons, search boxes, banner ads, logos, slogans, image slides, etc. Here are 4 things you should put it on in the header:

Components commonly used on Header (hocban.vn)

Components commonly used on Header (hocban.vn)

  • Logo or website titlehere my web title is Learn Friends. Because my logo is not beautiful, I take the site title (website title) as the logo.
  • Tagline: A short tagline (slogan) that you like or something short about 5-7 words is fine, so that it shows the content of your website.
  • Top Navigation: This is top menuused to directional to contact pages, about, copyright, terms, .. usually like that.
  • Main Navigation: This is main menuit helps users directional to the content categories of the website.


In one content page, then this is the area for the article content, comments, list of related posts, post author. If in off the homepagethen this is the area where the list of posts on the website is located, usually the latest posts.

Phan content - talk about Vietnamese content

Content section – article content (hocban.vn)

This is a column containing utilities, including: a list of read posts, a like box for facebook fanpage, a subscription box to receive new post notifications, etc. Quite a lot, but here I choose two as follows. :

Widget Categories andRecent Comments on the sidebar

Widget Categories and Recent Comments on the sidebar (hocban.vn)

  • Categories: Posts category, here in which category you have articles, it will be displayed as shown in the picture.
  • Recent Comments: List of comments sorted by most recent.

If the sidebar is where people place widgets (widgets) in 1 column, in the footer one can set the widgets to 2, 3, 4 columns of widgets depending on the width of the page and the designer’s intentions. Here I would like to introduce 3 popular utility models as follows:

  • Introduction Overview of website/blog – business.
  • Information – contact address: can put a phone number, street address or a Google Map utility,..
  • link: understood as a list of websites of “friends” or have something to do with your website/blog.
A quick footer without space (suu tam)

A simple footer template (collectible)

In this article, I just mentioned some basic components on a website/blog for you to imagine. Understanding the roles and features of each section is the basis for arranging the layout of your website/blog later. In the next article, we will learn about the WordPress dashboard.

Previous and next lesson


Related Articles

Theo dõi
Thông báo của
Phản hồi nội tuyến
Xem tất cả bình luận
Back to top button
Rất thích suy nghĩ của bạn, hãy bình luận.x