How To Use Post Cards In Avada

[Music] hi everyone in this video we'll be looking at how to use postcards in avada postcards are a new layout feature for custom post types released with avada 7.3 make sure you subscribe to our youtube channel to keep up with all the latest videos like this one and if you don't want to miss one click the bell icon to get notifications of all new videos on our channel okay let's begin basically a postcard is a layout template for various custom post types including blog posts portfolio posts faqs events and woocommerce products using the postcards element the individual postcards can then be displayed in grids carousels or sliders in your pages and layouts they introduce a massive amount of flexibility into the layout and display of custom post types the process of using postcards in nevada is that you first create a postcard library element in the avada builder library which can then be applied through the postcards element on a page or in a nevada layout the easiest way to understand this is that the postcard is a type of template and the postcards element allows you to use a postcard to display one of the available post types in various ways let's go through it one step at a time i've imported the avada business coach website here to get started i'll head to the evada builder library and as we can see here one of the library elements you can now create is a postcard i'll call this one blog postcard and click on create new element you can also just hit enter this brings us to the backend builder but you can also choose avada live to build your postcard if you prefer once you have created your postcard you can start building from scratch or you can use one of the pre-built postcards to access these simply go to the library tab there you will find a variety of pre-built postcards including blog category and product postcards these can be used as they are or can be used as a starting point for your postcard design just click on the design you would like to use and the postcard will be loaded into the avada builder for this video however i will build one from the ground up the first thing to do in the live builder is to set the dynamic content options so i'll head to the page options and the postcard tab and set the view dynamic content as option postcards can display lots of different custom post types including terms like categories products events and portfolios but for this example i'll set this to post i'll also just choose a specific post here and as i'm thinking of a three column grid on the front end i'll set the preview width to about 30 and click preview okay so now as i build this postcard the builder will use the content from that specific post to show me how this will look with real content now creating avada builder library elements isn't the same as when using the builder on a normal page as you can see here for example the usual column controls are missing i'll start by editing this column though and on the design tab i think i'll add 10 pixels border radius all the way around the column and i might also go to the background tab and give it a light gray background color okay so now for some content when first adding elements to your postcard you are met with the layout elements tab this is because a postcard will be pulling dynamic content into the layout and so dynamic layout elements are a necessary component you can of course also use some of the design elements in your postcard with dynamic content options as this will be a blog post layout i'll start with the postcard image element this pulls the featured image or images from a custom post type i will set the layout to crossfade for any posts that have multiple featured images as you can see there are also some specific options for woo product images now i'll add a title element i'll start with the general tab and set the content itself to be dynamic i'll just choose title for this i might also turn title link on here and via dynamic content options set the link url to be the permalink then i'll head to the design tab and customize the alignment the heading and the font size i'll also adjust the margins on this as well the next layout element i will add is the content element this will pull the content from the post i will set it to excerpt and set the excerpt length at 18. on the design tab i'll leave the alignment at text flow but i will set some right and left margin around it the final layout element i'll add is the meta element most of the other layout elements are specifically for woocommerce postcards i might just customize the content a bit here to leave only the author publish date and reading time as enabled and when i'm done i will head to the design tab i'll align this to the center and i'll add a bit of padding on each side i'll use padding instead of margins as i want the lines to continue to the edges and then i'll add a tiny bit of bottom margin as well finally i'll add a button element i'll start by making the button url to be the permalink via the dynamic content options i'll also give it some text let's call this read now and then i'll just head to the design tab i'll leave the style on default and i'll just set the button span to yes okay the last thing to do to finish my postcard is to add some flexible separators so i can make sure my grid items will all be the same height if the title is long and goes over two lines i'll add a separator element above the title here set the style to no style and on the design tab i'll set flex grow to 1. then i'll just duplicate this element and place it under the title element as well okay so now i'll save my postcard and now it's time to go and add this into a page via the postcards element alright so i'm on the articles page here and i'm going to replace this blog element with the postcards element to create a new layout for this page i'll just add this in quickly here and choose my preferred options for a full rundown on using the actual postcards element please see the postcards element documentation linked below okay so there's my new article page layout using postcards in nevada this is how i'd set it up but i could also display it as a carousel or even a post slider and in the same way as i have made a blog post layout here i could also create a blog category postcard woocommerce postcards or one for any other custom post type if we quickly look in the avada builder library on the evada retail website we can see there are many postcards in use on this site there are several blog layouts and a full 8 woocommerce postcards there are postcards for product grids list views and categories on the home page here there are quite a few different postcards being used as we scroll down from the product grid to the product categories the recent posts and the sale product grid so to really explore postcards you might want to download this pre-built website to check them out at your leisure okay this concludes our video on how to use postcards in avada make sure you subscribe to our youtube channel to keep up with all the latest videos and if you have any questions or need assistance please create a support ticket and our team will gladly assist you as always we want to thank you for choosing avada

Channel: ThemeFusion

Views: 6,828

Keywords: WordPress, Avada, ThemeFusion, Post Cards

Id: ROGslY9FePM

Length: 7min 41sec (461 seconds)

Published: Mon Apr 12 2021