Lesson 7 in the DIY website design with WordPress series, we’re almost there & only a few more settings left before the website is complete.

That is using the Customizer in WP to complete parts like Header & Footer, Style and Menu of the web.

Customize wordpress Header

What is the header? The header is the common name of the website header, including:

  • Top bar menu ( Top Bar Header )
  • Header main (The main header bar in the middle)
  • Herder bottom ( Thanh Header ở dưới )

Go to Appearance > Customize > Header

This is the section to customize the 3 header bars, in the picture is the Header Bottom section I’m currently not putting anything in, so it doesn’t appear.

My demo website is currently removing the Topbar part because it is not needed. If you like you can add it.

Now I will guide you through the small elements to customize the Header!

  • HTML 1,2,3,4,5 : This is the part to add text content
  • Top bar menu, Main menu: These are the menus that appear, I will guide you in detail below.
  • Newsletter: Mailing section
  • Social icon, search icon, Nav icon: Social icons, search icon, menu icon for mobile interface
  • Search form: Search bar
  • Account, Cart, Checkout Button: These sections are only needed for sales websites, not for blogs.
  • Button 1, 2: Buttons to insert links

In each section, when you click on it, it will display its main customization page, or you can press Shift + Click on the web preview to customize.

I will only leave the Logo,   Main Menu, the menu part, it will be displayed later when I install the menu.

 

Note!!!

All images uploaded to wordpress must be adjusted to the full size, click save and then resize to another size to keep the image sharpness.

Logo & Site Identity

After completing the Header section, hit back and go to the Logo & site identity section, this is the part where you can edit the name and effect of the web, besides the logo of the website.

That’s it for now, the Header part, now let’s continue to the Footer part

Customizing wordpress Footer

What is Footer? This is the website footer, displayed at the bottom of the web page.

You can see the picture below for an easy understanding:

This is the Footer footer of your website, usually, this section will be used to leave contact information, show categories as well as articles.

And some external information such as Fanpage, Google Map, or an offer.

Similar to Header, Footer is also divided into 3 different floors displayed in order from top to bottom:

  • Footer 1
  • Footer 2
  • Absolute Footer

Custom Footer 1

Here there will be sections like Columns to choose how many columns appear, I usually leave it as 3 or 4.

If the website contains many items, it should be 3.

At this point, we need to install the Widgets into our Footer, similar to the Sidebar in lesson 5, let’s preset 2 items: Content Category and Related Posts.

In the Widget section above > select Edit Footer Widget > Select Footer 1 (If there is any message, just click OK to go to the Footer interface)

Continue to remove unnecessary blocks, in this case, Archives, leave Categories and add Flatsome Recent Posts.

Click on the title of each item to change it to Vietnamese.

In column 3, I will add the Social Icons, click the plus sign to add the Title, and continue to click the plus sign to add the Social icon.

 

Hold Shift and select Title with Social Icon > Select 3 dots below > Select Group to combine 2 elements into 1 column.

Footer 2 I will temporarily ignore because there is not too much information currently.

 

Customize Absolute Footer

This section is the black bar at the bottom of the website, usually to show the copyright of the website on the left hand side and the payment methods on the right hand side for the sales website.

Go back to the Footer section to adjust this part, I adjusted the background color to make the background color black and edited the text a bit to be Demo DR.

Now the next part that needs to be customized is the website color scheme, font, and font size…

Customize wordpress Style

Go to Style > Color

My favorite color is blue, so I will adjust both Primary Color & Secondary Color to blue, then the buttons on the web will automatically turn blue.

Flatsome’s default font looks a bit stiff, so I’ll change it to my favorite Montserrat font.

Exit Color and go to Typography

Here will be the font adjustment of Base (text), Headline (Title), Navigation (Menu item), Alt Font. I’ll change everything to Montserrat.

Now you see that the font of the entire website has been changed. You can choose your own favorite font ^^

Setting menu for wordpress website

And the last part will be to show the Menu of the web.

Go to Appearance > Menu

Enter the new menu information as shown in the photo and then click Create menu!

Add the necessary sections such as the Home page, the Categories you want to enter.

At the bottom of each bar with a drop-down arrow, you can change Home 2 to Home, then click Save Menu.

Return to the homepage to see the results.

If you get to this step right, your website will look like your Web Demo https://demo.digitalbyrick.com/

Phew, that’s the end of post 7 of the website-making process, only one last post is to install the most necessary Plugins in WP to complete 100% of the website.

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

 

>> Lesson 8: 11 Necessary wordpress plugins to install

Lesson 7 in the DIY website design with WordPress series, we’re almost there & only a few more settings left before the website is complete.

That is using the Customizer in WP to complete parts like Header & Footer, Style and Menu of the web.

Customize wordpress Header

What is the header? The header is the common name of the website header, including: