How to use Post Comments Widget of Sky Addons for Elementor
The Post Comments widget for Elementor by Sky Addons lets you place your WordPress comments area anywhere on a page or single post template — perfect for theme building. It outputs the native comment list and comment form, then hands you full design control: the wrapper, comments title, each comment item, author avatars and names, meta links, reply links, and the entire comment form can all be styled right inside Elementor. You can pull comments from the current post or target any post by ID. This documentation will guide you through the process of using the Post Comments widget to build a fully branded discussion area on your website.
Features:
- Theme Builder Ready: Drop the native comments area into single post templates built with Elementor.
- Flexible Source: Show comments from the current post or from any custom post by entering its ID.
- Full Style Control: Style the wrapper, title, comment items, author, meta, content, and reply links separately.
- Comment Form Styling: Customize form background, input fields, focus states, and the submit button without CSS.
- Native WordPress Output: Uses the standard comments template, so threading, replies, and moderation keep working as expected.
Insert Post Comments Widget
- Open Elementor Editor. In the Elementor panel, search for “Post Comments” under Sky Addons.
- Drag and Drop the Widget to the desired location on your page / editor.
Configure Content
The Post Comments section in the Content tab controls where the comments come from:
- Source: Choose Current Post to display comments for the post or page where the widget appears — the right choice for single post templates. Choose Custom to pull comments from a specific post instead.
- Custom Post: When Source is set to Custom, enter the Post ID of the post whose comments and comment form you want to show.
If comments are closed and the post has no existing comments, the widget shows a simple “Comments are closed.” notice instead of the form.
Style Your Comments Area
Every part of the discussion area has its own Style section, so you can match the comments to your site design without touching CSS:
- Wrapper:
Set the background, padding, border, border radius, and box shadow of the whole comments container. - Comments Title:
Control the title color, typography, bottom spacing, divider color, and the accent line color under the heading. - Comment Item:
Style each comment card with background, padding, gap between items, border, border radius, and box shadow. - Author:
Adjust the avatar size, avatar border radius and border color, plus name typography with separate Normal and Hover colors. - Meta:
Set the typography and Normal/Hover colors of the date and permalink meta links. - Comment Content:
Choose the text color and typography of the comment body. - Reply Link:
Style the reply button with typography, padding, border radius, and Normal/Hover text and background colors. - Comment Form:
Customize the form background, padding, and border radius; the form title color and typography; input field text, background, border, focus border, and radius; and the submit button typography, padding, radius, and Normal/Hover colors with hover box shadow.
Save and Preview
- Once you’ve customized and styled your comments area, click “Publish” or “Update” to save your changes.
- Preview the page to ensure the widget looks and functions as desired.
Best Practices
- Consistency: Match the comment form inputs and submit button to the rest of your site’s forms for a cohesive look.
- Accessibility: Keep enough contrast between comment text, meta links, and the background so the discussion stays readable.
- Use Current Post in templates: When the widget lives inside a single post template, keep Source on Current Post so each post shows its own comments.
- Testing: Submit a test comment and a threaded reply to confirm spacing and styling hold up at every nesting level.
Troubleshooting
- “Comments are closed.” appears: Comments are disabled for that post and it has no existing comments. Enable comments in the post’s Discussion settings.
- Nothing shows in Custom mode: Double-check the Post ID — it must belong to an existing post with comments open or with at least one comment.
- Form looks different from the editor: Some themes override the comment template markup; clear cache and re-check, or adjust the affected style controls.
Frequently Asked Questions
How do I add a comments section to an Elementor single post template?
Drag the Post Comments widget by Sky Addons into your single post template and leave the Source option set to Current Post. Each post rendered with that template will automatically show its own comment list and comment form.
Can I display comments from a different post?
Yes. Set Source to Custom and enter the Post ID of the post you want. The widget will load that post’s comments and comment form wherever it is placed.
Why is the Post Comments widget showing “Comments are closed.”?
That message appears when the target post has comments disabled and no existing comments. Open the post in WordPress, enable Allow Comments under Discussion, and the form will appear.
Can I style the comment form fields and submit button in Elementor?
Yes. The Comment Form style section gives you controls for input text, background, border, focus border color, and border radius, plus full Normal/Hover styling for the submit button — no custom CSS needed.
Does this widget replace my theme’s comment system?
No — it renders the standard WordPress comments template, so threading, moderation, notifications, and any comment-related plugins continue to work. The widget only changes where the comments appear and how they look.
Related Documentation
Conclusion
The Post Comments Widget by Sky Addons for Elementor brings the entire WordPress discussion area under Elementor’s design control — ideal for theme builders and anyone who wants comments that match their brand. For further assistance, consult the Sky Addons support team or community forums. Enjoy building engaging discussions!