Post Cards Element

Last Update: May 1, 2025

The Avada Post Cards Element works in conjunction with individual Post Cards, which are created and designed through the Avada Builder Library. 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 huge variety of ways – in a Grid, a Masonry Grid, a Carousel, in a Marquee, a Coverflow Carousel, as Stacking Cards, or as a Slider in your pages and Layouts.

Check out the How To Use Post Cards In Avada for a broad overview on the topic and how to create an actual post cards, read on to see specific details and options for the Post Cards Element, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

View Element Demo Page!

How To Use The Post Cards Element

The Avada Post Cards Element displays a custom post type based on the design of an individual Post Card, and the layout and various options chosen. So before using the Post Cards Element, you must 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 then use the Post Cards Element to display the layout on a page. Add the Element to a page, and configure the options to display your chosen post type in your preferred layout.

There are a HUGE amount of possibilities with this element, depending on the post type chosen, as well as the layout selected. For a run through on this element, make sure to watch the video above.

For privacy reasons YouTube needs your permission to be loaded.

Element 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 (which it is by default), you will only see options relevant to your selections in the Builder, and so the options screens may look somewhat different.

General

Heading		Description
Post Card		Select a saved Post Card. Create new or edit existing ones in the Avada Library.
Apply Alternate Post Cards		Set to "yes" to enable alternating Post Cards.
Alternate Post Cards		Add alternate Post Cards
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 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.
Repeater Field		Enter field name you want to use.
Relationship Field		Enter field name you want to use.
Post Type		Select the post type to display.
Taxonomy		Select which taxonomy to use.
Posts By		Select which taxonomy to pull posts from or select all to pull all.
Post Status		Select the status(es) of the posts that should be included or leave blank for published only posts.
Ignore Sticky Posts		Select if sticky posts should be displayed first ("No") or as part of the selected ordering ("Yes").
Include Categories		Select a categories or leave blank for all.
Exclude Categories		Select a categories or leave blank for all.
Include Tags		Select a tags or leave blank for all.
Exclude Tags		Select a tags or leave blank for all.
Include Brands		Select a brands or leave blank for all.
Exclude Brands		Select a brands 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 categories or leave blank for all.
Exclude Product Categories		Select a product categories or leave blank for all.
Include Product Tags		Select a product tags or leave blank for all.
Exclude Product Tags		Select a product tags or leave blank for all.
Include Product Shipping Classes		Select a product shipping classes or leave blank for all.
Exclude Product Shipping Classes		Select a product shipping classes or leave blank for all.
Include Event Categories		Select a event categories or leave blank for all.
Exclude Event Categories		Select a event categories or leave blank for all.
Include Portfolio Categories		Select a portfolio categories or leave blank for all.
Exclude Portfolio Categories		Select a portfolio categories or leave blank for all.
Include Portfolio Skills		Select a portfolio skills or leave blank for all.
Exclude Portfolio Skills		Select a portfolio skills or leave blank for all.
Include Portfolio Tags		Select a portfolio tags or leave blank for all.
Exclude Portfolio Tags		Select a portfolio tags or leave blank for all.
Include FAQ Categories		Select a faq categories or leave blank for all.
Exclude FAQ Categories		Select a faq categories or leave blank for all.
Include Element Type		Select a element type or leave blank for all.
Exclude Element Type		Select a element type or leave blank for all.
Include Category		Select a category or leave blank for all.
Exclude Category		Select a category or leave blank for all.
Include Products by SKU		Add the SKUs of the products to include or leave empty to include all products with .
Exclude Products by SKU		Add the SKUs of the products to exclude.
Custom Field - Name		Enter the custom field (or meta) name.
Custom Field - Value Comparison		Select the custom field (or meta) comparison type. The "like" comparison is needed when you want to check serialized data for equality.
Custom Field - Value		Enter the custom field (or meta) value.
Display Products By Price Type		Include products depending on the price type
Include Out Of Stock Products		Include or exclude out of stock products.
Show Hidden Products		Display hidden products that are excluded from search or catalogs.
Show Filters		Choose to show or hide the filters.
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) options only work for product-related queries.
Custom Field Name		Insert custom field name.
Custom Field Type		Select custom field value type.
Order By		Defines how terms should be ordered.
Order		Defines the sorting order of posts.
Condense Events In Series		Turn on to show only the next event in each series.
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		Select the type of pagination.
Nothing Found Message		Replacement text when no results are found.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Layout		Select how you want Post Cards to display.
Marquee Direction		Select the marquee direction.
Stacking CardsOffset		Set the offset at which stacking cards should become sticky.
Post Card Rotation Angle		Set the rotation angle for the Post Cards in coverflow layout.
Slide Depth		Set the z-axis translation offset of the slides in coverflow layout.
Transition Style		Choose the transition style for the slider layout.
Filters Typography		Controls the typography of the filters content. Leave empty for the global font family.
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.
Filters Alignment		Select the filters content alignment.
Filters Link Hover Color		Controls the hover color of the filters link.
Filters Link Active Color		Controls the active color of the filters link.
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.
Post Card Alignment		Select the Post Cards alignment within rows.
Number of Columns		Set the number of columns per row. When using the coverflow layout, the total number of columns will also depend on other settings and available space.
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.
Separator Border Size		In pixels.
Transition Speed		Set the duration of the transition between Post Cards. In milliseconds.
Scroll Items		Insert the amount of items to scroll. Leave at 0 to scroll number of visible items. NOTE: Please make sure that the number of total items is an even multiple of the number of scrolled items (2x, 3x, etc.). For larger numbers of scrolled items, or when using centered slides it is best to have an even larger multiple to ensure smooth looping.
Center Active Post Cards		Choose to always have the active Post Card centered. Otherwise it will be left on LTR and right on RTL sites.
Mask Edges		Choose if the edges should be masked with a fade out effect. Navigation arrows will not be displayed, if masked edges are active.
Display Shadow		Choose to show a shadow on the individual slides on coverflow layout or during transitions.
Autoplay		Choose to autoplay the items.
Autoplay Speed		Set the autoplay speed, the duration between transitions. In milliseconds.
Autoplay Pause On Hover		Choose to pause autoplay on hover.
Loop		Choose to enable continuous loop mode.
Mouse Control		Choose to enable mouse drag and/or wheel control on the carousel, coverflow and slider layouts.
Free Mode		Choose to enable free mode for dragging and scrolling the Post Cards arbitrary amounts.
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. Note: You can also set the CSS ID (e.g. my-id) for this Post Cards element and use #my-id-next, #my-id-prev as links on a Button element to navigate through the slides.
Arrow Box Dimensions		Controls the width and height of the arrow box. Enter values including any valid CSS unit.
Arrow Icon Size		Set the arrow icon size. Enter value including any valid CSS unit, ex: 14px.
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
Arrow Background Color		Controls the background color of arrow.
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
Dots Size		In pixels.
Dots Color		Controls the color of the dots.
Margin		In pixels or percentage, ex: 10px or 10%.
Load More - Button Styling
Text Color		Select the button text color.
Background Color		Select the button background color.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Offset of Animation		Controls when the animation should start.
Animation Delay		Controls the delay of animation between each element in a set. In seconds.

How To Use The Post Cards Element
Element Options