How To Use The Avada Layout Elements

Layout Elements are special, dynamic Elements that are found in Avada Builder, but only when editing Content Layout Sections through Avada Layouts. Currently, there are twenty one of these Elements, which can be used to dynamically populate the Content Layout Sections of your Custom Layouts, such as Blog, Portfolio, or WooCommerce Product Layouts.

Some of these Elements can only be used once in a Layout, while others can be used multiple times. Scroll down to read a brief description of each of the Layout Elements in Avada, and watch the video for a more detailed look at Layout Elements, and their usage.

The Archives Element is for designing your layout for archives content, like blog or portfolio archives. It has a General and a Design tab, and is very similar to the Blog Element. This Element will then display archives, depending on the conditions set in the Layout, for example, if you set the All Archives condition, it will apply to all archives.

The next Element is Author. This has a General and an Extras tab, and a range of simple options. You would only use this Element with a type of content that has a single author, like a Single Post Layout. If you added the Author Element to an Archive Layout for example, it wouldn’t show anything, as there can be many authors on a blog. But on a Blog Single Post layout, the author element is very useful, and pulls the details from the post author’s bio and displays them. You can see an example of this Element on the Taxi Demo blog posts.

Then, there is the Comments Element. This Element pulls comments from any single post type with commenting enabled. Commenting is typically only enabled on blog posts, but it can be enabled on any single post type, such as portfolios, FAQs and even pages. Again, it has a General and an Extras tab, with a range of styling options.

Following this is the Content Element. This pulls the main content from any single post. This could be a blog post, a portfolio item, a page, or any other Custom Post Type single post. It wouldn’t be used on anything dynamically generated, like an Archives, or 404 or Search Results Layout. It only has a few options around margins and visibility, and of course the element animation options under the Extras tab.

Featured Images Slider is the next Element, and this will pull the Featured Image, or multiple Featured Images and display them in a Slider, from any custom post type they are on. These would normally be blog single posts or portfolio posts, but also FAQ items and even single pages. There are a few options around the image hover type and size, and you can control margins as well.

The Meta Element is a specific single post layout element, designed to add customized meta information anywhere in a Content Layout Section, in any Single Post, Page or Portfolio Layout. You can disable or enable any of the meta components, including a new one, Modified Date, which shows the most recent date the post has been modified.

The Pagination Element can be used multiple times on a page, to facilitate the common layout of having pagination at both the top and the bottom of post content. It has a range of styling options, including new layout options added with Avada 7.2.

The Project Details Element will only show on a portfolio single post layout. It’s the Portfolio details that we would normally see down the right-hand side of a portfolio item, like Skills and Categories, and URL etc.

Related Posts is the last Layout Section Element, and this will work with all single posts, and show related posts to the currently viewed post. It has three tabs, General, Design and Extras, and a reasonably large range of options for configuration and styling.

The Woo Add To Cart Element is the first of the Woo Layouts Elements. It works great with the defaults, but otherwise has a huge range of options to help with the design and layout of variable products and makes the Add To Cart area completely customizable for all types of products.

Additional Information is part of the Woo Tabs Element, but we can also use the Woo Additional Information Element to display this product information separately if we wish. It has a General, Design and Extras tab, providing a lot of customization options.

The Woo Notices Element is the next of the Woo layout Elements, and displays the various notices when they are needed on the front end. It also has three tabs, and each notice type can be styled individually.

The Woo Price Element displays the price of the product, but can also be used to display sales prices, discount badges and even stock levels. It has a full range of Design options for font, color and placement.

The Woo Product Images Element can display single product images, as well as any product gallery images added, and has a range of options controlling layout and thumbnails. It can even display a Sales Badge if the product is discounted.

The Woo Rating Element can be used to display the product’s average rating, with options for the Reviews Count, Placeholder text, Alignment and Margins, as well as a few basic design options.

The Woo Related Products Element can be displayed as Columns or as a Carousel, and you can configure the number of products and columns, as well as a number of navigational options if you use it as a carousel. Related Products are products in the same product category, or ones that share tags.

Reviews are also part of the Woo Tabs Element. But just like the Additional information Element, the Woo Reviews Element can be added as a stand-alone Element when needed to display Reviews, and offers a full range of customization options.

The Woo Short Description Element is perhaps the simplest of all the Layout Elements, and displays exactly what it says – the product’s short description. The Product full description is displayed using the Woo Tabs Element.

The Woo Tabs Element gives you the option to display up to three tabs, the Full Product Description, Additional Information (for variable products), and Reviews (if enabled). It can be displayed in a Horizontal or vertical layout, and has a full range of color, text and font settings on the design tab.

The Woo Stock Element allows you to add specific stock levels for your products. Stock levels can also be configured in the Woo Price Element, but this Element is useful if you want to display it seperately from the Price. There are a few simple options for color, size and margins.

The Woo Upsells Element has identical settings to the Woo Related Product Element, but there is one basic difference. Upsells are set individually in each product, and if this Element is used in a layout, these are what are displayed on the front end, if there are any. For products with no Upsells set, this ELement would then not display.