Spring is in the air! In this latest roadmap installment, we will share Avada 8.0 progress and the latest news regarding Avada 8 Sandbox Alpha.

We initially planned to kick off the sandbox alpha testing phase in March. However, we’ve decided to adjust the timeline. The reason? We’re introducing key improvements that will significantly enhance the Avada 8 experience. While this means a short delay, it also ensures that early testers will get access to a more refined and feature-complete version of the live builder.

Following on from the February Roadmap post let’s take a look at what’s new.

One of the most significant updates is introducing an additional layer to our element system, enabling even more flexibility and control. These improvements require foundational framework updates, pushing back the sandbox testing start date. However, we’re making great progress, and if all goes to plan, we anticipate launching the sandbox phase in April.  The key features we are laying the foundations for are:

Instead of responsive control being limited to only a select number of options, each CSS-based option supporting responsive control will do so. This also extends to state-based styling.  So, you will have fine control over the hover and active state of elements.

In the December roadmap post, we revealed Global Styles for elements.  These continue to be the foundation of element styling in Avada 8 and offer global control for all element options.  Although already CSS class-based, these global options are element-specific.

In addition to these Global Element Styles, we also want to introduce Class Styles, which you can create and apply to different element types.  This feature offers extra flexibility and control over how you build your website.

When the Avada 8 sandbox alpha starts, it will be a controlled testing environment with select power users. Here’s how it will work:

To be clear, this is not the full beta—instead, it’s an early look at the new building experience and workflow. We appreciate our users’ patience and can’t wait to share what we’ve been working on.

Stay tuned for more updates, and if you’re interested in participating in the Avada 8 Alpha, please log into your My Avada account and fill out this form to register.

We encourage you to subscribe to our social media platforms to stay tuned for future updates regarding Avada 8, creative Avada Studio content, and pre-built Avada websites.

Avada Studio is an expansive library of multi-use content blocks professionally designed to speed up your web design workflow. In addition, Avada’s intuitive interface makes it easy for you to live preview any content before importing directly into your content with a click.

The Avada Studio is, by design, a creative resource for anyone building a website with Avada and WordPress and it is intended to give you a head start when creating website content and layouts.

This collection showcases the most recent content blocks released by our team and follows from this previous article [COLLECTION 28]. All content is ready to import into your website with a click of a button.

It is essential to note that you are not limited to how and where the content can be used within your Avada website with each content item being very flexible and ready to integrate into your layouts.

Studio content is neatly organized into a range of categories making it straightforward to search through, view, and then import into your workflow.

Studio content is prebuilt for anyone creating a website with Avada and WordPress. All content is effortlessly customizable and intended to integrate seamlessly into your website content and layouts.

Accessing and importing prebuilt content is straightforward if you already use Avada for your website, and it is done via the WordPress Dashboard. We encourage you to take a look at this detailed help file and video explaining how to use the Avada Studio.

If you are new to WordPress and want to explore the power of building a successful website with Avada and prebuilt content, use the links below.

A progress bar is a visual component that displays how much of a task or process has been completed. It typically appears as a horizontal bar that fills up (either gradually or in segments) to represent the percentage of progress made. This helps users quickly understand the status of an ongoing process, such as a file download, project milestone, skills, or loading sequence, among many other use cases.

The Avada Progress Bar Element is a straightforward way of visually representing various metrics on a website. This article details the features, customization options, and best practices for integrating the Avada Progress Bar Element into your website.

The Avada Progress Bar Element dynamically displays progress information in a bar format, with the overall size of the Element adapting to the Column’s width to which it has been added. Commonly featured in Avada pre-built website layouts such as resumes, architecture portfolios, and hosting templates, this Element scales seamlessly with Column adjustments.

For instance, expanding a Column to full width automatically enlarges the progress bar to match. Unlike parent-child elements, the Avada Progress Bar operates independently, allowing multiple bars to coexist within the same Column.

