Как сделать кнопку назад в тильде

Обновлено: 18.05.2024

Немного покопавшись в интерфейсе, нашел способ создавать пошаговые лендинги на Тильде в рамках одной страницы (чтобы не плодить по 10 одинаковых страниц). Получается примерно вот такая штука. Кому интересно — держите инструкцию: )

Поскольку на тильде есть ограничение в 500 страниц, мне не слишком хотелось создавать по 10 страниц и связывать их кнопкой перехода. Мало того, что это заняло бы приличную часть ресурсов (ведь количество страниц ограничено), дык еще и путался бы постоянно. Да и хотелось потенциально улучшить поведенческие факторы для SEO в рамках одной страницы, а не создавать десяток обрубков.

Чтобы все было в рамках одного URL — логично предположить, что все блоки, по которым будет гулять пользователь — должны находится в рамках одной страницы. Я использовал блок BF303 и в настройках блока указал высоту "100vh" — чтобы он занимал всю высоту экрана пользователя. Ниже на скрине видно, что экран 2 идет сразу после экрана 1, никаких разделителей или еще чего-то такого.

Таким образом в рамках одной страницы создаем все шаги по очереди.

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

Но для начала поясню, что такое переменные. Переменные — это специальный параметр (get, если по научному) в ссылке, при помощи которого можно отслеживать статистику, подменять контент, работать с базами данных и вообще куча всего. Состоит из двух частей — ключа и значения. Я не программист, поэтому мог криво объяснить, но самый популярный среди маркетологов get-параметр — это UTM.
?utm_source=google — это переменная с ключом "utm_source" и значением "google".
Добавляется он вот так, после знака вопроса или знака &:

Надеюсь понятно объяснил, если нет — спрашивайте в комментах: )

Итак, вернемся к Тильде. Надо добавить возможность заменять при помощи переменных контент на нашем лендинге.

Сейчас кликабельные ссылки на сайтах считают нормой, они везде: внутренние переходы по страницам, звонок по телефону, письмо на почту, внешние переходы в мессенджеры. Верстальщик, программист или контент-менеджер разберётся с этим в два счёта, но что делать обычному пользователю? Давайте разбираться как сделать ссылки в Тильде. Переходите в свой аккаунт tilda и начём.

Как сделать ссылку на блок в Тильде

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

Как сделать ссылку на другую страницу

Ссылку на другую страницу сделать не сложнее, чем на блок. Адрес вы можете найти в списке страниц вашего сайта:

Tilda: список страниц

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

Tilda: выбор страницы

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

Tilda: список ссылок на страницу

Абсолютно таким же образом можно сделать ссылку на кнопке в Тильде, открываете Контент, выбираете страницу, блок или вписываете адрес от руки:

Tilda: ссылка на кнопку

Как сделать якорную ссылку в Тильде

Легко! Для этого есть специальный блок в разделе Другое:

Tilda: блок якорной ссылки

Есть одна хитрость, чтобы сделать якорную ссылку в зеро-блоке, ведь там то готовых блоков нет, а блоки бывают длинные и вставить ссылочку бы посередине. И вот как это обойти. Зайдите в нужный зеро-блок, создайте блок html-кода и поставьте его в то место, куда должна вести ссылка, вот так:

Tilda: якорная ссылка в зеро-блоке

Настройте как надо на всех разрешениях и якорная ссылка будет работать отлично.

Как сделать ссылку на попап в Тильде

У каждого попапа (всплывающего окна) в конструкторе Tilda есть название, которое вы указывали при создании блока.

Как сделать ссылку на попап в Тильде

Вписывайте это название в любую кнопку или текстовую ссылку и готово. Вот как это выглядит в зеро-блоке:

Как прописать ссылку на попап в Tilda

Как сделать ссылку на телефон и почту в Тильде

Пожалуй самые распространённые по популярности функция вставки ссылок — это телефон и почта. Сами ссылки на звонок и отправку письма устанавливаются аналогично предыдущим пунктам: в кнопке, в зеро-блоке, в тексте, но сам адрес отличается:

Поменяйте наши данные на свои и смело вставляйте на ваш лендинг, например так можно сделать текст ссылкой:

Конструктор Tilda: ссылка на телефон и почту

Тут вы можете сделать открытие в новом окне, покрасить ссылку или её обводку. Сохраняйте и опубликуйте страницу.

Как сделать ссылку на Инстаграм, Ватсап, Вайбер, Телеграм в Тильде

Осталось разобраться только с мессенджерами. С ними немного сложнее, потому что Телеграм блокировали и развелось очень много альтернативных способов, а с вайбером у пользователей постоянно какие-то неполадки со ссылками. Укажу вам на те ссылки, которые рекомендует использовать Тильда:

Поставить эти ссылки можно двумя способами:

  1. сделать текст ссылкой в Тильде
  2. Использовать готовый блок виджета с Мессенджерами

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

Tilda: текст ссылкой на ватсап

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

Tilda: виджет мессенджеров настройки

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

  • Кликабельные ссылки
  • На любой блок
  • На другую страницу
  • Якорная ссылка
  • На попап
  • На телефон и почту
  • На мессенджеры

Лучший хостинг для вашего сайта

Используем для всех своих проектов, советуем и вам.
Обращайтесь, перенесём сайт на Beget.

Как сделать автоматическое переключение блока ТE-800

Как сделать градиент заголовка и текста в ZeroBlock

Как сделать scrollbar для текстового блока в ZeroBlock

Как создать свой фон в стандартных блоках на Tilda

Как создать свою кнопку в форме ZeroBlock на Tilda

Как создать кнопку с градиентом в ZeroBlock на Tilda

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

Как сделать эффект блика для кнопки в Zero Block на Tilda



Нажимая кнопку, вы принимаете Положение и Согласие на обработку персональных данных

Создание кнопок СТА – один из важных аспектов при создании посадочных страниц. Специалисты дают рекомендации, советы, как создавать лендинг.

В уже имеющийся блок

Как добавить кнопку для лендинга на Tilda

Если элемент с призывом к действию должен находиться в середине страницы, в настройке “Выравнивание заголовочной секции блока” следует выбрать опцию “По центру”.

Добавление отдельным блоком

В открывшейся вкладке есть возможность выбрать разные формы для создаваемой кнопки: простой CTA, кнопка с призывом, форму для заполнения с кнопкой и многое другое. Следует помнить, что большая часть контента из этой категории доступна на оплаченном аккаунте.

Работа с конструктором Tilda очень проста и доступна каждому, потому что не требует никаких особых навыков и умений.

Читайте также: