Post Card Image Element

14/04/2021

The Post Card Image Element is a special Layout Element, that you will only see when editing a Post Card Library Element through the Avada Builder Library. It is one of the available Elements, with which to design and build Post Cards.

Read on to find out more about this useful Element.

View Element Demo Page!

Overview

How To Use The Post Card Image Element

The Post Card Image Element is designed for use in Post Cards. The Element will pull the featured image(s) from the custom post type it displays on, including blog posts, portfolio posts, FAQs, and WooCommerce products etc.

There are three Layout options; Static, Crossfade (for multiple Feautured Images) and Rollover. There are also a range of options for various post types, such as price and rating options for WooCommerce products, as well as link options.

To use the Post Card Image Element, just add the Element into your Post Card Library Element, and set your options.

Avada Website Builder

677,801 Businesses Trust Avada

Get Avada
Avada Website Builder

677,801 Businesses Trust Avada

Get Avada
Avada Website Builder

677,801 Businesses Trust Avada

Get Avada

Element Options

Location: The edit screen within each Element. This Element is found in the Layout Elements tab only when adding or editing an Avada Library > Post Card Element.

General Tab

  • Layout Select image layout. Choose fromStatic, Crossfade, or Rollover.

  • Show TitleChoose to show or hide the title.

  • Show CategoriesChoose to show or hide the categories.

  • Show PriceChoose to show or hide the price. Applies only to WooCommerce products.

  • Show RatingChoose to show or hide the rating. Applies only to WooCommerce products.

  • Show Sale Badge Choose to show or hide the sale badge. Applies only to WooCommerce products.

  • Show Out Of Stock Badge Choose to show or hide the out of stock badge. Applies only to WooCommerce products.

  • Show ButtonsChoose to show or hide Add to Cart / Details buttons on the rollover. Applies only to WooCommerce products.

  • Element VisibilityChoose 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.

View The Options Screen

Design Tab

  • Margin – In pixels or percentage, ex: 10px or 10%.
  • Border Radius – Enter values including any valid CSS unit, ex: 10px.
  • Crossfade Background Color – Set the background of crossfade image container.
View The Options Screen

Extras Tab

  • Animation Type – Allows you to select what type of animation to use. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

  • Direction of Animation – Allows you to select the animation’s incoming direction. Choose between Top, Right, Bottom, Left, or Static.

  • Speed of Animation – Allows you to set the speed of the animation.

  • Offset of Animation – Allows you to set at what point 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

There are no Global Options for the Post Card image Element.

Avada Website Builder

677,801 Businesses Trust Avada

Get Avada
Avada Website Builder

677,801 Businesses Trust Avada

Get Avada
Avada Website Builder

677,801 Businesses Trust Avada

Get Avada