Do you use the Elementor Post Comments Widget? Are you frustrated that there is no Style tab to style different elements directly from the widget’s edit panel? In this article I will explain 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 dynamically displayed user comments. Please note, in case you get a ‘Comments are closed’ message as displayed below,
then go to the WordPress Editor screen and check Allow Comments under Discussion to enable comments.
Styling Widget’s Elements
Most Elementor widgets have a Style panel with settings to make the elements of the widget appear as you wish. 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. And second, under the Theme Style, click on Buttons, to style the Post Comments submit button. There are also Form Fields so you can 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.
Despite a wide range of settings avaliable, 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 colors 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;
}
If you need further help or would like to order our services, please send a request.
