1
Для начала нам нужно создать «Гибкий блок».
Открываем панель с блоками и в самом верху выбираем «Гибкий блок»
Открываем панель с блоками и в самом верху выбираем «Гибкий блок»
2
Теперь заходим в редактирование блока и удаляем все, что по умолчанию есть в блоке. Выделите мышью все элементы и нажмите ⌫ Backspace
3
Заливаем фон цветом, добавляем текст и кнопку
Цвет фона на примере #5a786b — добавьте это значение в поле ввода
4
Добавим картинки и нужный текст
Картинку можно копировать или добавить как новую. Чтобы копировать элемент, зайдите в настройки и нажмите «Копировать».
На кнопке к тексту мы добавили символ стрелки (→). Вы можете добавлять в текст любые символы, поддерживаемые шрифтом, а также эмодзи
На кнопке к тексту мы добавили символ стрелки (→). Вы можете добавлять в текст любые символы, поддерживаемые шрифтом, а также эмодзи
5
Итак, мы добавили в блок все основные элементы. Настроим цвет текста и скругление изображений
Сделаем заголовок курсивом. Для этого нужно выделить текст, который хотим видоизменить и во всплывающей панели выбираем символ курсива (/). Ставим межбуквенное расстояние =1, делаем все буквы заглавными
У текста поменьше и кнопки ставим межбуквенное расстояние =0,5 и делаем все буквы заглавными. Выравниваем заголовок по середине и подбираем оптимальный размер картинкам
6
Добавим анимацию в блок.
В этом примере мы используем параллакс при прокрутке на изображениях
и заголовке
В этом примере мы используем параллакс при прокрутке на изображениях
и заголовке
Разделим заголовок на два элемента, чтобы они двигались в разном направлении при прокрутке. В настройках в разделе «Параллакс» — «На компьютерах» выбираем в выпадающем списке «При прокрутке».
Настраиваем смещение по осям X и Y. В нашем случае у первого элемента ставим значение по X =–50, по Y=0, у второго — X =50, по Y=0. Закройте редактирование блока, чтобы увидеть результат.
Настраиваем смещение по осям X и Y. В нашем случае у первого элемента ставим значение по X =–50, по Y=0, у второго — X =50, по Y=0. Закройте редактирование блока, чтобы увидеть результат.
Делаем тоже самое для изображений. На том, где девушка поставим значения X=0, Y=80 и на второе изображение X=50, Y=0
Настраиваем параллакс на мобильном. В настройках в разделе «Параллакс» — «На мобильных» выбираем в выпадающем списке «При прокрутке». Настраиваем смещение по осям X и Y. Поставим значения на заголовок меньше, например –30 и 30 соответственно. И на изображения — X=30, Y=0 на верхнее и X=0, Y=60 на изображение справа
7
Адаптируем блок для различных устройств
Подбираем размер текста, перетаскиваем элементы так, чтобы они не выходили за границы контейнера
Адаптируем под остальные устройства. Вы можете менять размер элементов как угодно, при этом на декстопах они останутся такими, какими были изначально
Так блок выглядит на мобильных
9
Добавляем ссылку на кнопку и вуаля! Поздравляем, блок готов 🔥