Post Cards Element

Last Update: March 15, 2024

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.

For privacy reasons YouTube needs your permission to be loaded.

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.

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, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

Heading		Description
Post Card		Select a saved Post Card design to use. Create new or edit existing Post Cards 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 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.
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.
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.
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.
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.
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.
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.
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.
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.
Animation		Choose for animation style.
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