Getting Started

WPBakery, Elementor free version, and Visual Composer free version are just page builders. This means that you can design only the content area of your page with them. Porto 6.0 adds templates builder which enables you to build header, footer, block, single product, shop, etc as well as page using WPBakery, Elementor and Visual Composer. This helps you build your whole website by only drag and drop elements without any programming skills.

How to use Porto Template Builders

 

To get to the Templates Builders section, please go to Porto -> Templates Builder. There are block, header, footer, product and shop builders. After you create header, footer, product and shop builders, you need to set display condition. You can display blocks using Porto Block element, block display options(Theme Options or Meta box) or shortcode.

1. Block Builder

What can you do with Porto Block Builder?

1. You can build any part of your page.
2. You can build various kinds of sidebar sections ( Shop Sidebar, Blog Sidebar, Product Sidebar... )
3. You can build megamenu.
4. And So on…

How to build your part of certain page with block builder?

Step 1. Go to Porto > Templates Builder.

Step 2. Click ‘Add New’ button on top of page.

Step 3. In New Porto Builder Modal, select Block Builder in “Builder Type” field. And give your block’s name in “Builder Name” field.

Step 4. The next step is to build your part with WPBakery, Elementor, Visual Composer or Gutenberg.

2. Header Builder, Footer Builder

Please refer to this post ‘Header Builder using Page Builders’. Here, the important problem in header builder and footer builder is to set display condition.

How to create footer with footer Builder

 

3. Single Product Builder and Shop Builder

Please refer to this post ‘Custom Product Layout’. Here, the important thing in shop builder and single product builder is to set display condition.

4. Popup Builder

 

5. Type Builder

What can you do with Porto Type Builder?

You can build your own custom layout of various types of post including Blog posts, Portfolio posts, FAQs, Events and WooCommerce Products. Then you can work in conjunction with other builders.

How to build your part of certain page with block builder?

Step 1. Go to Porto > Templates Builder > Post Type.

Step 2. Click ‘Add New Post Type’ button on top of page.

Step 3. In New Porto Builder Modal, select Post Type in “Builder Type” field. And give your block’s name in “Builder Name” field.

Step 4. The next step is to build your part with Gutenberg.

Porto offers you single product builder elements to build your single product simply and easily. Porto is based on #1 page builder – WPBakery, reliable page builder – Elementor, fast page builder – Visual Composer and Gutenberg block editor to build your website. So Porto allows you to build your single product with WPBakery Elements, Elementor Elements, Visual Composer Elements and Gutenberg blocks. Here, let’s see WPBakery Single Product Builder Elements, mainly.

It consists of 13 elements.

Each element is important part of single product page. As you probably know, The important meta of product is product image, price and title and etc. Now we provide WPB elements instead. You can make any product layout which you want by drag and drop of single product elements. It’s e-commerce revolution like header and footer builder. Ok. Well, let’s see the elements below.

1. Single Product Image – Product Images and gallery are very important in our single product page. In Porto, we provide many types. e.g: Default, Extended, Grid Images, Thumbs on Image, List image, Left Thumbs 1, Left Thumbs 2.
2. Single Product Title – Displays product title.
3. Single Product Description – Displays product description.
4. Single Product Rating – Displays product rating.
5. Single Product Hooks – Displays e-commerce hooks. ‘woocommerce_before_single_product_summary’, ‘woocommerce_single_product_summary’, ‘woocommerce_after_single_product_summary’
6. Single Product Price – Displays product price.
7. Single Product Excerpt – Displays product excerpt.
8. Single Product Add to Cart – Displays cart form.
9. Single Product Meta – Displays product meta.
10. Single Product Tabs – Displays product tabs.
11. Single Product Upsells – Displays product upsell.
12. Single Product Related Products – Displays related products.
13. Single Product Navigation – Displays product navigation.

Porto offers you Shop builder elements to build your product archive page simply and easily. Porto is based on #1 page builder – WPBakery, reliable page builder – Elementor, fast page builder – Visual Composer and Gutenberg block editor to build your website. So Porto allows you to build your product archive page with WPBakery Elements, Elementor Elements, Visual Composer Elements and Gutenberg blocks. Here, let’s see WPBakery Single Product Builder Elements, mainly.

It consists of 5 elements.

Each element is an important part of product archive page. As you probably know, The important components of product archive are products, filter, pagination and etc. Now we provide WPB elements instead. You can make any archive page layout which you want by means of drag and drop of archive product elements. It’s e-commerce revolution like header and footer builder. Ok. Well, let’s see these elements below.

