Using Transform Translate vs. Negative Margin with Divi

Last Updated on September 18, 2022 by 5 Comments

Using Transform Translate vs. Negative Margin with Divi
Blog / Divi Resources / Using Transform Translate vs. Negative Margin with Divi
Play Button

Itโ€™s no secret that Divi comes with a ton of options. And sometimes, some of these options might seem to deliver similar outcomes. Itโ€™s important to know the difference and how and when to use them. Negative margin and transform translate are two of those design options that can deliver a similar outcome and in some situations, using one instead of the other can make more sense.

In this post, weโ€™ll make it easier for you to choose the right design option by showing you the difference between both, where you can find them in the Divi builder and how to use them to your advantage to create stunning web designs.

Letโ€™s get to it!

Subscribe To Our Youtube Channel

How Negative Margin Works

Negative margin remains one of the most used techniques in web design and design in general. It can quickly and effortlessly add an extra dimension to any website you create. Now, in Divi, you can basically add negative margin to any design element on your page. Whether you want to add an overlap to a section, row or module, youโ€™re able to find these options in the spacing settings by going to the design tab.

You get to choose what kind of overlap you want to create; bottom to top, top to bottom, left to right or right to left. Itโ€™s also important to take the Z Index of your element into account. The most common overlaps happen from bottom to top because of the elementโ€™s higher Z Index.

transform translate

 

Check out this tutorial to see some great overlap examples that are created with negative margin.

How Transform Translate Works

Transform translate has an entirely different approach, one that is a lot more visual as well. When you add negative margin to the spacing settings of an element, you have to manually enter a value in a unit of your choice (pixel, viewport, โ€ฆ). Youโ€™ll see that value turn into action on your page (in real time) and you can continue modifying the value as you go.

In contrast to negative margin, the transform translate design option is a lot more visually-oriented. It gives you an axis that represents the width and height your page, and you can use your pointer to position the element wherever you want on the page. You can find the transform translate design option by going to the transform options in the design tab of any element. There, youโ€™ll have to enable the second tab.

transform translate

One of the big differences between transform translate and negative margin, however, is what is being left behind. If youโ€™re changing the position of an element using the transform translate option, the initial space that is taken up by the module will remain. With negative margin, the opposite is true.

transform translate

Creating Small Overlaps? Go for Negative Margin

Top Negative Margin

If you want to create an upward overlap, youโ€™ll have to add a negative value to the top margin of your element. After adding the negative top margin, any module that comes below the module, in the same column and row, will follow. In other words; the negative margin will apply to all modules that are present in a particular column.

transform translate

If you want to avoid that, youโ€™ll have to add some custom bottom margin as well. Use the same amount of pixels as you did for the top overlap (without the minus).

transform translate

Left & Right Negative Margin

If youโ€™re adding negative margin to the left or right side of an element, itโ€™s necessary to add that same amount of pixels (without the minus) to the other side. If you add it to one side only, youโ€™ll see the module increase in size:

transform translate

By adding the same value without the minus to the other side, youโ€™re making sure the module keeps the same size it had before.

transform translate

Creating Bigger Overlaps? Go for Transform Translate

If youโ€™re creating bigger overlaps, itโ€™s better to choose the transform translate option. It works entirely different from negative margin. First of all, it doesnโ€™t take any page structure into account. It visually repositions the element without taking the container sizes that are present on that page into account. Secondly, it helps you position the element exactly where you want to without having to manually modify the values.

Add all Elements to Bottom of Section

When using the transform translate option on a design element, you have to bear in mind that is leaves behind the space it initially takes up. In most situations, you want to get rid of that space and luckily, thatโ€™s possible as well. Start by adding the modules to the bottom of your section (in a separate row) and reposition them upwards using the transform translate option.

transform translate

transform translate

Hide Overflow & Change Section Height

Once youโ€™re done repositioning the elements in your section, you can define a height for your section. At the bottom, youโ€™ll have quite some space that is taken up by the repositioned elements which you want to get rid of. Open the section settings go to the overflow settings first. Hide the vertical overflow. Then, go to the sizing settings of your section and choose a matching height for the section (across different screen sizes).

transform translate

transform translate

Final Thoughts

Diviโ€™s continuously evolving features can sometimes make it difficult to understand the difference between two design options that allow you to achieve similar results. But although some options might seem the same, there are differences that can help you make a decision between both options. In this post, weโ€™ve shown you what the difference between both is, where you can find them in the Divi Builder and how to use them to your advantage when designing any kind of website. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

If youโ€™re eager to learn more about Divi and get more Divi freebies, make sure youย subscribe to our email newsletterย andย YouTube channelย so youโ€™ll always be one of the first people to know and get benefits from this free content.

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time ๐Ÿ‘‡

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

Divi 5 Update: Public Alpha Version 4

Divi 5 Update: Public Alpha Version 4

Posted on November 25, 2024 in Divi Resources

The Divi 5 Public Alpha is available for testing. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 4 today. We release new Divi 5 versions every two weeks, and it gets better each time! If you haven’t tested Divi 5 yet, try it and let us know what you...

View Full Post
New Starter Site for Freelancers (Quick Install)

New Starter Site for Freelancers (Quick Install)

Posted on November 24, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post

5 Comments

  1. Thanks, Donjete, this info taught me something that the negative margin must have a positive margin on the opposite side so the module does not scale up.

  2. Very useful information, clearly presented. This answers questions raised when I have used transform. Thanks

  3. I am so impress with site. It’s so useful and beneficial information.
    Thanks for share.

  4. Thanks again for the explanation!

  5. ๐Ÿ˜‰

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

๐Ÿ‘‹ It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Join To Download Today