How To Use Post Cards In Avada

Post Cards are a very versatile feature, released back in 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 feature, and watch the video below for a visual overview.,Creating A Post Card Library ElementThe 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.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Choosing An Avada Studio Prebuilt Post Card DesignOnce you have created your Post Card, you can start building from a blank slate, or you can use one of the Avada Studio Prebuilt Posts Cards. To access these, simply go to the Library by clicking on the Library icon on the Toolbar and choose the Studio tab. There you will find a variety of Prebuilt Post Cards, including Blog, Portfolio 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 Plus symbol on the design you would like to use, and select how you would like it to be inserted (Replace all page content, Insert above current content, or Insert below current content). The Post Card will be then loaded into the Avada Builder.,Designing The Post CardRegardless of whether you have used a Prebuilt Avada Studio 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.
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.
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.
In Avada Live, with the Dynamic preview set to a post, the finished Post Card looks like this.,Adding The Post Cards ElementWhen 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).
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.
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.