The Divi Comments module is one of the modules in the Divi Builder that allows you to add comment functionality to any part of your website, providing you with greater control over the discussion sections on your website.
One of the elements in the Divi Comments module is a “reply button”. The thing is, we found a fact about this element. For a cleaner and more user-friendly comment section, many Divi users want the reply button positioned neatly at the bottom, rather than its default location next to each comment.
This article will be your one-stop guide to moving the reply button in the Divi Comments module to the bottom of individual comments.
How to Move the Reply Button in the Divi Comments Module to the Bottom
Well, moving the reply button in the Divi Comments module to the bottom is very easy. All you have to do is add a little bit of CSS code to the module. However, we want to ensure that everything proceeds as planned before moving forward.
Build a Custom Page Template for Blog Posts in the Divi Theme Builder
In this tutorial, we will locate the comments section in the blog post. Because, in most cases, the comments section is located within the blog post itself. It’s usually found at the bottom of the post, after the main content. This placement allows readers to easily leave their thoughts, questions, or feedback directly related to the specific blog post they just read.
Go to your WordPress dashboard and navigate to Divi -> Theme Builder. If you already have an All-Posts template, you can go directly to that template to edit it. However, if you don’t, you can add a new template, and assign the template type to All Posts. This type ensures the design applies to all blog posts on your website.
Once the template is created, go to the custom body by clicking the Add Custom Body or Edit button if you already have an existing All Posts template.
Add and Customize the Divi Comments Module
Within the Divi Builder for your Custom Body, navigate to the section where you want the comments to appear (usually below the post content). Afterward, search for “Comments” and then select it.
After adding the Comments module, you can customize this module to your preference. Note that, by default, the Reply Button element is active. Please ensure that option is chosen in case you accidentally turn it off.
Add the Custom CSS
Next, it’s time to add the CSS code to the Reply Button element. In the Divi Comments module settings, navigate to the Advanced tab -> Custom CSS -> Module Elements -> Reply Button.
Here is an example of CSS code that you can apply to move the Reply Button to the bottom:
position: relative; top: 10px; left: 5px; display: inline-block;
And that is it. Once you have finished modifying and configuring your template, do not forget to save it.
What Does the Code Do?
position: relative;: The position of the reply button element relative to its default position, allows it to be offset without changing the document flow.top: 10px;: It moves the reply button element 10 pixels down from its normal position.left: 5px;: It moves the reply button element 5 pixels to the right from its normal position.display: inline-block;: The reply element will behave like an inline element (taking up only the space needed for its content) but also allow setting width and height like a block element.
The Bottom Line
In summary, you have successfully moved the reply button inside the Divi Comments module to the bottom with a few lines of custom CSS.
Moving the reply button element will improve the visual flow and user experience in your comments section. Do not forget to thoroughly test and play around with other property values in the CSS code to make sure everything works as it should and streamlines with your design style.
