In the previous post, I introduced the Flatsome theme, the #1 selling web interface for WordPress. In this article, I will guide everyone the first step is to edit the header of the interface. Header is the first part of the website, it usually includes the important components of the website such as logo, main menu, sub menus, search, shopping cart, etc.
To edit the Flatsome interface, go to the menu Flatsome > Theme Options , it will display a custom interface like this. On the left is the list of edit items, on the right is the edit preview. In this article, I will edit the Header, so you click on the Header menu .
Header editing menus appear, go to the Presets menu . Cover is the option to choose the appearance style for the header. There are about 10 styles, you can choose the style you like, like I always choose the first style. After selecting, press the Publish button , then press the < button to return to the Header .
Flatsome divides the header layout into 3 parts, including: Top bar, Header main, Header bottom. Next, I customize the Top bar , which is the top element of the header. Here I only edit the style of the top bar, not to its content.
- Enable Top Bar : enable the top bar or disable it.
- Height : the height of the top bar.
- Nav Color : the color of the menu text.
- Top Bar Background : the background color of the top bar.
- Navigation Style : the display style of the menu
After each edit is complete, press the Publish or Publish button .
Next, I edited the Header Main to be similar to the Top Bar . I don’t use Header Bottom , so don’t edit it.
Next, you edit for yourself the Sticky Header , which is the header that will be displayed permanently when you scroll down the page.
So I finished editing the look for the header, now we will edit the components in the header. When you look down you will see a section called Header Builder . This is Flatsome’s great drag-and-drop header builder.
Here you will see the 3-row layout of the header as I mentioned above, each row has 3 cells. Below is a list of elements you can use for headers. You use them by dragging and dropping them into the corresponding box. For example, here I drag the components Search icon, Top Bar Menu, Social Icons, Logo, Main Menu, Account, Cart into positions as shown.
Editing elements in the header
To edit elements, you can click on them. First, I edited the logo, including the website name, slogan and logo image.
Then edit the display for the Account section.
Edit the cart appearance.
Then you go to Menu section, create yourself Main Menu and set its position as Main Menu . The menus inside are your choice.
Similarly add a new menu named Top Menu, choose the location to appear for it as Top Bar Menu.
Besides, you choose the display style Mobile / Tablet to edit the header when displayed on mobile devices. I only use 3 components: Nav Icon, Logo, Cart.
Then I edit the Nav Icon , as the style and the elements appear in this Menu such as Search, Main Menu, Account, Newsletter.
So I have finished editing the interface. Go to the homepage to check it out.
summary
Above is the first step to edit the header for Flatsome theme. There are many other components you can add to the Header, such as an HTML code to enter the Hotline number. In the article I can not introduce all, you can research the other ingredients yourself.