1. Shop Products – Displays products which are filtered by pagination, category, attributes and so on.
2. Tool Box – The filter select.
3. Shop Hooks – Displays e-commerce hooks.   ‘woocommerce_before_shop_loop’, ‘woocommerce_after_shop_loop’
4. Archive Title – Title of product archive page.
5. Archive Description – Description of product archive page.

A logo element is very important element of website. The Logo is the symbol of site. The Porto Logo element displays logo which is set in theme option.

How To Use The Porto Logo Element

Step 1. Create, or choose the Column into which you want to add your element. Click on Add New Element.

Step 2. Select Porto Logo Element from the Element List.

Step 3. Configure the Porto Logo Element to some place into your header.

Step 4. After completing your configuration, don’t forget to save all changes.

Element Content Options

Extra class name – Add your additional class name without dot. e.g: my-class.

Porto offers you perfect options by providing navigation menus. In Theme Option, you can control menu skin. E.g: menu typography, menu item spacing, sidebar menu typography, dropdown menu spacing and typography… You only drag and drop to header main section.

How To Use The Porto Menu Element

Step 1. Create, or choose the Column into which you want to add your element. Click on Add New Element.

Step 2. Select Porto Menu Element from the Element List.

Step 3. Configure the Porto Menu Element to some place into your header.

Step 4. After completing your configuration, don’t forget to save all changes.

Element Content Options

Location – Select menu location which you want to display.

A switcher element is an important element of all websites. It consists of two switcher: language switcher and currency switcher. If you need more details, please go to Porto Translation.

How To Use The Porto Switcher Element

Step 1. Create, or choose the Column into which you want to add your element. Click on Add New Element.

Step 2. Select Porto Switcher Element from the Element List.

Step 3. Configure the Porto Switcher Element to some place into your header. We have 2 types of switcher: language and currency. And we support multiple design options.

Step 4. After completing your configuration, don’t forget to save all changes.

Element Content Options

Type– Select switcher type: language and currency.

Top Level Font Size– Font Size of  top level menu.

Top Level Font Weight– Font Style of  top level menu.

Top Level Text Transform– Text transform of  top level menu. E.g: uppercase, lowercase, capitalize, none…

Top Level Line Height– Line height of  top level menu.

Top Level Letter Spacing– Letter spacing of  top level menu.

Top Level Color– Color of  top level menu.

Top Level Hover color– Hover color of  top level menu.

Extra Class Name– Add your additional class name without dot. e.g: my-class.

A search element is an important element of website. It must provide accurate search results and multiple design options. The Porto Search Form Element provides you accurate information and stunning styles as well. Porto Search Element has many types. And it is fully customizable. To see this page to know about the samples.

How To Use The Porto Search Form Element

Step 1. Create, or choose the Column into which you want to add your element. Click on Add New Element.

Step 2. Select Porto Search Form Element from the Element List.

Step 3. Configure the Porto Search Form Element to some place into your header. And we support multiple design options.

Step 4. After completing your configuration, don’t forget to save all changes.

Element Content Options

Placeholder Text– Placeholder of search box input.

Show Category Filter– Determines whether you can search by categories or not.

Show Categories on Mobile– Determines whether to show or hide categories on mobile.

Popup Position– Determines dropdown position.

Search Icon Size– Size of search icon.

Search Icon Color– Color of search icon.

Input Box Width– Width of search input box.

Height– Determines search height.

Border Width– Determines border width of search box.

Border Color– Determines border color of search box.

Border Radius– Determines border radius of search box.

Separator Color– Determines separator color of search box.

Extra Class Name– Add your additional class name without dot. e.g: my-class.

A cart element is very important element of e-commerce website. It must be compatible with Woocormmerce plugin. And it must provide accurate information and stunning styles as well. The Porto Cart Element offers you 4 kinds of display mode; namely Dropdown mode and Off Canvas mode. It also has 4 layout types. And it also supports multiple design options.

How To Use The Porto Mini Cart Element

Step 1. Create, or choose the Column into which you want to add your element. Click on Add New Element.

Step 2. Select Porto Mini Cart Element from the Element List.

Step 3. Configure the Porto Mini Cart Element to some place into your header.  And then, default cart will be shown with default layout. The Porto Cart Element has 2 display modes, 4 layouts and multiple design options.

Step 4. After completing your configuration, don’t forget to save all changes.

Element Content Options

Type– Cart element supports 4 types: simple, arrow alt, text, Icon & text.

Content Type– Two Types: default and off-canvas mode.

Custom Icon Class– Add custom class to icon.

Icon Size– Cart icon size.

Icon Color– Cart icon color.

Icon Margin Left– Margin left of cart icon.

Icon Margin Right– Margin right of cart icon.

Text Font Weight– Font weight of text label.

Price Font Weight– Cart price weight.

Extra Class Name– Add your additional class name without dot. e.g: my-class.