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.

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%).

    • Related Articles

    • Learn about Tapita page builder elements

      Page elements is an essential part of a page builder tool like Tapita. Once you've mastered the elements, then you've mastered Tapita! In Tapita, you can add the elements into your page by either: Drag and drop the elements from the left menu Quick ...
    • Tapita Premade Templates

      If you are familiar with Tapita, you would know that we offer 4 types of page: 4 type of pages you can build with Tapita: Landing pages/Homepage, Blog pages, Product pages or Collection pages. Each type of pages is equipped with numerous templates ...
    • General checklist for starting with Tapita

      This checklist outlines all the steps that you need to take to get started with Tapita. These steps will help guide you understand, create and publish your page with Tapita. You might find it helpful to print this checklist or to download it as a PDF ...
    • Tapita Premade Blocks

      Understand the need of cut down on building time, Tapita has created a series of premade blocks that covers quite a fews functions that you can quickly add to your page. This ranging from premade Banners with CTA to a contacts from. We have listed a ...
    • The Page Types you can create using Tapita

      Tapita allows you to create pages of these types: Landing pages (including Home page) Blog pages Product pages Collection pages Let's explore each type! Landing pages Landing pages are the pages you see under Online Store > Pages section in your ...