Post Cards Element

15/12/2022

The Post Cards 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 below 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.

868,152 Businesses Trust Avada

Get Avada

868,152 Businesses Trust Avada

Get Avada

868,152 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 the type of content you would like to show. NOTE: The related option will fetch items related to the post that it is placed on based on taxonomy selection. 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.
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 Topic Tags – Select a tag or leave blank for all.
Exclude Topic 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.
Custom Field – Name – Enter the custom field (or meta) name.
Custom Field – Value Comparison – Select the custom field (or meta) comparison type.
Custom Field – Value – Enter the custom field(or meta) value.
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.
Show Filters – Choose to show or hide the filters. Select from Yes, Yes without “All”, or No.
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, Slider or Masonry.
Filters Typography
Font Family – Controls the font family of the menu items. Leave empty to use the site default.
Font Size – The font size for main menu links. Use any valid CSS unit.
Line Height – Controls the line height of the text. Enter value including any valid CSS unit, ex: 28px.
Letter Spacing – Controls the letter spacing of the main menu items. Enter value including any valid CSS unit, ex: 2px. Leave empty to use the site default.
Text Transform – Select how the text is displayed. Choose from Normal or Uppercase.
Font Color – Select the font color for the filters.
Filters Container Height – Controls the filters container height. In pixels.
Filters Container Border Size – Controls the border size of the filters container. In pixels or percentage, ex: 10px or 10%.
Filters Container Border Color – Controls the border color of the filters container. Leave empty for default value
Filters Alignment – Select the filters content alignment.
Filters Link Hover Color – Controls the hover color of the filters link. Leave empty for default value.
Filters Link Active Color – Controls the active color of the filters link. Leave empty for default value.
Active Filter Link Border Size – Controls the filters link border size. In pixels.
Active Filter Link Border Color – Controls the color of the active filter link. Leave empty for default value.
Post Card Alignment – Select the Post Cards alignment within rows.
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.
Loop – Choose to enable continuous loop mode.
Scroll Items – Insert the amount of items to scroll. Leave empty to scroll number of visible items.
Mouse Scroll – Choose to enable mouse drag control on the carousel. IMPORTANT: For easy draggability, when mouse scroll is activated, links will be disabled.
Mouse Pointer – Choose to enable mouse drag custom cursor.
Cursor Color Mode – Choose cursor color mode.
Cursor Color – Controls the color of cursor.
Show Navigation – Choose to show navigation buttons on the carousel / slider.
Arrow Box Dimensions – Controls the width and height of the arrow box. Enter values including any valid CSS unit. Leave empty for default values.
Arrow Icon Size – Set the arrow icon size. Enter value including any valid CSS unit, ex: 14px. Leave empty for default value.
Previous Icon – Click an icon to select, click again to deselect.
Next Icon – Click an icon to select, click again to deselect.
Arrow Position – Controls the position of the arrow. Enter value including any valid CSS unit, ex: 14px.
Arrow Border Radius – Enter values including any valid CSS unit, ex: 10px.
Arrows Styling
Regular Options
Arrow Background Color – Controls the background color of arrow. Leave empty for default value.
Arrow Color – Controls the color of arrow.
Hover / Active Options
Arrow Background Color – Controls the background color of arrow. Leave empty for default value.
Arrow Color – Controls the color of arrow.
Dots Position – Controls the position of the dots. Enter value including any valid CSS unit, ex: 14px.
Dots Spacing – In pixels.
Dots Margin – In pixels or percentage, ex: 10px or 10%.
Dots Alignment – Controls the border style of the arrow.
Dots Styling
Regular Options
Dots Size – In pixels.
Dots Color – Controls the color of arrow. Leave empty for default value.
Hover / Active Options
Dots Size – In pixels.
Dots Color – Controls the color of arrow. Leave empty for default value.
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 column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, Light Speed or Reveal With Color.
Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.
Animation Color – Select the color of the animation. For use with the Reveal With Color animation type.
Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 5.
Animation Delay – Select the delay time after the animation starts (0 – 5).
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.