Как в тильде сделать переход на другую страницу по кнопке

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

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

1. Создание ссылки в тексте.
2. Создание ссылки в готовом блоке.
3. Создание ссылки с элемента в Zero Block.
4. Создание якорной ссылки.

Создание ссылки в тексте

Самое простое, что может быть в Тильде. Чтобы сделать ссылку, нужно кликнуть на текст в готовом блоке, при этом вверху появится панель с функциями. Выделите мышкой часть текста, которую вы хотите сделать ссылкой и нажмите в верхнем меню на иконку скрепки. В поле «Укажите ссылку» введите относительную (если это ссылка на внутреннюю страницу на Тильде) или абсолютную (если это внешняя ссылка) ссылку. Отметьте чекбокс «Открыть ссылку в новой вкладке», если это внешняя ссылка.

Ниже вам будут доступны дополнительные настройки: цвет текста, цвет и толщина линии, rel=»nofollow».

Создание ссылки в готовом блоке

Чтобы на Тильде сделать ссылку в любом готовом блоке, необходимо навести на блок и нажать на кнопку «Контент» в левом верхнем углу блока. В зависимости от категории блока (меню, плитка и ссылка, форма и кнопка и т. д.) нужно выбрать поле, в котором предусмотрено место для добавления ссылки. В указанное место необходимо добавить ссылку вручную, либо нажать на ссылки «Выбрать страницу» или «Выбрать блок». Здесь также можно отметить чекбокс «Открыть в новой вкладке», если ссылка должна открываться в новой вкладке.

Создание ссылки с элемента в Zero Block

В зависимости от того, с какого типа элемента в Zero Block нужно сделать ссылку, мы выполняем различные действия. Принцип добавления ссылки в текстовый блок такой же как для готового блока. Необходимо дважды кликнуть по текстовому блоку и в открывшейся панели нажать на иконку скрепки. Далее появляется панель, описанная в главе «Создание ссылки в тексте».

Чтобы на Тильде сделать ссылку с элементов Image и Shape, необходимо кликнуть на элемент левой кнопкой мыши, затем нажать на кнопку Settings в правом нижнем углу. В открывшемся окне открываем секцию Link и указываем ссылку в поле URL. Также можно настроить дополнительные параметры: Target (открывать или нет в новом окне) и Rel Nofollow (запрет перехода по ссылке для поискового робота).

Для элемента Button все идентично предыдущим двум элементам, но в окне настроек отсутствует секция Link. Ссылка указывается в поле URL.

Создание якорной ссылки

Бывают ситуации, когда ссылка должна вести не на отдельную страницу, а на конкретный блок внутри существующей или отдельной страницы. В этом случае нам на помощь приходит якорная ссылка. Чтобы на Тильде сделать якорную ссылку, необходимо в Библиотеке блоков нажать на категорию «Другое» и там выбрать блок Т173. Разместите его перед тем блоком, на который вы хотите ссылаться.

Наведите на созданный блок и в левом верхнем углу нажмите на «Контент». В поле «Имя якорной ссылки» укажите латиницей название для якорной ссылки. Хорошо, если оно будет по смыслу соответствовать блоку, на который вы хотите ссылаться.

Далее переходите к тому элементу, который должен ссылаться на выбранный блок. Это может быть один из элементов, описанных в предыдущих разделах. Необходимо указать имя якорной ссылки, поставив перед ним значок решетки. Пример якорной ссылки: #contacts. Если вы хотите указать ссылку на блок на другой странице, вы просто добавляете перед якорной ссылкой адрес этой страницы: /path/#contacts

Возможен еще один вариант. Вы можете навести на блок, на который хотите сослаться и в левом верхнем углу нажать на «Настройки». Необходимо прокрутить в самый низ окна и скопировать значение в поле Block ID — это имя уникальной якорной ссылки блока. Ее необходимо прописать в том месте, откуда вы хотите сделать якорную ссылку.

Если у вас остались вопросы о том, как на Тильде сделать ссылку, пишите их в комментариях к этой статье.

Адреса страниц и ссылки на другие страницы

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

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

Как сделать пагинацию для блога

