Infographics are not going away. The Internet is already oversaturated with content, and people are rarely ever reading an entire paragraph these days. Blog posts are good accompanying content, but infographics make it easier for people to digest information.
When you say infographics, people almost automatically thinks Photoshop or Canva, but it’s actually easily doable within page builders. Tweak and combine their content elements, and you can design something that looks like an infographic.
Divi Builder has specific modules that you can use to create an infographic conveniently.
The Blurb Module
The Blurb module contains a title, body text, and allows the option to display an image or icon. This is convenient for making feature or benefit lists, galleries with text descriptions, and it’s the main module we’ll use to create an infographic.
How to Make an Infographic from Scratch Using Divi
Informational infographics are quite easy to create. Just take the main messages of your blog post content and present them in easy, digestible bullet points.
This is an example of an informational infographic that’s quick and easy to create, yet effective in presenting information. It’s the first image that showed up when I searched Google for ‘infographic’. So for this tutorial, we’re going to recreate it and replicate as much of the same appearance as possible using Divi Builder and the Blurb module.
Infographic from: https://venngage.com/blog/what-is-an-infographic/
Start by creating a new post. You can also display your infographic in a page, or add your infographic to an existing post.
Publish it immediately, and open the Divi Builder.
Choose Build from Scratch…
Then insert a single-column row.
Don’t add a module yet, instead change the background color of the row to what you want.
Divi has a color chart and a set of fixed colors you can choose from. Since we’re recreating the infographic above, I’m choosing the closest color I can get.
Set the padding of the row to 0 on all sides.
Now we can add a module. I’m putting an image module to add a logo.
Click on the image box to select or upload an image.
Under the Design tab, I’m setting the alignment to center and the padding to 20px on top and bottom.
I’m duplicating the row with the logo for the title of the infographic.
Since it’s going to have the same background color, I just deleted the Image module then inserted the Text module.
Type the title of the infographic on the text field, and click the icon for center alignment.
Under the Design tab, I configured the title text to these:
- Text font weight: Ultra Bold
- Text size: 31px
- Text shadow color: Light gray (to highlight the title)
Add a 30px padding to the bottom of the text module.
Add a new single-column row, then change the background color to a different one.
Click on the gray + button, then add a Blurb module.
Type the title of the blurb and the descriptive text on the text fields as indicated…
Under the Design tab, configure the settings to these...
Title text:
- Text font weight: Bold
- Text font style: Uppercase
- Size: 15px
- Color: White
Body text:
- Size: 12px
- Color: White
Back to the Content tab, open the dropdown for Image & Icon. Toggle ‘Yes’ for use icon, then select the icon you want.
Under the Design tab, open Image & Icon again, and then change the color of the icon. You can also create a circle icon with the toggle, or change the placement to the top or left side of the text.
Open the Spacing dropdown, then set the padding to 20px all around the Blurb module.
The Blurb module only allows you to display the image/icon on top or on the left side of the text. Since the infographic we’re recreating has alternating text and icon, we’ll have to use a 2-column row.
Add a new row with the 2/3, 1/3 columns.
Change the background color.
Right-click on the blurb module we just created above, then copy the module style.
Paste it on the left column by right-clicking on it.
Delete the image. Change the title text and body text. (I will not show it here because I just have lorem ipsum text for demonstration).
The Blurb module above had 20px padding all around. Since we have 2 columns on this row and the Blurb module is on the left, change the padding. Retain the 20px for the top and bottom, and type 100px for the left to align it to the module above.
On the right column, insert an Image module. On the settings panel that appears, click the image box to select or upload an icon. I got this icon from flaticon.com. The only thing is, you can’t change the color of the icon, but that won’t affect the content of the infographic much.
Under the Design tab, change the size of the icon to 50px.
Add 20px padding to the top of the Image module.
Now that we have the 2 rows set up, we just have to duplicate them, move them below alternately, and then make the corresponding changes to the content of the rows.
Duplicate the 2nd row with only the Blurb module. Then move it below the 2-column row.
Do the same for the 2-column row, and move it to the bottom. Repeat this process as many times as you have bullet points to include on your infographic.
Don’t forget to change these:
- Row background color
- Title text and body text of the blurbs
- Icon or image used
When you’re done, save your changes.
And voila! You have an infographic. The good thing about this is the infographic is exclusive to your website. People can’t just copy or save the image, and spread it around without credit to you. Also, visitors can highlight the text inside the infographic.
Why You Should Use Infographics on Your Website
If you need any more reason to use infographics on your website content, just think about these advantages...
- It’s easier to digest information from an infographic
- They’re skimmable
- You get your point across before people’s short attention span diverts them elsewhere
- They’re so quick and easy to create!
