The Divi Blurb module is very flexible and straightforward to use but one issue that some new developers face is that when the image is on the left side the content on the right needs to be vertically centered. This issue can be sorted out by just using some CSS. The CSS is provided in the article with some instructions.
Results:
Modifying Blurb:
This step includes how to modify your Blurb and other settings. They are below one by one.
1) Change the Text:
Go to Blurb Settings > Content > Text and add the text you want, in my case, I added the sample Text:
2) Change the Image:
Go to Blurb Settings > Content > Image & Icon and add the Image you want, in my case, I added a sample Image:
3) Modifying Image:
Go to Blurb Settings > Design > Image & Icon and do the following customizations:
- Image/Icon Placement: Left
- Image/Icon Width: 200px
4) Modifying Title Text:
Go to Blurb Settings > Design > Title Text and do the following customizations:
- Title Font: Montserrat
- Title Font Weight: Semi Bold
- Title Text Color: #000000
5) Adding Custom Class:
Go to Blurb Settings > Advanced > Custom CSS & Class > CSS Class and add “hey-vertically-center-text”:
6) Pasting the CSS Code:
Go to Page Settings > Advanced > Custom CSS and paste the code:
/* My Media Query for Devices with a Minimum Width of 767 Pixels */
@media (min-width: 767px) {
/* Flexbox display for blurb content */
.hey-vertically-center-text .et_pb_blurb_content {
display: flex !important;
}
/* Flexbox display for blurb container */
.hey-vertically-center-text .et_pb_blurb_container {
display: flex !important;
justify-content: center; /* Center align blurb container horizontally */
flex-direction: column; /* Arrange blurb container content in a column */
}
/* Flexbox display for main blurb image */
.et-db #et-boc .et-l .hey-vertically-center-text .et_pb_main_blurb_image {
display: flex;
width: auto !important; /* Ensure blurb image width adjusts automatically */
margin-bottom: 0px !important; /* Remove bottom margin for better alignment */
}
}
Results that you were looking for:
Conclusion:
This article shows how to align the content in the center vertically. This is a problem for beginners as they do not know how to do that. It is straightforward to do it just by pasting a CSS code. All of the images are very helpful for you.