Post Meta Element

Last Update: March 11, 2024

As part of Avada Layouts, we created a series of Dynamic Elements that help generate content in the Content Layout Section of a Layout. These are called Layout Elements. In this document, we are looking at the Post Meta Element.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Post Meta Element

The Post Meta Element is a specific single post / product layout element, designed to add customized meta information anywhere in a Content Layout Section, in any Single Post, Page, Portfolio or WooCommerce product Layout. Of course, you can also use the full range of Design Elements when building your Layout, and combine them with the Layout Section Elements.

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 Meta Element.

The Post Meta Element can be placed anywhere in you Layout Section, and displays a selection of meta content, based on the options selected in the element, on pages based on the conditions set in the Layout. There are three tabs of options in the element, controlling functionality and design. See the options panels below for specific details on that.

But basically, you select which meta information to enable or disable, add your preferred Separator, and then choose your design options to customize how the meta information displays on the page. You can control Height, Font Size, and Text Colors. Where you place the Post Meta Element is up to you, but the convention is at the bottom of the Content itself.

See below, for an example of the Post Meta Element added to the Single Post Layout on the Avada Author Demo.

Meta Element added to Single Post Layout

Element 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

HeadingDescription
Meta ElementsChoose the order of meta elements.
LayoutChoose if meta items should be stacked and full width, or if they should be floated.
Display Element LabelsControls whether the labels of chosen elements should be displayed.
SeparatorControls the type of separator between each meta item.
Reading TimeAverage words read per minute. The default value is 200.
Reading Time Decimal PrecisionWhether to use(Ex: 2.3 min) or not(Ex: 2 min) decimal precision in reading time.
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
AlignmentSelect the meta alignment.
Vertical AlignmentDefines how the meta content should align vertically.
Horizontal AlignmentDefines how the meta content should align horizontally. Overrides what is set on the container.
HeightControls the Meta section height. In pixels.
Text Font SizeControls the font size for the meta text. Enter value including CSS unit (px, em, rem), ex: 10px
Text ColorControls the text color of the meta section text.
Link ColorControls the link color of the meta section text.
Background ColorControls the background color of element wrapper.
Border SizeControls the border size of the element wrapper. In pixels or percentage, ex: 10px or 10%.
Border ColorControls the border color of the element wrapper.
PaddingIn pixels or percentage, ex: 10px or 10%.
MarginIn pixels or percentage, ex: 10px or 10%.
Meta Item Background ColorControls the background color of the meta item.
Meta Item Border SizeControls the border size of the meta item. In pixels or percentage, ex: 10px or 10%.
Meta Item Border ColorControls the border color of the meta item.
Meta Item PaddingIn pixels or percentage, ex: 10px or 10%.
Meta Item MarginIn pixels or percentage, ex: 10px or 10%.

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).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article