In web design, managing the visual hierarchy of elements is essential for creating clean, user-friendly interfaces, and one of the key tools for this is the CSS Z-index property. Whether layering images, building complex menus, or creating interactive hover effects, Z-index ensures your content stacks in the correct order. This CSS property defines how elements are layered over one another, determining which one is visible on top when elements overlap.

In Avada, a powerful and flexible Website Builder for WordPress, Z-index becomes even more important as designers often work with intricate layouts featuring overlapping Columns, Containers, and other Design Elements. By properly using Z-index, you can ensure that your design behaves precisely as intended, whether keeping a menu in front of other content, ensuring interactive effects appear correctly, or handling Avada Off-Canvas elements like sliding bars and popups.

This blog post will explore the ins and outs of using Z-index within Avada. We’ll look at how to apply it to different elements, offer practical examples, and show you how to leverage this essential tool to maintain complete control over your design. Let’s get started!

Z-index is a CSS property that dictates how elements are stacked on the webpage. Elements with a higher Z-index value will appear above those with lower values. In Avada, you can find the Z-index option in various components, including containers, columns, and other specific elements such as images, pagination, scroll progress elements, and Off-Canvas sections.

Avada has a range of practical options that will allow you to apply z-index in your web design. Let’s take a closer look:

One of the most common uses of Z-index is when dealing with overlapping images. For example, consider two images within a column. By adjusting the margin values of the second image, you can create an overlap. Typically, the image that appears later in the DOM (Document Object Model) will naturally be on top. However, with the Z-index property, you can manually control which image is in the foreground.

In this case, by going to the design tab of the first image and setting a Z-index value of 100, that image will now be on top. Your exact Z-index value will depend on how many elements are on the page. Still, a value of 100 is generally a safe choice to ensure the image is displayed above other elements.

You can add multiple Containers to a page and stack them one below the other. For instance, you may choose to have all of your content inside one Container or break your page into multiple Containers, each holding a distinct section of your content.

This method offers greater flexibility in managing your layout, and you can name your Containers to keep your design organized. Containers may have different background images, colors, or layout styles, allowing for varied designs across a single page.

Z-index is also invaluable when dealing with menus, such as sticky menus, mobile menus, dropdown submenus, or mega menus. In these cases, the menus must stay above other page elements. For instance, when editing the container holding a menu in Avada, designers often assign a high Z-index value to ensure that the mega menu remains above all other content on the page. The following example is the Avada Business prebuilt website Mega Menu:

When setting the Z-index for menus, it’s essential to apply it to the container holding the menu, not the column. While there is no set rule for the exact Z-index value, many designers opt for large values (such as increments of 100) to ensure enough flexibility if additional Elements need to be added later.

Off-canvas elements, such as sliding bars or popups, also benefit from Z-index manipulation. These elements should always appear above other content, which is why they typically come with a default Z-index setting.

However, in cases where multiple off-canvas elements or sticky headers are present, you may need to manually adjust the Z-index to ensure everything displays as intended.

Z-index is an essential tool in web design, particularly when managing overlapping content. By experimenting with Z-index values, designers can control the visual hierarchy of their elements, ensuring that content is displayed in the correct order. Mastering Z-index in Avada will help create an engaging and functional design, whether Images, Columns, Menus, or Off-Canvas Elements.

Happy Holidays, everyone! In this latest roadmap installment, we will share Avada 8.0 progress and the latest Avada milestones with our community.

Following on from the November Roadmap post, our team has been hard at work on the new workflow enhancements, focusing on the Global Styles system. See some of the highlights below.

One of the most significant changes to the Avada workflow is the introduction of the new global styles system for Elements. This new feature will make designing and maintaining your Elements easy. Read on for further details and examples.

Each element starts with a default global style. This is the style that the element will use when you insert it into the page. You can think of this as a new approach to our current Global Element Options. The significant change here is that every element option will be available for every element, providing you with complete global control. You will not just be limited to style options; you will also be able to control other, more advanced options, such as the button hover transition type, globally.

In addition to the default element global styles, you can create your own custom global styles. This allows you to create various element variations, which inherit from the default global style and remain globally controllable.

