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

Введение

Если вы используете Tilda для создания своего сайта, то, вероятно, вы уже знаете, насколько это удобный и простой в использовании инструмент. Однако, хотя Tilda и предоставляет широкий выбор готовых блоков, иногда может показаться, что вы хотите добавить что-то особенное, что выделит ваш сайт среди других. Один из способов достичь этого – создать крутые переходы между блоками в Tilda, которые сделают ваш сайт более динамичным и запоминающимся.

Рекомендации

Выберите подходящие блоки

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

Используйте анимации

Tilda имеет широкий выбор анимаций, которые вы можете использовать для создания крутых переходов между блоками. Например, вы можете использовать анимацию “Fade in” для плавного появления следующего блока на экране, или анимацию “Slide up” для движения блока сверху вниз.

Примените эффекты перехода

Другой способ создания крутых переходов между блоками – использование эффектов перехода. Tilda имеет множество таких эффектов, таких как “Zoom out” или “Rotate in”, которые могут придать вашему сайту дополнительную динамику и оригинальность.

Создайте свои переходы

Если вы не нашли подходящего эффекта или анимации, которые бы подходили для вашего сайта, вы можете создать свои переходы. Для этого вам понадобится некоторые навыки в HTML и CSS, но результат может быть действительно уникальным.

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

Делаем переходы между блоками. Анимированные круги

1. Создайте zero block.
2. Удалите стандартное наполнение блока.
3. По желанию, измените цвет фона блока для лучшей видимости перехода.
4. В поле «GRID CONTAINER HEIGHT», задайте блоку такую высоту, как будто здесь два блока, а не один. (Например: 800px)
5. Нажмите на кнопку «+» и выберите «Add Shape».
6. Расположите shape по середине, в поле «SHAPE» выберите «circle», чтобы сделать его круглым.
7. При желании, измените цвет фона shape – a.
8.   Зажмите клавишу «SHIFT» или «COMMAND», потяните за край элемента, чтобы увеличить shape пропорционально.

Теперь необходимо добавить пошаговую анимацию. Для этого:

1. Нажмите на shape левой кнопкой мыши.
2. Справа снизу найдите пункт «STEP-BY-STEP ANIMATION» и нажмите на кнопку «ADD».
3. В поле «EVENT» выберите «on Scroll».
4. В поле «STEPS» нажмите на кнопку «+ Add step».
5. В поле «DISTANCE» пропишите 5000. (Анимация сработает после того, как будет выполнен scroll до 5000 пикселей)
6. В поле «SCALE X,Y» пропишите масштабирование элемента в 1000 пикселей.
7. В поле «FIX» выберите «Fixed», чтобы сделать shape фиксированным.

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

1. Нажмите на кнопку «+» и выберите «Add text».
2. Расположите текст внутри круга.
3. Добавьте тексу пошаговую анимацию. (step by step animation)
4. В поле «DISTANCE» пропишите 2000.
5. В поле «FIX» выберите «Fixed», чтобы сделать текст фиксированным.
6. Продублируйте shape в виде круга, измените цвет и опустите вниз на 2500 пикселей от начла блока.
7. Расположите новый shape по центру.

Первый shape – первый блок, а второй shape – второй блок. Таким образом, мы сделали два блока в одном + создали необычный переход между ними.

Делаем переходы между блоками. Плавная смена заливки фона

Предлагаем еще один стильный переход. На этот раз обойдемся стандартными функциями тильды. Это переход будет работать между тремя блоками. Поэтому:

1. Создайте три любых блока одного цвета.
2. После первого блока нажмите на кнопку «+», найдите пункт «Разделитель» и выберите блок «DV11A. Переключение цвета фона».
3. Нажмите на кнопку «Настройки» и выберите желаемый цвет фона.
4. Добавьте еще один блок «DV11A» после третьего блока.
5. Нажмите на кнопку «Настройки» и выберите желаемый цвет фона.
6. Переход готов.

Делаем переходы между блоками. Облака

