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