Перейдите в категорию «Кнопка» и добавьте блок BF703. В контенте блока необходимо указать ID блоков, которые нужно скрывать/показывать при нажатии на кнопку. Номера указываются через запятую и без пробела. ID блока можно посмотреть в настройках каждого блока, в самом низу. Пример: 82765389,84565389,62765389

Разбить контент на несколько страниц и добавить навигацию между ними

Если скролл страницы становится слишком длинным, перенесите часть контента на новую страницу, и добавьте навигацию: предыдущие / следующие. Как это удобно сделать:
1) Скопируйте текущую страницу. Настройки страницы > Действия > Дублировать страницу.
2) На текущей странице удалите все устаревшие посты. Определить актуальность постов можно с помощью Яндекс.Метрики. На карте скроллинга будет видно как далеко пролистывают посетители вашу страницу. Там, где начинается синий (очень мало посетителей), можно делать переход на другую страницу.

3) На скопированной странице удалите верхние посты и оставьте только ваш «архив». В настройках страницы пропишите адрес страницы, опубликуйте.
4) На обеих страницах добавьте блок ТЕ300 (категория «Плитка и ссылка») и укажите перекрестные ссылки. Также можно добавить две кнопки, блок BF102 (категория «Кнопка»).

Как сделать меню для многостраничного сайта в Tilda

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

Веб-дизайнер. Помогает бизнесу создавать эффектные и удобные сайты на Tilda.

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

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

Подготовка главной страницы

Чтобы правильно настроить меню, сначала создадим страницу и несколько стандартных блоков.

Как создать страницу с базовыми блоками

• Зайдите в настройки своего сайта на Tilda и нажмите кнопку «Создать новую страницу». В появившемся окне выберите «Пустая страница».
• Внутри самой страницы нажмите на чёрную кнопку «Все блоки» и добавьте любые из них. Например: «Обложка», «О проекте», «Преимущества» и «Контакты».

Страница готова. Теперь нужно её минимально настроить, чтобы будущее меню работало:

1. В правом верхнем углу нажмите на кнопку «Настройки».

2. Дайте название страницы и укажите её URL. Например, «Атриксис» и index.

Если на вашем сайте только одна страница, она по умолчанию будет главной — около неё появится иконка с . В таком случае достаточно указать только имя.

3. Нажмите кнопку «Сохранить».

Как создать меню на главной странице

1. Нажмите на чёрную кнопку «Все блоки» и выберите подходящее меню в соответствующей вкладке. Например, МЕ201. Если меню появилось не вверху страницы, переместить его можно с помощью стрелки ↑.

Если вы знаете номер конкретного блока и не хотите долго искать его по категориям, его можно ввести в поиск в левом верхнем углу библиотеки блоков.

2. Наведите курсор на ваше меню и нажмите кнопку «Контент».

3. В появившемся окне откройте «Список пунктов меню» и укажите названия ваших блоков из главной страницы. Чтобы пунктов было больше трёх, нажмите на кнопку «Добавить пункты меню».

4. Если вам нужно поменять пункты меню местами, зажмите правой кнопкой мыши иконку и тяните её вверх или вниз.

5. Нажмите кнопку «Сохранить и закрыть».

Чтобы меню работало, нужно привязать каждый пункт к конкретному блоку:

• Наведите мышку на ваше меню, нажмите кнопку «Контент» и откройте список пунктов меню.
• Наведите курсор на любой пункт меню и под правым полем нажмите на «Выбрать блок».
• Выберите на сайте нужный блок.
• В меню появится новая строка с хештегом # в начале — это ссылка на выбранный вами пункт меню.

Пункт «Блог» будет вести на отдельную страницу, поэтому пока ничего здесь не выбирайте.

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

Если на вашем сайте есть отдельная страница блога, важно добавить на неё ссылку в меню, иначе её никто не найдёт.

Чтобы научиться это делать, создайте ещё одну страницу на сайте:

• В редакторе главной страницы в левом верхнем углу около названия сайта нажмите на иконку . В появившемся меню выберите «Создать новую страницу».
• В появившемся редакторе страницы выберите пустую и нажмите на кнопку «Все блоки».
• Выберите любой блок из категории «Новости и потоки», например FD101.
• Чтобы переименовать страницу, нажмите на кнопку «Настройки» в правом верхнем углу. Затем укажите в названии «Блог», а в URL — blog. Сохраните изменения и опубликуйте страницу.