Below are a few live practical examples of how the Avada Progress Bar Element can be styled to suit your content:

To begin, insert the Progress Bar Element into your layout. Here’s a breakdown of its core settings and customization options:

Below are a few live practical examples of how the Avada Progress Bar Element can be styled to suit your content:

The Design tab offers extensive styling options to match your website’s aesthetic:

The Avada Progress Bar Element is a versatile solution for showcasing skills, project milestones, or performance metrics. The Elemens intuitive customization options and responsive design enhance user engagement without requiring complex coding.

Icons in web design enhance visual appeal, improve usability, and make content more engaging. They help convey information quickly and efficiently, reducing the need for extensive text and making websites more user-friendly. Icons save space, especially on mobile devices, and can be customized to reflect branding, creating a cohesive design. Additionally, they are often universally recognized, making them accessible across different languages and cultures. By improving navigation and interaction, icons can boost user engagement and contribute to a more accessible, professional online experience.

The Avada Icon Element is a versatile tool that enables users to add icons to their website content. Whether you want to use Font Awesome icons or incorporate your custom designs, this element gives you complete flexibility. Here’s a detailed guide on using the Avada Icon Element to enhance your website content and styling.

The Avada Icon Element allows users to place icons independently into their web content. While icons are also available in several other Avada Design Elements, the Icon Element is ideal for inserting an icon independently, without additional content.

This makes it perfect for adding visual appeal or a call to action (CTA)to your website without the need for complex layouts or custom imagery.

Using icons in website content can offer several user experience and design benefits. Here are some key advantages to consider:

Icons help to break up text-heavy content and add a visually appealing element to the page. They can make your website look more modern, engaging, and aesthetically pleasing, enhancing the overall design.

Icons can improve the usability of a website by providing users with intuitive visual cues. They make it easier for visitors to identify actions, navigate the site, and understand content. For instance, a shopping cart icon signals a user’s cart. In contrast, a magnifying glass icon is universally recognized as a search button.

Icons allow you to convey complex ideas or actions in a compact, space-saving format. They can condense information into small, easily digestible visuals, which is particularly useful for responsive designs and mobile-friendly websites where space is limited.

Icons can convey meaning much faster than text. They can instantly communicate key concepts or actions without lengthy explanations. This helps reduce cognitive load for users, allowing them to process information more quickly and efficiently.

Icons can help draw attention to important elements on a page, encouraging user interaction. For example, a call-to-action (CTA) button with an icon can attract more clicks than a plain text button. Animated icons can also add an element of interactivity that keeps users engaged.

Custom icons can be designed to match a website’s branding, giving your site a consistent look and feel. This adds to the site’s professionalism and credibility, helping reinforce your brand identity.

Icons can transcend language barriers. They are often universal in meaning, meaning users from different linguistic or cultural backgrounds can still understand the website’s key functions and content. This can improve accessibility and user experience for a global audience.

While icons don’t directly impact SEO, well-placed and accessible icons can indirectly benefit your site’s performance. They can enhance the user experience, reduce bounce rates, and encourage visitors to explore more content, positively impacting search engine rankings.

On mobile devices, icons are especially useful. They help create a cleaner, more streamlined design that is easy to navigate on smaller screens. As mobile web browsing continues to rise in popularity, icons play a crucial role in making content more accessible and user-friendly on mobile platforms.

Icons can be paired with text labels or tooltips to improve accessibility for users with visual impairments. When used correctly, icons can provide a clearer navigation experience for all users, particularly when paired with screen readers.

To illustrate the versatility of the Avada Icon Element, we’ll use the Avada Dispensary pre-built website as a visual example.

You can add an icon under a title or anywhere within your content. Here’s how to do it—Begin by inserting the Icon Element into the desired location on your page. In this case, position it beneath the title and align it to the center.

Once you’ve added the Avada Icon Element, you can configure various settings to customize the icon’s appearance and behavior. Let’s explore these options:

