How To Build A Creative Image Layout With Overlapping and Vertical Text - Elegant Themes Blog

20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog
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
There is something beautiful about the organization of a

good image layout or grid. But sometimes, beauty is found
outside the boundaries of perfect symmetry. We’ve all seen
examples of this kind of asymmetrical balance used in
marketing. You can find them on restaurant menus,
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elegan… 1/35
brochures, and countless websites with portfolios and

galleries.
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.
 Preparing the Design

 Elements

 Here is what you will need to build this layout:
1. Latest version of the Divi Theme installed and active
2. Copy of the Free Restaurant Layout Pack. Import the

Restaurant_Gallery.json file to the Divi Library. This will
give you a head start on creating the new layout.
3. If you choose to use your own images, I would make

sure that their size is at least 800×500.
Building the Image Layout

and Adding Content
This unique layout calls for a unique design process. Think of
it like a making a scrapbook. We are going to lay out all our
pieces before we start moving them around to find the
right spot for each one. This process will also help you take
more ownership of the design process and tweak things the

way you want whenever you add your own content.
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.
Use the Restaurant Gallery Layout
 For starters, let’s create a new page and upload the

restaurant gallery layout to the page. The layout has a

header and a footer section (which we will leave alone now.
 We will be using the images inside each of the four (four-
column) rows to add to our new layout. You can choose to

create your image modules from scratch if you prefer. I’m
 simply doing this to speed up the process.
You can think of the existing content (all the images in the
gallery) as resources you can use to fill in your new layout.
Add First Section Content

Create a new regular section with a new row with a two-

column (one-half one-half) columns structure. Then drag it
right under the header section of your layout.
In the first column of your new row we are actually going to

create an image module and grab a vertical image from
our media gallery (This is the only image not found in the
existing content below).
Next drag an image directliy under the previous image in

the first column.
Then add a text module under the second image in the first
column and add the following dummy text for now:
“Sed ut perspiciatis unde omnis iste natus error sit

voluptatem accusantium doloremque laudantium, totam
rem aperiam, eaque ipsa quae ab illo inventore veritatis et
quasi architectoeaque ipsa quae ab illo inventore.”
Add another text module directly under that text module

with the content text: “Bake”
That takes care of the first column in the first row.
In the second column of the first row, add a text module

with the content text: “Fresh”
Then drag an image module directly under that text

module from the existing content at the bottom.
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”.
Add Second Section Content
Next add a new regular section below the one you just
created. Give it a row with a one-column structure.
 Drag two images (image modules) from the existing

content below into the new one-column row. They will span

the fullwidth of the row. That’s okay, we will be adjusting the
 size and position later on.
Add a new row directly under the previous and give it a

three-column (one-third one-third one-third) structure.
Drag an image from the existing content below into the first
(far left) column.
In the second (middle) column, add a text module with the

content text: “Desserts”
Then copy any of the text modules with the paragraph

dummy text in the first section and paste it under the
“Desserts” text module.
In the third (far right) row, add a text module with the
content text: “Coffee”.
 Themes Plugins Blog Contact Login JOIN TO DOWNLOAD
That’s it for the content of the second section.
Add Third Section Content
For the third and final section, add a regular section with a
two-column (one-half one-half) row structure.
In the first (left) column, drag in an image from the existing

content below. Under the image, copy and paste in the
paragraph dummy text we’ve been using. Then add a text
module below that dummy text with the content text: “Crab”
In the right column of the same row, enter a text module

with the content text: “Seafood”
Then add the paragraph dummy text module under it.
Under the dummy text, drag in an image from the existing

content below.

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.

Designing the Layout

Now that we have our framework (rows and columns) and
our content (image and text modules) ready, we can now
start the design process. To move things around we will be
adjust the widths and margins of certain images so that
they can do things like overlap. The secret to overlapping
images is to use negative values to your margin settions to
“pull” the images in the direction you want them to go. And,
in addition to setting our text fonts, sizes and margins, I’ll be
adding a few lines of inline custom CSS to rotate a few
words to display vertically.
Let’s get started.
https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-creative-image-layout-with-overlapping-and-vertical-text?utm_source=Elega… 10/35
The First Wave of Design: Text Modules
Because the entire layout shares similar font design, I find it

easier to update one text module settings first and then
copy and paste the style to other text modules that share
the settings. This avoids the repetition of adding the same
general settings for each module one by one.
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.

 Small 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:
Text Font: Montserrat
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.
Large Single Word Text
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).
Medium Single Word Text
We don’t want all of our single words to have the same