1. Создайте zero block.
2. Для наглядности добавьте фоновое изображение.
3. В поле «BEHAVIOR» выберите «Fixed», чтобы зафиксировать фон при прокручивании страницы.
4. Добавьте заголовок.
5. Найдите у заголовка пункт «BASIC ANIMATION».
6. В поле «FIXING» выберите один из вариантов по желанию. (Сверху, по центру, снизу)
7. Скачайте векторные файлы с облаками.
8.  Заполните ими все нижнее пространство блока таким образом, чтобы не было видно нижней границы блока.
9. Блок, следующий за блоком с облаками, должен быть белого цвета.
10. Сохраните изменения, опубликуйте страницу и насладитесь крутым и стильным переходом.

Делаем переходы между блоками. Векторная волна

1. Создайте zero block.
2. Скачайте векторный файл с волной для этого перехода.
3. Увеличьте высотку зеро блока.
4. Нажмите на кнопку «+», выберите «Add Image» и загрузите в зеро блок файл с волной.
5. Нажмите на волну левой кнопкой мыши.
6. В поле «W» пропишите 100, а вместо «px» выберите «%».
7. Нажмите на кнопку «+ CONTAINER», «WINDOW CONTAINER», в «AXIS X» выберите «Center», а в «AXIS Y» – «Top».
8. Область внутри волны – блок со своим контентом.
9. Внизу зеро блока, после волны, обязательно оставьте пустой промежуток. Это будет началом следующего блока.

Делаем переходы между блоками. Градиент

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

1. Создайте любой блок.
2. Нажмите на кнопку «Настройки».
3. В поле «Цвет фильтра в начале» выберите желаемый цвет перехода, а «непрозрачность» – 30%.
4. В поле «Цвет фильтра в конце» выберите тот же цвет, что и в начале, а «непрозрачность» – 100%.
5. Добавьте зеро блок.
6. Цвет фона сделайте таким же, каким сделали фильтры в предыдущих пунктах.
7. Наполните блок контентом, при желании.
8. Сохраните и выйдите из зеро блока.
9. Добавьте езе один блок после зеро блока.
10. Нажмите на кнопку «Настройки».
11. В поле «Цвет фильтра в начале» выберите цвет зеро блока, а «непрозрачность» – 100%.
12. В поле «Цвет фильтра в конце» выберите цвет зеро блока, а «непрозрачность» – 0%.
13. Если в каком-то блоке нет возможности настроить фильтры, конвертируйте его в zero block.
14. Переход готов.

Делаем переходы между блоками. Стрелки

1. Создайте zero block.
2. Добавьте фоновое изображение.
3. В поле «OVERFLOW» выберите «Visible».
4. Измените высоту блока. (1400px)
5.  Добавьте контент в блок и расположите в верхней его части.
6. В поле «BEHAVIOR» выберите «Fixed», чтобы зафиксировать фон при прокручивании страницы.
7. Cкачайте svg файл перехода.
8. Нажмите на кнопку «+» и выберите «Add Image».
9. Загрузите svg файл в зеро блок.
10. Нажмите на волну левой кнопкой мыши.
11. В поле «W» пропишите 100, а вместо «px» выберите «%».
12. Нажмите на кнопку «+ CONTAINER», «WINDOW CONTAINER», в «AXIS X» выберите «Center», а в «AXIS Y» – «Bottom».
13. Вручную опустите svg вниз таким образом, чтобы нижняя стрелка оказалась за пределами зеро блока.
14. Получаем два блока в одном с красивым переходом.

Делаем переходы между блоками. Анимированная волна

1. Создайте zero block.
2. В поле «OVERFLOW» выберите «Visible».
3. Добавьте html элемент. (Add HTML)
4. В поле «W» пропишите 100, а вместо «px» выберите «%».
5. В поле «H» пропишите 80, а вместо «px» выберите «%».
6. Нажмите на кнопку «+ CONTAINER», «WINDOW CONTAINER», в «AXIS X» выберите «Center», а в «AXIS Y» – «Center».
7. Скопируйте и вставьте в html блок следующий код:

Заключение

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

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