Looking at the Design tab, here are some options to refine your icon’s look for an enhanced visual appeal.

The Avada Icon Element provides many options for adding standalone icons to your website content and layouts. With its easy-to-use configuration options, you can personalize icons to match your website’s style and enhance user interaction. From custom icon sets to animation effects, the possibilities are endless.

The Avada Page Title Bar is a versatile design facet that can significantly enhance the appearance and functionality of your website. Located directly below the website header and above the page content, it provides a customizable space where you can present meaningful information, images, or dynamic content. This blog post will guide you through creating and setting up Page Title Bars using the Avada Layout Builder, the recommended method for achieving optimal design flexibility.

The Avada Page Title Bar is a layout section between the header and the main content of your site. It can include background images, video, titles, dynamic data, and custom content.

The flexibility of Avada Layouts means that you can assign different Page Title Bars to various layouts across your site, tailoring them to suit specific pages or content types. For more in-depth information about utilizing Avada Layouts, read our recent post, “How to Use Avada Layouts in Web Design.”

There are two ways to create Page Title Bars in Avada: the legacy method, which utilizes global options, and the Avada Layouts method. While the legacy method is still available, Avada Layouts offers significantly more flexibility, making it the preferred approach. With Avada Layouts, you can fully customize your Page Title Bar’s design and content using the powerful Avada Builder.

Many of Avada’s pre-built websites use Page Title Bars, though they are often applied selectively. For instance, the Avada Campaign website employs five different Page Title Bar Layouts for various purposes: search results, single products, events, single posts, and a default layout for other pages. Each layout is designed to pull in Avada Dynamic Content based on the specific page type, making it highly efficient and adaptable.

Another example is the Avada Nutritionist website, which uses eight unique page title bars. Each is designed for different content, such as dynamically pulling a post’s featured image, title, author, and publication date. This shows how Page Title Bars can serve various purposes, whether for simple aesthetic enhancement or dynamic content presentation.

Creating and adding a Page Title Bar in Avada Layouts is a seamless and exciting process that gives you complete creative control. In the tutorial video below, we’ll use the Como Farm site as an example of a project we’ve explored in this 2-part video series.

First, dive into the powerful Layout Builder in Avada, where you can effortlessly create a new layout section for your Page Title Bar. Naming it something relevant, like “Search PTB” for a search results page, helps keep everything organized. Once your layout section is ready, the real fun begins.

With the Avada Builder, you can unlock endless design possibilities. Whether you’re incorporating dynamic content or manually crafting your Page Title Bar, you have the freedom to customize every aspect. Imagine the impact of a beautifully designed background image, a standout title, and an intuitive search box—all placed perfectly within your layout. It’s all about creating a visually stunning experience for your users.

Customizing is where Avada truly shines. You can easily tweak elements like background images, adjust overlays, and play with transparency settings to achieve the right look. Fine-tuning your layout with flexible padding, column widths, and justification options ensures your design aligns perfectly with your vision.

Once your Page Title Bar is designed to perfection, assigning it to the appropriate layout is as simple as a few clicks. Assigning it to the “Search PTB” layout will give your search results page an engaging and professional appearance.

Finally, you can sit back and enjoy the results. A quick test of your site, such as performing a search or visiting the relevant page, will reveal your stunning new Page Title Bar in action, elevating the user experience and giving your site a polished, professional edge.

With Avada Layouts, the possibilities are endless, and creating a custom Page Title Bar has never been easier. Try it and see how this powerful feature can transform your website!

Using Avada Layouts to create and assign Page Title Bars offers unparalleled flexibility. You can customize their appearance and content to fit specific pages and leverage dynamic content to make your site more engaging and functional. Whether you are building a search results page, a blog post layout, or an eCommerce site, Page Title Bars can help you elevate your site design with minimal effort.

The holidays are behind us, and welcome to 2025! In this latest roadmap installment, we will share Avada 8.0 progress and the latest Avada milestones with our community.

