Make your Divi blog posts look more like Medium

Medium.com has one of the cleanest reading experiences around. I was inspired by its simplicity and decided to design something similar to it with Divi. Today, I want to show you a quick, easy way to incorporate this style of design into your own Divi blog! Here’s an example:

example-medium-min-min

While the default blogging styles of Divi are pretty, this design adds readability and professionalism to your blog. So, if you like what you see, let’s begin.

1. Start by creating a new post. Find the box labeled Divi Post Settings (mine is in the top right corner of the New Post page). Set your Page Layout to Full Width; set your Post Title to Hide.

Screen Shot 2016-01-01 at 5.40.57 PM

2. Now let’s have some fun. Activate the Divi Builder.

3. Create a Fullwidth Section in the Divi Builder and insert a Fullwidth Image module inside of it. This will be the first element on your page.

Tip: if you need a nice image for this section, my favorite resource for free-for-anything images is Unsplash.

4. Now, create a Standard Section with 1 Column. Place this below the Fullwidth Image.

5. Inside the Standard Section, create a Post Title module. (This eliminates work for you in the future, which is always a plus!) If you want the full minimalist experience, set the Post Title module to show nothing but the title. It’ll look great.

6. Create a Text module directly below the Post Title.

7. Click the hamburger (the three horizontal lines) in the green part of your Standard Section, and give it a Custom Width of 700px. This is where the magic comes together.

ezgif-3042195287

8. Enter your post into the Text section, and publish it when you’re ready!

Save yourself time in the future by saving this layout in your Divi Library. To do this, just click the purple Save to Library tab underneath the Divi Builder’s title. Next time you want to write a Medium-style post, click the purple Load From Library tab and then the purple Add From Library tab.

If your style looks strange, you should note that blog posts with Medium’s layout benefit from using a large font size and an easy-to-read font. You might have to venture into the Theme Customizer and adjust the Typography on your website to achieve the desired effect. In my examples, I use 40px+, bold Open Sans as a header font and 22px+ Cardo as a paragraph font, but you’re welcome to use anything else you’d like.

If you don’t want to change the Typography settings on your website, you can tweak your website’s CSS to accomplish the same thing, although it takes a tiny bit more work. When you opt for this route, you’ll have to (1) give Step 4’s Standard Section a class such as medium-post, and (2) enter some CSS. The following example is a crude representation of the CSS you’ll need to accomplish this:

/* Crude Medium-style post formatting */
.medium-post * {
  font-size: 1.25em !important;
  font-family: Georgia, serif !important;
  line-height: 1.4em !important;
}

Happy writing!

Hello there, Divi designer!

Designing can be tough, but you can make it easier. Receive four free emails on eliminating stress, using Divi's magical powers to work smarter, raising your rates, and automating the administrative dullness in your practice so you can focus on doing what you love.

Sign Up