Lesson 6 continues the series of DIY website design with WordPress will guide everyone to design the interface of the website’s article page.

This is the interface you are seeing when reading the article today.

Customize Sidebar position

The sidebar menu is the term for the column of content next to the article, dividing the article interface into 2 parts.

This ratio is usually 7:3, 7 for posts, and 3 for sidebars.

This is also the default interface of the Flatsome theme when it is first installed on the web. Currently, everyone’s article interface is like this.

There are 2 types of interfaces that contain Sidebar and do not contain Sidebar

You can customize the position of the sidebar to be left or right in the post.

Go to Appearance > Customize > Blog > Blog Single Post. You can choose 3 positions of the Sidebar:

  • Sidebar on the right-hand side
  • No Sidebar

Please choose what you want and click Publish

The interface does not contain Sidebar, only text appears in the middle and contains two spaces on either side, you can refer to the image below.


What is the interface of Digital By Rick that has 2 sidebars?

In my opinion, the 2 sidebar interface is the most optimal UI / UX interface of the blog at the moment. Because readers can follow the Table of Contents of the article on the left sidebar and can receive the information they want in the right sidebar.

However, this interface needs intervention in the code and some advanced settings to create a second sidebar, which is quite confusing for newbies. So I won’t be able to give detailed instructions in this series 🙁

How to install Widget to Sidebar Menu

After knowing how to position the sidebar, then choose the interface that best suits your needs.

If you choose an interface with Sidebar Menu, then you must add widgets (content tools) to your sidebar.

Go to Appearance > Widgets

Widget customization interface has appeared, clicking on each section will bring up a custom menu bar

Initially, click on the vertical three dots at the bottom of the menu bar > Remove block to delete all.

Please continue to click on the blue plus sign, the widgets panel will appear, in which there are many widgets you can add such as images, related posts, categories of articles…

I will guide you to add the related articles section first.

In the search bar of the Sidebar Menu, enter “rec” and an item will appear, Flatsome Recent Posts, Click and drag over the item of the sidebar on the right.

  • Title: Please enter “Related Posts”, it is the title of your articles section
  • Number of posts to show: This is the number of posts that will appear on the sidebar, usually you should choose 3 – 5
  • Show thumbnail: Show the featured image of the article

Then you update, and go to the Posts section to preview any article, your sidebar interface will now appear as follows:

That’s it, the article page is finished, in the interface, there is another very important part that is customizing the Header, Footer & a few things related to the style and color of the web.

<< Lesson 5: UX Builder wordpress and 3 steps to transforming the homepage interface

>> Lesson 7: Use Customize to customize wordpress Header, Footer & Style