With Avada 8, we’ve prioritized performance. This month, we’re excited to share key improvements that make Avada faster, more efficient, and better optimized for modern web development. Following on from the December Roadmap post let’s take a look at what’s new.

Optimising CSS is crucial in improving website performance, as it directly impacts page load times, rendering speed, and the overall user experience. For example:

We’ve entirely refactored Avada’s CSS using the BEM (Block Element Modifier) methodology to enhance speed and maintainability. This structured approach reduces selector complexity, decreases browser paint time, and ensures each Element is more modular and self-contained.

The result? A more efficient and scalable framework that improves both performance and customization flexibility. This CSS methodology can also be seen in the way our new Avada Global Styles system functions.

Beyond the BEM refactor, we’ve also introduced conditional CSS loading. Instead of loading CSS for all enabled elements, Avada 8 only loads the styles relevant to the Elements and features used on the page. This is possible thanks to our shift from shortcodes, widgets, and legacy templates to a block-based structure. We can now determine required styles earlier in the process, significantly reducing unused CSS.

Another significant change is how icons are handled. We’ve moved away from icon fonts and now render all icons as SVGs. Avada 8 will not load bulky font files or extra CSS—only the specific icons used on a page are loaded. You also will have greater flexibility in choosing different icon sets without worrying about the impact on performance.

In addition, Avada 8’s built-in icons will be available directly in the icon picker, giving you complete control over your design choices. This change also allows for the use of duotone icons.

To further optimize performance, we’ve refined Avada’s DOM structure by reducing unnecessary wrapper elements wherever possible. For example, a simple title now renders directly as a heading tag without extra divs, and for basic columns and containers, we’ve minimized the number of surrounding elements. These refinements improve page rendering speed, reduce memory usage, and contribute to a cleaner, more efficient codebase.

In addition to these improvements, we can announce that we are readying an early Alpha testing phase for the new Avada 8 Live Builder. To register your interest, please log into your My Avada account and fill out this form.

This will allow a select group of users to get hands-on experience and provide feedback on its direction. It’s important to note that this is not the main beta release—that will come later—but it’s an opportunity to help shape the future of Avada.

Stay tuned for more updates, and if you’re interested in participating in the Avada 8 Alpha, please log into your My Avada account and fill out this form to register.

We encourage you to subscribe to our social media platforms to stay tuned for future updates regarding Avada 8, creative Avada Studio content, and pre-built Avada websites.

Avada offers powerful and versatile caption options for image-based elements, such as the Image, Image Carousel, and Gallery elements. These caption settings allow users to enhance their content’s visual appeal and clarity. These caption settings provide flexibility in how titles and captions are displayed, enabling users to create custom designs that fit seamlessly within any layout and, more importantly, provide additional textual information for your website visitors.

Whether showcasing a portfolio, a product gallery, or an image carousel, the caption options give you control over text placement, style, and alignment. With these styling options, it’s easier than ever to tailor the appearance of image captions to suit your design vision, ensuring that the imagery and the accompanying text work together to create a polished, professional look.

Before exploring the caption options, it’s essential to understand where captions originate. Captions and titles are pulled from images’ metadata within the WordPress media library. When uploading images, users can fill in four key fields: Alt Text, Title, Caption, and Description. The Title and Caption fields are used for the caption functionality.

At the same time, Alt Text provides alternative text if the image fails to load, which is an essential aspect of SEO and accessibility. The Description field is not commonly used but appears on the image attachment page. By default, Avada pulls titles and captions from this metadata. However, users can override these values or input them directly within the element settings if no metadata exists.

The caption options are located in each image-based element’s “Captions” tab. Captions are turned off by default, but users can choose from seven styles for displaying titles and captions. Avada’s image caption options offer a valuable way to enrich visual content by adding context, clarity, and style.

