Videos Archives - Porto Documentation

Installation Video

porto_admin — Fri, 12 Oct 2018 15:12:10 +0000

Installation Video of Porto WordPress

WP Bakery version Demo Import Video

Elementor version Demo Import Video

Visual Composer version Demo Import Video

The post Installation Video appeared first on 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.

Custom Product Layout

porto_admin — Tue, 24 Dec 2019 05:15:50 +0000

Porto 5.1 supports Custom Product Layout Builder which allows to build single product page layout using page builder elements.

Porto comes with tens of product page layout presets, but you can also build your own layout using Porto's product page builder. Any combination of layout and feature is possible using this new feature.

How to Create Custom Product

Please navigate Porto -> Templates Builder -> Single Product. You can create a new custom product layout here.

Product Layout Builder is fully compatible with 3 page builders: WPBakery, Elementor and Visual Composer and provides various customization options.

You might need to set roles to build product layout using page builders. For example, if you want to use WPBakery, please go to WPBakery Page Builder > Role Manager and make sure to check the following checkboxe under Content Types: porto_builder. After making the changes please click Save Changes button.

Following video describes how to create custom product layout and set display condition using Visual Composer.

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

Product Layout Builder Elements

As you can see, there are 13 elements for product page builder.
Product Title, Product Price, Upsells and Related Products elements have more powerful features than ones in default product layouts.
- Using Product Title and Product Price elements, you can customize typography fields easily for product title and price such as font size, font weight, color, etc.
- Upsells and Related Products elements
In the default product layouts, upsells and related products are displayed in only products slider view.
But if you using these elements, you can display products in any view such as grid, list, creative grid, etc.
Also you can customize more fields such as count, product type, columns, column spacing, orderby, order, product image size, etc.

The post Custom Product Layout 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.