JSFiddle - React, Tailwind, and code Playground
by Jon Fuller
HTML
<div class="et_pb_blurb et_pb_module et_pb_bg_layout_light et_pb_text_align_center et_pb_blurb_5 et_pb_blurb_position_top">
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image"><a href="#test"><span class="et-pb-icon et-waypoint et_pb_animation_top et-animated" style="color: #0c71c3;">X</span></a></div>
<div class="et_pb_blurb_container">
<h4><a href="#test">Centered blurb</a></h4>
<p style="text-align: center;">Blurb content text would go right here if you had some.</p>
</div>
</div> <!-- .et_pb_blurb_content -->
</div>
<div class="et_pb_blurb et_pb_module et_pb_bg_layout_light et_pb_text_align_center et_pb_blurb_5 et_pb_blurb_position_top">
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image"><a href="#tester2"><img src="https://hub.freshysites.com/wp-content/uploads/2017/08/FS-Hub.svg"></a></div>
<div class="et_pb_blurb_container">
<h4><a href="#tester2">Centered blurb</a></h4>
<p style="text-align: center;">Blurb content text would go right here if you had some.</p>
</div>
</div> <!-- .et_pb_blurb_content -->
</div>
<div class="et_pb_blurb et_pb_module et_pb_bg_layout_light et_pb_text_align_center et_pb_blurb_5 et_pb_blurb_position_top">
<div class="et_pb_blurb_content">
<div class="et_pb_blurb_container">
<h4><a href="#test3">Centered blurb</a></h4>
<p style="text-align: center;">Blurb content text would go right here if you had some.</p>
</div>
</div> <!-- .et_pb_blurb_content -->
</div>
<div class="et_pb_blurb et_pb_module et_pb_bg_layout_light et_pb_text_align_center et_pb_blurb_5 et_pb_blurb_position_top">
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image"><a href="#test4"><img src="https://hub.freshysites.com/wp-content/uploads/2017/08/FS-Hub.svg"></a></div>
<div class="et_pb_blurb_container">
<p style="text-align: center;">Blurb content text would go right here if you had some.</p>
</div>
</div> <!-- .et_pb_blurb_content...
CSS
.et_pb_blurb {
text-align: center;
background-color: yellow;
}
a {
color: red;
}
.et_pb_blurb > a {
color: inherit;
}
img {
width: 100px;
margin-left: auto;
margin-right: auto;
}
JavaScript
jQuery(function($){
$('.et_pb_blurb').each(function(i) {
var $this = $(this);
var $blurb_content = ($this + '.et_pb_blurb_content');
var $blurb_image_link = ($this + '.et_pb_blurb_content .et_pb_main_blurb_image a');
var $blurb_title_link = ($this + '.et_pb_blurb_content .et_pb_blurb_container h4 a');
if ($blurb_image_link && $blurb_title_link) {
$blurb_image_link.contents().unwrap();
$blurb_title_link.contents().unwrap();
$blurb_content.wrap($blurb_image_link);
};
});
});