Как в тильде сделать переход из меню на другую страницу
Как сделать меню второго уровня на Тильде
Время чтения статьи около 10 минут.
Также, после статьи, есть подробная видеоинструкция
Друзья, смотрите сразу видео, оно более актуальное на данный момент
УСЛУГИ
Делаем предварительные настройки
- Google Chrome
- Яндекс.Браузер
- OPERA
- MICROSOFT EDGE
Далее, нужно залогиниться в нем
Проверьте, чтобы была установлена последняя версия
Не забывайте, что нужно правильно спроектировать меню и навигацию на сайте
Как в Тильде сделать многоуровневое (выпадающее) меню
Важный момент при выборе блока для меню, это сколько уровней навигации у вас будет
Я работаю с сайтами, у которых, по-умолчанию, будет (или есть) огромная структура. Я собираю все направления ниши и реализую ее на сайте. Это дает хороший рост в поиске. Ниже пример, структуры ателье.
В итоге, мне иногда, даже не хватает функционала меню конструктора, для проектирования сложного меню
Я стараюсь совмещать блоки ME103 до ME 303A с ME601A ME601B.
Так можно реализовать максимальный уровень вложенности
Если вам достаточно двухуровневого меню, то можете использовать только один блок меню. А внутри уже сделать подветки (подуровни)
Как в тильде сделать переход на другую страницу по кнопке
Чтобы создать новую страницу сайта в Тильде, необходимо в админ панели нажать на кнопку «Создать новую страницу«:
Затем нужно выбрать шаблон из предложенных Тильдой, содержащих базовый контент и настройки, либо выбрать пустую страницу, на которой Вы будете строить структуру сайта с нуля:
Выбрав пустую страницу, получим ее рабочую область:
Здесь мы можем добавлять на страницу различные блоки, предустановленные в Тильде, или использовать ZERO блок для отрисовки своего уникального дизайна. Отсюда мы также можем управлять настройками страницы:
Итак, создадим три страницы нашего сайта — шапка, Главная, подвал — так, как это описано в статье нашего блога «Как в Тильде настроить шапку и подвал сайта«.
Шапку и подвал сайта мы создаем отдельными страницами, так как они практически всегда присутствуют на всех страницах сайта, независимо от содержимого этих страниц. Чтобы каждый раз не создавать одинаковые элементы, мы через настройки сайта укажем, какая страница данного сайта будет выполнять роль меню, а какая будет представлять подвал сайта. Это очень удобно, чтобы не дублировать одно и то же. Редактирование таких блоков осуществляется только в одном месте, не нужно вносить изменения в шапку и подвал на каждой странице сайта.
Настройки страницы сайта, созданного в Тильде, доступны как из рабочей области страницы Тильды, так и из основной админ панели управления сайтом на Тильде, где представлен список страниц сайта:
- управлять настройками страницы,
- публиковать страницу, чтобы она была доступна в сети Интернет после создания или внесения в нее изменений,
- перейти по ссылке на страницу,
- удалить страницу.
На вкладке Бейджик можно загрузить изображение, которое будет использоваться при описании ссылки, например, в социальных сетях:
На вкладке Facebook and SEO видно, как наша ссылка будет отображаться в Фейсбуке и в результатах поисковой выдачи:
/>
А также доступны к управлению специальные мета-данные, которые можно использовать в Фейсбук или в поисковой выдаче:
/>
Здесь можно также запретить поисковиками индексировать страницу, например, если она пока находится в разработке. Кроме того, Вы можете запретить поисковикам переходить по ссылкам на странице.
На вкладке Экспорт доступен к просмотру код страницы и доступен к скачиванию архив страницы. Эта функция доступна только для аккаунтов с бизнес-планом. При этом при экспорте Вы получите статичный html-код страницы со всеми необходимыми файлами (картинки, css, js). Но сервисы — такие как, например, получение и обработка данных из форм, корзина, каталог товаров, потоки, личный кабинет — не экспортируются и работать будут только при активной подписке на Тильду:
Скрываем и показываем блоки по клику в Tilda
В Tilda есть стандартная кнопка для показа и скрытия блоков, но работает она скучно. Ни какой анимации и плавности, просто дергает экран. Мой пример работает при клике на любой объект. В качестве триггеров я использую кнопки в Zero block, немного украсив их анимацией.
UPD
Написал пару статей по данной теме, доступны по ссылкам:
Часть 1: Показываем блок меню по клику в Tilda Part 1
Часть 2: Показываем блок меню по клику в Tilda Part 2
. UPD 2.
Я не против записать видео на данную статью, но мне не очень понятно, что конкретно вас интересует, что именно не получается. Скрипт достаточно простой. Прежде чем кликнуть, напишите в комментарии или в группу в VK, какая проблема у вас возникает при работе с данным примером, отталкиваясь от этого я подготовлю материал и заодно помогу вам.
Бесплатные
аналоги Taplink
Taplink — сервис для создания дерева ссылок. Есть много других подобных ему: mssg.me, meconnect.ru, sitelite.me.
Все они решают одну задачу — упростить путь клиента от «увидел в инстаграме» до «выбрал и оплатил».
То есть вы к себе в Инстаграм в био добавляете сайт, на котором собраны ссылки на все ваши мессенджеры и, возможно, какие-то другие важные страницы: ваш сайт, ссылки на товары, услуги или курс.
Все существующие сервисы мультиссылок платные, в среднем 60-90 рублей в месяц. А если и есть бесплатный тариф, то он почти бесполезен — например, можно добавить всего один мессенджер.
90 рублей в месяц не такие великие деньги. Тем не менее, и их можно сэкономить. Сделав дерево ссылок на конструкторе сайтов Tilda.
У Tilda есть бесплатный тариф. И возможностей этого тарифа вполне хватает для того, чтобы сконструировать свой сайт с деревом ссылок.
А что особенно ценно, на Tilda вы можете задать свой дизайн страницы. Брендировать его, добавить тексты, фото, видео, безграничное количество ссылок.
Как сделать меню сайта
Адреса отдельных страниц задаются в настройках каждой страницы:
Не указывайте внутренний адрес страницы в редакторе Тильды, например:
По этому адресу открыть страницу можете только вы. В меню она работать не будет.
Чтобы сделать меню сразу для всех страниц проекта (сайта), создайте пустую страницу, добавьте на нее блок меню и настройте его. Затем перейдите в настройки сайта, на вкладку «Шапка и подвал» и назначьте эту страницу как Header. Нажмите «Опубликовать все страницы».
Чтобы сделать меню для навигации внутри страницы, пропишите в ссылках номера блоков (ссылка будет выглядеть как #rec586533845), на которые должны переходить пользователи по нажатию на пункт меню. Номер каждого блока указан в настройках блока.
Если вы хотите, чтобы в ссылке был не номер блока, а название раздела, используйте якорные ссылки.
Чтобы сделать двуязычный сайт, создайте два проекта. Обычно удобно сделать сначала версию на одном языке, а потом скопировать проект и перевести на другой язык.
Настройте «шапку» в обоих проектах, добавив в нее блок меню, в котором есть настройка языков: ME204, МЕ301, ME302, ME303, ME304, ME401, МЕ402, МЕ403. В содержании блока укажите языки и ссылки на проекты.
Добавьте на страницу блок меню.
Перейдите в Контент блока → Список пунктов меню → нажмите «Добавить пункты второго уровня» — слева появятся иконки «+» .
Чтобы добавить второй уровень, нажмите на «+», укажите заголовок подпункта и его ссылку. Нажмите на «+» несколько раз, чтобы добавить необходимое количество подпунктов.
Добавьте на страницу любой блок меню — это будет меню первого уровня. Затем добавьте блок ME601 (Меню: второй уровень).
Блок ME601 позволяет добавить подразделы к пунктам основного меню. Они будут показываться при наведении в формате выпадающего меню. В мобильных версиях меню будет открываться по тапу.
Как это работает :
1) В блоке МЕ601: пропишите ссылку вида #submenu:more
2) В основном меню: в поле ссылка, напротив пункта, к которому вы хотите сделать подразделы, укажите #submenu:more.
Важно : сам пункт основного меню кликабельным не будет. Если нужно чтобы на нем была ссылка, продублируете этот пункт в выпадающем меню.
Примечание : «#submenu:more» может быть любым словом, например: #submenu:portfolio или #submenu:aboutus
Как настроить переходы между страницами на сайте с помощью Tilda?
1. Откройте сайт в конструкторе Tilda
2. Нажмите на страницу, с которой нужно настроить переход
3. Выберите элемент, который будет использоваться как "кнопка" для перехода на другую страницу (например, изображение, текст, кнопку)
4. С помощью панели инструментов настройте элемент (например, добавьте ссылку на другую страницу)
5. Сохраните изменения
6. Перейдите на страницу, на которую нужно настроить переход
7. Повторите шаги 3-5 для элемента, который будет использоваться для возврата на первоначальную страницу.
8. Сохраните изменения.
9. Проверьте работу переходов, кликая на элементы на каждой странице.