Features

The Features category highlights the key design elements, functionalities, and performance enhancements available in the Porto theme. It includes guides and showcases for layout options, speed optimization tools, header and footer builders, custom widgets, and advanced theme settings.

This category is ideal for learning how to take full advantage of Porto’s built-in tools — such as the Template Builder, Speed Optimize Wizard, and integration options with popular plugins like WooCommerce, Elementor, and WPBakery Page Builder. Each post under this category focuses on helping users unlock specific Porto features to create faster, more flexible, and visually engaging websites.

16Dec

Scroll Parallax effect

The Scroll Parallax Effect in Porto adds smooth, scroll-driven motion to layout elements, enhancing visual depth and engagement as users move through the page. This effect can be applied to Rows and Sections in WPBakery, and Sections, Columns, and Containers in Elementor. Edit a...
16Dec

Hover Dir effects

Hover Dir Effect (Hover Direction Effect) adds a directional hover animation that reacts to the direction of mouse entry and exit. Overlay content animates in and out from the corresponding direction (top, bottom, left, or right), creating a more dynamic and engaging...
16Dec

Conditional Rendering

Conditional Rendering allows you to control when and where elements are displayed based on specific conditions. Instead of showing the same content to every visitor, you can dynamically display elements depending on context such as user status, device type, page type, or WooCommerce conditions. This feature is...
11Dec

Mouse Parallax

Porto includes a Mouse Parallax animation feature that adds depth and movement to your website by allowing elements to shift based on the user’s mouse position. This effect works in both WPBakery Page Builder and Elementor, making it easy to craft visually engaging and interactive layouts. Mouse...
10Dec

How to Control Edit Area Width

In Porto, you can adjust the Edit Area Width inside your page builder so that the editor matches your front-end layout more accurately. This does not affect the live site—it only changes the width of the working canvas in Elementor or WPBakery. This is especially useful when...
10Dec

Shape Divider

Porto provides powerful Shape Divider options that allow you to add decorative top and bottom shapes to any Section (WPBakery) or Section/Container (Elementor). Shape Dividers help create smooth transitions between sections and give your site a more dynamic visual style. You can use Porto’s built-in divider...
10Dec

Where to Add or Edit Custom CSS When Using Elementor Editor

When editing a page with Elementor, Porto provides a dedicated Porto Settings panel where you can configure layout options and add page-specific Custom CSS. Open the Page in Elementor Edit any page, post, or Porto Builder block using Edit with Elementor. Open the Post Settings Panel. In the top-left...
10Dec

How to use Pre-Order

WooCommerce normally prevents customers from purchasing products that are out of stock. The Pre-Order feature in Porto removes this limitation by allowing customers to buy items before they become available for shipping. This is useful when: A product is temporarily out of stock A product is scheduled for...
09Dec

How to enable skeleton mode

Skeleton Mode displays lightweight placeholder shapes while page content is loading. These placeholders—known as skeleton screens—give users an immediate visual structure of the page, reducing perceived loading time and improving user experience. Instead of a blank white screen, visitors see grey or neutral-toned blocks that...
09Dec

How to add floating effects to elements

Porto Floating Effects allow you to add interactive, mouse-based motion effects to elements in your layout. When users move their mouse cursor across the page, selected elements shift subtly to create a dynamic parallax-style movement. This feature enhances visual depth, making sections feel more modern...