Following on from the September progress update, this month’s roadmap update highlights two key developments: Avada 8’s brand-new Components System and the progress we’re making with Avada AI. Both are designed to provide you with more flexibility, control, and speed when building with Avada.

Components are equivalent to Avada Elements that you can build directly in the Avada Builder. They allow you to build complex Element combinations and interactions directly within the builder, while giving you the choice of how deep you want to go.

You can edit the component itself to control every detail, or simply drop it into a page or post and use its streamlined options for a faster workflow. They are created in much the same way as Avada Post Cards and Avada Off-Canvas

Props are the options you expose on a component. They let you define values that can be set when adding the component to a page. When creating a Prop, you can select which UI field type to use (color picker, text field, textarea, etc) and whether it is a CSS variable or not. Once defined, props are mapped to Element options in the same way as dynamic data.

The dynamic data selection has also been extended to allow more complex use of the Props. You can combine multiple Props together in a single value, use conditions, and even loops. For example, you can set the HTML tag of an element to div if the anchor Prop is empty or an anchor if it is not. You can do this by typing syntax in the same format as the new inline dynamic data, or you can opt to use the new advanced UI.

Components also take advantage of a new Interactions option. This allows you to trigger actions (such as toggling a CSS class) on specific events (such as mouse enter or viewport enter).

You can even choose which Elements the change applies to, enabling you to create complex, coordinated interactions between different Avada Elements. These interaction options provide complex and powerful tools to create interactivity that was previously not supported in Avada.

Once you have built a component, adding it to a page is simple. Click to insert a new Element, select the “Component” Element, and then choose the component you want. You’ll then see a streamlined set of Props to fill in, keeping the editing experience clean and intuitive. If the component supports content slots, you will also have areas in the builder where you can add sub-elements.

Using an example, it is possible to create a simple ‘Read More’ box component consisting of a title, introduction, toggle button, and hidden content. The title can be a combination of name and job title using the combined Props option. The toggle button can utilize the new interactions option to toggle the visibility of the main content, and the background CSS variable can be controlled from the Prop connection.

Once created, it offers a simple, efficient, and reusable component that you can add to your page. See the image gallery below for screenshots of this example.

Components provide a straightforward way to manage complex Element combinations on your pages. They allow you to:

Whether you’re just starting out or an advanced website builder, components offer a powerful new toolset for creating in Avada 8. In combination with Avada Studio, components offer a fantastic way for unique Elements without the headache.

Since announcing Avada AI, we’ve received a lot of great feedback and questions. Here’s a closer look at some of the most common ones:

Here’s what Avada AI can already do:

Both Avada 8 Components and Avada AI represent significant steps forward in making Avada more flexible, creative, and powerful. Components will change the way you structure and reuse content, while Avada AI is shaping up to become an invaluable assistant inside the Avada Builder.