Post Cards Element
The Post Cards Element was a new addition to Avada Builder in Avada 7.3. This Element works in conjunction with individual Post Cards, which are created and designed through the Avada Builder Library. 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.
Check out the How To Use Post Cards In Avada for a broad overview on the topic, read on to find out specific details and options for this useful Element, and watch the video for a visual overview.
How To Use The Post Cards Element
The Post Cards Element is used to display a custom post type grid, slider or carousel, based on the design on an individual Post Card, and post type options. So before you can use the Post Cards Element, you need to create at least one Post Card. This is done through the Avada builder Library. See the How To Use Post Cards In Avada doc for more information on this process.
Once you have created your Post Card, you can use the Post Cards Element to display the layout on a page. Simply add the Element to a page, and configure the options to display your chosen post type in your chosen layout.
Element Options
Location: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
General Tab
- Post Card – Select the post card design to use. Post cards can be created in the Avada Library.
- Post Card List View – This post card will be used in the list view which can be triggered with the sorting element. Post cards can be created in the Avada Library.
- Content Source – Select if you want to pull single posts or taxonomy terms. Choose from Posts, Terms, Related, Up Sells or Cross Sells.
- Post Type – Select which post type you want to pull from. Choose from Posts, Products, Events, Portfolio, or FAQs.
Taxonomy – Select which taxonomy to pull terms from. Choose from Categries, Tags, Product Type, Product Categories, Product Tags, Product Shipping Classes, Event Categories, Portfolio Categories, Portfolio Skills, Portfolio Tags, or FAQ Categories.
- Posts By – Select which taxonomy to pull posts from or select all to pull all. Choose from All, Categories, or Tags.
- Include Categories – Select a category or leave blank for all.
- Exclude Categories – Select a category or leave blank for all.
- Include Tags – Select a tag or leave blank for all.
- Exclude Tags– Select a tag or leave blank for all.
- Include Product Type – Select a product type or leave blank for all.
- Exclude Product Type – Select a product type or leave blank for all.
- Include Product Categories – Select a product category or leave blank for all.
- Exclude Product Categories – Select a product category or leave blank for all.
- Include Product Tags – Select a product tag or leave blank for all.
- Exclude Product Tags – Select a product tag or leave blank for all.
- Include Product Shipping Classes – Select a product shipping class or leave blank for all.
- Exclude Product Shipping Classes – Select a product shipping class or leave blank for all.
- Include Event Categories – Select an event category or leave blank for all.
- Exclude Event Categories – Select an event category or leave blank for all.
- Include Portfolio Categories – Select a portfolio category or leave blank for all.
- Exclude Portfolio Categories – Select a portfolio category or leave blank for all.
- Include Portfolio Skills – Select a portfolio skill or leave blank for all.
- Exclude Portfolio Skills – Select a portfolio skill or leave blank for all.
- Include Portfolio Tags – Select a portfolio tag or leave blank for all.
- Exclude Portfolio Tags – Select a portfolio tag or leave blank for all.
- Include FAQ Categories – Select an FAQ category or leave blank for all.
- Exclude FAQ Categories – Select an FAQ category or leave blank for all.
Include Out Of Stock Products – Choose to include or exclude products which are out of stock. Choose Include, or Exclude.
- Show Hidden Products – Choose to show hidden products which are exclude from search or catalog.
- Number of Posts – Select number of posts per page. Set to -1 to display all. Set to 0 to use the post type default number of posts. For portfolio and products this comes from the Global Options. For all others, Settings > Reading.
- Posts Offset – The number of posts to skip. ex: 1.
- Order By – Defines how posts should be ordered. Note: (Price|Popularity|Rating) option only work for product related query. Choose from Date, Post Title, Post Slug, Author, ID, Number of Comments, Last Modified, Random, Price, Populariry (sales), or Avarage Rating.
- Order By – Defines how terms should be ordered. Choose from Name, Slug, Term Group, Term ID, Description, or Parent.
- Order – Defines the sorting order of posts. Choose from Descending, or Ascending.
- Pagination Type – Choose the type of pagination.Choose the type of pagination. Choose from No Pagination, Pagination, Infinite Scrolling or Load More Button.
- Element Visibility – Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Avada Builder Elements tab in the Global Options.
- CSS Class – Allows you to add a class for the Separator.
- CSS ID –Â Allows you to add an ID for the Separator.
Design Tab
- Layout – Select how you want post cards to display. Choose from Grid, Carousel, or Slider.
- Post Card Alignment – Select how you want post cards to align within rows. Choose from Flex Start, Center, Flex End, or Stretch.
- Number of Columns – Set the number of columns per row.
- Column Spacing – Insert the amount of horizontal spacing between items without ‘px’. ex: 40.
- Row Spacing – Insert the amount of vertical spacing between items without ‘px’. ex: 40.
- Autoplay – Choose to autoplay the items.
- Scroll Items – Insert the amount of items to scroll. Leave empty to scroll number of visible items.
- Show Navigation – Choose to show navigation buttons on the carousel / slider.
- Mouse Scroll – Choose to enable mouse drag control on the carousel. IMPORTANT: For easy draggability, when mouse scroll is activated, links will be disabled.
- Navigation Margin – Controls the space between content and navigation. Enter value including any valid CSS unit, ex: -40px.
- Animation – Select the animation style. Choose from Fade, or Slide.
- Margin – In pixels or percentage, ex: 10px or 10%.
Extras Tab
Animation Type – Controls the Element’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.
Direction of Animation – Controls the direction of animation on the Element. Choose between Top, Right, Bottom, Left, or Static.
Speed of Animation – Controls the speed of animation on the Element. Choose between 0.1 to 1.
Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
Global Options
There are no Global Options for the Post Cards Element.
