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 builder you have selected as default in the Builder Options. As can be seen below, here I’m going to create a Post Card called Blog Post Card.

Once 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. You can preview the individual post cards or just import them directly from this window. See the Avada Studio Import Options for full details on the import process. Once you have set your import options and clicked on Import, the Post Card will be then loaded into the Avada Builder.

Regardless 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. You can even choose a specific piece of content. This is important because a Post Card is a dynamic design template, and this step allows you to choose what content the builder will use for the preview of the design.

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 my 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. Because a Post Card is a template, you don’t want to use non dynamic content unless you are happy that it displays on every piece of content the Post Card is designed for.

For this example, I designed and built a Blog Post Card, but as mentioned earlier, you can use Post Cards for products, portfolio posts; indeed any custom post type at all.

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.

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.

Custom icon sets are created and managed via the Avada > Icons section in the WordPress Dashboard.

Here, you can both create and manage custom icon sets. To make a new Custom Icon Set, give your set a name and click on Create New Icon Set. This will take you to the Edit Icon Set page. From here, there is a link to the supported icon tool – Icomoon. This link will open in a new tab, and you can create your icon set. If you already have an icon set downloaded, you could just select the file, but let’s go through the process of creating one.

Once you have generated and downloaded your custom font set, you now need to upload it to your site.

Back on the Edit Icon Set page, you will find a simple upload interface to upload your custom font set. (There is also a shortcut to this page in any element that has the Icon Picker. Here you will find a Plus button in the top right corner of the Icon Picker, which takes you straight to the Custom Icon page.)

To upload a Custom Font Set, simply give the Icon Set a name, and then click on the Select Files button. Navigate to your icon set (as a zip file) and select it.

Then just click Publish in the right hand side. This will load the Custom Icon set. If you need to update the set later on, there is an Update Custom Icon Set button you can use to reupload the set, as seen below. The icons will now be available through the Icon Picker, in their own tab.

OK, that’s it. Your custom icon set is now installed. To use it, head to any element that uses an icon, including the Icon Element. There, you will see any custom icon sets at the top of the icon picker, and you can now just choose the set and select icons from that.

Apart from the Avada Studio Content, which is saved to the Library from the Avada > Studio page, most content is saved to the Library directly through the Avada Builder.

Step 1. Determine what section you’d like to save into the Library. Remember you can save an Element, a Column, a Container, or a full page layout.

Step 2. Click the appropriate ‘Save to Library’ icon, and the Library window will pop up, with the appropriate tab open. If you’re saving a Full-Page Layout, it will be saved under the ‘Templates’ tab. If you’re saving a Container, a Column, or an Element, it will be saved under the corresponding tab.

Step 3. Enter a custom name for your Library item. Use a descriptive name that will make it easy to find the item when redeploying. Once finished, click the ‘Save’ button, or hit Enter on your keyboard.

Step 4. When it has saved, the new Library item will appear in the Library contents. It is now available to be redeployed at any time. You can now close the Library window and return to your page.

There are also right click options, including the ability to save items to the library. This can be used on Containers, Columns and Elements. Try it out, you’ll love it!

How to load a saved Container from the Avada Builder Library depends on which interface of the Builder you are using, and whether it is an empty page, or already has content.

If it’s an empty page, there will be a + Container (Avada Builder), or Add Container link (Avada Live) on the starter page, and to access the saved Library containers, you simply click on this, switch to the Library tab and click on the saved container you wish to load.

If there is already content on the page, you just need to click on the Add Container icon, found in Avada Live on the Element Controls of the Container immediately preceding where you want the new container to go, or in Avada Builder with the + Container Icon can be located at the bottom right of every container. See images below.

To load a saved column, you must first have a container to load it into.

Step 1 – Create or select a Container to load the Column into. You can add a blank Container or a pre-populated one, but the saved Column will load with the size it was saved with (1/1, 1/2, 1/3 etc.), so depending on any pre-existing Container content, the column might need to be resized or moved.

Step 2 – To access the Library, click on the Add Column Icon from the Element Controls of the preceding Column, or the empty Column added when you add a Container. In the back-end builder, click on the + Columns Icon at the bottom right of the Container (see images below).

Step 3 – On the Insert Columns dialogue that pops up, select the Library Columns Tab.

Step 4 – Click on the desired saved Column, and it will be inserted directly into your Container. Adjust as required.