How To Use The Avada Layout Elements

27/04/2021

Layout Elements are special, dynamic Elements that are found in Avada Builder, but only when editing Content Layout Sections through Avada Layouts, or when editing Post Cards in the Avada Builder Library. Currently, there are twenty three of these special Elements, which can be used to dynamically populate the Content Layout Sections and Post Cards.

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.

IMPORTANT NOTE: Layout Elements are ONLY available when editing Content Layout Sections in Avada Layouts, or when editing Post Cards through the Avada Builder Library.

Layout Elements

Archives

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.

Archives Element
See The Archives Element Doc!
Avada Website Builder

699,614 Businesses Trust Avada

Get Avada
Avada Website Builder

699,614 Businesses Trust Avada

Get Avada
Avada Website Builder

699,614 Businesses Trust Avada

Get Avada

Author

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.

Author Element
See The Author Element Doc!

Comments

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.

Comments Element
See The Comments Element Doc!

Content

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.

Content Element
See The Content Element Doc!

Featured Images Slider

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.

Featured Images Slider Element
See The Featured Images Slider Element Doc!
Avada Website Builder

699,614 Businesses Trust Avada

Get Avada
Avada Website Builder

699,614 Businesses Trust Avada

Get Avada
Avada Website Builder

699,614 Businesses Trust Avada

Get Avada

Meta

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.

Meta Element
See The Meta Element Doc!

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.

Pagination Element
See The Pagination Element Doc!

Post Card Archives

The Post Card Archives Element allows you to place archive content using a Post Card layout anywhere in a Content Layout Section, in any Layout.

Post Card Archive Element
See The Post Card Archives Element Doc!

Post Card Cart

The Post Card Cart Element is a special Layout Element, that only displays when creating or editing a Post Card Library Element, through the Avada Builder Library. It allows you to add an Add To Cart Button to a WooCommerce Post Card design. Please see the How To Use Post Cards in Avada document for more general information on Post Cards, and the Post Card Cart Element for specific details on this Layout Element.

Post Card Cart Element > General Tab
See The Post Card Cart Element Doc!

Post Card Image

The Post Card Image Element is a special Layout Element, that only displays when creating or editing a Post Card Library Element, through the Avada Builder Library. Please see the How To Use Post Cards in Avada document for more general information on Post Cards, and the Post Card Image Element doc for specific details on this Layout Element.

Post Card Image Element > General Tab
See The Post Card Image Element Doc!

Project Details

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.

Project Details Element - General Tab
See The Project Details Element Doc!

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.

Related Posts Element
See The Related Posts Element Doc!

Woo Add To Cart

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.

Woo Add To Cart Element > General Tab
See The Woo Add To Cart Element Doc!

Woo Additional Information

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.

WooAdditional Information Element > General Tab
See The Woo Additional Information Element Doc!

Woo Archives

The Woo Archives Element was added in Avada 7.3, and offers the ability to create a custom layout for your Woo Archives pages. It’s similar to the Archives Element, but is designed specifically for use with WooCommerce products.

Woo Archives Element
See The Woo Archives Element Doc!

Woo Price

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.

Woo Price Element > General Tab
See The Woo Price Element Doc!

Woo Product Images

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.

Woo Product Images Element > General Tab
See The Woo Product Images Element Doc!
Avada Website Builder

699,614 Businesses Trust Avada

Get Avada
Avada Website Builder

699,614 Businesses Trust Avada

Get Avada
Avada Website Builder

699,614 Businesses Trust Avada

Get Avada

Woo Rating

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.

Woo Rating Element > General Tab
See The Woo Rating Element Doc!

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.

Woo Related Products Element > General Tab
See The Woo Related Products Element Doc!

Woo Reviews

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.

Woo Reviews Element > General Tab
See The Woo Reviews Element Doc!

Woo Short Description

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.

Woo Short Description Element > General Tab
See The Woo Short Description Element Doc!

Woo Stock

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.

Woo Stock Element > General Tab
See The Woo Stock Element Doc!

Woo Tabs

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.

Woo Tabs Element > General Tab
See The Woo Tabs Element Doc!
Avada Website Builder

699,614 Businesses Trust Avada

Get Avada
Avada Website Builder

699,614 Businesses Trust Avada

Get Avada
Avada Website Builder

699,614 Businesses Trust Avada

Get Avada