online store

Blog

Our latest posts

HOW TO: Style Elementor Post Comments Widget

SHARE
Picture of Alex
Web Designer & Developer and Elementor expert with 15+ years of experience, I commit to providing the highest quality web services and technical support to my clients. My resume includes the United Nations, Civil Society Organisations and Private Sector clients across Europe, the Middle East and Africa.
Globe Flickr Map-marked-alt Elementor
You might also be interested in
1
HOW TO: Unlimited Elements’ Post Filters & Tools
A toolkit of essential widgets and features that will supercharge your workflow
2
HOW TO: SVG Files for Elementor Website
A toolkit of essential widgets and features that will supercharge your workflow
3
HOW TO: Search Bar for Elementor Website
A toolkit of essential widgets and features that will supercharge your workflow
4
HOW TO: Lottie Animations for Elementor Website
A toolkit of essential widgets and features that will supercharge your workflow
5
HOW TO: Automatically Remove Dust Spots
A toolkit of essential widgets and features that will supercharge your workflow

If you used the Elementor Post Comments Widget, you noticed that there was no Style tab to style the elements directly from the widget’s edit panel. In this article, I will show how to add an Elementor Post Comments Widget to the single post template of your website and style it.

Adding Post Comments Widget

Post Comments is one of the widgets which comes with Elementor Pro. Therefore, If you have the Pro version, locate the widget in the Elementor’s widget panel and drag-and-drop it to the bottom of your template or wherever you want to position the dynamically displayed user comments. Please note, in case you get a ‘Comments are closed’ message as displayed below,

Elementor Post Comments

simply go to the WordPress Editor screen and enable the Allow Comments under Discussion.

Elementor Post Comments

Styling Widget’s Elements

Most Elementor widgets have a Style panel with settings to make the elements of the widget appear as you desire. However, the Post Comments Widget is a theme element therefore it’s controlled by the Theme Style. To set the style, first, click on the Elementor Menu in the top left corner and choose Site Settings. Secondly, under the Theme Style, click on Buttons, to style the Post Comments submit button. There are also Form Fields to style other elements of the form. Other means of styling elements of this widget include installing Elementor compatible plugin or adding a CSS code.

If you prefer to work with plugins, try Steroids for Elementor by OoohBoi which, among many other things, allows you to style post comments elements directly from the widget’s edit screen.

Elementor Post Comments

However, despite a wide range of settings available, it is not possible to style the form’s button and for many designers, as much as we love Steroids for Elementor, this is not ideal. For that reason, I have created a CSS code so you can change the colours of the button. Copy and paste the code (displayed below) into the Custom CSS located in the Advanced Tab of the widget’s edit panel.

				
					/* Submit Button Style */
.submit {
    color: #FFFFFF;
    background-color: #4779D4;
    border-width: 1px;
    border-radius: 5px;
    border-color: #000000;
}
.submit:hover {
    background-color: #4054B2;
}
Note. This function was successfully tested with WordPress v. 6.5 and Elementor Pro v. 3.21 in May 2024

© 2024 Alex Design Lab. All rights reserved

Social Media Marketing

We can help you to extend your brand's presence across the web, define your online identity and create meaningful...

Web Development

A well-structured, elegantly designed website can transform user experience and allow your customers to navigate...

Brand Development

From a logo to your organisation’s tone of voice – we can help you define the values, objectives, and purpose of your...

Visual Design

Our approach to visual design uses imagery, shape, typography, space, layout and colour to create well-balanced...

© 2024 Alex Design Lab. All rights reserved

Value Added Services

It’s essential that your website is well-optimised for today’s comprehensive search engines’ requirements so...

Photography

Photographs and images are an integral part of branding and website design. We can help you to make a selection...

Privacy Policy

Who we are

ALEX DESIGN LAB
https://alexdesignlab.com

Comments

When visitors leave comments on the site we collect the data shown in the comments form, and also the visitor’s IP address and browser user agent string to help spam detection.
An anonymised string created from your email address (also called a hash) may be provided to the Gravatar service to see if you are using it. The Gravatar service privacy policy is available here: https://automattic.com/privacy. After approval of your comment, your profile picture is visible to the public in the context of your comment.

Media

If you upload images to the website, you should avoid uploading images with embedded location data (EXIF GPS) included. Visitors to the website can download and extract any location data from images on the website.

Cookies

If you leave a comment on our site you may opt-in to saving your name, email address and website in cookies. These are for your convenience so that you do not have to fill in your details again when you leave another comment. These cookies will last for one year.
If you visit our login page, we will set a temporary cookie to determine if your browser accepts cookies. This cookie contains no personal data and is discarded when you close your browser.
When you log in, we will also set up several cookies to save your login information and your screen display choices. Login cookies last for two days, and screen options cookies last for a year. If you select “Remember Me”, your login will persist for two weeks. If you log out of your account, the login cookies will be removed.
If you edit or publish an article, an additional cookie will be saved in your browser. This cookie includes no personal data and simply indicates the post ID of the article you just edited. It expires after 1 day.

Embedded content from other websites

Articles on this site may include embedded content (e.g. videos, images, articles, etc.). Embedded content from other websites behaves in the exact same way as if the visitor has visited the other website.
These websites may collect data about you, use cookies, embed additional third-party tracking, and monitor your interaction with that embedded content, including tracking your interaction with the embedded content if you have an account and are logged in to that website.

Who we share your data with

If you request a password reset, your IP address will be included in the reset email.

How long we retain your data

If you leave a comment, the comment and its metadata are retained indefinitely. This is so we can recognise and approve any follow-up comments automatically instead of holding them in a moderation queue.
For users that register on our website (if any), we also store the personal information they provide in their user profile. All users can see, edit, or delete their personal information at any time (except they cannot change their username). Website administrators can also see and edit that information.

What rights you have over your data

If you have an account on this site, or have left comments, you can request to receive an exported file of the personal data we hold about you, including any data you have provided to us. You can also request that we erase any personal data we hold about you. This does not include any data we are obliged to keep for administrative, legal, or security purposes.

Where we send your data

Visitor comments may be checked through an automated spam detection service.