How To Use Post Cards In Avada

12/04/2021

Post Cards are a new feature, released with Avada 7.3. Basically, a Post Card is a custom layout template for various post types including Blog posts, Portfolio posts, FAQs, Events and WooCommerce products. Using the Post Cards Element, the individual Post Cards can then be displayed in Grids, Carousels, or Sliders in your pages and Layouts. They introduce a massive amount of flexibility to the layout and display of custom post types.

The basic process is that you create a Post Card Library Element via the Avada Library, which can then be applied through the Posts Cards Element on a page, or in an Avada Layout. The easiest way to understand this, is that a Post Card is a type of template, and the Post Cards Element allows you to use a Post Card to display one of the available post types in various ways. Read on to find out more about this interesting new feature, and watch the video below for a visual overview.

Creating A Post Card Library Element

The first step in the Post Cards process is to create the Post Card Library Element. This is done in the Avada Builder Library. To create a Post Card, selecting Post Card as the type of Element, give your Post Card a name, and then click on Create New Element. This redirects you to the back end Avada Builder, but you can also choose Avada Live to build your Post Card. As can be seen below, here I’m going to create a Post Card called Blog Post Card.

Create Post Card Library Element
Avada Website Builder

736,969 Businesses Trust Avada

Get Avada
Avada Website Builder

736,969 Businesses Trust Avada

Get Avada
Avada Website Builder

736,969 Businesses Trust Avada

Get Avada

Choosing A Prebuilt Post Card Design

Once you have created your Post Card, you can start building from a blank slate, or you can use one of the Prebuilt Posts Cards. To access these, simply go to the Library tab. There you will find a variety of Prebuilt Post Cards, including Blog, Category and Product Post Cards. These can be used as they are, or can be used as a starting point for your Post Card design. Just click on the design you would like to use, and the Post Card will be loaded into the Avada Builder.

Prebuilt Post Cards

Designing The Post Card

Regardless of whether you have used a Prebuilt Post Card, or you are starting from scratch, the first thing to do is to go to the Post Card Page Options tab, and set the “View Dynamic Content As” option to the type of content you will be creating the Post Card for. As can be seen below, this can be a Term (for example, a Category), Post, Product, Event, Portfolio, or an FAQ. As per our example, here I would choose Post, as I want the Post Card to display Blog Posts, and then I’d choose a specific post to display any Dynamic Content.

Post Card - View Dynamic Content As...

When first adding Elements to your Post Card, you are met with a Layout Elements tab. This is because Post Cards will be pulling dynamic content into the layout, and so dynamic Layout Elements are a neccesary component. As can be seen in the screenshot below, there are a range of Layout Elements that suit various types of post types. You can, of course, also use any of the Design Elements in your Post Card, like the Title Element with Dynamic Content options.

Post Card Layout Elements

For this example, I have designed and built a Blog Post Card. As you can see in the first screenshot below, there are six Elements in all. As well as the Elements, I also applied a border radius top and bottom and a background color to the Column itself. At the very top of the Column is a Post Card Image Element. Then there are invisible Separators above and below a Title Element, with Flex Grow set to 1, which will keep the Post Cards the same size if the Titles run to a new line. The Title Element itself has Dynamic Content set to the Page Title. Then there is an instance of the Meta Element, with various options enabled, and finally a Button Element set to Span, with the Dynamic Content option set to Permalink.

Blog Post Card > Elements

In Avada Live, with the Dynamic preview set to a post, the finished Post Card looks like this.

Blog Post Card Design

Adding The Post Cards Element

When you have finished the Post Card Library Element, you can then use it on a page or in a Layout, using the Post Cards Element. See that document for a full rundown of specific Element options, but basically, this is where you choose how to lay out the Post Card on the page, and which content to use. As an example, I will walk through using the Post Cards Element to display the Blog Post Card Library Element we created above.

There are three tabs on the Post Cards Element. In the General Tab, you decide what Post Card you will be using, the content source and post type, and how it will be ordered etc. Then on the Design tab, you choose the Layout and the Alignment, and other design options, and finally on the Extras tab, you can apply animation to the Element.

For our example, on the General tab, as you can see below, we want to use the Blog Post Card, with a Content Source of Posts, and a Post Type of Posts (if we chose Terms with a Post Type of Posts, it would display the Blog Categories, rather than the individual blog posts themselves).

Post Cards Element > General Tab

And in the Design Tab, I would choose to display the Post Cards in a three column Grid, and I’ll also choose Stretch as the Alignment, so the Cards are all the same height. You can see this in action in the second row, where the middle Title stretches over two lines, but the other two posts in the row are the same height.

Post Cards Element > Design Tab

This Element could then be used on the Blog page as an alternative to the Blog Element, giving you more control over the design and information displayed. And in the same way, you could create individual Post Cards for WooCommerce Products, portfolio posts, FAQ items etc. Post Cards are a great, new, very flexible way to present post types throughout your site.

Avada Website Builder

736,969 Businesses Trust Avada

Get Avada
Avada Website Builder

736,969 Businesses Trust Avada

Get Avada
Avada Website Builder

736,969 Businesses Trust Avada

Get Avada