In the examples that follow, we have a setup with various button elements, consisting of 4 different global styles. There is the default button global style which is displayed at the top, then three different custom global styles.

The first custom global style is a small square example which is set to be smaller and without border radius. Next to that there is a an outline example, which overrides the background and border. Finally there is a red button example which overrides the background color.

We have made some edits to the default global style in this example. The background color has been changed to green, and the border-radius has been reduced. If you hover over the image below, you can see how these changes cascade through the various elements.

For the background color change we can see that that the small square custom global style is now using the new color which it is inheriting from the default global style, but the other global styles which have their own background color are not impacted.

Then, we can see that the opposite is true for the border-radius adjustment – the outline button style and the red button have been updated, but the small square custom global style remains square. The same can be seen in the mixed examples, which are set to use custom global styles.

In the next example, we have decided to add an icon by default to the outline button global style and adjusted the colors of both the outline button style and the red button style.

Again, these changes cascade down. The element examples using the red button style have been updated to use the new color, but the custom sizing and typography have remained. Likewise, both the outline examples now utilize the icon defined in the custom global style.

In addition to the new level of control, the new system also helps speed up your workflow dramatically. Instead of setting the same values on each element, you can now set this once to a global style and then select that on your elements. It also allows us to offer handy shortcuts, allowing you to save existing elements as global styles and copy and paste styles via the right-click context menu.

Our talented design team is constantly working on delivering new Avada pre-built websites and Avada Studio content for your web design toolkit, with more to come. Be on the lookout for awesome holiday season content coming soon! Below is just some of the latest content our team released in October.

Our design team released a new range of creative content, including marketing content, sales forms, templates, and more. There are 574 expertly crafted, ready-to-use content blocks that will streamline the design process, enabling you to customize stunning, professional-quality websites faster than ever.

The most recent Avada Websites released are Avada Factory *popular, Avada Campaign, and Avada Vape. With more than 100 highly customizable Avada pre-built websites that can be imported with a few clicks, Avada’s creative resources will speed up your web design workflow.

In summary, our team is working flat out with one goal in mind: To bring you the best website-building platform available. Avada 8.0’s extended development cycle reflects our unwavering commitment to quality and innovation.

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.

Instagram recently informed users that it will phase out its Basic Display API. Until now, Avada (as well as most of the Instagram plugins for WordPress) has relied on that API to connect Instagram accounts to a user’s website and display the feed.

The Basic Display API will be deprecated as of December 4, 2024, affecting anyone using the Avada Instagram Element on their site. But don’t worry; we have you covered. This post will provide some background information and the next steps. Let us first examine the background of this change.

To handle authentication requests to any of the Meta APIs, any 3rd party business that wants to provide a service to their customers (like the Avada Instagram Element) must register their own App with Meta. Meta investigates such an app heavily to ensure its data usage complies with all its regulations. While we had a working App registered with Meta until now, due to their changes, it will become obsolete. We have had to register a new App with them and go through all of the approval procedures, which turned out to be running the gauntlet.

While waiting for approval for quite some time, we could get our app registered and work with Meta earlier this week to deliver the updates to our customers on time.

The new authentication process will be part of the upcoming Avada 7.11.12 update. In the interim, until this update is sent out, we will release an Avada Patch for this functionality so that everyone can update their Avada installations. If you have an Instagram business or creator account, all you have to do is reconnect your account to your site, as described in this Avada help file

If you use a personal account, you must perform a few additional steps. Unfortunately, Meta has decided that moving forward, they won’t allow access to personal accounts via their APIs any longer, meaning that starting December 4, 2024, only creator and business account feeds can be displayed outside of Instagram.

There is good news! A personal account can be changed to either a creator or a business account quickly and for free (and you can revert at any time). Please find the necessary steps in this Instagram help file

Starting December 4, 2024, Meta is phasing out its Instagram Basic Display API, meaning that personal Instagram account feeds won’t automatically update on your website. To get your Instagram feed back on track, install the Avada Patch and switch to an Instagram creator or business account.

Managing your Avada licenses has never been more accessible, thanks to the comprehensive features on the My Avada support and license management portal. For those new to the platform or looking for guidance, here’s a detailed walkthrough of how to efficiently handle your Avada licenses and ensure the smooth operation of your web products.

