Как в тильде сделать плавный переход между блоками

Плавная смена цвета фона

Чтобы сделать эффект плавной смены цвета фона, добавьте на страницу блок DV11A (категория «Разделитель») в том месте, где цвет должен поменяться. В настройках блока укажите цвет. Цвет фона страницы ниже этого блока поменяется.

Чтобы сделать переход к еще одному цвету или обратно к белому — добавьте еще один такой же блок и задайте новый цвет в настройках.

Разделы «Справочного центра»:

Как устроена Тильда
Настройки сайта
Редактирование страницы
Продвижение сайта

Домен и сертификат
Интернет-магазин
Формы приёма данных
Статистика сайта

Zero Block
Конструктор писем
Тарифы и платежи

Потоки и новости
Личный кабинет
Разработчикам

Сообщить о нарушении прав

Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму

Как связаться с поддержкой

Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на team@tilda.cc

Как сделать плавный скроллинг по якорным ссылкам?

Чтобы скролл был плавным, добавьте модификатор скролла — блок Т178 из категории «Другое». После его добавления все переходы по якорным ссылкам будут с плавной анимацией.

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

Якоря и ссылки внутри страницы

Поставить ссылку, которая ведет внутрь страницы к конкретному блоку (разделу), можно двумя способами:

1. Добавьте в нужное место специальный блок — T173 Якорная ссылка из категории Другое. В Контенте T173 пропишите желаемое название для якоря, например: «contacts». И можно теперь переходить к этому месту, в котором находится блок T173, указывая ссылку вида «#contacts» на кнопках или в меню. Сам блок невидимый.

2. Поставить ссылку на любой блок: Для этого вам нужно в адресе ссылки прописать «#rec129000». Этот уникальный номер есть у каждого блока. Его можно найти в контекстной панели Settings блока (в самом низу). Обратите внимание, что если вы скопируете страницу, то номера блоков поменяются и вам нужно будет поставить ссылки заново.

Чтобы по ссылке посетитель сайта переходил к конкретному месту на другой странице, поставьте ссылку вида: /pagename#anchorname , где pagename — это адрес страницы, на которую нужно перейти, а anchorname — название якоря, который обозначает место, куда должен быть отправлен посетитель.

Если вы хотите, чтобы переход к назначенному блоку был плавным, «скользящим», добавьте на страницу блок T178 (Библиотека блоков → Другое → Плавный скролл до локальной ссылки).

Обращаем внимание, что на странице достаточно одного такого модификатора — использование нескольких на одной странице может привести к ошибкам.

Плавный скролл в Тильде

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

Всего есть два способа добавления плавного скролла к якорным ссылкам:

Через стандартные модификаторы Тильды
Через javascript

Рассмотрим каждый способ подробнее

Плавный скролл с помощью стандартных модификаторов

На страницу в Тильде, где вы хотите добавить плавный скролл, необходимо добавить блок T178 — «Плавный скролл до локальной якорной ссылки». Он находится в Все блоки -> Другое

В настройках этого блока вы сможете:

убрать добавление #hash к адресу страницы при переходе по якорным ссылкам;
задать дополнительное смещение при клике на якорную ссылку. Это очень полезная функция, особенно если вы закрепили меню в верхней части экрана и при скролле меню будет «съедать» часть информации по якорю;
задать дополнительное смещение при клике на якорную ссылку только на мобильных устройствах.

Очень важно разместить этот блок плавного скролла в самом низу страницы.

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

Плавный скролл с помощью javascript

В этом способе вам будет необходимо применить хитрость и добавить блок HTML на страницу. Сделать это можно в разделе Все блоки -> Другое. Выберите блок HTML-код:

Зайдите в Контент блока и вставьте следующий код:

В этом коде вам нужно будет поменять nazvanie-yakorya на ваше название якорной ссылки. В коде так же можно поменять:

скорость прокрутки. Для этого в поле var speed измените значение с 2000 на больше или меньше;
дополнительное смещение при клике на якорную ссылку. Его можно изменить поле var customOffset

С помощью этого способа плавный скролл можно добавить к определенным якорям на странице в Тильде

А у вас получилось сделать плавный скролл хотя бы одним из способов?