Вернитесь на главную и откройте редактор меню. В строке «Блог» нажмите «Выбрать страницу», укажите свою страницу с блогом и сохраните её.

Обратите внимание на разный синтаксис. Если ссылка из меню ведёт на блок внутри той же страницы, она прописана через хештег — #rec. Если на другую страницу, то через слеш — /blog.

Ссылку на другую страницу можно указать самостоятельно — просто напишите её адрес в соответствующем поле. Но в таком случае не нужно указывать её полный путь, иначе при смене доменного имени этот пункт работать не будет. Например, вместо mywebsite.com/blog нужно указать просто /blog.

Как поставить одно меню на все страницы

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

• Создайте новую страницу и выберите нужное меню. Например, ME204.
• Пропишите в настройках страницы название и URL — header.
• Наведите мышку на ваше меню и нажмите кнопку «Контент».
• В появившемся окне откройте «Список пунктов меню» и укажите названия страниц, на которые будет вести меню.
• У каждого пункта меню нажмите «Выбрать страницу» и выберите её.
• Сохраните и опубликуйте страницу.

Как привязать меню сразу ко всем страницам

• Перейдите в настройки сайта.
• Откройте вкладку «Шапка и подвал».
• Выберите в графе «Назначить шапку» страницу header.
• Сохраните изменения.

Теперь в самом низу списка страниц сайта появился отдельный блок «Шапка и подвал», где лежит ваше меню. Его можно отредактировать в любой момент:

Если нужно сделать так, чтобы это меню не отображалось на какой-то конкретной странице, то можно её отключить.

• Перейдите в настройки страницы, где не должно показываться общее меню.
• Зайдите в «Настройки» этой страницы в правом верхнем углу.
• Перейдите во вкладку «Дополнительно».
• Поставьте галку напротив пункта «Не использовать шапку на этой странице».
• Сохраните изменения.

Как настроить меню для многоязычного сайта

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

Меню, которые поддерживают смену языков: ME204, ME301, ME302, ME303, ME304, ME401, ME402, ME403.

• Создайте страницу и добавьте меню с несколькими языками. Например, МЕ303.
• Наведите курсор на блок с меню и нажмите кнопку «Контент».
• Перейдите во вкладку «Языки» и укажите нужные, например Ru и En.
• Прикрепите ссылки на соответствующие страницы: /ru и /en.
• Сохраните изменения.
• Перейдите в настройки страницы.
• Укажите URL — ru.
• Сохраните изменения.

Чтобы не перевёрстывать страницу под нужный язык, сделайте её дубликат и затем просто перепишите текст:

• Зайдите в «Настройки» в правом верхнем углу страницы.
• Выберите пункт «Действия».
• Выберите «Дублировать страницу».
• Перейдите на новую страницу.
• Измените текст страницы с одного языка на другой (например, с русского на английский).
• Зайдите в «Настройки».
• Измените название страницы и URL. Например, напишите Food travel и en.
• Сохраните и опубликуйте страницу.

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

Как настроить сокращённое мобильное меню

Если вам не нравится, как выглядит стандартная мобилизация вашего меню, то его можно заменить. Например, можно сделать, чтобы в десктопной версии стояло меню ME204, а на мобильных экранах — ME401.

В Tilda есть возможность показывать блоки на экранах определённой ширины, а на других скрывать. С помощью этой особенности и нужно настроить дополнительное мобильное меню.

• Выберите в библиотеке блоков нужное меню. Например, ME401.
• Укажите в нём те же ссылки на блоки и страницы, что и в главном меню.
• Наведите курсор на блок с главным меню и нажмите на «Настройки».
• Настройте этому блоку диапазон видимости «больше 980 px».
• Сохраните изменения.
• Наведите мышку на блок меню для мобильных экранов и нажмите на «Настройки».
• Настройте диапазон видимости «до 980 px».
• Сохраните изменения.

Теперь на телефонах и планшетах будет отображаться меню ME401, а на больших мониторах — меню ME204.

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

Больше о Tilda

• Осваиваем конструктор Tilda: делаем сайт-визитку с нуля
• Учимся работать с Tilda: создание отзывчивого дизайна в Zero-блоках