To begin managing your licenses, navigate to the My Avada portal, which is accessible here. If you haven’t registered for an Avada Support account yet, watch the How to Register for My Avada video for a step-by-step guide. Once registered, log in to access your account dashboard.

The dashboard provides a snapshot of all your licenses and various options for managing them. The How to Use My Avada video offers a complete overview of the portal’s features; however, in this article, we’ll focus on managing your licenses specifically.

Once inside the My Avada Dashboard, you can see a summary of all your licenses at the top. You’ll also notice a section providing a quick overview of the most recent licenses. To manage all your licenses, click the “Manage Licenses” link or select “Licenses” from the top menu.

The licenses management page contains helpful search and filtering options. You can search for a license by domain name or purchase code and use filters to sort licenses by their status: “Active,” “Locked,” or “All.” For example, if you search by the term “Avada,” you will quickly see all relevant licenses connected to that domain. Additionally, if any licenses are locked, you can contact support directly from this page to resolve the issue.

To check your current license data information, a “Refresh All” button checks for any changes in license status, such as recently registered or unregistered licenses.

When viewing an individual license, you’ll see detailed information, including the purchase code, license status, and purchase date. You can also view the licenses’ associated domains—both the live domain and the staging domain (if applicable). Each license allows one live domain and one staging domain, making managing your projects’ development and production environment easy.

One important feature is the ability to unregister a license from a domain. Under the terms of the Avada license, each license is valid for a single website project according to Envato’s licensing terms and conditions. However, you can reuse the license on a new project if the old site is completely removed (no longer online). If you forgot to unregister the license before deleting the site, you can do so directly from the My Avada portal. Click the “Unlink” icon to unregister the license and make it available for a new domain.

Suppose you’ve updated the website to which a license is linked. In that case, clicking the “Refresh All” button will update the domain information in the portal, reflecting the current license connection.

The My Avada portal also allows you to delete a license from your account if needed. However, remember that deleting a license only removes it from your My Avada account. This feature is helpful if, for example, you need to transfer a license to a different account, such as when an agency passes the purchase code to an end user.

If you have new licenses to add to your account, the “Add New License” button provides a simple process. You can manually enter a single purchase code or use the “Import from Envato” bulk import option. This allows you to import all licenses associated with your ThemeForest account.

After signing in to the Envato API with your ThemeForest credentials and authorizing the connection, any new licenses will be automatically added to your My Avada account.

For any additional questions, Avada provides a comprehensive Licensing and Registration FAQ document that addresses many common inquiries.

Managing your Avada licenses has never been simpler! With the My Avada support and license management portal, you can easily view, organize, and control all your licenses in one place. Whether you’re managing a single project or multiple domains, the portal offers powerful tools like search, filtering, and quick license refreshes to keep everything up to date.

Effortlessly unregister licenses, transfer them between accounts, and add new ones from your ThemeForest profile with just a few clicks. Plus, with detailed video guides and a comprehensive FAQ, you’ll have all the support you need at your fingertips.

Overlapping images is a dynamic way to add a visual accent to your website, allowing for a memorable design. It involves placing text or another image on top of a base image. This technique is commonly used in posters, advertisements, and even memes, but the creative potential goes far beyond these examples.

While traditional tools like Adobe Photoshop are still practical for creating static image overlays, modern Website Builders like Avada offers an alternate solution. This blog post will explore two easy methods for creating overlapping images using Avada image transform and margin settings. These methods allow you to create visually engaging designs without relying on external image editing tools.

Overlapping images can add depth and interest to your layout in various situations. Whether you’re working on a creative portfolio or a marketing page, they can create a layered, three-dimensional effect. In this tutorial, we’ll explore how to achieve this using Avada’s built-in features, focusing on two primary methods: transforming columns and manipulating image margins.

The first method involves using the transform settings on the columns that contain your images. Here’s how you can do it:

The second method is similar but involves manipulating the margins of the images directly rather than the columns:

If you’re working with a single column and want to stack and overlap images vertically, you can still achieve this with margin settings:

If you apply a rotation effect, this method allows both images to rotate in unison, as they share the same column.

Avada’s flexibility allows you to combine different techniques to create more complex designs. For example, you can create a layout with:

