Select Page
Advertisements

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') ); ?>
			</ol>
		<?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%;
}
}