Как сделать popup tilda

Как создать меню сайта через Popup форму?

Хочу подкинуть вам интересную реализацию меню в новом формате в рамках стандартного функционала Тильды.

Для этого нам понадобится блок, который находится в разделе «Форма и кнопка» — BF503 (всплывающая информация).

Добавление блока

Добавляем этот блок в хедер или футер, чтобы наше будущее меню открывалось на всех страницах.

Настройки

Задаём стили попап окну, логотипу, тексту. Цвет фона я поставил светло-серым и затемнение фона непрозрачностью на 100% так же светло-серым цветом.

Редактор

• Вписываем ссылку на открытие этого меню
• В поле заголовок добавляем разделы сайта
• В поле описание добавляем второстепенную информацию (подразделы, телефоны, адрес, режим работы и т.д.)
• Добавляем 2 кнопки, разные по стилю, которые будут располагаться по одной линии на десктопе и в мобильной версии — это удобно

Открытие меню

Для открытия меню потребуется добавить ссылку на открытие попапа в любой элемент сайта. Так же попробуйте совместить меню в попап с фиксированными элементами сайта.

Готово! За 5 минут мы сделали лёгкое, стильное и нестандартное меню в Тильде.

Источник

Как сделать popup в tilda

Как создать меню сайта через Popup форму?

Хочу подкинуть вам интересную реализацию меню в новом формате в рамках стандартного функционала Тильды.

Для этого нам понадобится блок, который находится в разделе «Форма и кнопка» — BF503 (всплывающая информация).

Добавление блока

Добавляем этот блок в хедер или футер, чтобы наше будущее меню открывалось на всех страницах.

Настройки

Задаём стили попап окну, логотипу, тексту. Цвет фона я поставил светло-серым и затемнение фона непрозрачностью на 100% так же светло-серым цветом.

Редактор

• Вписываем ссылку на открытие этого меню
• В поле заголовок добавляем разделы сайта
• В поле описание добавляем второстепенную информацию (подразделы, телефоны, адрес, режим работы и т.д.)
• Добавляем 2 кнопки, разные по стилю, которые будут располагаться по одной линии на десктопе и в мобильной версии — это удобно

Открытие меню

Для открытия меню потребуется добавить ссылку на открытие попапа в любой элемент сайта. Так же попробуйте совместить меню в попап с фиксированными элементами сайта.

Готово! За 5 минут мы сделали лёгкое, стильное и нестандартное меню в Тильде.

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 в tilda

Если Вы нашли в этой статье полезную для себя информацию, поставьте лайк. Советую подписаться на мой YouTube канал «Маркетинг в огне с Алексеем Чесноковым», где Вы можете найти много лайфхаков для конструктора Tilda, Яндекс.Директ, да и в целом ознакомиться с инструментами и каналами Digital-маркетинга. Также, если у Вас возникли вопросы по тонкостям работы с конструктором Tilda – смело задавайте их под данной статьей или в комментариях под видео. Ответы на вопросы Вы сможете найти в плейлисте You Asked For Tilda на моем канале.

Помимо прочего, я, как практикующий маркетолог и преподаватель маркетинга, создал свои курсы маркетингу, интернет-маркетингу, а также у меня есть интенсив по продвижению сайтов. Переходите по ссылкам, ознакомляйтесь.

Недавно я прошла курс по digital marketing у Алексея Чеснокова. Если бы мне два месяца назад сказали, что я сделаю сайт или чат-бота, я бы посмеялась. На данный момент, появилась уверенность в своих силах, а самое главное интерес (даже жаль, что курс закончился) 🙂 Мне очень понравилось делать чат-бота, похоже изнутри на нейросоединения, а когда все работает, то чувство радости и удовлетворения от проделанной работы. Также тема E-mail рассылки, очень интересная и актуальная.
И конечно сделать полноценный сайт-визитку со всеми формами, ссылками, калькулятором, это вообще целая интересная история. Могу сказать, что было не легко с нуля все это делать и если бы не Алексей, то скорее всего оставила затею с интернет-маркетингом. Хочу поблагодарить Алексея прежде всего за полученные знания, которые однозначно пригодятся в дальнейшем, за его настойчивость, строгость, и чувство юмора:) Мой мозг начал работать в нестандартном для него режиме, удивляя самого себя.

Алексей, спасибо за принесенную непоправимую пользу!:) Мне очень повезло попасть именно к Вам на курс (чего и всем кто хочет освоить digital marketing советую) .

Прошёл курс Алексея Чеснокова по обучению интернет-маркетингу. Получил много нужной и полезной информации, приобрёл необходимые навыки. А самое главное, сразу, в процессе обучения применил их на практике, в своём деле, создавая и оптимизируя сайт, подготавливая и осуществляя рассылки, контекстную рекламу. Было очень интересно. Занятия проходили динамично и за время обучения мы смогли не только в полном объёме получить и применить знания по Тильде, Сенд-пульсу, SEO и контекстной рекламе в Яндексе, но и дополнительно прослушать лекцию о продвижении на Ютуб. Если честно, очень хотелось бы ещё про продвижение в Инстаграм узнать (это очень модное и, как говорят, эффективное направление), но программа курса этого не предусматривала…