large size, but it was quicker to paste in the design settings
for all of them first before we make adustments to the few
text modules that require a different size.
Locate the text module with the content text “Starters” and
update the following settings:
Text Text Size: 42px (D), 32px (T), 32px (S)

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”.
The Second Wave of Design: Sizes,

Margins and Box Shadows
To adjust the margins for the images and text throughout

the layout, I’m going to start at the top with the first (top)
section and then continue to the second and third section.
Section One
In the left column of seciton one, update the image module

settings of the first (top) image as follows:
Custom Margin: -30% bottom, -20% left

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.
Note: It is important to note that on the negative margin

value can accomplish this kind of placement of the images.
You might think that adding a margin of 30% top and 20%
right would accomplish a similiar effect, but all this does is
push the image down and shrink the image so that it has
20% margin on the right.

For the image directly below update the following settings

in the design tab to give it a box shadow:

 Box Shadow: [select first option]

 Box Shadow Horizontal Position: -18px
Box Shadow Vertical Position: -18px
Box Shadow Blur Strength: 50px
Box Shadow Spread Strength: -7px
Shadow Color: rgba(0,0,0,0.3)

In the Text Module Below the image containing the dummy
text, update the following:
Width: 65% (D), 100% (T), 100% (S)
This is to create room for whenever we float the word “Bake”

to display vertically to the right.
Next, update the dummy paragraph text module setting in

the right column as follows:

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)

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
Next, go to the three-column row in the second section and

update the settings for the image in the left column as
follows:
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)
In the right column update the Text Module containing the

dummy paragraph text as follows:
Width: 65% (D), 100% (T), 100% (S)
 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;
Here is what we have so far.
The Final Wave of Design: Making Text

Vertical with Custom CSS
At this point all that is left to do is to rotate our text so that it

displays vertically instead of horizontally. To do this, we will
be using some custom CSS (the “transform:rotate”
property) and some adjustments to margins to position the

text for the vertical placement.

 g>Note: I could add inline css under the advanced tab of

each text module individually, but I figure adding the CSS to
 the page settings and then targeting each module with a
 class would give you more control over these settings. For
example, you could add media queries to disable the
vertical text display on mobile devices.
Open Page Settings in the bottom settings menu. Then click

the Advanced Tab and enter the following CSS in the
Custom CSS box:
.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);
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;
}
 Notice the two classes I will be using are “rotate-right” and

“rotate-left”. We will be using these CSS ID’s to target the text

modules with the content text “Bake”, “Starters”, “Coffee”,
and “Crab”.
For the text module containing “Bake”, update the

following in the Design Tab:
Custom Margin (Desktop): 10% Top, -40% Right

Custom Margin (Tablet): 35% Top, -20% Right
Then go to the Advance Tab and add the following CSS ID:
rotate-left
For the text module containing “Starters” update the

following in the Design tab:
Custom Margin: 20% Top, 75% Right
rotate-right
For the text module containing “Coffee” update the

following in the Design tab:
Custom Margin (desktop): 80% Top, 15% Right

Custom Margin (tablet): 30% Top
Custom Margin (smartphone): 50% Top
 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:
Custom Margin (desktop): -20% Right

Custom Margin (tablet): 20% Top, -20% Right
rotate-left
That’s it!
Save your settings and check out the results on the live site.
Responsive?
Because of the additional margin specifications made
throughout the design, the layout looks great on mobile as
 well.
Final Thoughts
My ultimate goal for this tutorial is get those creative juices

flowing. There is so much that can be done with margins to
create the perfect layout. I purposefully didn’t modify the
settings of the sections and rows in order to concentrate on
moving around modules. However, you could take the
layout to another level of design (especially for large
monitors) by incorporating some additional margins and
spacing for your rows and sections.
I hope this has been helpful.
 Until next time, I’ll meet you in the comments.

