Text wrapping images is a common design technique, typically used in print media, such as magazines and newspapers. But you can also find this used on the web, especially for blog posts. Wrapping text around an image is actually a fairly standard part of WordPress that involves a simple alignment adjustment in the WYSIWYG editor. The only problem is that it's difficult to style your page using the default WordPress editor. It's there that Divi can help !

Although this tutorial focuses on images, you can actually use this same process to wrap text in any module. Divi.

Preview

Here's a look at the main design we'll be building today.

In this example, I'll show you how to wrap two columns of text around a centered image module. This allows you to create a unique magazine or newspaper style layout. But, since there is no "float: center" css property, we'll need a little creativity with the layout to make this design work.

Here's how to do it.

Creating content in the top row with a centered image

To start, create a new regular section with a row of one column. Then add an image module to your row. Upload an image that is 400 pixels by 250 pixels. Sizing must be exact for this design.

Then update the design parameters as follows:

Maximum width: 400px (desktop), 100% (tablet)
Alignment of the module: center
Custom padding: 2% at the top, 2% at the bottom, 2% at the left, 2% at the right

Then save your settings and open the line settings. Take out the padding from the bottom of the row.

Custom padding: 0px at the bottom

Create the two-column line of text

Below the row containing the image, create a new row with a two column layout.

In column 1, add a text module with a contents dummy.

Then copy the text module and paste it into the 2 column for a second column of text.

Creating empty space with floating dividers

To create the space we need for the image, we can use division modules. In the left column, we're going to create a divider module half the size of the image and float it to the right so that our text module wraps around the divider. Next, in the right column, we're going to create another separator that is half the size of the image and float it to the left.

To do this, create a separation module and place it directly above the text module in the 1 column.

Then update the split module settings as follows:

Show Divider: NO
Width: 200px
Height: 250px

Make sure the height is the same as created previously and that the width is exactly half the width of the image.

For mobile, we want to disable separators on tablet and phone. To do this, update the visibility settings to turn off the display of the tablet and phone.

Now that our first separator is created, copy the separation module and paste it on top of the text module in the 2 column.

Next, we need to float our dividers. To do this, open the divider settings in column 1 and add the following custom CSS code to the main element:

float: right;

Next, open the settings of the division module in column 2 and add the following custom CSS code to the main element:

float: left;

Move the image into place with a custom margin

Now we just have to reduce our image in the first row so that it fits into the space we have created with our dividers.

Open Image Module settings and add the following custom margins:

Custom Margin: Low -250px (Desktop), 20px (Tablet)

Here is the result so far.

Add a title to the section

This last step is optional, but if you want to add a title to the section, create a text module and position it above the image.

Then add the contents following to the text module:

Learn more about how to give

Then update the text settings as follows:

Background color: #000000
Title 2 Font: Playfair Display
Title 2 Text Alignment: Central Title
2 Text Color: #ffffff
Title 2 Line Height: 2em

Justify text for a cleaner text wrap design

When surrounding text with images, especially if the text is centered in this way, it is always a good idea to justify the surrounding text. In this case, just change the orientation of the text to justify the two text modules containing our contents of wrapping text.

Final result

Here is the final result.

Latest Thoughts

Knowing how to effectively surround text with images can really make your content look professional and easy to read. The concept is quite simple. All you have to do is float your image to the right or left and then use custom spacing around the image for buffering. And what I like is that you can use any module (not just images) to insert text into any type of content in Divi. I hope this gives you a little inspiration for your next project.

Hope to hear from you in the comments.