Avada Roadmap: August (2025) Progress Update

Work on Avada 8 has continued steadily through the summer, and following on from the July progress update we’re excited to share one of the most significant new additions to the upcoming release: the Design Hub. This is a central place for managing styles, variables, states, and media queries—bringing key design tools together into a single streamlined interface.

Let’s take a closer look at what the Design Hub offers and how it will improve your Avada web design workflow.

The Design Hub is all about clarity and control. Rather than jumping between different panels or settings, you’ll be able to manage the core building blocks of your site’s design in one place. Each section—Styles, Variables, States, and Media Queries—offers more flexibility, better organisation, and a smoother building experience overall.

As we’ve mentioned in previous updates, Styles are an important new part of how elements are styled in Avada 8. You’ll be able to create and apply global styles across multiple Elements—even across different types of Elements. Elements can also use multiple styles simultaneously, making it easier to build consistent and reusable design patterns.

Within the Design Hub, you can manage your styles: create, rename, delete, or group them for better organisation. When editing an element, simply choose from the available styles and apply them as needed.

Variables are global CSS values you can use throughout your site—ideal for things like brand colors, font sizes, spacing, and more. Updating a value in one place updates it everywhere it’s used, making it easy to maintain and adapt your design over time.

Previously, some global settings (like color palettes and typography options) already acted as CSS variables. Now, those variables—and any others you create—can be managed centrally within the Design Hub. And like with styles, you can group and search through your variables to keep things tidy.

CSS states define how elements behave under certain conditions. The most familiar example is :hover, which has been available in Avada for a long time. With Avada 8, we’re expanding this system significantly.

You’ll now be able to use built-in states like hover, active, and focus, as well as create your own advanced custom states using prefix or suffix selectors. For example, you could style an element differently when its parent is being hovered. These states can then be used when styling elements or global styles—giving you much deeper visual control.

Responsive design is a must, and in Avada 8, we’re giving you more power than ever before. While previous versions used the traditional small/medium/large setup, you’ll now be able to create custom breakpoints. This allows you to target devices, such as extra-small screens or laptops, with precision.

You will also be able to set the builder preview width for each media query or freely resize the preview window to see how your design adapts, without having to leave the builder.

Beyond standard media queries, Avada 8 will support CSS container queries—which respond to the size or state of a specific parent element rather than the device viewport. This opens up new possibilities, such as changing styles when a container becomes sticky or adjusting typography when a Column reaches a certain width. All of this is controlled via the Design Hub.

While we continue to build toward Avada 8, we have also been working on an exciting new feature release for you, Avada 7.13, which includes several frequently requested features and refinements. This update will ship the week of August 11, 2025.

We’re looking forward to sharing more updates as we approach the next milestone in the Avada 8 journey. Thank you again to everyone who participated in the survey—we appreciate your insights and continued support.