Be sure to subscribe to our email newsletter and YouTube
 channel so that you never miss a big announcement,
 useful tip, or Divi freebie!
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.
 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
Really really useful, thank you very much
REPLY
Dave Dayanan
January 20, 2018
Thanks for the great pic. I really learn a lot,
REPLY

Leave a Reply

Comments are reviewed and must adhere to our

comments policy.

Your Name*
Your Email*
Your URL
SUBMIT COMMENT
Receive notifications about our new blog posts.
 Recent Posts Categories Follow Us


Divi Plugin Highlight: Divi Community
Extras
  
 Customer Spotlight
Face Twit Drib
How to Evaluate (And boo ter bble
 Divi Resources
k
Improve) Your Website
 Editorial
With Accessibility
Testing
  
Freebie Of The Week
RSS Goo You
How to Build a Creative General News gle+ Tub
e
Image Layout with
Resources
Overlapping and
Vertical Text Theme Additions
How Cryptocurrency Theme Changes/Bug

Fixes
May Be Driving a New
Wave of Attacks on Theme Releases
WordPress Websites
Theme Sneak Peeks
Divi Feature Update!
Tips & Tricks
Introducing The
Innovative Divi Help
System
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
96,289 37,323 248,934

FOLLOWERS FOLLOWERS FOLLOWERS
About Us Affiliates Careers Privacy Policy Terms of Service
Copyright © 2018 Elegant Themes ®

How To Build A Creative Image Layout With Overlapping and Vertical Text - Elegant Themes Blog

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

How To Build A Creative Image Layout With Overlapping and Vertical Text - Elegant Themes Blog

Încărcat de

Drepturi de autor:

Formate disponibile

20/01/2018 How to Build a Creative Image Layout with Overlapping and Vertical Text | Elegant Themes Blog

There is something beautiful about the organization of a

brochures, and countless websites with portfolios and

 Preparing the Design

 Here is what you will need to build this layout:

1. Latest version of the Divi Theme installed and active

2. Copy of the Free Restaurant Layout Pack. Import the

3. If you choose to use your own images, I would make

Building the Image Layout

more ownership of the design process and tweak things the

Use the Restaurant Gallery Layout

 For starters, let’s create a new page and upload the

Add First Section Content

Create a new regular section with a new row with a two-

In the first column of your new row we are actually going to

Next drag an image directliy under the previous image in

“Sed ut perspiciatis unde omnis iste natus error sit

Add another text module directly under that text module

That takes care of the first column in the first row.

In the second column of the first row, add a text module

Then drag an image module directly under that text

Add Second Section Content

 Drag two images (image modules) from the existing

Add a new row directly under the previous and give it a

In the second (middle) column, add a text module with the

Then copy any of the text modules with the paragraph

 Themes Plugins Blog Contact Login JOIN TO DOWNLOAD

That’s it for the content of the second section.

Add Third Section Content

In the first (left) column, drag in an image from the existing

In the right column of the same row, enter a text module

Then add the paragraph dummy text module under it.

Under the dummy text, drag in an image from the existing

Designing the Layout

Let’s get started.

The First Wave of Design: Text Modules

Because the entire layout shares similar font design, I find it

 Small Paragraph Text

Text Font: Montserrat

Large Single Word Text

Medium Single Word Text

We don’t want all of our single words to have the same

Text Text Size: 42px (D), 32px (T), 32px (S)

The Second Wave of Design: Sizes,

To adjust the margins for the images and text throughout

In the left column of seciton one, update the image module

Custom Margin: -30% bottom, -20% left

Note: It is important to note that on the negative margin

 Box Shadow: [select first option]

Width: 65% (D), 100% (T), 100% (S)

This is to create room for whenever we float the word “Bake”

Next, update the dummy paragraph text module setting in

Next, go to the three-column row in the second section and

In the right column update the Text Module containing the

Width: 65% (D), 100% (T), 100% (S)

Here is what we have so far.

The Final Wave of Design: Making Text

At this point all that is left to do is to rotate our text so that it

 g>Note: I could add inline css under the advanced tab of

Open Page Settings in the bottom settings menu. Then click

 Notice the two classes I will be using are “rotate-right” and

For the text module containing “Bake”, update the

Custom Margin (Desktop): 10% Top, -40% Right