How To / Features

Header Builder

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…

Woocommerce Horizontal Filters

Most of the themes use filtering widgets such as price, size, color, etc in sidebars. Porto theme provides horizontal filtering options. This displays filtering options in top of page content. There are two shop horizontal filters.

You can set horizontal filters in Porto -> Theme Options -> Woocommerce -> Product…

Image Swatch

If you enable image swatch, please go to Theme Options > Woocommerce > Single Product > Variation Selection Mode and select Image / Color Swatch.
Then you can see swatch section in the product edit page.

At first, please add new attribute to be displayed as image swatch.

Then please add variations and select thumbnail…

Sticky Sidebar

If you want to use sticky sidebar, please enable Porto > Theme Options > General > Enable Sticky Sidebar option.

If you want to know how sitcky sidebar works, please visit porto shop demos.

Porto Studio

Porto Studio is a page building tool which provides pre-defined layouts and styles for Porto.
Please check Porto Studio site to see what Porto Studio is and how it works.

This is available in WPBakery Page Builder Bakend Editor, Frontend Editor and Elementor.

Porto Studio panel has category filter section at the…

Custom Product Layout

How to Enable Custom Product Layout Builder?
To enable Custom Product Layout Builder, you need to select “Custom” in Theme Options -> Woocommerce -> Single Product -> Product Layout.
You can build product layout by navigating Product Layouts -> Add New.
Create Custom Product using WPBakery Page Builder
You might need to enable…

How to enable skeleton screens

Please go to Porto -> Theme Options -> General -> Show Skeleton Screens.
You can find four button sets: Shop Pages, Product Page, Product Quickview and Blog Pages.
We can enable skeleton screens for these four pages by selecting them.Each skeletons are drawn using css “background-image: linear-gradient”. You can find its…

How to add single page navigation

Single page navigation consists of sections of fullscreen area and dots navigation which navigates to each section.
We can build single page navigation using Porto Section Scroll element.
If you want to know how single page navigation works, please check corporate 20 demo.

– Section Selectors: jQuery section selectors. We can enter…