Popup html код тильда

Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода

1) Справа сверху выставляем желаемые настройки:
Положение — где будет всплывающее меню;
Id Блока — Id Zero блока, который будет находится внутри меню;
Ссылка — ссылка для кнопки, при нажатии на которую появится меню;
Цвет затемнения — цвет фона меню;
Не прозрачность затемнения — прозрачность фона меню;
Скорость анимации — скорость движения меню;
Скорость затемнения — скорость затемнения фона меню;
Отслеживание статистики — Отправляет данные об открытии попапа в систему аналитики. Открытие попапа будет отображаться в системе аналитики, как просмотр страницы: /tilda/popup/rec*номер блока*/opened FB pixel: ‘ViewContent’ event; Это стандартный функционал Тильды, подробнее о нем можно узнать здесь.
Ширина — ширина всплывающего меню;
Высота — высота всплывающего меню

Так-же, в вкладках «Адаптив» можно изменить размер всплывающего окна на разных расширениях экрана.
Например вкладка Адаптив960_1200 выставляет размеры для экранов шириной от 960px до 1200px.

Дополнительно:
В ширине и высоте можно указать размер как в пикселях (300px), так и в процентах (100%).
Позиции Сверху, Снизу, Слева, Справа созданы для применения с заданной высотой/шириной, например для создания небольшого меню выезжающего слева на 300 пикселей.

2) Ниже на странице скопируйте код и вставьте его в блок Т123.

3) Добавьте на страницу кнопку и укажите в ней ранее заданную ссылку в шаге 1. При нажатии на эту кнопку будет появляться меню.

Так-же, можно добавить открытие попапа при переходе по ссылке. Для этого добавляем код 2 в блок Т123 и указываем в нем вместо #popup:tildoshnaya ссылку на ваш попап. Дальше, при переходе по специальной ссылке, после загрузки страницы будет открываться указанный попап.
Примеры ссылок
mysite.tilda.ws/#popup:tildoshnaya — для главной страницы
mysite.tilda.ws/page#popup:tildoshnaya — для внутренних страниц

Внимание:
В Zero блоке, который будет попапом, отключите Lazy Load у всех изображений, иначе они могут не прогрузиться.

Попапы и меню

Модификация создает всплывающий блок или меню с Zero блоком, которые можно открывать по переходу по ссылке, размещать по краям экрана, настраивать размеры и скорость анимации.

Источник

Pop-ups

Learn how to add a pop-up to a page or website, depending on the visitors’ behavior: when they click a link, scroll, spend a certain amount of time there, or leave the page.

2. On the text editing panel, click on Link → Insert Link, type in «#» plus any word, for example, #anyword.