In cases where you need to control which image appears on top, adjusting the z-index values will help you achieve the desired layering effect.

While these overlapping effects look great on desktops, they may not work well on smaller screens. In the example, the images become too large to display on medium and mobile screens. A good solution is to use Avada Rendering Logic to hide these overlapping containers on smaller screens and create separate containers optimized for mobile views.

With Avada, overlapping images can be easily achieved by manipulating transform options on Columns or adjusting image margins. Both methods provide unique flexibility and design possibilities for your website. Experimenting with these settings can help you create visually dynamic layouts that capture your visitors’ attention.

Good or bad website page speed correlates directly to a positive user experience and is vital to a successful digital strategy in today’s competitive online environment. Furthermore, improving your website’s performance can enhance the user experience, support SEO efforts, drive higher leads and conversions, and positively reflect the brand, making them a priority for website owners and developers.

In this beginners’ guide, we will cover the main factors affecting website performance and introduce you to the Avada Performance Wizard. We will explain how the wizard works and cover each step in detail to ensure readers can effectively enhance their Avada website’s performance.

An optimized website is vital to ensure a positive user experience. Think of it this way: If you sit down at a restaurant and order some food and the server takes too long to deliver your order, it will negatively impact your experience and likely cause you to not frequent the restaurant in the future.

Here are some key reasons explaining why good or bad website performance is impactful:

Many factors can negatively impact site speed. Understanding these factors is essential for optimizing website performance. By addressing issues like unoptimized images, excessive plugins, and render-blocking resources and implementing best practices like caching, compression, and using a CDN, site owners can make significant strides toward a faster, more responsive website.

Here’s an overview look at the main culprits that slow down website performance:

The Avada Performance Wizard can be accessed by logging into our website and navigating to WordPress Dashboard > Avada > Performance.

From here, and before starting the performance process, users should run a PageSpeed Insights test to get an initial performance benchmark for the website.

The Performance Wizard is a step-by-step process that walks users through each of the website’s settings, focusing on which elements and functions can be turned off or adjusted to boost loading speeds. By navigating through global options, the tool pinpoints settings that could slow down performance and recommends improvement.

Before diving into the optimization process, running a Lighthouse report in an incognito browser window (Chrome, Firefox, Safari) is recommended. This avoids interference from admin asset loading and provides you with a benchmark. Establishing a baseline load score will help identify areas of potential improvement, particularly on mobile, which is the focus of Google’s performance tests.

For this example, we will examine the Avada Business website, one of more than 100 professionally designed pre-built websites that can be installed with a few clicks. First, we run the site through Google’s PageSpeed Insights to determine a baseline for mobile and desktop speeds.

This is the main starting point. Run the site through Google Lighthouse to generate a baseline report, read the Avada documentation, and for best results, only run this process once your website is complete.

The wizard’s second step allows users to turn off unused Avada features, helping reduce the website’s code base. By selecting the “Find Recommendations” button, the wizard scans the site and suggests which features are unnecessary. Recommendations are color-coded:

Once satisfied with the recommendations, users can select “Apply All” to make the changes and save them before proceeding to the next step.

In step three, the wizard scans for the icons being used on the website. It identifies the specific icons and their locations, allowing users to turn off unused subsets. For instance, if only the solid icon subset is necessary, other options, like Font Awesome compatibility, can be turned off. Additionally, users may convert all Font Awesome icons into a custom icon set for further optimization.

The Fonts step identifies fonts currently in use and recommends adjustments to reduce the number of variants loaded if applicable. For example, if a specific variant like Open Sans is used minimally, it can be replaced with a primary font to simplify the selection. The wizard also suggests changing the font rendering option to “Swap All” for better load times and preloading the essential fonts, such as headers, to improve initial load performance.

In this step, you can turn off any Design, Layout, or Form Elements you aren’t using. The wizard scans the site to determine which elements are used and automatically disables unused ones. Reducing unnecessary elements decreases DOM size and improves loading times. Users can re-enable elements later if they add new content, as all changes are reversible from the Builder Options page. We also suggest that you read this comprehensive Avada Optimization Guide.

