The Porto Post Type Builder Elements are a set of 9 Gutenberg-based widgets designed specifically for building custom item layouts inside the Porto Post Type Builder. These elements enable you to display dynamic post data—such as titles, images, prices, categories, ratings, ACF fields, icons, and buttons—within custom-designed loop item layouts.
These widgets are used when creating Post Type Blocks, which can then be applied inside grids, carousels, archive pages, category blocks, related items, and other Porto components that output a post loop. This system allows you to design fully custom post-type presentation cards without editing theme files or templates.
Element List & Descriptions
Before adding elements to your Post Type Block, it’s helpful to understand how they are accessed and managed inside the builder interface.
In the top-left corner of the Post Type Builder edit screen, you will find the “+” Add Block button. Clicking this reveals the full library of available Porto widgets and Gutenberg blocks. After inserting a widget into your layout, you can organize and structure your design using the Document Overview panel. This panel appears when you click the Sidebar (Outline) icon in the upper-left corner of the editor window. Using the Document Overview, you can drag, reorder, nest, and manage all widgets in a clean hierarchical view, giving you precise control over layout structure and element placement.
Below is a high-level explanation of each Porto element available in the Post Type Builder.
- Featured Image - Displays the post’s featured image dynamically, with support for custom ratios, hover effects, links, and overlays.
- Content - Outputs the post’s content or excerpt depending on configuration.
- Woo Price - Displays dynamic WooCommerce product pricing, including sale and regular prices.
- Woo Rating - Shows the product’s rating average and star display based on WooCommerce reviews.
- Woo Stock - Dynamically outputs the product stock status such as “In Stock,” “Out of Stock,” or backorder text.
- Woo Short Description - Displays the product’s short description field, commonly used in minimal or compact product cards.
- Woo Link - Add WooCommerce buttons such as Add to Cart, QuickView, Wishlist or Compare.
- Meta - Shows post meta information including date, author, categories, tags, or custom taxonomy values.
- Porto Carousel - Provides a small, customizable carousel for displaying multiple images or dynamic gallery fields inside the layout.
