Select Page

If you’d like to change the look of the Divi Comment Form and put it into a 2 column layout like the following, here’s a quick tutorial on how to accomplish just that.

  1. First, go to your Divi folder (/wp-content/themes/Divi) and copy your comments.php file into your Child Theme folder.
  2. In comments.php, add <div class=”test”> right after <section id=”comment-wrap”>
  3. Place the closing </div> right after the following code, then save the file:
<?php if ( ! empty($comments_by_type['comment']) ) : ?>
<ol class="commentlist clearfix">
<?php wp_list_comments( array('type'=>'comment','callback'=>'et_custom_comments_display') ); ?>
<?php endif; ?>
  1. Finally, place the following CSS into your Custom CSS area.  You may have some minor tweaking to do, but you should be all set with the new layout.
@media (min-width: 981px) {
#comment-wrap {
display: flex;
flex-wrap: wrap;
float: right;
}.test {
flex: 0 0 50%;
order: 2;
min-width: 530px;
}#respond {
flex: 0 0 45%;
order: 1;
margin-right: 5%;