The Porto Featured Image element is a core part of the Porto Single Builder. It displays featured images or videos from the current post in a flexible and visually controlled way. Instead of relying on a fixed layout, this element lets you choose how featured media appears on single posts, portfolios, or custom post types.
Because the element pulls media directly from the post, content always stays in sync. At the same time, you can adjust layouts and styles without writing custom code.
How to Use the Porto Featured Image Element
-
Open a Single Post Template
- First, go to Porto → Template Builder → Single Post
- Then, open an existing template or create a new one using Elementor or WPBakery Page Builder
-
Add the Featured Image Element
- Next, open the builder panel, locate Featured Image under Porto Single Builder Elements
- After that, drag and drop the element into your layout
-
Choose Media Type
In the Content tab, open the Featured Media section and select a Media Type. The available options update automatically based on your selection.
Media Type Options (Content Tab)
Each media type provides its own set of options. This helps keep the interface clean and focused.
- Media Type: Grid
| Option | Description |
|---|---|
| Columns | Sets the number of image columns in the grid layout |
| Image Resolution | Defines the image size used for featured images |
- Media Type: Images
| Option | Description |
|---|---|
| Show Zoom Icon | Displays a zoom icon on featured images |
| Advanced Post Share | Enables advanced post sharing buttons |
| Hover Effect | Applies a hover animation to images |
| Image Resolution | Controls the image size used for display |
| Show Thumbnail Images | Displays thumbnail images below or beside the main image |
- Media Type: Masonry
| Option | Description |
|---|---|
| Image Resolution | Defines the image size used in the masonry layout |
- Media Type: Video
This media type does not include configurable content options.
The featured video is displayed automatically based on the post settings.
Style Options (Style Tab)
Style options also change based on the selected media type. This ensures that only relevant controls appear.
- Media Type: Grid
| Option | Description |
|---|---|
| Overlay Background Color | Sets the overlay background color on hover |
| Zoom Icon Color | Defines the color of the zoom icon |
| Icon Background Color | Sets the background color of the zoom icon |
| Icon Background Size | Adjusts the size of the icon background |
| Icon Size | Controls the zoom icon size |
| Image Height | Sets a fixed height for images |
| Image Padding | Adds inner spacing around images |
- Media Type: Images
| Option | Description |
|---|---|
| Navigation Controls | Enables or disables carousel navigation arrows |
| Dots Pagination | Enables or disables pagination dots |
| Carousel Spacing | Adjusts spacing between carousel items |
| Alignment Options | Controls alignment of carousel elements |
- Media Type: Masonry
| Option | Description |
|---|---|
| Overlay Background Color | Sets the overlay background color |
| Zoom Icon Color | Defines the color of the zoom icon |
| Icon Background Color | Sets the background color of the zoom icon |
| Icon Background Size | Adjusts the size of the icon background |
| Icon Size | Controls the zoom icon size |
- Media Type: Video
No style options are available for the Video media type.
Notes on Usage
- The Featured Image element always loads media from the current post.
- Available options change automatically when you switch media types.
- Video media depends on the post’s featured video configuration.
- All layouts are fully responsive across devices.
Additional Tips
- Grid layouts work well for posts with multiple featured images.
- Image galleries suit visual storytelling and rich content.
- Masonry layouts create a modern, editorial appearance.
- Video media works best for posts focused on video content.
- Finally, always preview your layout on tablet and mobile screens.