In this step, you can optimize how the CSS and JS assets should be queued. These options can significantly impact the page load’s performance, but some of them can also break functionality if you are using a caching plugin, so proceed with caution.

You have reached the final stage and completed the optimization of your Avada website. Critical CSS optimizes above-the-fold content, allowing the site to render key styles while deferring the rest. By generating critical CSS for all pages, users can ensure faster initial loading, enhancing the user experience. This step can take some time, based on the site’s content.

After completing the wizard, users can clear the site cache and revisit the Lighthouse report for an updated performance score. Improvements in load scores will reflect the impact of the adjustments made. Avada suggests additional techniques for further optimization, such as using a CDN, selecting faster hosting, and ensuring all images are appropriately sized and optimized.

The Avada Performance Wizard is an excellent tool for users looking to improve their website’s performance. Following the wizard’s recommendations, users can make impactful changes with minimal effort, setting up their website for better loading speeds and a smoother user experience. Avada provides additional resources for further insights on optimizing above-the-fold content and advanced load time strategies.

The Avada Form Builder is a vital component of Avada. It is a versatile tool that allows users to create various forms for their websites easily. Whether it’s a simple contact form, a multi-step process form, or an advanced form with conditional logic, Avada Forms provides flexibility and intuitive control through the Avada Live Visual Builder interface. This step-by-step guide will walk you through building and integrating stylish Avada Forms into your WordPress website. Let’s get started!

The Avada Form Builder is an intuitive tool with a drag-and-drop visual interface, making it easy to build forms without code. It offers a range of possibilities, from basic contact forms to more complex forms that can include multiple steps and conditional logic. Users can start with pre-designed templates or create forms from scratch and style them perfectly to match their branding.

Another essential feature is the ability to set up email notifications, both for the site owner and the user submitting the form. This ensures that submissions are correctly tracked and responses are automated when needed.

Web forms are essential for websites because they serve as a direct communication channel between your website and customers, enabling various functions crucial for business, engagement, and user experience. Here are some of the primary reasons forms are needed on a website:

It’s essential to focus on creating forms that serve a clear purpose while ensuring they provide a seamless user experience. Start by defining the form’s goal, whether it’s to capture leads, collect feedback, or process inquiries. Having a clear objective helps you design a form that asks for the right amount of information, avoiding unnecessary fields that may discourage users from completing the form.

Next, take advantage of Avada’s conditional logic feature, which allows you to personalize the form based on user input. This ensures that each visitor only sees fields relevant to their situation, creating a more streamlined and engaging experience. Simplicity is key—keeping the form concise and easy to navigate will lead to higher completion rates.

Visual design plays a crucial role as well. Use Avada’s styling tools to ensure that your forms are visually aligned with your website’s overall branding. Customizing colors, fonts, and buttons allows you to maintain consistency across your site while making the form visually appealing. Furthermore, responsive design is critical, so always test your forms on mobile devices to ensure they’re user-friendly across different screen sizes.

Incorporating email notifications and auto-replies is another way to use Avada Forms effectively. Setting up notifications ensures that form submissions promptly reach the right person or team. Auto-replies reassure users that their submission was successful, enhancing their overall experience. It’s also paramount to add spam protection, such as reCAPTCHA, to prevent unwanted submissions and ensure the integrity of your data.

Finally, continuously analyze the performance of your forms by reviewing submission data and feedback. Consider simplifying or improving those sections if you notice high drop-off rates in certain fields. Testing different post-submission actions, such as redirecting users to a thank-you page or displaying a success message, can also help optimize the user journey after they’ve completed the form.

Using the Avada Podcasts pre-built website, we’ll take a closer look at building a custom Avada form in a few easy steps. Let’s get started:

To begin building a form, log into the website’s WordPress Dashboard and navigate to Avada > Forms. Start by clicking “Create New Form,” which opens the Avada Form Builder interface. In this example, we’re creating a form for potential guest contributors called “Guest Contributor.”

When you create a form, you have two options: (A) start from scratch or (B) use pre-built templates available in Avada Studio. Avada Studio provides many templates for primary contact forms, multi-step forms, and more. For this guide, we’ll build the form from scratch.

To begin, add a Container to structure your form. For this example, a Container with two half Columns is used. Then, add Elements to the form, such as text fields, by clicking the “Add Element” button.

