Creating a layout where text wraps around an image while maintaining the image's link functionality in Divi can be a bit tricky. Let's tackle this with a straightforward approach using custom CSS to ensure both aesthetics and functionality are preserved.
Wrap a Text Module around an Image Module using CSS
To do so, first place the image module followed by the text module in the same column, if you haven't already.
Now go to the Image Module settings and navigate to:
Image Settings > Advanced > Custom CSS > Free-Form CSS
Add the following CSS to ensure the text can flow round the image and the image's link functionality works correctly:
selector {
float:left;
z-index: 1;
}The float: left; style allows text to wrap around the image, while z-index: 1; positions the image module above the text module, ensuring the image link is accessible.
Next, adjust the image module width at "Image Settings > Design > Sizing" to set it to your desired width (something less that 100%, so that the text has space beside the image.
You may also want to adjust the margin / padding on the image to adjust the space between it ant the text, which you can do at "Image Settings > Design > Spacing".
Conclusion
By using custom CSS, you can effectively wrap text around an image while maintaining the clickability of the image link in Divi. This method leverages the Divi Image Module's full capabilities without resorting to less desirable workarounds, providing a professional layout and user-friendly experience.
Have any questions or need further guidance? Don't hesitate to ask!
0 Comments