Comments Element

Last Update: August 22, 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 look at the Comments Element.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Comments Element

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 Comments Element. This is a simple Element, which allows you to place the comment section anywhere in a Content Layout Section in any Layout. This would most commonly be used in a Single Post layout.

The Comments Element includes any comments made, and the Leave A Comment section, allowing people to make a comment. It will not display if comments are not allowed for that post or page.

The Comments Element can be placed anywhere in your Layout, and will dynamically pull the Comments area into the page, based on the Conditions set in the Layout. You can also use the full range of Design Elements when building your Layout.

See below for an example of the Comments Element on a post on the Fitness Demo. Follow this link for a live example.

Example of the Comments Element

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
Comments Template OrderSet if comments or comments form should be displayed first.
Comment AvatarMake a section for user comment avatar.
Show HeadingsChoose to show or hide headings.
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
HTML Heading TagChoose HTML tag of the heading, either div, p or the heading tag, h1-h6.
Heading ColorControls the heading color.
Comment Separator Border SizeControls the border size of the separators. In pixels.
Comment Separator Border ColorControls the border color of the separators.
Comment IndentSet left padding for child comments. In pixels.
Link ColorControls the link color.
Text ColorControls the text color.
Meta ColorControls the meta color.
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