With the Organic Real Estate Integration plugin, you can fully control the layout and design of your listing popup—the modal window that appears when a user clicks on a property thumbnail. This popup is a critical piece of the user experience, and Elementor gives you the power to style and structure it to match your website’s design.

Let’s walk through how to customize the layout and appearance of the listing popup using the Elementor widget.

Where to Find the Settings

1. Open the page in Elementor that contains your listings.
2. Click on the Organic Real Estate Integration widget.
3. Navigate to the Style tab.
4. Scroll down to the Category: Listing Popup section.

From here, you’ll find all the customization options available to fine-tune how your popup appears.

Basic Styling Options

Background Type

Set the background colour, gradient, or image for the popup itself. This lets you match the popup with your overall brand style.

Maximum Width

Control how wide the popup can appear on screen. A smaller width gives a tighter, compact feel, while a larger width can show more detailed content comfortably.

🔙 Back Button Styling

The popup includes a Back button to close the modal or return to the listing grid. You can customize:

• Typography: Adjust the font family, weight, and size.
• Text Colour: Change the color of the back button text.
• Background Type: Choose solid colors, gradients, or even images for the back button background.

🧩 Layout Style Options

One of the most powerful features is the ability to change the layout style of the popup using a simple dropdown. There are four layout options available:

1. Default Layout

• Overview: A traditional layout that shows a large photo on the left, with a carousel of smaller photos, and property details like price and address on the right.
• Best For: Balanced views where you want photos and text side-by-side.

2. Compact Layout

• Overview: A more condensed version of the popup with minimal spacing and a streamlined design.
• Best For: Mobile-first designs or websites aiming for a minimalist feel.

3. Wide Photo Layout

• Overview: The main image takes up the full width of the popup in a widescreen format, with all other information appearing below the image.
• Best For: Sites that want to highlight visual content first.

4. Custom Layout

• Overview: Allows full control via a Custom Layout Grid, using the grid-template-areas CSS property.
• Best For: Advanced users and designers who want to completely control the structure and flow of the popup.

Creating a Custom Layout Using Grid Template Areas

When you select Custom from the layout style dropdown, a textbox appears allowing you to define your own layout using grid-template-areas. The available content sections in the popup are:

• photos – the property photos section
• details – pricing, address, and features
• form – the contact form
• footer – any extra footer content or disclaimer

Example 1: Simple Vertical Stack

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

This stacks all the content areas in a single column.

Example 2: Two Column Layout

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

This places the photos in the first column spanning three rows, and the details, form, and footer in the second column beside it.

Example 3: Footer Full Width

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

Here, photos and details appear side-by-side, the form takes full width underneath, and the footer spans the bottom.

You can get creative and adjust row/column sizes using CSS as needed. This gives you full freedom to design a popup layout that fits your brand and content priorities.

Styling the Custom Layout

After defining your layout, you can also customize the text and design of each section in the Style tab. These include:

• Typography: Adjust the font for each text element (e.g., headings, labels, descriptions).
• Text Colour: Set different colors for text in the details, form, and footer areas.
• Backgrounds: Apply different background types to make sections stand out or blend in.

Final Thoughts

The listing popup is one of the most important interaction points on your real estate website. With the Organic Real Estate Integration plugin’s layout and styling tools, you can:

• Customize the layout using preset options
• Take full control with a custom CSS grid
• Style every aspect using Elementor’s intuitive controls

All of this ensures that your popup doesn’t just show the right information—but looks great doing it.