Безусловно, рекомендую курсы Алексея (как вэбинарные, так и в записях на Ютуб) прежде всего, тем, кто только осваивает интернет-маркетинг. Он делает это очень доходчиво и терпеливо. Но и искушённые маркетологи, думаю, почерпнут для себя много нового и актуального из его уроков, т.к. интернет-сфера меняется очень быстро, а Алексей стремиться идти в ногу со временем и все изменения и новшества сразу старается отразить в своих занятиях. Спасибо большое, Алексей, за полученные знания и навыки! Успехов Вам в таком нужном и благородном деле просветительства и обучения самостоятельной творческой деятельности в интернете!

Источник

Добавление виджетов обратной связи

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

Добавьте на страницу блок BF901 (Библиотека блоков > Форма и кнопка > Виджет для заказа обратного звонка)

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

Чтобы информация отправились в сервис приема данных, в меню «Контент» отметьте галочкой подключенный сервис.

В мобильной версии клик по кнопке активирует функцию звонка в телефоне.

Чтобы функция сработала, необходимо заполнить поле «телефон».

Также вы можете добавить призыв к действию рядом с круглой кнопкой. Рекомендуемая длина фразы — два-три слова.

Клик на кнопку открывает форму, в которой можно написать сообщение и оставить email и имя.

Перейдите в ваш проект на Тильде и добавьте на страницу блок BF902N (Библиотека блоков > Форма и кнопка > Виджет для отправки сообщений)

Клик на кнопку открывает форму, в которой можно оставить email.

Добавьте на страницу блок BF903 (Библиотека блоков > Форма и кнопка > Виджет с формой подписки)

Клик на кнопку открывает окно, в котором указана персональная информация и номер телефона. Данный виджет подойдет для личных сайтов, сайта конкретного специалиста и т.п.

Добавьте на страницу блок BF904 (Библиотека блоков > Форма и кнопка > Виджет с формой подписки)

В меню «Контент» укажите номер телефона и добавьте дополнительную информацию о том, кому посетитель сайта будет звонить.

Клик на кнопку открывает окно с ссылками на социальные сети, по которым посетитель сайта может перейти.

Добавьте на страницу блок BF905 или BF905A (Библиотека блоков > Форма и кнопка > Виджет с формой подписки). Блоки отличаются по дизайну, но остальные настройки одинаковые.

Источник

Как добавить всплывашку вместо корзины в карточку товара Tilda

MANUFACT это творческое объединение специалистов в различных областях, связанных с разработкой и поддержкой веб-проектов. В нашем корпоративном блоге мы делимся тем полезным, что знаем сами. Знакомьтесь с нами неторопливо и со вкусом, делитесь впечатлениями и узнавайте новое.

В карточках товаров на Tilda (блоки ST300, ST305N, ST310N, ST315N, ST320N) кнопка в карточке обычно не работает, если не добавить на страницу корзину (блок ST100). Но что если мы хотим, чтобы кнопка в карточке товаров вела не в корзину? Как привязать кнопку в карточке к всплывашке (popup форме)? Мы посмотрели в код сайта и нашли ответ.

Оглавление

Подробнее про то, как создать интернет-магазин на Tilda читайте в нашей статье Подходит ли Tilda для интернет-магазина?

В чём проблема

Как нам сделать так, чтобы вместо корзины по кнопке открывалась форма для заполнения?

Если просто удалить корзину и добавить pop-up, кнопка становится не кликабельной и никуда не ведёт.

Мы посмотрели в код сайта. Блок с корзиной имеет ссылку oder. Поэтому вот что можно сделать.

Как мы её решили

Шаг 1

Добавить форму под карточки товара.

Важно: добавить именно после карточек товара, иначе кнопка работать не будет.

Шаг 2

Поменять ссылку #popup:myform на #order. Опубликовать страницу заново.

Шаг 3

Перезагружаем страницу и проверяем результат.

Осталось только настроить содержимое формы по нашим нуждам.

Вот такое простое, но неочевидное на первый взгляд решение мы нашли. Пользуйтесь на здоровье.

Какие ещё затруднения у вас возникают при настройке интернет-магазина на Tilda? Пишите в комментарии, и мы обязательно поможем вам разобраться.

Авторы

Редактор блога MANUFACT и автор статей о разработке и продвижении в интернете с семи годами опыта за плечами. Легенда гласит, что она знает всё. Сама же Лизавета убеждена, что никто всего не знает, а знающего человека от незнающего отличает только умение задавать правильные вопросы и находить на них ответы.

Общий опыт Ильи в веб-разработке и SEO продвижении составляет 10 лет. Работает с WordPress, Tilda, Bitrix. Знает CSS, JavaScript, HTML 5. Любит учиться новому и когда всё, а особенно сайты, работает, как часы. Убеждён, что люди изобрели одежду без пуговиц и замков не для того, чтобы мы утруждались. Любит пить чай и кофе из литровой кружки и писать статьи в блог MANUFACT.

Директор компании MANUFACT. Несмотря на занимаемую должность, Влад остаётся ведущим разработчиком и принимал участие в 80% проектов в портфолио MANUFACT. Знает HTML, CSS, JavaScript, работает с CMS (Tilda, WordPress). Влад любит, когда всё в порядке, и не любит писать статьи, но всё равно охотно делится неочевидными и полезными знаниями о веб-разработке.

Спасибо за внимание.

Пишите комментарии, делитесь статьёй в социальных сетях с помощью кнопок ниже и подписывайтесь на рассылку в нашем блоге. Мы всегда рады новым гостям!

Источник