Что такое popup в тильде
Просим обратить внимание: техническая поддержка 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 у всех изображений, иначе они могут не прогрузиться.
Как настроить popup в tilda
Pop-up блоки
Ссылку можно ставить не только на кнопку, но и на любое слово где угодно — механизм тот же самый.
1. Выделите слово, при клике на которое должен появляться popup
2. Через верхней панель редактирования задайте ссылку вида #popup:anyword
3. Добавьте popup блок (категория «Форма и кнопка»)
4. В меню «Контент», в поле «Ссылка» укажите ту же самую ссылку — #popup:anyword
1. Добавьте popup блок, который должен появляться, когда человек пролистывает страницу, например, форму подписки или социальный плагин для facebook.
В меню «Контент», пропишите ссылку вида: #subscribepopup (слово может быть любым).
В меню «Настройки» в поле Cookie life time укажите время (в днях), насколько запоминать посетителя, чтобы не показывать одному и тому же человеку ваш popup много раз.
Если нужно, чтобы popup появлялся не чаще, чем раз в 10 дней, поставьте значение 10. Если вы хотите, чтобы popup блок был показан один раз, поставьте значений 365 — в течение года, посетитель больше не увидит данный блок. Но если вы хотите, чтобы popup блок показывался каждый раз, когда посетитель заходит на вашу страницу, оставьте поле пустым.
Как создать меню сайта через Popup форму?
Хочу подкинуть вам интересную реализацию меню в новом формате в рамках стандартного функционала Тильды.
Для этого нам понадобится блок, который находится в разделе «Форма и кнопка» — BF503 (всплывающая информация).
Добавление блока
Добавляем этот блок в хедер или футер, чтобы наше будущее меню открывалось на всех страницах.
Настройки
Задаём стили попап окну, логотипу, тексту. Цвет фона я поставил светло-серым и затемнение фона непрозрачностью на 100% так же светло-серым цветом.
Редактор
Открытие меню
Для открытия меню потребуется добавить ссылку на открытие попапа в любой элемент сайта. Так же попробуйте совместить меню в попап с фиксированными элементами сайта.
Готово! За 5 минут мы сделали лёгкое, стильное и нестандартное меню в Тильде.
Как настроить popup в tilda
Берем из раздела «Ссылка и плитка» блок TE01N. Открываем панель «Контент». Добавляем в каждую карточку своё фото и вместо ссылок пишем: #popup:work1, #popup:work2 и т. п. — это магические слова, благодря, которым при клике смогут открываться попапы. Вместо work1, work2 можно писать что угодно, главное потом в настройках попапа прописать тоже самое.
Тепрь идем в раздел «Формы и кнопки» и добавляем блок BF503. Открываем у него панель «Контент», пишем в пункте « Ссылка » #popup:work2, далее пишем краткий текст нашей работы, название кнопки и ссылку на страницу с подробным описанием вставляем в поле «Ссылка для кнопки».
Для второй работы используем из раздела «Галерея» блок GL08 — попап с галереей. Открываем панель «Настройки», находим там пункт «Управляющий элемент» и выбираем «Только точки». Там же задаем цвет для попапа, текста и управляющих элементов. Сохраняем. Потом открываем панель «Контент» и указываем #popup:work2 — этим мы привязываем открытие попапа ко второй работе.
Что такое popup в тильде
Если Вы нашли в этой статье полезную для себя информацию, поставьте лайк. Советую подписаться на мой YouTube канал «Маркетинг в огне с Алексеем Чесноковым», где Вы можете найти много лайфхаков для конструктора Tilda, Яндекс.Директ, да и в целом ознакомиться с инструментами и каналами Digital-маркетинга. Также, если у Вас возникли вопросы по тонкостям работы с конструктором Tilda – смело задавайте их под данной статьей или в комментариях под видео. Ответы на вопросы Вы сможете найти в плейлисте You Asked For Tilda на моем канале.
Помимо прочего, я, как практикующий маркетолог и преподаватель маркетинга, создал свои курсы маркетингу, интернет-маркетингу, а также у меня есть интенсив по продвижению сайтов. Переходите по ссылкам, ознакомляйтесь.
Недавно я прошла курс по digital marketing у Алексея Чеснокова. Если бы мне два месяца назад сказали, что я сделаю сайт или чат-бота, я бы посмеялась. На данный момент, появилась уверенность в своих силах, а самое главное интерес (даже жаль, что курс закончился) 🙂 Мне очень понравилось делать чат-бота, похоже изнутри на нейросоединения, а когда все работает, то чувство радости и удовлетворения от проделанной работы. Также тема E-mail рассылки, очень интересная и актуальная.
И конечно сделать полноценный сайт-визитку со всеми формами, ссылками, калькулятором, это вообще целая интересная история. Могу сказать, что было не легко с нуля все это делать и если бы не Алексей, то скорее всего оставила затею с интернет-маркетингом. Хочу поблагодарить Алексея прежде всего за полученные знания, которые однозначно пригодятся в дальнейшем, за его настойчивость, строгость, и чувство юмора:) Мой мозг начал работать в нестандартном для него режиме, удивляя самого себя.
Прошёл курс Алексея Чеснокова по обучению интернет-маркетингу. Получил много нужной и полезной информации, приобрёл необходимые навыки. А самое главное, сразу, в процессе обучения применил их на практике, в своём деле, создавая и оптимизируя сайт, подготавливая и осуществляя рассылки, контекстную рекламу. Было очень интересно. Занятия проходили динамично и за время обучения мы смогли не только в полном объёме получить и применить знания по Тильде, Сенд-пульсу, SEO и контекстной рекламе в Яндексе, но и дополнительно прослушать лекцию о продвижении на Ютуб. Если честно, очень хотелось бы ещё про продвижение в Инстаграм узнать (это очень модное и, как говорят, эффективное направление), но программа курса этого не предусматривала…
Безусловно, рекомендую курсы Алексея (как вэбинарные, так и в записях на Ютуб) прежде всего, тем, кто только осваивает интернет-маркетинг. Он делает это очень доходчиво и терпеливо. Но и искушённые маркетологи, думаю, почерпнут для себя много нового и актуального из его уроков, т.к. интернет-сфера меняется очень быстро, а Алексей стремиться идти в ногу со временем и все изменения и новшества сразу старается отразить в своих занятиях. Спасибо большое, Алексей, за полученные знания и навыки! Успехов Вам в таком нужном и благородном деле просветительства и обучения самостоятельной творческой деятельности в интернете!
Как добавить всплывающий баннер pop up по таймеру на сайт на Тильде.
Pop-up, настройка всплывающих окон: появление при клике, скролле, по времени, закрытии | ТильдаПодробнее
Как сделать (настроить) всплывающее окно (pop-up) по времени (через определенное время)? | ТильдаПодробнее
Как сделать (настроить) всплывающее окно (pop-up) при клике на ссылку или кнопку? | ТильдаПодробнее
Как сделать pop-up на Tilda (всплывающая форма)Подробнее
ПОП АП НА ТИЛЬДЕ. ДЕЛАЕМ ПОП АП ИЗ ЗЕРО БЛОКА НА ТИЛЬДЕ!Подробнее
Как сделать (настроить) всплывающее окно (pop-up) при закрытии сайта (страницы)? | ТильдаПодробнее
Как сделать (настроить) всплывающее окно (pop-up) при скролле (скроллинге)? | Тильда КонструкторПодробнее
Как создать popup всплывающее окно из ZeroBlock для TildaПодробнее
Модальные окна (попапы) на HTML CSS JavaScript. Всплывающие окна. Как это сделать?Подробнее
Как сделать всплывающее PopUp окно | Рекламный баннер растяжка | Плагин PopUp MakerПодробнее
Как сделать всплывающее окно (pop-up) из zero block в тильда. Tilda Publishing, зеро блокПодробнее
ВСПЛЫВАЮЩЕЕ POPUP ОКНО НА ЧИСТОМ CSSПодробнее
🚀 Таймер обратного отсчёта на лендинг за 2 минуты + разместить на TildaПодробнее
Всплывающее окно Pop-up из Zero блока. ТильдаПодробнее
Как установить всплывающее окно на сайт с помощью бесплатного плагина Popup MakerПодробнее
ТАЙМЕР НА ТИЛЬДЕ ИЗ ZERO BLOCK. ДЕЛАЕМ ТАЙМЕР НА ТИЛЬДЕ ПРОСТОПодробнее
Как сделать всплывающее окно, Popup из Zero Block на Tilda за 2 минутыПодробнее
Popup из Зеро блока. Как сделать всплывающее окно из зеро блока в ТильдеПодробнее
Как сделать всплывающее окно. Настройки Popup MakerПодробнее
Интеграция в Tilda сервиса BookForm от Яндекс. Мануал для ленивых
Привет! Не так давно появилась задача на сайт психотерапевта, который сделан на Тильде, интегрировать какой-то сервис, позволяющий клиентам самостоятельно записываться онлайн в календарь доступных дат. Эти даты должен был сформировать сам терапевт, добавить возможные услуги и варианты оплаты.
Перебрав несколько сервисов, я предложил клиенту Букформ от Яндекса. Мне показался он достаточно удобным в функционале и простым в интеграции. Плюс с точки зрения фискальной работы с налоговой там всё устроено очень просто. Большой плюс сервиса, что вы нём уже предусмотрены разные варианты поставщиков услуг: аренда студий, запись к терапевту, ремонт машин и т.д. Я буду писать о задаче, которую решал сам, но такой алгоритм можно применить ко всем услугам.
1. Заходим на сайт Bookform и регистрируемся. Шаги там простые (название компании, электронная почта, телефон, имя пользователя). Можно зарегистрироваться полностью, или зайти через аккаунт Яндекса, если он у вас есть.
2. Проходим этап настройки услуги (название, фотография опционально, карта с указанием места предоставления услуги)
3. Этап настройки календаря, продолжительности услуги по времени и её стоимости. Справа увидите примерный виджет, который будут видеть будущие клиенты.
4. Далее попадаете в окно с виджетом. Один уже создан по умолчанию и вам просто надо на него нажать.
5. Попадаем в поле выбора нужного нам вида виджета. Я занимался интеграцией на сайт, поэтому взял виджет для сайта. Он так и называется «Встроенный виджет для сайта». Он прямо посредине. После его выбора, внизу появляются 2 поля с кодами с кнопками «Скопировать код». Именно они нам и нужны для интеграции.
2. Теперь код номер 2 из Букформа. Я хотел сделать всплывающее окно, чтобы при нажатии на кнопку «Записаться» на сайте именно в этом окне был виджет. За основу я взял идею «ПопАп из Зеро Блока». Что делал дальше. По шагам..
1. Добавил блок BF503. В его настройках ширину установил 100%
2. Добавил ЗероБлок. Внутри него убрал цвет фона. Нажал «+» слева сверху экрана добавил поле для кода «Add HTML»
3. Сделал нужную мне ширину и высоту этого блока, адаптировал их для всех разрешений экрана. Внутрь этого блока вставил код номер 2 из Букформа.
4. Ниже Зероблока поставил 123 блок и добавил туда код (он ниже), в котором заменил #rec на мои значения. Их можно найти в настройках блоков, которые добавили в предыдущих шагах.
На нужную мне кнопку на сайте повесил ссылку вида #popup:usluga (это название, usluga, должно быть присвоено блоку BF503)
Всё. Теперь при нажатии на нужную мне кнопку на сайте появляется виджет от БукФорма с календарём для записи или оплаты.
Задача решена. Может быть ее можно решить и проще, но у меня в голову пришел только такой вариант.
За код «Зеро в Поп Апе» спасибо Диме Храбалову из Mo-Tilda. Ссылка на страницу исходник:
Спасибо ребятам из саппорта БукФорма за быструю обратную связь.