Zero Block у спливаючому вікні – новий блок T1093 у бібліотеці

Блок дозволяє перетворити будь-який Zero Block на попап. У бібліотеці модифікатор можна знайти за номером Т1093 «Popup: Zero Block у попапі» у категорії «Інше».

Вам потрібний попап, а базові рішення у бібліотеці не підходять. Наприклад, ви хочете зробити динамічне меню, нестандартну підказку по кліку, маркетинговий попап та багато іншого. Дивіться докладний відеогід роботи з блоком.

У цьому блоці у вкладці Контент задайте id нульового блоку з першого кроку. Там же поставте посилання на попап.

Подумайте, який елемент на сторінці буде використовуватися як тригер для відкриття попап. Це може бути кнопка чи текст у будь-якому блоці. Вкажіть цей елемент посилання на попап з пункту 3.

Якщо ви бажаєте, щоб попап відкривався відразу після завантаження сторінки, поставте галочку у відповідному чекбоксі в Налаштуваннях блоку. Там можна налаштувати зовнішній вигляд спливаючого вікна: вирівнювання, розмиття фону, деталі анімації та багато іншого.

Як зробити спливаюче вікно (Pop-up) в Tilda

Спливаюче вікно або Pop-up — це елемент інтерфейсу сторінки, який з'являється поверх вмісту сторінки після натискання на певні елементи (текст, кнопки, зображення) або під час створення спеціальних тригерів (заданий таймінг, підведення покажчика миші до закриття вікна).

Такі вікна, що спливають, є і в конструкторі Тільда. Їх досить багато, кожен Pop-up розберемо наприкінці статті.

Зараз давайте перейдемо до основних налаштувань спливаючих вікон.

Основні налаштування спливаючих вікон

Наприклад, ми будемо використовувати блок BF501 (форма підписки), який можна знайти серед усіх блоків у розділі «Форма та кнопка»:

Тепер зайдіть до «Контенту» створеного блоку Popup. Тут ви можете задати будь-яку картинку для вікна, змінити заголовок, опис та інші значення. Але найважливіше поле «ПОСИЛКА НА POPUP»:

У цьому полі відображається адреса Pop-up. За умовчанням Тільда ​​ставить досить зрозумілі посилання, у нашому випадку це #popup:subscribe. Ви можете залишити цю адресу, або замінити на іншу, зрозумілу вам. Пам'ятайте, що починатися посилання має з обов'язкового знака # , пробіли не допускаються, тільки латиниця та цифри.

Особливо важливо замінити посилання у випадку, якщо таких вікон у вас буде багато.

Перевірити, як виглядає ваш Pop-up, можна натиснувши кнопку «Клікніть тут» у блоці Pop-up:

Тепер, після створення Pop-up і застосування всіх налаштувань, ви можете додати його до елементів на сайті. Для цього в полі ПОСИЛАННЯ ДЛЯ КНОПКИ (для зображень ПОСИЛАННЯ) вам потрібно ввести посилання на створений Pop-up. У нашому випадку - #popup:subscribe:

Якщо ваш Pop-up повинен з'являтися на кліку на текст, то тут теж все просто. Виділяєте потрібний текст і натискаєте кнопку «Посилання» -> Вставити посилання:

Далі вставляємо наш #popup:subscribe:

Подивіться, як виглядатиме ваш Pop-up у роботі в режимі перегляду сторінки. Якщо все влаштовує, не забудьте опублікувати сторінку, щоб зміни набули чинності.

Бокове меню-гамбургер у zero-блоці на Тільді

Детальна інструкція щодо використання нескладної модифікації для створення бічного меню-гамбургера в zero-блоці з розкриттям на весь екран.

Ця модифікація заснована на одному із способів створення горизонтального фіксованого меню з розкриттям на весь екран попередньої статті. Але для зручності я вирішила винести її до окремої статті з докладною інструкцією.

Приклади використання даного меню ви можете бачити на цьому сайті та у проекті:
stanki-gefest.tilda.ws.

Створіть один zero-блок заввишки 100%, що складається з двох частин: видимої частини з іконкою-бургером (її ширина у мене дорівнює 10%) та розкритим на весь екран меню:

У видимій частині меню створіть головну кнопку, після натискання на яку відкриватиметься меню і тригериться анімація появи пунктів меню. Дайте цій кнопці унікальний клас, наприклад, «zero_menu_btn» (Права кнопка → Add CSS Class Name).

Я зазвичай роблю цю кнопку невидимою, щоб вона також була тригером анімації іконки-гамбургера, яку я малюю з окремих смужок.

• Замість #rec262169051 вкажіть свій ідентифікатор zero-блоку з меню
• Замість 0.6s вкажіть час, за який має розкритися меню
• Замість 10% вкажіть ширину закритого меню (можна поставити в рх)

Щоб відсунути весь контент сайту праворуч на ширину меню, додайте цей код у HEADER (Налаштування сайту → Ще → КОРИСТУВАЛЬНІ CSS-СТИЛІ).

@media (min-width: 1201px) < div[id="allrecords"] < padding-left: 10% !important; /*Ширина закритого меню*/ >>

Примітка: додавання цього коду в шапку сайту змусить і сторінки всередині Тільди, т.к. він застосовується і до редактора також.

Також у цьому коді стоїть медіа-запит на обмеження його роботи в діапазоні ширини екранів від 1201 рх, тому що моє меню видно лише в цьому діапазоні.Якщо у вас стоїть інший проміжок видимості в меню, то тут зміните параметри медіа-запиту.

Усього два простих кроки до меню з унікальним і неповторним дизайном на вашому сайті!

Там я пишу про розробку сайтів на Тільді, дизайні та поділяюся корисними ресурсами, статтями та модифікаціями.

Опис невеликої модифікації для фіксованого при скролі меню, виконаного на zero-блоці, а також кілька цікавих варіантів його дизайну та анімації.

Випадаюче меню на zero-блоці дає необмежені можливості у створенні меню з унікальним та неповторним дизайном, і зробити його зовсім не складно

Так як у Тільді не реалізовано блок старої доброї бічної панелі, хочу розповісти, як самому зробити фіксований сайдбар за допомогою Zero-блоку.