Post Cards Element

19/04/2022

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.

View Element Demo Page!

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.

807,496 Businesses Trust Avada

Get Avada

807,496 Businesses Trust Avada

Get Avada

807,496 Businesses Trust Avada

Get Avada

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.

Note: The displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

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. This will only display if a Woo Commerce related Post Card is chosen.
Content Source – Select if you want to pull single posts or taxonomy terms. Choose from Posts, Terms, Related, Up Sells, Cross Sells or Featured Products.
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), Avarage Rating, or Event Date.
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.
Show Only Upcoming Events – Whether or not the events displayed will be only from the current date.
Show Only Featured Events – Whether or not to display only events that are featured.
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.

View The Options Screen

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.
Separator – Choose the horizontal separator line style. This will only be used on single column grids or list view.
Separator Color – Controls the separator color.
Separator Width – In pixels (px or %), ex: 1px, ex: 50%. Leave blank for full width.
Separator Alignment – Select the separator alignment; only works when a width is specified. Choose from Center, Left or Right.
Separator Border Size – In pixels.
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%.
Load More Button Styling
Regular Options
Text Color – Select the button text color.
Background Color – Select the button background color.
Active Options
Hover Text Color – Select the button text color.
Hover Background Color – Select the button background color.

View The Options Screen

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.
Animation Delay – Controls the delay of animation between each element in a set. In seconds.