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

Posted on January 19, 2018 by in Divi Resources | 31 comments

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.

gallery layout

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.

first row

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.

add first row content left

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

first row second column content

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.

add second section

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

second section content

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”

third section first row content

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.

add third section

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

montserrat font

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)

medium text

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)

box shadow

In the Text Module Below the image containing the dummy text, update the following:

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

adjust paragraph

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:

left margin paragraph

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)

size image second section

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

resize image with shadow

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

left three column

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)

50 margin

In the right column update the Text Module containing the dummy paragraph text as follows:

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

dummy text margin

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;

last image design

Here is what we have so far.

before vertical text

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;
}

custom css

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.

final

Responsive?

Because of the additional margin specifications made throughout the design, the layout looks great on mobile as well.

responsive

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 so that you never miss a big announcement, useful tip, or Divi freebie!

31 Comments

  1. Ok, now that is cool! Web based design is getting more and more interesting. Thanks!

  2. Really really useful, thank you very much

  3. This is awesome. Would be great to share a json layout with us 🙂

  4. Very nice!

  5. This is great. Thank you Jason.

  6. Thanks for the great pic. I really learn a lot,

  7. Great tutorial. But rotate-left and rotate-right should be applied as css classes, as I think was your intention by defining them with the period in the stylesheet.

    • Jason Champagne

      Stephen,

      You are right! Very sorry about the typo. I meant CSS Class, NOT CSS ID. Thanks for catching that.

  8. Also, Should Bake, Starters etc. be defined as a header, H2 or H3 say?

    • Jason Champagne

      Stephen, I left that up to the user since some may just want the text for aesthetic purposes, not headers.. But yes, depending on how you would use text, you can apply those tags if you want.

  9. I think I followed everything explicitely… (at least 90%), but rotating is not working (even when I define this as class in the child-theme-stylesheet), and the dimensions differ a lot between firefox and chrome

    But at least,I learned a lot!

    • Jason Champagne

      Connie,

      I made a mistake. I wrote CSS ID when I meant to write CSS Class. So, make sure you have rotate-left and rotate-right entered as CSS Classes and NOT CSS IDs.

      Sorry for the mixup.

      • Jason, that is one small glitch which I noticed, but still it is not working.

        I will have to check wether that style is in conflict with another class…

        thanks!

        • I had printed this “recipe” via pdf-printer and the printer added a space between the number and the unit, so it was “90 deg” and not “90deg”

          now it is working!

          Thanks for the inspiration!

  10. Thanks, I tried and it works great.
    One thing where “Then go to the Advance Tab and add the following CSS ID:”
    should be, “Then go to the Advance Tab and add the following CSS class:”

  11. Can you control the order of the modules? I there like a bring to front option?

  12. I luv luv this on the desktop, but on smartphone there are a gazillions of space in between the header that looks really weird. If you look at your pic each section have tons of space in between the bake, seafood and the image. How can we fix it for smartphone and the css you have provided? Once again this looks amazing,it truly feels like a magazine layout.Thanks a lot.

    • Jason Champagne

      If you want to keep the vertical text on mobile, I would suggest adjusting the spacing for your columns and rows on mobile devices from within the visual builder.

      It may help to disable the vertical text on mobile altogether. To do this I would wrap the custom css in the theme customizer with a media query like this:

      @media (max-width: 980px) {
      
      .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;
      }
      
       }
      
  13. Love how your tutorials as so thorough. I’m having a little difficulty implementing this customisation:
    Width: 90% (D), 50% (T), 50% (S)

    I can’t see where to find these values. I can only see an option to customise the width under Sizing.

    So so impressed with you guys and the Divi project.
    Thanks, Mairéad

    • …are so thorough…

    • I got it – Desktop, Tablet, Smartphone
      !!
      Now it makes sense.

      • Jason Champagne

        Thanks Mairead.

        And yes, you are correct – Desktop, Tablet, Smartphone. I thought it was best to include the mobile sizing because of all the custom margins and sizes used throughout.

  14. This is great, thank you! I am wondering if it’s possible to change the order of the modules for mobile / tablet view? Right now the first module is shown as the second on mobile devices which makes the layout not suitable for my purpose. TIA 🙂

  15. May I have this layout download link. I love this layout please give me the link. I want to download.
    Thanks

500,591 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
Buy Sustanon online in Canada

in detail progressive.ua

diploma-home.com

Pin It on Pinterest