Astra Theme Explained: A Guide to Setting Headers and Footers (12)

Theme selection and setup is crucial when it comes to creating a perfect WordPress website.Astra ThemeWith its highly customizable and flexible features, it has become the preferred choice of many users. In our previous tutorials, we have already discussed theAstra Themeof other settings, today will focus on header and footer settings. Although this part of the settings has been left to the end, their importance should not be ignored. With proper configuration, you can significantly improve the visual effect and user experience of your website.

Steps: Website Backend→Appearance→Customize→Header Builder

After clicking on it, we get this screen

The red box on the left side will show some of the placement of our header, which is the header, for easy overall adjustment, but of course you can adjust it individually at the bottom as well

As shown above, the corresponding website logo (Site Title & Logo), menu (Primary Menu), button (Button 1), personal account (Account), according to your actual needs to adjust!

We are puzzled why there are three rows of header, but now only the middle row has a layout, which is to leave you their own operating space, you can use the upper and lower rows as a gap to adjust, or to add other features, his layout will also be in the front end of the page to display the upper and lower rows, the following I add a function you can see

As shown above, I added a search function, and then he appeared in the top of the header, we feel that the display is too small, right, because the gap in this row is not adjusted, before it is only the second row of the layout, the upper and lower rows of the gap is adjusted to the smallest, otherwise the entire header will appear to be very large, uncoordinated, the following look at how to adjust the gap

Click on the Set Symbol, and then you can set the height, which is the gap, and display on those devices, as follows

As shown above, you can also set the row of text color background color and so on, very convenient!

The other two rows operate in the same way, but of course you can set up the entire header

Steps: Website Backend→Appearance→Customize→Header Builder→DESIGN

Since we chose a transparent header, the settings are not here

Steps: Website Backend→Appearance→Customize→Header Builder→Transparent Header

Of course, the transparent header can also be set to display the device, as well as to replace the site logo, but here I did not use to open Enable on Complete Website (in the entire site to enable) can not be set, because I set up in the header of the site logo, if you enable it here, then your previous settings will be overwritten!

Set various texts and backgrounds here, you don't need to set them here if you don't have a transparent page set up

As shown above, transparent header is to see what you need the effect of the site, if you do not need the home page of the slideshow or poster into one, you can not enable this, Astra theme templates some of the transparent header and some are not, you can see clearly at the time of import, if you still did not pay attention to it, it can be adjusted!

Header is divided into three parts, how to arrange it depends on what kind of effect you need, the center must be centered, suitable for putting the menu

Add also has a number of features to choose from, as shown above and below

Buttons can add up to two Button 1 and Button 2, suitable for jumping links

Dividers are also up to two Divider 1 and Divider 2

Shortcode display: HTML 1 and HTML 2, also up to two, for example, there are some plug-ins that can be inserted into the header with this shortcode, such as multi-language multi-currency

LanguageSwitcher: Multilingual (language switcher)

Secondary Menu: (secondary menu), you can understand the existence after the main menu

ToggleButton: (collapsed symbol), menu display for cell phones

Search is the search bar, Social is the social links

Cart: is a shopping cart

Widget function can be set to the back-end widgets: Widget 1 to 4, of course, generally used for the footer, if the footer does not require you to set the header

There are four more that have been added in the header, so they won't show up in the can-be-added features

Also debugging of the main three devices, such as the following for cell phones

OFF CANVAS on the cell phone is the folding symbol and the content settings inside it

Menu Remember to configure each corresponding menu item or it won't show up!

Here to talk about the footer, basically the same, there is a difference is that he can set a row of how many columns

As shown above, he can set up a row of several columns, can achieve the effect you need, and the effect of layout

Can add the template are similar, the main menu has become a footer menu, you have more of their own needs to add!

One last thing is that there is a difference between Astra and Astra pro, as follows

Sticky Header a.k.a. Top Header

The top header is still good, otherwise the header wouldn't stick to the top of the current page when you swipe, it would be at the top of the home page!

So it is recommended to openAstra pro Unlock all the features and the experience will be much better

summarize

Through the introduction of this article, I believe you have mastered how to set header and footer in Astra theme. These settings can not only make your website more personalized, but also enhance the user's browsing experience. If you are interested in Astra theme or other aspects of WordPress settings, welcome to pay attention to our next issue, we will provide you with an in-depth explanation of the difference between pirated theme plug-ins and genuine theme plug-ins, to help you make a more informed choice.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off