Beruflich Dokumente
Kultur Dokumente
How to Build a
Creative Image
Layout with
Overlapping and
Vertical Text
Posted on January 19, 2018 by Jason Champagne in Divi
Resources | 3 comments
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elegan… 1/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
Today I’m going to show you how to build your own creative
image layout using Divi. The concepts aren’t earth
shattering (or unique for that matter), but my hope is that
this will inspire you to think outside the box and create
something that looks amazing. So for those of you who are
wanting to shy away from perfect symmetry and mix things
up, this is the tutorial for you.
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elegan… 2/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
So, I think it best to add all of our rows and content (images,
text) first. This will provide a basic framework so that we can
visualize the whole before we start designing the parts.
You can think of the existing content (all the images in the
gallery) as resources you can use to fill in your new layout.
Then add a text module under the second image in the first
column and add the following dummy text for now:
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elegan… 4/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
Copy the two text modules from the first column and paste
them on second column under the image (making sure the
paragraph dummy content stays above the single text
content. Then change the word “Bake” to “Starters”.
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elegan… 5/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
Next add a new regular section below the one you just
created. Give it a row with a one-column structure.
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elegan… 6/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
Drag an image from the existing content below into the first
(far left) column.
In the third (far right) row, add a text module with the
content text: “Coffee”.
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elegan… 7/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
For the third and final section, add a regular section with a
two-column (one-half one-half) row structure.
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elegan… 8/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elegan… 9/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
Well, that takes care of the framework and content of our
layout. But before we start designing this layout, let’s erase
the section containing our previous layout “helper” content.
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 10/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
There are two fonts and three sizes used for the text in this
layout. Playfair Display is used for the larger single words
and Montserrat is used for the paragraph text.
Click to update the settings of the dummy text module in
the first column of the first section (or anyone actually, it
doesn’t matter) and update the following:
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 11/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
That’s really all that needs to be done. Using the nifty right
click menu (or the shortkeys ctr+alt+C and ctr+alt+V), copy
the style/design settings of the module and paste the
design settings on each of the dummy paragraph text
modules throughout the layout.
Find the text module with the single text “Bake”. Update the
settings as follows.
Text Font: Playfair Display
Text Font Weight: Bold
Text Text Size: 72px (D), 50px (T), 42px (S)
Text Letter Spacing: 12px
Text line Height: 1em
Now using the right click menu (or the shortkeys ctr+alt+C
and ctr+alt+V), copy the style/design settings of the text
module and paste the design settings on each of the text
modules containing single words (Fresh, Starters, Desserts,
Coffee, Seafood, and Crab).
Locate the text module with the content text “Starters” and
update the following settings:
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 12/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
Now copy the design settings of the text module and paste
the design settings on the text module with the word
“Desserts” and the one with the word “Coffee”.
Section One
This does two things. First, it pulls the image below it upward
so that it overlaps, and secondly, it pulls the image to the
left.
For the image directly below update the following settings
in the design tab to give it a box shadow:
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 14/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
In the Text Module Below the image containing the dummy
text, update the following:
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 15/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
This will create room to float the word “Starters” to display
vertically to the left of the paragraph.
Section Two
In the first row of the second section, update the size of the
image in the left column as follows:
Force Fullwidth: NO
Width: 60% (D), 100% (T), 100% (S)
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 16/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
For the second image in the column, copy the design of the
image in section one that has the box shadow and paste it
to the image. Then update the following:
Force Fullwidth: NO
Width: 70% (D), 80% (T), 80% (S)
Module Alignment: Right
Custom Margin: -20% Top
Force Fullwidth: NO
Width: 90% (D), 50% (T), 50% (S)
Custom Margin: -30% Top
Section Three
For the last section, starting with the left column, update the
dummy paragraph text module as follows:
Custom Margin: 50% Right (D), 0px Right (T), 0px Right (S)
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 18/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
For the image directly under the dummy text in the right
column, copy the design of the image in section one that
has the box shadow and paste it to the image. Then update
the following:
Force Fulwidth: NO
Custom Margin (Desktop): 10% Top, -30% Left
Custom Margin (Tablet): 0px Left;
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 19/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 20/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 21/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
.rotate-right {
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform: rotate(90deg);
-moz-transform-origin: right top 0;
-o-transform-origin: right top 0;
-ms-transform-origin: right top 0;
transform-origin: right top 0;
float: right;
}
.rotate-left {
-moz-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
-o-transform:rotate(270deg);
-ms-transform:rotate(270deg);
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 22/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
transform: rotate(270deg);
-moz-transform-origin: left bottom 0;
-o-transform-origin: left bottom 0;
-ms-transform-origin: left bottom 0;
transform-origin: left bottom 0;
float: right;
}
Then go to the Advance Tab and add the following CSS ID:
rotate-left
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 23/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
Then go to the Advance Tab and add the following CSS ID:
rotate-right
Then go to the Advance Tab and add the following CSS ID:
rotate-right
For the text module containing “Crab” update the following
in the Design tab:
Then go to the Advance Tab and add the following CSS ID:
rotate-left
That’s it!
Save your settings and check out the results on the live site.
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 24/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 25/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
Responsive?
Because of the additional margin specifications made
throughout the design, the layout looks great on mobile as
well.
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 26/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 27/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 28/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
Final Thoughts
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 29/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
Be sure to subscribe to our email newsletter and YouTube
channel so that you never miss a big announcement,
By Jason Champagne
Jason started a career in education before co-
founding Launch Tower, a Houston based web
development company specializing in conversion
optimization through Divi. He enjoys freelance
writing, all things WordPress, and the occasional
ping pong match.
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 30/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
3 Comments
Mike
January 19, 2018
Ok, now that is cool! Web based design is getting more and
more interesting. Thanks!
REPLY
Marco
January 19, 2018
REPLY
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 31/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
Dave Dayanan
January 20, 2018
REPLY
Leave a Reply
Comments are reviewed and must adhere to our
comments policy.
Your Name*
Your Email*
Your URL
SUBMIT COMMENT
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 32/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 33/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
437,821
Customers Are
Already Building
Amazing
Websites With
Divi. Join The
Most
Empowered
WordPress
Community On
The Web
We offer a 30 Day Money Back
Guarantee, so joining is Risk-Free!
SIGN UP TODAY
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 34/35
20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 35/35