Post Cards Element

Last Update: December 16, 2024

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 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 helpful Element, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Post Cards Element

The Avada Post Cards Element displays a custom post type grid, slider, or carousel based on the design of an individual Post Card and post type options. 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 can 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.

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

HeadingDescription
Post CardSelect a saved Post Card design to use. Create new or edit existing Post Cards in the Avada Library.
Post Card List ViewThis 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 SourceSelect 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 FieldEnter field name you want to use.
Relationship FieldEnter field name you want to use.
Post TypeSelect the post type to display.
TaxonomySelect which taxonomy to use.
Posts BySelect which taxonomy to pull posts from or select all to pull all.
Post StatusSelect the status(es) of the posts that should be included or leave blank for published only posts.
Ignore Sticky PostsSelect if sticky posts should be displayed first ("No") or as part of the selected ordering ("Yes").
Include CategoriesSelect a categories or leave blank for all.
Exclude CategoriesSelect a categories or leave blank for all.
Include TagsSelect a tags or leave blank for all.
Exclude TagsSelect a tags or leave blank for all.
Include BrandsSelect a brands or leave blank for all.
Exclude BrandsSelect a brands or leave blank for all.
Include Product TypeSelect a product type or leave blank for all.
Exclude Product TypeSelect a product type or leave blank for all.
Include Product CategoriesSelect a product categories or leave blank for all.
Exclude Product CategoriesSelect a product categories or leave blank for all.
Include Product TagsSelect a product tags or leave blank for all.
Exclude Product TagsSelect a product tags or leave blank for all.
Include Product Shipping ClassesSelect a product shipping classes or leave blank for all.
Exclude Product Shipping ClassesSelect a product shipping classes or leave blank for all.
Include Event CategoriesSelect a event categories or leave blank for all.
Exclude Event CategoriesSelect a event categories or leave blank for all.
Include Portfolio CategoriesSelect a portfolio categories or leave blank for all.
Exclude Portfolio CategoriesSelect a portfolio categories or leave blank for all.
Include Portfolio SkillsSelect a portfolio skills or leave blank for all.
Exclude Portfolio SkillsSelect a portfolio skills or leave blank for all.
Include Portfolio TagsSelect a portfolio tags or leave blank for all.
Exclude Portfolio TagsSelect a portfolio tags or leave blank for all.
Include FAQ CategoriesSelect a faq categories or leave blank for all.
Exclude FAQ CategoriesSelect a faq categories or leave blank for all.
Include Element TypeSelect a element type or leave blank for all.
Exclude Element TypeSelect a element type or leave blank for all.
Include CategorySelect a category or leave blank for all.
Exclude CategorySelect a category or leave blank for all.
Include Products by SKUAdd the SKUs of the products to include or leave empty to include all products with .
Exclude Products by SKUAdd the SKUs of the products to exclude.
Custom Field - NameEnter the custom field (or meta) name.
Custom Field - Value ComparisonSelect the custom field (or meta) comparison type. The "like" comparison is needed when you want to check serialized data for equality.
Custom Field - ValueEnter the custom field (or meta) value.
Display Products By Price TypeInclude products depending on the price type
Include Out Of Stock ProductsInclude or exclude out of stock products.
Show Hidden ProductsDisplay hidden products that are excluded from search or catalogs.
Show FiltersChoose to show or hide the filters.
Number of PostsSelect 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 OffsetThe number of posts to skip. ex: 1.
Order ByDefines how posts should be ordered. NOTE: (Price|Popularity|Rating) options only work for product-related queries.
Custom Field NameInsert custom field name.
Custom Field TypeSelect custom field value type.
Order ByDefines how terms should be ordered.
OrderDefines the sorting order of posts.
Show Only Upcoming EventsWhether or not the events displayed will be only from the current date.
Show Only Featured EventsWhether or not to display only events that are featured.
Pagination TypeSelect the type of pagination.
Nothing Found MessageReplacement text when no results are found.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
LayoutSelect how you want Post Cards to display.
Filters TypographyControls the typography of the filters content. Leave empty for the global font family.
Filters Container HeightControls the filters container height. In pixels.
Filters Container Border SizeControls the border size of the filters container. In pixels or percentage, ex: 10px or 10%.
Filters Container Border ColorControls the border color of the filters container.
Filters AlignmentSelect the filters content alignment.
Filters Link Hover ColorControls the hover color of the filters link.
Filters Link Active ColorControls the active color of the filters link.
Active Filter Link Border SizeControls the filters link border size. In pixels.
Active Filter Link Border ColorControls the color of the active filter link.
Post Card AlignmentSelect the Post Cards alignment within rows.
Number of ColumnsSet the number of columns per row.
Column SpacingInsert the amount of horizontal spacing between items without 'px'. ex: 40.
Row SpacingInsert the amount of vertical spacing between items without 'px'. ex: 40.
SeparatorChoose the horizontal separator line style. This will only be used on single column grids or list view.
Separator ColorControls the separator color.
Separator WidthIn pixels (px or %), ex: 1px, ex: 50%. Leave blank for full width.
Separator AlignmentSelect the separator alignment; only works when a width is specified.
Separator Border SizeIn pixels.
AutoplayChoose to autoplay the items.
LoopChoose to enable continuous loop mode.
Scroll ItemsInsert the amount of items to scroll. Leave empty to scroll number of visible items.
Mouse ScrollChoose to enable mouse drag control on the carousel.
Mouse PointerChoose to enable mouse drag custom cursor.
Cursor Color ModeChoose cursor color mode.
Cursor ColorControls the color of cursor.
Show NavigationChoose to show navigation buttons on the carousel / slider.
Arrow Box DimensionsControls the width and height of the arrow box. Enter values including any valid CSS unit.
Arrow Icon SizeSet the arrow icon size. Enter value including any valid CSS unit, ex: 14px.
Previous IconClick an icon to select, click again to deselect.
Next IconClick an icon to select, click again to deselect.
Arrow PositionControls the position of the arrow. Enter value including any valid CSS unit, ex: 14px.
Arrow Border RadiusEnter values including any valid CSS unit, ex: 10px.
Arrows Styling
Arrow Background ColorControls the background color of arrow.
Arrow ColorControls the color of arrow.
Dots PositionControls the position of the dots. Enter value including any valid CSS unit, ex: 14px.
Dots SpacingIn pixels.
Dots MarginIn pixels or percentage, ex: 10px or 10%.
Dots AlignmentControls the border style of the arrow.
Dots Styling
Dots SizeIn pixels.
Dots ColorControls the color of the dots.
AnimationChoose for animation style.
MarginIn pixels or percentage, ex: 10px or 10%.
Load More - Button Styling
Text ColorSelect the button text color.
Background ColorSelect the button background color.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Offset of AnimationControls when the animation should start.
Animation DelayControls the delay of animation between each element in a set. In seconds.