One of the most powerful features of the Organic Real Estate Integration plugin is the ability to reorder the listing popup layout using a visual grid system—powered by CSS Grid. Behind the scenes, each part of the listing popup is already structured into semantic HTML containers. These containers are assigned unique CSS grid area names, which you can target, reposition, and restyle.

Let’s explore how you can edit your CSS to define a layout, and then reorder these sections visually using Elementor’s Custom Layout Grid.

How Grid Areas Work in the Listing Popup

Each section inside the listing popup is already labeled with a specific CSS grid-area name. These are:

• photos – The section that displays property images.
• details – Includes the price, address, beds, baths, and building size.
• form – The contact form visitors can use to inquire.
• footer – Any extra information or disclaimers.

These area names are used within a CSS Grid Container, which lets you define a visual layout using the grid-template-areas property.

Example: Basic Grid Structure in CSS

Here’s what the HTML structure looks like conceptually:

<div class="orei-popup-grid">
  <div class="popup-section photos">...</div>
  <div class="popup-section details">...</div>
  <div class="popup-section form">...</div>
  <div class="popup-section footer">...</div>
</div>

In the background, these classes are automatically mapped to CSS grid areas like this:

.popup-section.photos { grid-area: photos; }
.popup-section.details { grid-area: details; }
.popup-section.form { grid-area: form; }
.popup-section.footer { grid-area: footer; }

This setup means you don’t need to change any HTML—the grid-area naming is already handled. All you need to do is define your grid layout.

Creating Your Own Grid Template with CSS

If you’re a developer or comfortable editing CSS, you can define a custom layout manually like this:

.orei-popup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "photos details"
    "form form"
    "footer footer";
  gap: 20px;
}

This will:

• Show photos and details side-by-side.
• Stretch the form and footer across the full width.
• Add spacing between grid areas with gap.

Reorganize the Layout Visually in Elementor

If you prefer not to write CSS manually, the plugin offers a Custom Layout Grid textbox directly inside Elementor:

1. Click on the Organic Real Estate Integration widget.
2. Go to the Style tab.
3. Find the Layout Style dropdown and select Custom.
4. A textbox will appear—enter your grid-template-areas layout there.

Example input:

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

This matches your CSS-defined area names and updates the layout instantly.

Advanced Customization Tips

• You can still define grid-template-columns, gap, and padding using additional CSS in your theme or via Elementor custom CSS.
• Use media queries to make the popup responsive:@media (max-width: 768px) { .orei-popup-grid { grid-template-areas: "photos" "details" "form" "footer"; grid-template-columns: 1fr; } }
• Want more spacing between sections? Just adjust the gap value or use padding in the Style tab.

Final Thoughts

The Organic Real Estate Integration plugin gives developers and designers full control over the structure of the listing popup:

• Define layout areas using standard HTML structure.
• Customize the layout visually in Elementor using grid-template-areas.
• Apply advanced CSS for responsiveness and spacing.

Whether you’re building for design flexibility or performance, this feature empowers you to craft a layout that perfectly fits your website and user experience.