4. Open the Content panel of the block and paste the link (#anyword) in the «Popup link» field exactly as you did with the word or a text fragment.

Publish the page or click on Preview to see the pop-up in action. It will appear when you click on the highlighted word.

1. Add a pop-up block such as a subscription form or a social media plugin (for example, a Facebook plugin) whose appearance will be triggered by scrolling through the page.

In the Content panel of the block, add a link that looks like this: #popup:subscribe (you can enter any word after the hashtag).

2. Create a trigger that will cause a pop-up block to appear on scrolling through the page. To do this, go to the Block Library and add a trigger block from the «Other» category to the page, e.g., a Т183 block.

Open the Content panel of the trigger block and enter the link you have specified in the pop-up block. For example, #popup:subscribe.

In the Settings panel of the block, specify the time (in days) the cookies should last to avoid showing the same pop-ups to the same person multiple times.

If you want the pop-up message to appear once per 10 days, enter «10.» If you enter «365,» the pop-up will be shown to the visitor once a year. Leave the field blank if you want the pop-up to appear each time someone visits the page.

3. Publish the page. A pop-up will appear when a user visiting your website or page reaches the spot where the pop-up block is.

Источник

Pop-up блоки

Вы можете добавить на страницу всплывающие окна (pop-up), которые будут появляться в зависимости от поведения пользователя: при клике на ссылку, при скролле , по времени или при закрытии страницы .

Чтобы при клике на кнопку появлялось окно с информацией или формой подписки, вам нужно задать специальную ссылку для кнопки. Ссылку можно создать в блоке с всплывающим окном.

1. Откройте Библиотеку блоков → категория «Форма» и добавьте pop-up блок. Подходящие блоки: BF501N, BF502N, BF503, BF504.

3. Эта же ссылка будет в Контенте этого блока, ее можно поменять на произвольное название. Например, #popup:superpopup.

4. Теперь эту ссылку можно добавить в кнопку. Откройте меню «Контент» блока с кнопкой и в поле «Ссылка для кнопки» поставьте ссылку вида: #popup:subscription

Опубликуйте страницу или перейдите в режим предпросмотра, чтобы увидеть, как работает всплывающее окно. Оно будет появляться при клике на кнопку.

Ссылку можно ставить не только на кнопку, но и на любое слово где угодно — механизм тот же самый.

1. Выделите слово, при клике на которое должен появляться pop-up.
2. Через появившееся контекстное меню задайте ссылку на всплывающее окно.
3. Добавьте pop-up блок (категория «Форма»).
4. В меню «Контент», в поле «Ссылка» укажите ту же самую ссылку — #popup:anyword

Добавьте всплывающий блок, который должен появляться в момент пролистывания страницы. Например, форму подписки или информацию о выгодном предложении.

2. Добавьте специальный блок-триггер, который будет вызывать появление элемента при скролле. Триггер находится в категории «Другое».
Нужен блок – T183.

В меню «Настройки» триггера в поле Cookie life time укажите время (в днях), насколько запоминать посетителя, чтобы не показывать одному и тому же человеку ваш pop-up много раз.

Если нужно, чтобы pop-up появлялся не чаще, чем раз в 10 дней, поставьте значение 10. Если вы хотите, чтобы pop-up блок был показан один раз, поставьте значений 365 — в течение года, посетитель больше не увидит данный блок. Но если вы хотите, чтобы pop-up блок показывался каждый раз, когда посетитель заходит на вашу страницу, оставьте поле пустым.

4. Опубликуйте страницу. Блок появится, когда посетитель проскролит до места, где вы разместили pop-up блок.

Источник

Как сделать всплывающее окно (Pop-Up) из Zero Block в Tilda Publishing

В этой статье мы поговорим о том, как создать всплывающее окно из Zero Block в Tilda Publishing.

В Tilda Publishing есть множество функций, которые позволяют выполнить те или иные действия. Но для того, чтобы расширить стандартный функционал конструктора сайтов Tilda, есть смысл использовать javascript.

Например, именно благодаря javascript мы можем создать всплывающее окно из любого блока в Tilda, в том числе из zero block.

Как создать всплывающее окно из Zero Block.

Итак, чтобы создать pop-up в tilda publishing, необходимо выполнить несколько подготовительных действий:

1. Создайте zero block. Этот блок будет открываться как всплывающее окно.
2. Отредактируйте zero block по своему усмотрению. Добавьте контент.
3. Сразу адаптируйте контент в зеро блоке под все размеры экранов.
4. Сохраните и выйдите из редактора zero block.
5. После этого нажмите на кнопку «+» под блоком, откроется библиотека блоков.
6. Нажмите на иконку поиска.
7. В открывшемся поле введите «BF503». Это pop-up блок.
8. Добавьте блок «BF503» на страницу.
9. В блоке «BF503» нажмите на кнопку «Контент».
10. В поле «Ссылка дляpopup» придумайте и пропишите ссылку. (Пример: #popupzero)
11. Сохраните изменения.
12. Зайдите в настройки этого блока.
13. Во вкладке «ширина» выберите желаемую ширину всплывающего окна.
14. Нажмите на кнопку «+» и добавьте любую кнопку, которая будет открывать всплывающее окно.
15. Нажмите на кнопку «Контент» и пропишите такую же ссылку, как и в пункте под номером 7.

Мы создали зеро блок, который будет выступать в качестве всплывающего окна на вашем сайте в Tilda Publishing. А также стандартный блок «BF503» и кнопку, которая будет открывать наш pop-up. Обратите внимание на то, что вместо зеро блока можно использовать любой другой блок. Точно также, вместо стандартной кнопки можно использовать кнопку в zero block.

Как запустить всплывающее окно из Zero Block.

После подготовительных действий можно переходить к финальному шагу, чтобы на 100% реализовать всплывающее окно из Zero Block. Для этого следуйте инструкции:

1. После всех блоков на вашей странице, нажмите на кнопку «+».
2. В самом низу найдите пункт «Другое» и добавьте html блок.
3. Нажмите на кнопку «Контент».
4. Скопируйте и вставьте следующий код:

style> .shirina background:none !important; right: 0 !important;left: 0 !important;>  .parpaddingpadding:0 !important;> .tn-atom .t-form__errorbox-wrapper, .tn-form__errorbox-popup , .t-form-success-popup  z-index: 9999999 !important; > style> script> $( document ).ready(function()  var ZeroPopID = '#rec288543986';//ID Zero var PopWindID = '#rec288544167';//ID PopUp окна BF503 $(PopWindID + " .t-popup__container").addClass("shirina").html($(ZeroPopID)).parent(".t-popup").addClass("parpadding"); $('a[href^="#popupzero"]').click(function(e) e.preventDefault(); setTimeout(function()window.dispatchEvent(new Event('resize')); >, 10); >); $(document).on('click','a[href="#close"], '+ZeroPopID+' .t396__filter',function(e)e.preventDefault();t390_closePopup(PopWindID.replace(/[^0-9]/gim, ""));>); $(ZeroPopID).delegate(".t-submit", "click", function() setTimeout(function()if($(ZeroPopID+" .t-form").hasClass("js-send-form-success"))t390_closePopup(PopWindID.replace(/[^0-9]/gim, ""))>>, 1000);>); >);  script>

1. Сохраните изменения.
2. Зайдите в настройки зеро блока и внизу скопируйте его Id.
3. Вернитесь в html блок и вставьте id в строку 9 «//IDZero».
4. Сохраните изменения.
5. Зайдите в настройки блока «BF503» и внизу скопируйте его Id.
6. Вернитесь в html блок и вставьте id в строку 10 «//IDPopUpокнаBF503».
7. Сохраните изменения и опубликуйте страницу.

Следуйте нашим инструкциям, легко добавляйте и настраивайте всплывающие окна на своем сайте в Tilda.

Надеемся, что данная статья помогла вам понять, как использовать эту функцию на своем сайте в Tilda Publishing. И помните, что создание красивого и функционального сайта может быть легким и увлекательным процессом.

Заключение.

Следуйте нашим инструкциям, легко добавляйте и настраивайте всплывающие окна на своем сайте в Tilda.

Надеемся, что данная статья помогла вам понять, как использовать эту функцию на своем сайте в Tilda Publishing. И помните, что создание красивого и функционального сайта может быть легким и увлекательным процессом.

Узнайте, как сделать своё избранное в tilda и добавить его в zero block в нашей статье или на YouTube канале.

Источник