1
Для начала нам нужно создать «Гибкий блок».
Открываем панель с блоками и в самом верху выбираем «Гибкий блок»
Открываем панель с блоками и в самом верху выбираем «Гибкий блок»
2
Теперь заходим в редактирование блока и удаляем все, что по умолчанию есть в блоке. Выделите мышью все элементы и нажмите ⌫ Backspace
3
Заливаем фон цветом, добавляем текст и кнопку
Напоминаем, чтобы вызвать настройки, нажмите клавишу табуляции ↹ Tab
4
Теперь добавим картинки фоновые (синие размытые круги) и основные
Картинку можно копировать или добавить как новую. Чтобы копировать элемент, зайдите в настройки и нажмите «Копировать»
5
Итак, мы добавили в блок все основные элементы. Теперь заполним его информацией и распределим её
P.S.: В итоговом варианте текст немного заменили
6
Добавим анимацию в блок.
В этом примере мы используем параллакс при движении курсора на изображениях
В этом примере мы используем параллакс при движении курсора на изображениях
В настройках в разделе «Параллакс» — «На компьютерах» выбираем в выпадающем списке «При движении курсора». Настраиваем смещение по осям X и Y. Закройте редактирование блока, чтобы увидеть результат.
Для мобильных данный вид параллакса не работает, но есть параллакс при прокрутке и изменение скорости при прокрутке
Для мобильных данный вид параллакса не работает, но есть параллакс при прокрутке и изменение скорости при прокрутке
Смещение по осям можно настроить так, чтобы элемент двигался только по горизонтали или только по вертикали. А также по кругу или за курсором
7
Адаптируем блок для различных устройств
Подбираем размер текста, перетаскиваем элементы так, чтобы они не выходили за границы контейнера
Адаптируем под остальные устройства. Вы можете менять размер элементов как угодно, при этом на декстопах они останутся такими, какими были изначально
9
Добавляем ссылку на кнопку и вуаля! Поздравляем, блок готов 🔥