If you’re building a section in Divi and want your text box to sit on top of an image, you’re not alone. Many Divi users start by adding an image module, then a blurb — and realize it stacks vertically. That’s not the look they want.
You want the blurb module to overlap the image, like a captioned banner, spotlight card, or promotional box — with the icon, title, and body floating on the picture. Divi can do this. You just need to adjust a few settings. No heavy CSS. No plugins.
This guide gives you a step-by-step way to do it using Divi’s built-in features.
What Is a Blurb in Divi — And Why Layer It?
A blurb in Divi is one of the most used modules. It lets you add a small icon or image, a heading, and a short paragraph — all in one neat box. You’ve probably seen blurbs used to show services, features, or quick callouts on homepages. They’re easy to scan, work well in rows, and keep things simple for visitors. But sometimes you don’t want that block just sitting under an image — you want it to sit on top of an image for more visual impact.
Maybe it’s a call-to-action, maybe a quote, maybe a product feature. Layering a blurb over an image helps draw focus and saves space, especially on phones where screen size is limited. It also makes your layout feel more modern without much extra effort.
Can You Blurb in Divi Without Custom Code?
Yes, you can do this without touching any code. Divi comes with built-in position controls that make it easy to layer one module on top of another. You can use settings like relative and absolute positioning, along with z-index control, all from the Visual Builder. That means you don’t need to mess with CSS files, install child themes, or use a plugin just to place text over a picture.
Divi gives you the tools right in the builder, and once you know how to use them, you can build overlapping designs quickly with full control over how they look on desktop, tablet, and mobile.
How to Overlap the Blurb on the Image in Divi? (Step-by-Step)
The trick is placing the image as a background in the column, then adding the blurb module inside the same column and positioning it absolutely.
Step 1: Set the Column Background Image
Don’t use a regular image module. Instead:
- Click to edit the column (not the row or section)
- Go to the Background tab
- Upload or select your image
- Set background size to Cover
- Background position: Center
- Don’t use gradient or overlay (we’ll handle contrast in the next steps)
Now the column becomes a container with your image in the back.
Step 2: Add the Blurb Module in the Same Column
Now drop your blurb module into that same column.
By default, it will stack over or under invisible padding. But since the image is set as the column background, you’re setting the foundation for layering.
You can customize:
- Icon or image
- Title
- Description
- Font size
- Spacing and padding
Style it now, or wait until after placement.
Step 3: Set Column Position to Relative
This tells Divi: “We want to position things inside this container.”
- Go to Column Settings > Advanced > Position
- Set Position = Relative
Without this, your blurb will float outside the column boundaries — not what you want.
Step 4: Set Blurb Position to Absolute
Now, select the blurb module and do this:
- Go to Blurb > Advanced > Position
- Choose Position = Absolute
- Now adjust the position (top, right, bottom, left)
- For example, Top: 20px, Left: 40px
- Play with alignment — it updates in real-time
The blurb now sits exactly where you place it, on top of the image.
Step 5: Raise the Z-Index
If your blurb disappears or gets stuck behind the image:
- Still in Blurb > Advanced > Position
- Scroll down to Z-Index
- Set it to a value like 10 or higher
This tells Divi to place the blurb “above” other layers.
Step 6: Adjust for Mobile
Now that it’s working on desktop, click the responsive device icons to tweak for:
- Tablet
- Phone
You can reposition the blurb (left/right/top/bottom) per screen size. Use % or vw/vh units instead of pixels to keep it flexible.
Example:
- On desktop: top 80px, left 50px
- On mobile: top 20%, left 10vw
Test visually. Divi shows live previews for each screen.
Extra Styling Tips That Make Blurb on the Image in Divi Next Level
Want your layout to stand out? Try these simple add-ons:
- Add a transparent dark overlay to the column background to boost text readability
- Set a background color with low opacity on the blurb module
- Use white or bold fonts to contrast the image
- Add a box-shadow to give depth to the text box
- Use icon animations for blurbs on hover
- Try transform effects or motion scroll for dynamic layering
- Add padding with rem or % units to maintain spacing across devices
Conclusion
You don’t need to hack code or use plugins to layer content in Divi. Just set your column as relative, your blurb as absolute, and place it right where you want it. Add some styling, check mobile view, and you’re done.
Whether it’s for a feature block, promo banner, or homepage hero — this method keeps your layout modern and saves space.
Give it a shot in your next project. You’ll never go back to stacked blurbs again.