A Dynamic Way to Customize Your Divi Blog Style
Ever wonder how to change the Divi Blog Style? Divi 3.0 Blog Default Page may not be the best design for you. Have you tried to add extra elements to the Home Blog Page but get stuck? Now you can completely customize your Divi Blog Style. This is a free Divi Blog Style for you to copy and paste.
In this tutorial I cover an easy way to change the Default Divi 3.0 Blog Style to look more traditional with the image floating left of the preview. I also code the “read more” default link so that it is styled as a button. In addition, we are not using the Default Divi Blog Setting. Create a New Page: Title it BLOG and use the blog Module” instead. Change Theme Setting for Blog Home Page to “Undefined.”
Here is the Complete Divi Blog Style Code Below (Copy & Paste):
ADD to “CSS ID” – under “Advanced” tab in Blog Module Settings “singlepost”
<—Rest of Code in CSS in Theme Customizer —>#singlepost .et_pb_post {
margin-bottom: 100px;
}
#singlepost .et_pb_post a img {
height: auto;
float: left;
width: 200px;
left: 0;
margin-right: 14px;
margin-bottom: 10px;
}
@media only screen and (max-width: 980px) {
#singlepost .et_pb_post a img {
float:none;
width:100%;
height: 300px;
}
}
#singlepost .et_pb_post a.more-link {
text-transform:capitalize;
color:#38a5ed;
background:white;
float:right;
font-size: 18px;
border:solid 1px;
border-radius: 5px;
padding-left:10px;
padding-right:10px;
padding-top:5px;
padding-bottom:5px;
transition:0.5s ease-out;
}#singlepost .et_pb_post a.more-link:hover {
color:white;
background:#38a5ed;
letter-spacing:1.5px;
}
Video Tutorial: Changing the Divi Blog Style
“https://youtu.be/HtBcpsMHyYY”
Customize the Divi Blog Style in the CSS Code:
Post a Image:
[float] is where the image will appear.
change to (left, center, or right)
[width] height is auto, but all feature images will format to a 200 px default. resie feature images to default 200px by same height px for uniform look and feel.
Button Code:
Change Color, Change the Background, float it left right or center.
[boarder-radius] will round the corners. Change to 0 for square and 25 for circle.
[font-size] change to match your theme font size.
Hover:
[letter-spacing] expands the button on hover. change to 1 or delete if you do not want the button to expand.
[color] can be changed to animate to a new color on hover.
Step-By-Step: How To Change Divi Blog Style To Float Image Left and Create Read More Button.
Divi Theme Customizer » Homepage Setting » Page Posts: Dropdown » Change to -Select-
Create A New Page » Titled, “BLOG”
Use the Divi Theme to build the Headers, Footers, Side Bar, and any additional content you would like around your Blog.
Add BLOG MODULE to the Body of your site.
Select the number of posts you want to display and in the “Design” Tab select Fullwidth, not the Grid.
Advanced Settings » CSS ID » Type: singlepost » It is case-sensitive, use lowercase.
Modify Theme Customizer Additional CSS Code
At this point, the Blog will have Large Featured Images, Now you are ready to change the Divi Theme CSS.
Top Left Corner, in the “Edit Bar” hover over your company name » Click Theme Customizer » Scroll to the bottom » Click Additional CSS » Paste in the Divi Blog Style Code Provided Above.
Modify the Code to Your Liking and Publish.
Done! Your New Divi Blog Style is Complete
Go back to your Blog Module Settings and click on the Design Tab to modify and change text or header elements. You can also modify the Meta Data too.
Finally, if you want all the blog previews to appear uniform, you will have to modify the size of your featured images to match eachother. 200 px wide is default, you are free to choose your blog image height. Just keep it consistent.
Visitiors who read this article also viewed these related articles:
Agency511 is in close proximity to Central Minnesota's surrounding cities that include Saint Cloud, Sartell, Waite Park, Sauk Rapids, Rice, Saint Augusta, Luxemburg, Clearwater, Clear Lake, Becker, Big Lake, Elk River, Monticello, Buffalo, Annandale, Kimball, Hutchinson, Rockville, Cold Spring, Richmond, Saint Joseph, Avon, Albany, Melrose, Foley, Milaca, Princeton, Pierz, Little Falls, and Brainerd.
Website Privacy Policy | Website Disclaimer | Website Terms of Service | Contact Us
