GravityView just got a major design upgrade! We’re thrilled to announce the release of the GravityView Advanced Elementor Widget, a powerful new way to design beautiful Views using Elementor’s visual interface.
If you’ve ever wanted to customize your GravityView layouts beyond what’s possible in the View editor—but without touching a single line of CSS—this feature is built for you.
With the new Elementor integration, GravityView’s data display power meets Elementor’s intuitive drag-and-drop design. The result? You gain full control over how your Views look and feel—visually, effortlessly, and without code.
Basic and Advanced Elementor Widgets
GravityView now includes two types of Elementor widgets:
- Basic Widget (Coming Soon):
This version allows you to easily embed any GravityView View into an Elementor page. It includes core display options and basic settings to help you integrate your Views into your page layout smoothly. - Advanced Widget (Available Now for Pro and All Access Users):
The advanced widget unlocks extensive styling controls, responsive design settings, and deep customization options. It’s designed for users who want to fine-tune every detail—from spacing and typography to colors and entry layout structure.
Embed Views With Drag-and-Drop Simplicity
Adding your View is now easier than ever. Simply open Elementor, search for “GravityView” in the widget panel, and drag it onto your page. From there, select your desired View from the dropdown and instantly see it appear in the live preview.
All standard GravityView options—like entries per page, search bar visibility, and user edit permissions—are right inside the Content tab. You can tweak settings without leaving Elementor’s visual editor.
This means no more switching between different screens or guessing how things will look once published. Everything happens in real-time.
Granular Styling Control for Every Element
This is where the real power of the integration shines. The Style tab gives you fine-tuned control over every visual element of your View.
You can toggle between your Multiple Entries and Single Entry pages and adjust styles independently for each. Depending on the View layout (List, Table, Layout Builder, etc.), you’ll see unique styling options tailored to that layout.
For example, you can customize:
- Container: Control the outer wrapper, background, and alignment.
- Entry Loop: Adjust entry spacing, number of columns, and card layout.
- Field Zones: Style specific areas like field labels, values, or images.
Elementor’s visual controls let you modify:
- Text and background colors to match your brand
- Typography settings (font size, weight, family)
- Margins and padding for pixel-perfect spacing
Each change applies instantly to the live preview, giving you a full visual workflow.
A Cascading Style System That Just Works
The GravityView Elementor Widget uses a cascading styling hierarchy, similar to CSS.
You can apply a global color or font to the container, and it automatically affects everything inside. Then, if needed, you can override those settings for specific fields or elements. This approach ensures a consistent design while still offering granular control where it counts.
The result is a cohesive design system that’s both fast and flexible.
Find and Edit Elements Instantly
Two smart features make styling even easier: hover preview and click-to-edit.
Hover over a section in the Style tab, and the corresponding area in your View highlights automatically—so you always know what you’re editing.
Even better, you can click directly on any element in the View preview, and Elementor will jump straight to the matching style controls. No more hunting through menus or guessing what each option changes.
This intuitive workflow makes it faster than ever to style your Views exactly the way you want.
Responsive Design Built Right In
Today’s users browse on everything from wide desktop monitors to small phone screens. The new GravityView widget takes full advantage of Elementor’s responsive design controls, allowing you to customize layouts for desktop, tablet, and mobile.
You can preview each device and tweak settings individually—for example:
- Show four entries per row on desktop, but one per row on mobile
- Reduce padding for smaller screens
- Adjust typography for better readability
- Modify layout structure for compact designs
Each device view retains its own style settings, ensuring your GravityView displays beautifully across all devices.
Supported Layouts
The Elementor integration supports most popular GravityView layouts right out of the box, including:
- List Layout
- Table Layout
- DIY Layout
- Maps Layout
- Layout Builder
Support for the DataTables Layout is coming soon. Each layout includes its own tailored style options, reflecting its unique structure and design potential.
Create Professional Designs in Minutes
Before this integration, achieving a polished look often meant hiring a developer or writing custom CSS. Now, anyone can design professional Views visually—no coding required.
For example, imagine you have a simple member directory View. In just a few clicks, you can:
- Turn it into a responsive grid (four columns on desktop, one on mobile)
- Add a soft background to the container
- Style each member card with subtle shadows
- Refine typography and color palettes for readability
- Adjust spacing for a clean, modern look
In minutes, you’ll have a professional, branded layout that perfectly fits your website’s style.
Available Now for GravityView Pro Users
The Advanced Elementor Widget is available now for GravityView Pro and All Access license holders.
If you’re already using GravityView and Elementor, head to your “Manage Your Kit” page in WordPress, download the extension, and start experimenting with the new visual styling features today.
We’re excited to see what the community creates with this new tool. Share your designs with us on Twitter or reach out via our support desk—we’d love to feature your work!
