Elements

The Elements category in the Porto theme documentation provides a complete reference to all reusable design components available in Porto’s Page Builder integrations, including WPBakery and Elementor. These elements serve as the building blocks for creating custom layouts, enhancing user interfaces, and improving the visual and functional experience across your website.

Porto Elements include everything from structural components (rows, columns, containers) to interactive tools such as sliders, buttons, carousels, grids, forms, icons, counters, accordions, and dynamic WooCommerce elements.

Whether you’re building a product page, portfolio, blog layout, landing page, or a fully dynamic WooCommerce storefront, the Elements category helps you understand how to use each component effectively. It guides you through configuration options, best practices, and available style controls so you can build professional-grade pages with ease.

Cursor effect Widget

The Porto Cursor Effect element enhances user interaction by replacing or extending the default mouse cursor with custom visual effects. It allows you to highlight specific areas, apply spotlight-style focus, and animate cursor behavior when hovering over defined targets. This feature is designed...

Image Comparison Widget

The Porto Image Comparison element allows you to visually compare two images using an interactive slider. It is ideal for showcasing design changes, photo edits, renovations, or any before-and-after transformation. This element is fully supported in both Elementor and WPBakery Page Builder. The Before Image is shown...

Scroll Progress Widget

The Scroll Progress element visually indicates how much of a page has been scrolled. As users move down the page, the progress indicator updates in real time, improving navigation and content awareness—especially on long pages. This element is available in both Elementor and WPBakery Page Builder.

Porto Posts Grid Element

The Porto Posts Grid element is a flexible listing widget used in pages and Porto builders (Elementor / WPBakery). It queries post items such as posts, products, portfolio items and renders them in a configurable grid, list, or slider layout using a selected Post Mini...

Filter Products By Price

The Filter Products by Price widget allows customers to filter WooCommerce products within a specific price range. This widget is typically used in shop sidebar areas to enhance product discovery and improve user experience. Porto includes an extended version of this widget with optional price chart...

Porto Carousel Element

The Porto Carousel Element in the Porto Post Type Builder allows you to display posts or custom content in a responsive carousel with customizable navigation, animations, and device-specific controls. Open the Post Type Builder. Click the “+” Add Block icon in the...

Porto Meta Element

The Meta Element in the Porto Post Type Builder allows you to display dynamic metadata for posts, products, and any registered custom post types. It supports WordPress core fields, WooCommerce product attributes, and custom taxonomies created by plugins such as Unlimited Post Types. This element is...

Woo Short Description Element

The Woo Short Description element is a dynamic Porto widget used to display the WooCommerce product’s short description within custom product card layouts. This field pulls directly from the Product → Short Description section inside WooCommerce, making it ideal for grids, carousels, category listings, and...

Porto Woo Stock Element

The Woo Stock element in the Porto Post Type Builder displays the dynamic stock status of a WooCommerce product inside a custom post item layout. It retrieves real-time availability information—such as In Stock, Out of Stock, or Available on Backorder—based on the product’s inventory settings...

Porto Woo Rating Element

The Woo Rating element is a dynamic Porto widget designed for WooCommerce product layouts inside the Porto Post Type Builder. It displays the product’s average rating along with WooCommerce star styling. This element is commonly used in product cards, grids, carousels, related products, category listings,...