Желаете заставить посетителя кликнуть по кнопке? А может задержать над изображением а потом перейти по ссылке? В любом случаи вам нужно помочь клиенту кликнуть на кнопку. А как же это сделать? Создать блок с фото, добавить изображение, создать для данных элементов свой эффект и не просто эффект, а интересный и захватывающий. А на изображение возможно еще и наложить фильтр, подобрать типографику итд. Ох как все сложно, долго и муторно 🙁 Не стоит расстраиваться, ведь в конструкторе сайта есть специальный видже,т который поможет нам все это сделать лишь "передвигая ползунки". Ваш призыв к действию получится красивым, захватывающим и интересным.
Виджет "Призыв к действию" это самый ожидаемый виджет 2018 года. Его основное предназначение это вызвать у посетителя какое либо действие с помощью блока в котором текст и изображение меняется под действие спецэффектов. Эффекты начинают работать когда мы наводим курсором мыши на блок призыва.
Эффекты, анимация, фильтры и еще раз эффекты )) Это краткое описание свойств виджета "Призыв к действию". А ведь так оно и есть. В данный виджет мы вносим свой контент, а дальше работаем с эффектами, настраиваем анимацию. Вы скажете, что данный виджет похож на предыдущий "Флип-бокс", но это не так. Во первых кнопка действия видна сразу, во вторых, расположение контента может быть отдельным т.е внизу, слева или справа, а в третьих намного больше комбинаций эффектов и даже есть фильтр наложения на изображение. Все это делает его уникальным и просто необходимым при создании сайта.
Первое изображение это вид виджета по умолчанию. Остальные примеры вы можете посмотреть в блоге создателя конструктора Elementor.
Различных настроек у виджета очень много. Многие из них будут в новинку для вас.
Содержание
- Изображение
- Стиль - выбор стиля виджета призыва между классическим и преекрытие (перекрытие это изображение позади текста)
- Макет - при классическом стиле можно выбрать расположение изображения (слева, над текстом, право)
- Размер изображения - выбор размера изображения из предустановленных, а так же задание своего размера при необходимости.
- Содержимое
- Графический элемент - возможно задать графический элемент (выбор между изображением и иконкой)
- Заголовок и описание - установка текстов для заголовка и описания виджета.
- HTML-тег заголовка - возможность установки другого тега для заголовке.
- Текст кнопки - текст для кнопки призыва к действию, например Купить
- Ссылка - ссылка для кнопки призыва к действию.
- Лента
- Заголовок - заголовок для ленты (по умолчанию отсутствует, т.е если текста нет, то и лента не отображается )
- Позиция по горизонтали - позиция ленты слева или справа.
Стили
- Блок - для блока виджета возможно задать минимальную высоту, выравнивание содержимого и позиции по вертикали, а также внутренние отсутпы. А для изображения возможно задать минимальную ширину и высоту в пикселях или процентах.
- Содержимое - для содержимого возможно изменить типографику и отступы, это касается как заголовка так и описания. А вот для цвета выделена отдельная группа настроек т.е мы может задать разный цвет для фона, описания, заголовка и кнопки. При это задать можно в отдельности для разного состояния (при наведении и обычное состояние)
- Кнопка - для кнопки можно изменить цвет, фон, цвет и толщину границы, а так же скругление углов. Для активного состояния доступны для изменения только цвет.
- Лента - доступно изменения цвета фона, цвета текста, расстояния от угла, типографика и тень для ленты.
- Эффекты при наведении
Для каждого стиля блока призыва доступны свои эффекты и настройки. Поэтому рассмотрим каждый в отдельности.
Классический стиль
- Последовательная анимация - если включить опцию, то анимация будет происходить последовательно, т.е друг за другом (сначала изображение и заканчивается кнопкой)
- Анимация при наведении - как будет анимироваться изображение при наведении на блок. Доступны анимации типа увеличения или уменьшения и сдвига в разные стороны, например влево.
- Цвет перекрытия - цвет для наложения фона на изображение.
- Режим наложения - режим наложения цвета. Доступны различные способы смешения цвета с изображением такие как замена цвета, осветление основы, затемнение цветом, смешивание итд.
- CSS фильтры - фильтры для изображения, т.е возможно изменить свойства размытия, яркости, контрастности и насыщенности (цветность). Все доступно и для состояния при наведении.
- Длительность эффекта (мс.) - как долго или быстро будет длится эффект. По умолчанию это 1,5 секунды.
Стиль перекрытие
Для содержимого
- Анимация при наведении - анимация текстового содержимого. Доступны различные виды анимации и их типы. Например тип анимации "Появление" это когда изначально содержимое скрыто и появляется лишь при анимации, т.е при наведении на объект. Появление может быть разным, начиная от простого движения, то появление из прозрачности или изменения размера. Аналогичный тип анимации, но только наоборот называется "Исчезновение". И тип "Взаимодействие" это когда содержимое не пропадает, а просто изменяет немного вид или положение, например увеличится или сдвинется немного влево.
- Длительность анимации (мс) - длительность для вышеуказанной анимации эффекта.
- Последовательная анимация - опция для включения последовательно анимирования.
Для фона
- Анимация при наведении - анимация для фона, доступны эффекты изменения размера и сдвига.
- Цвет перекрытия - цвет перекрытия фона для наложения на фоновое изображение.
- Режим наложения - режим смешивания цвета и изображения. Доступны все описанные выше варианты наложения т.е такие как указаны для классического стиля.
- CSS фильтры - фильтры накладываемые на изображение. Доступны все описанные выше варианты наложения т.е такие как указаны для классического стиля.
- Длительность эффекта (мс.) - длительность анимации фона.
=======================================================================
Список всех виджетов Elementor вы можете посмотреть на странице Виджеты
=======================================================================