How to make overlapping sections or images in Tapita

How to make overlapping sections or images in Tapita

Normally, the sections on your page are stacked on top of one another as separate sections.

However, sometimes you want some sections/images to overlap for better visual effect, like in our template Contact Us 4, or this blog template SM Global. This tutorial will show you how to do that.

We will take template Contact Us 4 as our example.

Here we created two separate sections. Let's call them Upper and Lower.

Now, we want the paragraph in the Lower section to move up and overlap on top of the Upper section so it will look like this:

Let's find out how to do that.

First, you need to make sure the sections that you want to overlap each other are both children of the same parent element. For example, our Upper and Lower are both children of "Home", which is our root element.

Now, to make the Lower section to move up and overlap on top the the Upper section, we only need to enter a negative number for the Margin Top for Lower Element.

That's it!

To make it look like only the paragraph move up and not the whole section, we make the paragraph's background white and the outer section's background to be transparent (Opacity 0%).