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.
HOW TO: Style Elementor Post Comments Widget
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,
simply go to the WordPress Editor screen and enable the Allow Comments under Discussion.
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.
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.
Alex
CATEGORIES
RECOMMENDED WEB BUILDER
RECOMMENDED WEB HOST
You might also like
HOW TO: Unlimited Elements’ Post Filters & Tools
After struggling for a while to find a proper solution for the posts’ search and filter function for an Elementor website, I finally came across Post Filters
HOW TO: SVG Files for Elementor Website
Have you noticed that some SVG logo’s fonts change from browser to browser? Would you like to find out how to make SVG files so that the
HOW TO: Style Elementor Post Comments Widget
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
HOW TO: Search Bar for Elementor Website
Findability is one of the critical functions of any website. Modern users will not spend time familiarising themselves with the format of your website or scrolling through
Do you have any questions about our services or would like to place an order?
Get in touch with us to receive detailed information on any of our services.