Post Card Archives Element

29/07/2021

In Avada 7.3, we created the Post Cards feature, and the Post Cards Element. In the Layout Elements, you will find the Post Card Archives Element. This special Element is useful for when you want to change the way archives display, by using a Post Card design.

IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.
View The Element Demo Page!

Overview

How To Use The Post Card Archives Element

The Post Card Archives Element allows you to place archive content using a Post Card layout anywhere in a Content Layout Section, in a Layout displaying Archive content.

When you go to add an Element in a Content Layout Section, the Element dialog opens in a new tab called Layout Elements. This is where you will find the Post Card Archives Element. These dynamic Elements can only be placed once into a Layout, with the exception of the Pagination Element, which can be placed twice. You can also use the full range of Design Elements when building your Layout.

The Post Card Archives Element can be placed anywhere in your Layout Section, and will dynamically pull Archives Content into the page, based on the Post Card layout chosen, and the Conditions set in the Layout. For example, you might choose a Product Grid Post Card, and set the condition for the Layout only to display on Post Category Archives.

See below for an example of the Post Card Archives Element in a Product Category Content layout on the Avada Retail prebuilt website. Here, it’s set to display the Category Products in a Grid when viewing the Product Category Archives.

Post Card Archives Element > Example
Avada Website Builder

737,309 Businesses Trust Avada

Get Avada
Avada Website Builder

737,309 Businesses Trust Avada

Get Avada
Avada Website Builder

737,309 Businesses Trust Avada

Get Avada

Element Options

Location: The edit screen within each Element.

You can deploy the Layout Elements only once within each Layout. 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: Please note that the displayed options 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 – Selected a 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 (WooCommerce). Post cards can be created in the Avada Library.
  • Posts Per Page – 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.
  • Pagination Type – Choose the type of pagination. Choose from Pagination, Infinite Scroll, or Load More Button.
  • Nothing Found Message – Replacement text when no results are found.
  • Element Visibility – Allows you to control the Element’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • CSS Class – Allows you to add a class for the Element.

  • CSS ID – Allows you to add an ID for the Element.

View The Options Screen

Design Tab

  • Layout – Select how you want post cards to display.
  • Post Card Alignment – Select how you want post cards to align within rows. Choose from Flex Start, Center, Flex End, or Stretch.
  • 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.
  • Scroll Items – Insert the amount of items to scroll. Leave empty to scroll number of visible items.
  • Show Navigation – Choose to show navigation buttons on the carousel.
  • Mouse Scroll – Choose to enable mouse drag control on the carousel. IMPORTANT: For easy draggability, when mouse scroll is activated, links will be disabled.
  • Navigation Margin – Controls the space between content and navigation. Enter value including any valid CSS unit, ex: -40px.
  • Animation – Choose animation style. Select Fade, or Slide.

  • Margin – In pixels or percentage, ex: 10px or 10%.
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, or Light Speed.

  • Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

  • Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 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.

View The Options Screen

Global Options

Layout Elements do not have any Global Options.

Avada Website Builder

737,309 Businesses Trust Avada

Get Avada
Avada Website Builder

737,309 Businesses Trust Avada

Get Avada
Avada Website Builder

737,309 Businesses Trust Avada

Get Avada