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.

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.

Avada Website Builder

868,152 Businesses Trust Avada

Avada Website Builder

868,152 Businesses Trust Avada

Avada Website Builder

868,152 Businesses Trust 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.
  • TaxonomySelect 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 BySelect 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 – NameEnter the custom field (or meta) name.

  • Custom Field – Value ComparisonSelect the custom field (or meta) comparison type.

  • Custom Field – ValueEnter 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 FiltersChoose 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.

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 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. Leave empty for default value

  • Filters AlignmentSelect the filters content alignment.

  • Filters Link Hover ColorControls the hover color of the filters link. Leave empty for default value.

  • Filters Link Active ColorControls the active color of the filters link. Leave empty for default value.

  • Active Filter Link Border SizeControls the filters link border size. In pixels.

  • Active Filter Link Border ColorControls the color of the active filter link. Leave empty for default value.

  • Post Card AlignmentSelect 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.
  • 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. Choose from Center, Left or Right.

  • Separator Border SizeIn pixels.

  • Autoplay – Choose to autoplay the items.
  • LoopChoose 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 PointerChoose to enable mouse drag custom cursor.

  • Cursor Color ModeChoose cursor color mode.

  • Cursor ColorControls the color of cursor.

  • Show Navigation – Choose 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. Leave empty for default values.

  • Arrow Icon SizeSet the arrow icon size. Enter value including any valid CSS unit, ex: 14px. Leave empty for default value.

  • 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

  • Regular Options

  • Arrow Background ColorControls the background color of arrow. Leave empty for default value.

  • Arrow ColorControls the color of arrow.

  • Hover / Active Options

  • Arrow Background ColorControls the background color of arrow. Leave empty for default value.

  • 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

  • Regular Options

  • Dots SizeIn pixels.

  • Dots Color Controls the color of arrow. Leave empty for default value.

  • Hover / Active Options

  • Dots SizeIn 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 ColorSelect the button text color.

  • Background ColorSelect the button background color.

  • Active Options

  • Hover Text ColorSelect the button text color.

  • Hover Background ColorSelect the button background color.

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 ColorSelect 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 DelaySelect 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.

Global Options

There are no Global Options for the Post Cards Element.

Avada Website Builder

868,152 Businesses Trust Avada

Avada Website Builder

868,152 Businesses Trust Avada

Avada Website Builder

868,152 Businesses Trust Avada