Zero Block In Pop-Up: New T1093 Block In The Tilda Library

September 6, 2023

Zero Block In Pop-Up: New Block In The Library T1093

This block turns any Zero Block into a pop-up. Find the modifier as the Т1093 "Pop-up: Zero Block in pop-up" block in the "Other" category in the Block Library.

Why To Use Modifier Block

You want to design a custom pop-up and standard solutions in the Library don't suit you well. For example, you want to create a dynamic menu, a customized tooltip that appears on click, a promo pop-up, and many other things.

How To Use The T1093 Modifier Block?

Add a Zero Block to the page and design the pop-up layout.

Add the T1093 modifier block from the "Other" category to the page.

In the Content tab of the T1093 block, specify the ID of the Zero Block from the first step. Specify a pop-up link in the same tab.

Think of what element on the page can be used as a trigger to open the pop-up. This can be a button or text in any block. For this element, specify the pop-up link from step 3.

If you want the pop-up to open automatically right after page loading, select the relevant checkbox in the Settings tab of the block. In the same tab, you can personalize the look of the pop-up: Alignment, background blur, animation features, etc.

The Settings for the block Т1093 "Pop-up: Zero Block in pop-up" from the "Other" category.

Tips On Making The Most Out Of The Block

When designing a personalized menu, consider the following settings of the T1093 block:

Select positioning (the most common option is top alignment);
Hide or change the color of the close icon that closes the menu.
If you don't need the background color or blur effect, you can remove values from these fields.

When designing a pop-up, you may want to check out these settings:

Select a dark background color in the T1093 block settings;
Specify a light color for the close icon so it doesn't blend in with the background;
Adjust the width and height of the pop-up in the Zero Block settings.

Examples Of Using The Block

Check some step-by-step guides on adding a menu on the website using the T1093 block. You can also include these layouts in your project: Simply create a new page and add it using its Template ID.

Fullscreen Menu

How To Recreate The Animation

Open the Settings of the T1093 block and set the following parameters:

Appear animation – Appear from right
Appear animation on mobile – Appear from top
Animation easing – Quart: Ease In Out
Appear animation speed, seconds — 0.6

You can import the page template with this animation to your project by using the Template ID 39151377. Read more in the Help Center.

Half-Screen Menu With Blur Effect

How To Recreate The Animation

Open the Settings of the T1093 block and set the following parameters:

Background blur – 10px
Appear animation – Appear from top
Animation easing – Quart: Ease In Out
Appear animation speed, seconds – 0.5

You can import the page template with this animation to your project by using the Template ID 39206119. Read more in the Help Center.

Second-Level Menu

How To Recreate The Animation
Open the Settings of the T1093 block and set the following parameters:

Pop-up: Background color – #000000
Pop-up: Background Opacity – 40%
Appear animation – Appear from top
Animation easing – Quart: Ease In Out
Appear animation speed, seconds – 0.6
Z-index – 9998 (the value here should be smaller than the one for the main menu)

You can import the page template with this animation to your project by using the Template ID 39206715. Read more in the Help Center.