Image surrounded by text Divi: 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 a pretty standard part of WordPress that involves a simple alignment adjustment in the WYSIWYG editor. The only problem is that it is difficult to customize the style of your page using the default WordPress editor. This is where Divi can help!
Although this tutorial focuses on images, you can use this same process to wrap text in any Divi module.
Creating the content of the top row with a centered Image surrounded by text Divi
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)
Module alignment: center
Custom padding: 2% top, 2% bottom, 2% left, 2% right
Then save your settings and open the line settings. Pull out the padding from the bottom of the row.
Custom Padding: 0px at the bottom
Create the two column text line
Below the row containing the image, create a new row with a two-column layout.
In column 1, add a text module with a dummy content.
Then copy the text module and paste it in column 2 for a second text column.
Creating 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. Then in the right column, we are going to create another separator half the size of the image and float it to the left.
To do this, create a separator module and place it directly above the text module in column 1.
Then update the parameters of the division module 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 tablets and phones. 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 separator module and paste it above the text module in column 2.
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:
Then open the divider module settings in column 2 and add the following custom CSS code to the main element:
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 created with our dividers.
Open Image Module settings and add the following custom margins:
Custom margin: bottom -250px (desktop), 20px (tablet)
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 following content to the text module:
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: 2nd
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, it is enough to change the orientation of the text to justify the two text modules containing our wrapping text content.
Read more: How to Import and Export layouts on Divi
Final thoughts
Knowing how to effectively surround the text in images can make your content look professional and easy to read. The concept is quite simple. All you have to do is float your image right or left and then use custom spacing around the image for the buffer. And what I like is that you can use any module (not just images) to insert text into any type of content in Divi.
For website maintenance service contact us.