Avada Forms offers a wide variety of Form Elements you can add and configure to build the form that best suits your needs. Here’s an overview of the Elements used for the guest contributor form we set up in the video tutorial:

Avada Forms and Elements can be customized extensively to create stylish and engaging forms. In the tutorial video example, the form fields were customized by adding icons, changing background colors, and adjusting padding and margins. The goal is to ensure the form looks cohesive and matches the website’s design (example above).

For instance, a purple background was chosen for the form, and the field background colors were adjusted accordingly. Styling options such as “Border Colors” and “Border Radius” were applied to maintain consistency with other Elements on the page.

Once the form is built, it’s time to configure how it behaves upon submission. The submission options allow you to define what happens when a user submits the form. Some of the available options include:

Notifications allow you to receive form submissions via email. You can also configure auto-replies for users to confirm that their submission was successful. For example:

Once the form is ready, finalize it by configuring confirmation settings. You can display a message upon form submission or redirect users to a specific page, such as a thank-you page. In this case, a simple success message is displayed using the “Notice” element within the form. Colors for success and error messages were adjusted to match the overall design of the form.

After completing the form, it’s time to embed it on the desired webpage. For our example, the form is added to the “Guest Contributor” page. Using the Avada Form Element, the form can be selected from a drop-down list and inserted into the page. The form is fully responsive and fits seamlessly into the page’s design.

Avada Forms provides a flexible, powerful way to create forms tailored to your website’s needs. From simple contact forms to more complex multi-step processes, you can fully customize the look and functionality of your forms. If you want to learn more about creating multi-step forms or using conditional logic, check out the entire Avada Forms playlist.

Thanksgiving is around the corner! In this latest roadmap installment, we will share Avada 8.0 progress and the latest Avada milestones with our community.

Following on from the October Roadmap post, our team has been hard at work on the new enhancements for the Avada Live Builder, focusing on control, flexibility, and performance. See some of the highlights below.

This update introduces more freedom in moving Avada Elements across your content hierarchy. Now, you can drag items between different levels without being restricted by Nested Columns. Additionally, the flex-direction of the drag target is now handled automatically, allowing you to drag Elements to the side where they will be displayed.

Finally, dual-directional dragging lets you seamlessly shift Elements between the navigator panel and the Avada Live preview, with automatic scrolling for a smooth experience.

We’ve added versatile zoom controls to the preview to improve your editing perspective. This includes an automatic zoom option that adjusts when the sidebar is opened, keeping the preview in large editing mode even if it usually would trigger a medium breakpoint. You can view your layout exactly as you intend, with minimal interruptions.

With new resizing options, previewing your design across different screen sizes is easier than ever. You can activate editing mode from the Element options or the top toolbar, or simply click and drag to adjust the preview window. The Avada Live Builder will automatically adapt, helping you manage layouts efficiently across a range of widths.

The updated Avada Element UI features a single overlay mask instead of multiple UI components per Element, resulting in a cleaner, more responsive experience. This streamlined approach reduces the Avada Builder UI complexity and improves performance, while also allowing for a preview that more closely resembles the final front-end display.

Our talented design team is constantly working on delivering new Avada pre-built websites and Avada Studio content for your web design toolkit, with more to come. Be on the lookout for awesome holiday season content coming soon! Below is just some of the latest content our team released in October.

Our design team released a new range of creative content in October, including marketing content, sales forms, templates, and more. There are 574 expertly crafted, ready-to-use content blocks that will streamline the design process, enabling you to customize stunning, professional-quality websites faster than ever.

The most recent Avada Websites released are Avada Factory *popular, Avada Campaign, and Avada Vape. With more than 100 highly customizable Avada pre-built websites that can be imported with a few clicks, Avada’s creative resources will speed up your web design workflow.

In summary, our team is working flat out with one goal in mind: To bring you the best website-building platform available. Avada 8.0’s extended development cycle reflects our unwavering commitment to quality and innovation.

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 is more than a traditional WordPress theme; it is a Website Builder for WordPress and WooCommerce. Avada Layouts, the core of the website design process, allows users to create custom templates for different sections of their websites, such as headers, content, footers, and more. This component offers complete design freedom and versatility, making it a valuable asset for anyone looking to personalize their website layout completely. This article discusses how Avada Layouts works and how users can leverage it to enhance their website’s design. Let’s get started!

