With the Organic Real Estate Integration plugin, you have complete creative control over how your listing popup appears when users click on a property. One of the most advanced and flexible features is the ability to define a Custom Layout using CSS Grid’s grid-template-areas.

This feature allows you to reorder, resize, and design the popup exactly how you want—using simple code and intuitive layout planning.

Where to Find the Custom Layout Settings

1. Open the page containing your listings in Elementor.
2. Click on the Organic Real Estate Integration widget.
3. Navigate to the Style tab.
4. Scroll down to the Listing Popup section.
5. In the Layout Style dropdown, choose Custom.

Once selected, a Custom Layout Grid textbox appears, allowing you to enter a grid-template-areas configuration.

Understanding the Layout Grid Areas

You can rearrange four key sections of the popup:

• photos – Displays the property images.
• details – Includes pricing, address, bedrooms, bathrooms, and features.
• form – The contact or inquiry form for the listing.
• footer – Any additional information or disclaimers at the bottom.

Example Layouts You Can Use

Here are a few sample grid templates you can copy and modify as needed:

Example 1: Simple Vertical Stack

"photos"
"details"
"form"
"footer"

This layout stacks each section vertically—perfect for a clean, scrollable design.

Example 2: Two-Column Layout

"photos details"
"photos form"
"photos footer"

This places the photos in the left column spanning multiple rows, and the details, form, and footer in the right column.

➕ Example 3: Footer with Full Width

"photos details"
"form form"
"footer footer"

This design keeps the photos and details side-by-side, then places the form and footer full-width below them.

Styling the Custom Layout

After defining your grid layout, head over to the Style tab for additional customization. You can style each section individually to ensure a cohesive and attractive design.

Typography

Set font family, weight, size, and spacing for text within the popup.

Text Colour

Choose custom text colours for details, form, and footer areas.

Background Type

Apply solid colours, gradients, or background images to the entire popup or individual sections.

Tips for Success

• Be sure your custom layout is mobile responsive by using CSS grid-template-areas that adapt to smaller screens.
• Use consistent spacing and padding in the Style tab to ensure readability.
• If you’re using custom CSS for advanced grid sizing (e.g., grid-template-columns), wrap it in a <style> block or apply it through your theme customizer.

Final Thoughts

The Custom Layout Grid feature gives you complete freedom to design a listing popup that perfectly fits your website’s aesthetic and your users’ needs. Whether you want a photo-first layout, a minimalist column layout, or a custom marketing-focused design—you can build it easily using grid-template-areas.

With the Organic Real Estate Integration plugin and Elementor, powerful customization is just a few clicks away.