Sound graphic design rules are built on well researched foundations. Unless you are a ‘natural’ at design, you should stick to these guidelines until you become familiar with the technical underpinnings that support them. Yes, they are called “rules”, but this doesn’t mean that designers need to be locked in to them specifically. Adhering to the principles and experimenting will get one the perfect layout and design, eventually 😉
![](https://divilicious.com/wp-content/uploads/Jim-Conroy-in-Concert.png)
![Overlapping Text and Image DIVI Layout](https://divilicious.com/wp-content/uploads/Jim-Conroy-Having-a-Moment-1080.jpg)
Jim Conroy in Concert
More...
Tutorial for Achieving This Amazing Effect
Method Two: Hand Code it. Only five things need your attention.
- Add a Standard Section (blue)
- Add a Row (green)
- Add Image Module – Insert Image. Use on large enough (1080px).
- Add another Row.
- Add Text Module. Add in your content. Now we adjust settings and make magic.
- Row General Settings – Click on “Use Custom Width” and add Custom Padding. I use between 4% and 6%. Feel free to experiment
- Custom CSS Tab – Add: transform: translate(0,-165px);
This will pull up the content section over the image module above it. Adjust the number to suite your taste.
Send me a link when your done so I can see the beauty of your genius.
Content Over Video
What’s The Difference?
To achieve this, instead of an Image module, add a Divider module and set the height to 640px.
In the setting for this first row (green): Advanced Design Settings => Set a background video.
In the second row settings, under the Custom CSS tab, replace the css with the following:
position: relative;
top: -165px;
z-index: 1;
Jim Conroy in Concert
More...
Grab the Layout
Subscribe for Divi Freebies
Plugin update notifications :: stay abreast of new and or updated items by opting in to my very occasional email newsletter. I swear by all that is right and holy your email address will never be shared, sold, traded or otherwise abused and I seriously doubt you'll see anything more than plugin/code update notifications when they are of the utmost importance.
[mailpoet_form id="1"]