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.
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%).
Related Articles
Embed Tapita blocks at custom positions on website
Difficulty: Advanced By default, Tapita allows you to build home pages and landing pages for your Shopify store. However, there are cases when you need to build not a whole individual page but a block at certain positions on your website, such as ...How to link Tapita from with additional emails?
This article explains how to set up email forwarding to have another email to receive your form request from Tapita Set Up a Filter to Auto Forward in Gmail To set up a filter that forwards Gmail email to another email address: Select the Settings ...How to add and edit count down element with Tapita
In this guide, we will show you how to create beautiful count down timer in your landing page using Tapita 1. Create your countdown template Step 1: Go to https://logwork.com/countdown-timer Step 2: Edit the style, start time... and others ...Insert Judge.me review widgets into Tapita pages
Your store must have Judge.me app already installed. In your Tapita page, add a Custom HTML element. Depending on which widget you want to show, copy and paste the corresponding code below into the Custom HTML content. Preview badge {% render ...How to turn your collection page from zero to hero
What is a collection page? The collection page is an e-commerce page that has a selection of products organized for the user to browse. These pages are used by customers to browse your product line and learn more about potential purchases. The ...