Captions can enhance the viewer’s understanding of an image, providing essential details or storytelling elements that complement the visual. Using descriptive text also improves accessibility and SEO (Search Engine Optimization). Additionally, well-styled captions help maintain brand consistency and ensure that text harmonizes with the overall design, making the images not just more informative but also more visually engaging. Let’s explore these styles and customization options.

Many of Avada’s pre-built websites use Page Title Bars, though they are often applied selectively. For instance, the Avada Campaign website employs five different Page Title Bar Layouts for various purposes: search results, single products, events, single posts, and a default layout for other pages. Each layout is designed to pull in Avada Dynamic Content based on the specific page type, making it highly efficient and adaptable.

The most straightforward styles display the title and caption above or below the image. Users have control over the alignment of the title and caption areas, which can be adjusted independently for different screen sizes. Users can override the default title and caption if desired by entering new values directly into the element settings.

The remaining caption styles display titles and captions directly on the image. To avoid conflicts, these styles turn off the “Style Type” and “Hover Type” options in the Image Element’s “Design” tab. Each on-image style also allows users to control the overlay color, enabling customization of the overlay effect based on the image. Listed below are five predefined image caption styles to choose from:

A color overlay covers the image, and the image slides slightly on hover while the overlay fades. The title lifts, and the caption slides beneath it.

The title appears near the top of the image. On hover, a border slides under the title while the caption slides in from the side, with the overlay darkening.

Initially, only the title and a subtle overlay are displayed. The title and caption are centered on hover, and a border surrounds the image with a stronger overlay.

The title appears at the top-left corner, and a zoom effect is applied to the image when hovering. The caption slides below the title with a background color, enhancing visibility.

The title is placed at the bottom of the image. On hover, the image and title lift, with the caption at the bottom with a background color.

Each style can be further customized with typography settings, overlay color options, and even adding background colors for the caption area.

The Avada Image Gallery Element uses caption settings similar to the Avada Image Element. When adding multiple images to a gallery, users can upload images in bulk from the media library and configure the layout, such as switching to a Masonry layout for a more dynamic arrangement.

While the general caption settings remain consistent, managing captions within the Gallery Element requires editing individual images in the “Children” tab. Here, users can input custom titles and captions for each image if they need to be set in the media library. Similarly, the Avada Image Carousel Element follows the same caption workflow as the Gallery Element, offering consistent caption functionality across different image-based elements.

The caption options in Avada provide incredible flexibility for presenting titles and captions in a visually appealing way. Avada offers a style that suits your design needs, whether you prefer captions above, below, or directly on the image.

Avada Rendering Logic is a powerful feature for WordPress web design, enhancing control over how user content is displayed based on specific conditions. Unlike the traditional element visibility options, which hide content from users but still load it in the code, Rendering Logic ensures that specified content isn’t rendered in the code, creating a cleaner, faster-loading page. Below is an in-depth guide on using Rendering Logic effectively within Avada, with practical examples illustrating its versatility.

Avada Rendering Logic is located on the “Extras” tab of the Avada Column and Avada Containers Elements.

Although currently limited to these two Layout Elements, this functionality can be applied creatively across various layouts, enabling almost any usage imaginable.

The examples explained in this beginner’s guide showcase just a few ways Rendering Logic can improve site functionality by controlling the visibility of Containers or Column Layout Elements based on specific user conditions or device types.

This capability can significantly enhance user experience, streamline content management, and reduce unnecessary page load times.

To illustrate how Avada Rendering Logic works, consider a Header Layout Section with three Container Elements, each set to display under different conditions based on device type.

Beyond device type, Avada Rendering Logic can customize content based on the user’s login status and role. Here’s how to create content that varies depending on whether users are logged in, logged out, or have made a previous purchase.

First, create three containers on a homepage layout, each designated for different user states:

With thoughtful configuration, Rendering Logic in Avada allows for a more responsive and adaptive site design, delivering content tailored to different devices and user states. Whether aiming for a seamless cross-device experience or personalized content for different user roles, Rendering Logic makes it easy to fine-tune site visibility precisely.