Header Setup Archives - Porto Documentation

Header Builder in Customizer

porto_admin — Mon, 15 Oct 2018 03:21:02 +0000

In Porto 4.8, header builder is newly added to create and modify the site header dynamically on different devices without using pre-built header types.
Page builder is to build page contents, and header builder is to create header layout and contents.
To get to the header builder section, please go to Porto -> Theme Options -> Header -> Header builder.
Then header builder will appear on the bottom of preview page.

There are three sections in the header builder: top bar, main header and bottom header sections.
Each section is also divided into three boxes: left, center and right.

And at the top of the header builder there are header builder elements which can be dragged and dropped into the header boxes.
So if we drag and drop logo element into the center box of the main header section, Logo will be displayed on the center of the main header in the preview page.
You might not want to have any header elements, then you can drag and drop them into the bottom of the header builder which contains header builder elements.

You can build header layout for desktop and mobile separately. If you click mobile icon on the top of header builder, header builder section of mobile version will be displayed.

Following gives brief explanation about some header elements.

Row – creates a row which can contain any header builder elements.
Porto Block – we can place porto blocks which were created using Blocks -> Add New.
HTML – we can place any other html content using this element.
Custom Menu – custom menu content which is inserted in Theme Options -> Menu -> Menu Custom Content.
Contact – contact information which is inserted in Theme Options -> Header -> General -> Contact Info.
Secondary Menu – secondary menu which is created as a “Secondary Menu” for display location when creating menu.

Note:

When you drag some header elements into the header, they might not be displayed in the page. For example, you place search form element but it can’t be displayed in the header. That’s because you have disable header search form in the theme options. In this case you need to enable header search form using Theme Options -> Header -> Search Form -> Show Search Form option.

There are 3 tooltips for top bar, main header and bottom header in header builder. If you hover on header builder sections, tooltips will be displayed at the top left corner of them.
If you click theses tooltips, it will go to the header skin settings panel. If you want to come back to the header builder again, please click go to Header Builder link at the top of this panel.

To use newly created header layout using header builder, you need to select "Header Builder" in Theme Options -> Header -> Header Type.

The post Header Builder in Customizer appeared first on Porto Documentation.

Header Types

porto_admin — Mon, 15 Oct 2018 05:20:58 +0000

Porto theme have 20 header types. You can select one of pre-built header types in Theme Options -> Header -> Header Type.

If you select header builder for header type, header builder header will be used.

The post Header Types appeared first on Porto Documentation.

Header Settings

porto_admin — Mon, 15 Oct 2018 05:28:11 +0000

You can configure header options in Porto -> Theme Options -> Header.

Porto theme have several header types. You can select a header type in Header > Header Type.
You can show wpml language switcher or wpml currency switcher.
You should enable Show WPML Language Switcher and Show WPML Currency Switcher options in Header > View, Currency Switcher.
Before enable these options, you should install WPML and WooCommerce Multilingual – run WooCommerce with WPML plugins.
You should configure wpml language switcher in WPML > Languages > Language switcher options. You can see here for more details.
You should configure wpml currency switcher in WPML > WooCommerce Multilingual > Manage Currencies. You can see here for more details.
You can input a welcome message and a contact info in Header.
You can configure the social links (facebook, twitter, pinterest, youtube, instagram, etc) in Header > Social Links.
You can configure the mini cart and the search form options in Header > Mini Cart, Search Form.
You can configure the sticky header in Header > Sticky Header.
You can configure the mobile panel in Header > Mobile Panel.

The post Header Settings appeared first on Porto Documentation.

Header Builder using Page Builders

porto_admin — Mon, 28 Dec 2020 08:52:33 +0000

In Porto 6.0, templates builder is newly added to create and modify the whole site including header dynamically using page builders. You can build the header dynamically in any layout using templates builder.

https://www.portotheme.com/wordpress/porto/documentation/assets/videos/proto_templates_builder.mp4

After creating header, you need to set display condition and select “Header Builder in Porto Templates builder” in Porto -> Theme Options -> Header -> Header Type -> Select Header to display it.

The post Header Builder using Page Builders appeared first on Porto Documentation.