How to Build a Creative Image Layout with Overlapping and Vertical Text

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, 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”.

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.

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 Class:

rotate-left

For the text module containing “Starters” update the following in the Design tab:

Custom Margin: 20% Top, 75% Right

Then go to the Advance Tab and add the following CSS Class:

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

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.

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!