The Media Section shows the property images and video on the property page. Choose its type for all properties in Theme Options, and change it for a single property when you need to.
Choose the gallery type for all properties
- Go to Theme Options > Property Page > Property Page Design.
- In “Media Section” Type (property images & video), click a type: classic slider, vertical slider, horizontal slider, slider v4, multi image slider, masonry gallery v1 or masonry gallery v2.
- Click Save Changes.
Hero Media Header for Property Page, the option above it, is a separate setting: it controls the first section below the site header.
The Media Section type applies to the property page layouts in Property Page Design. A property page built with a custom template uses the gallery widget placed in that template.
Change the gallery type for one property
- Edit the property in wp-admin.
- In the Property Details box, open the Display options tab.
- Select a type in Property Slider Type? Keep global to use the type from Theme Options.
- Update the property.
Media Section buttons
In Theme Options > Property Page > Property Page Design > Media Section Order – Buttons Selection, drag the buttons between Enabled and Disabled: Image Gallery, Map View, Street View, Video and Virtual Tour. The enabled buttons show above the images in the order you set. With one button enabled, no buttons show.
The buttons show with the classic slider, vertical slider, horizontal slider and slider v4.
Classic slider
The classic slider shows one large image at a time.
Vertical slider
The vertical slider shows the main image with the thumbnails in a column beside it.
Horizontal slider
The horizontal slider shows the main image with the thumbnails in a row below it.
Slider v4
Slider v4 shows the images in a wide slider with a row of thumbnails over its bottom edge. The thumbnail row fits about 8 to 9 images.
To keep more thumbnails on a single row, add this CSS in Theme Options > Design > Custom CSS:
#carousel-property-page-header .carousel-indicators{
height:100px;
}
To hide the thumbnails, use this CSS:
#carousel-property-page-header .carousel-indicators {
display: none;
}
Multi image slider
The multi image slider shows 3 images side by side on desktop and slides through the rest.
Masonry gallery v1
Masonry gallery v1 shows the featured image as a large tile and up to 5 more images as smaller tiles. The last tile shows See all … photos and opens the lightbox.
The Elementor widget Masonry Gallery – V2 and the WPBakery element Property Page Only – Masonry Gallery show this layout in a custom template.
Masonry gallery v2
Masonry gallery v2 shows the featured image as a large tile on the left and the next 4 gallery images as tiles on the right. The layout follows the number of images on the property, so no tile is left empty.
| Images | Layout |
|---|---|
| 1 | The featured image fills the full width. |
| 2 | The two images sit side by side at the same height. |
| 3 | The featured image on the left, two images stacked on the right. |
| 4 | The featured image on the left; on the right, two images on top and one across the bottom. |
| 5 or more | The featured image on the left and a 2×2 grid on the right. The last tile shows See all … photos and opens the lightbox with every image. |
On phones the featured image stays on top and the other images fill the full width below it.
The Elementor widget Masonry Gallery – V1 and the WPBakery element Property Page Only – Masonry Gallery Type2 show this layout in a custom template.
Masonry gallery v2 with 5 or more images:
Masonry gallery v2 with 2 images:
Masonry gallery v2 with 4 images:
For the best result, use good quality images with similar proportions.