It is a powerful Avada feature that allows users to customize the layout and structure of their WordPress website content. Unlike traditional or legacy templates that offer static, predefined layouts, Avada Layouts gives users complete control over the design and positioning of Avada Design Elements anywhere on the site.

Users can design unique layouts for specific post types (like blog posts, portfolios, products, etc.), headers, footers, page title bars, and other vital parts of a website. You can rearrange, customize, or omit elements like sharing boxes, related posts, featured images, etc. Some key features of Avada Layouts include:

In essence, Avada Layouts provides a platform for complete creative control. It allows users to design their website exactly how they envision it without being limited to static or predefined structures. This feature is essential for creating a truly customized, unique website experience.

Avada Layouts allow for complete control over the layout of your website’s content, allowing users to customize almost every aspect of their site structure. This flexibility includes control over single blog posts, portfolio posts, WooCommerce product pages, FAQs, and archive pages. It even extends to the header, footer, and page title bar.

If you are using Avada and have built your site and content using legacy methods, you rely on static, pre-configured templates with limited customization. These templates dictate the order and structure of elements on each page, from the header and footer to the placement of content within posts and pages. While the Avada Global and Page Options allow for some customization, such as selecting predefined header layouts or adjusting shop page designs, the fundamental layout and order of elements remain fixed. This is why you are urged to upgrade your site from legacy templates to Avada layouts.

With Avada Layouts, however, this limitation disappears. Users gain the freedom to reorganize and customize every part of their site. The possibilities are virtually limitless, whether moving the sharing box or related posts section, creating custom headers that go beyond the predefined styles, or even changing the order of elements within a single post. Avada Layouts makes it easy to tailor every page and post to suit your needs and design preferences.

Avada Layouts can be accessed from the Avada Dashboard, where users will find links to the Layout Builder and the Layout Section Builder. At its core, a layout is essentially a “box” containing the various sections of a page, including the header, page title bar, content, and footer. Each section can be customized to suit specific design requirements.

For example, users can create layout sections that act as templates for particular areas of the page. These layout sections can be applied globally across the entire website or set to specific conditions for use only on certain pages, post types, or other areas.

A layout comprises multiple sections, including the header, page title bar, content, and footer; each can be assigned and customized as needed. Users can assign Global Layout Sections that apply to the entire website or create conditional layouts that only activate under certain circumstances.

For instance, when viewing a blog post, users may notice that the header and footer are pulled from the global layout. At the same time, the page title bar and content sections may be specifically assigned to the single post layout. This flexibility allows for highly customized presentations across different content types on the site.

To set up a single post layout, users can access the Layout Builder, assign the necessary layout sections (such as a custom page title bar or content section), and then set conditions for when these sections should be applied.

Avada Studio provides a wide selection of pre-built Elements that users can integrate into Layouts, such as headers, footers, page title bars, and content sections for blog posts, products, portfolio items, and more. These ready-made items are a great starting point for designing unique website sections while saving time and effort.

To create a Conditional Layout, name the layout and assign layout sections, such as a header, content, or footer, and then define the conditions under which it should be displayed. Conditions can be set based on criteria, like post types or specific pages. This way, users can create a tailored user experience across different site sections.

Suppose a user has a specific layout for all blog posts but wants certain posts to use a different header or footer. By creating a Conditional Layout and setting it to apply only to selected posts or categories, they can achieve this without affecting the rest of the site.

The Layout Section Builder provides options to add and customize different layout sections. Users can add dynamic elements like content blocks that automatically pull in post content or static design elements that add structure and style. Additionally, layout section options allow for previewing dynamic content using accurate data, enabling users to see how their layout will look with actual content.

For instance, if a user is designing a post content layout section, they can preview how a specific post would look within that layout, complete with a page title bar, featured image, and other design elements.

Avada Layouts offers extensive capabilities for creating and managing customized website layouts. With the ability to set global and conditional layouts, incorporate Avada Studio Elements, and leverage dynamic content options, users have nearly limitless possibilities for tailoring their website’s style and design.