Comments Element
The Comments Element shows the comments of the current post and the form to write a new one. You place it once in a post layout, and every post that allows comments gets its discussion in the same place and style.
Replies are indented under the comment they answer, long discussions are split into pages according to the WordPress discussion settings, and you control the headings, avatars, separator lines and colors. You can also put the comment form before the existing comments, for example when you want to invite new comments first.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Comments Element
Under Tirenoa > Layouts, open a layout for single posts and add the Comments Element to its content section, usually at the end. Comments Template Order decides whether the existing comments or the comment form come first. Choose a square or circle Comment Avatar, or hide avatars, and use Show Headings for the “Comments” count heading and the “Leave A Comment” heading above the form.
On the Design tab set the HTML Heading Tag and Heading Color of those headings, the size and color of the separator lines between comments, the Comment Indent for replies, and the link, text and meta colors.
Whether comments are open is decided per post and in Settings > Discussion, not in the element. When comments are closed but earlier comments exist, they stay visible with the note “Comments are closed.” Password-protected posts show neither comments nor form until the password has been entered.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options with a small state switch next to them can be set separately for the normal, hover and active state.
General
| Heading | Description |
|---|---|
| Comments Template Order | Set if comments or comments form should be displayed first. |
| Comment Avatar | Make a section for user comment avatar. |
| Show Headings | Choose to show or hide headings. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| HTML Heading Tag | Choose HTML tag of the heading, either div, p or the heading tag, h1-h6. |
| Heading Color | Controls the heading color. |
| Comment Separator Border Size | Controls the border size of the separators. In pixels. |
| Comment Separator Border Color | Controls the border color of the separators. |
| Comment Indent | Set left padding for child comments. In pixels. |
| Link Color | Controls the link color. |
| Text Color | Controls the text color. |
| Meta Color | Controls the meta color. |
| Margin | In pixels or percentage, for example 10px or 10%. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Keep HTML Heading Tag on H2 or H3. The DIV and P choices are meant for the comment count heading; the “Leave A Comment” heading above the form expects a heading tag.
- Hiding avatars removes the profile pictures that WordPress loads for each commenter, which makes long discussions lighter.
- Set Comment Indent small enough that deeply nested replies still have room on phones.
- Nothing shows on posts where comments are closed and none exist yet, so the element can stay in the layout for every post.