6 микровзаимодействий, которые сделают ваш сайт Divi более приятным (Учебное пособие + бесплатная загрузка)
Опубликовано: 2019-02-14Микровзаимодействия - отличный способ улучшить взаимодействие с пользователем при взаимодействии с вашим сайтом. Незначительная анимация значков, кнопок или изображений может побудить пользователя предпринять действия увлекательно и целенаправленно. Есть бесчисленное множество микровзаимодействий, которые вы можете включить на свой сайт, но хорошее практическое правило - сохранять их «микровзаимодействий». Вы не хотите переусердствовать.
Сегодня я собираюсь показать вам несколько простых микровзаимодействий, которые вы можете добавить на свой сайт Divi с помощью Divi Builder и Custom CSS (без jquery). Я сконцентрируюсь на тех элементах, с которыми обычно взаимодействуют пользователи - кнопках, значках, изображениях.
Давайте начнем.
Sneak Peek
Вот краткий обзор микровзаимодействий, которые мы будем создавать в этом уроке.
# 1 Масштабирование изображений при наведении
Начать создание микровзаимодействия №1
# 2 подпрыгивающий значок прокрутки вниз
Начать создание микровзаимодействия # 2
# 3 Вращающиеся значки объявлений и кнопок при наведении курсора
Начать создание микровзаимодействия # 3
# 4 Скользящие значки кнопок для отображения и скрытия текста кнопки
Начать создание микровзаимодействия # 4
# 5 Поворот трехмерного изображения в перспективе
Начать создание микровзаимодействия # 5
# 6 Микровзаимодействие кнопочного слайдера
Начать создание микровзаимодействия # 6
Подпишитесь на наш канал Youtube
Что вам нужно для начала
Для начала все, что вам действительно нужно, это Divi. Мы будем создавать наши примеры с нуля, используя Divi Builder во внешнем интерфейсе.
Загрузите файлы для легкого доступа
Я включил загрузку в конце этой статьи для тех из вас, кто хочет быстро и легко запустить рабочий пример этих микровзаимодействий на своем веб-сайте. Таким образом, вы можете получить рабочий пример, следуя руководству.
Скачать
# 1 Масштабирование изображений при наведении
Масштабирование относится к настройке размера элемента. Поэтому, если мы хотим увеличить изображение при наведении курсора (например), все, что нам нужно сделать, это добавить небольшой фрагмент CSS, чтобы масштабировать изображение на определенный процент. Это позволяет нам создавать небольшое, но эффективное микровзаимодействие, когда пользователь наводит курсор на изображение. Позвольте мне показать вам, как вы можете применить это к трем популярным модулям Divi, которые используют изображения - модулю изображения, модулю рекламного объявления и модулю человека.
Идите вперед и создайте новый раздел со строкой из трех столбцов, чтобы мы могли добавлять каждый из наших примеров в каждый столбец.
Масштабирование изображения при наведении курсора с помощью модуля изображения
Чтобы добавить микровзаимодействие масштабирования изображения к изображению с помощью модуля изображения, сначала добавьте модуль изображения в первый столбец.
Затем добавьте изображение в выбранный вами модуль.
Затем добавьте следующий класс CSS на вкладку «Дополнительно» в настройках изображения:
Класс CSS: масштабное изображение
Это позволяет нам настроить таргетинг на этот конкретный модуль при добавлении нашего пользовательского CSS в настройки страницы. Чтобы добавить CSS, необходимый для масштабирования изображения, откройте настройки страницы и добавьте следующий собственный CSS:
/**This scales the image in the image module with the CSS class "scale-image" **/
.scale-image {
overflow:hidden;
}
.scale-image img{
transition: all 0.2s;
}
.scale-image:hover img {
transform: scale(1.3)
}
А теперь посмотрите на результат.
Масштабирование изображения модуля Blurb при наведении курсора
Чтобы добавить тот же эффект к изображению в модуле рекламного сообщения, сначала добавьте модуль рекламного сообщения во второй столбец.
Затем добавьте изображение по вашему выбору в модуль аннотации.
Затем добавьте следующий класс CSS в модуль blurb.
Класс CSS: масштаб-рекламное-изображение
С этим классом CSS мы теперь можем добавить наш собственный CSS, нацеленный на рекламное изображение. Откройте настройки страницы и добавьте следующий Custom CSS:
/**This scales the image in the bl module with the CSS class "scale-blurb-image" **/
.scale-blurb-image .et_pb_main_blurb_image {
overflow:hidden;
}
.scale-blurb-image .et_pb_main_blurb_image img {
transition: all 0.2s;
}
.scale-blurb-image .et_pb_main_blurb_image:hover img {
transform: scale(1.3);
}
Вот результат.
Масштабирование изображения модуля Person при наведении курсора
Чтобы масштабировать изображение модуля человека при наведении курсора, добавьте модуль человека в третий столбец и добавьте изображение для загрузки по вашему выбору модуля.
Затем добавьте следующий класс CSS в модуль person.
Класс CSS: масштабное изображение человека
Теперь откройте настройки страницы и добавьте следующий пользовательский CSS.
/**This scales the image in the person module with the CSS class "scale-person-image" **/
.scale-person-image .et_pb_team_member_image {
overflow:hidden;
}
.scale-person-image img {
transition: all 0.2s;
}
.scale-person-image img:hover {
transform: scale(1.3);
}
Проверьте результат всех трех модулей с микровзаимодействием масштабирования изображения.
# 2 подпрыгивающий значок прокрутки вниз
Это следующее микровзаимодействие добавляет анимацию подпрыгивания к значку прокрутки вниз, встроенному в модуль заголовка полной ширины. Это тонкий способ дополнительно проинформировать посетителя о том, что дальше по странице есть дополнительная информация. И вы можете выбрать эффект подпрыгивания по умолчанию или при наведении курсора.
Вот как это сделать.
Сначала добавьте новый полноразмерный раздел с полноразмерным модулем заголовка.
Затем обновите следующее:
Ориентация текста и логотипа: по центру
Показать кнопку прокрутки вниз: ДА
Значок: [выберите значок выбора]
Затем добавьте следующий класс CSS:
Класс CSS: значок bounce-scroll-icon
Этот класс позволит нам настроить таргетинг на значок прокрутки с помощью css для анимации значка по умолчанию при загрузке страницы.
Затем продублируйте модуль заголовка полной ширины и обновите класс CSS следующим образом:
Класс CSS: bounce-scroll-icon-hover
Этот класс позволит нам нацелить значок прокрутки с помощью css, чтобы анимировать значок при наведении.
Затем откройте настройки страницы и добавьте следующий пользовательский CSS, чтобы активировать подпрыгивающую анимацию для наших двух примеров.
.bounce-scroll-icon-hover .et-pb-icon {
position: absolute;
top:-10px;
left:0;
right:0;
}
.bounce-scroll-icon-hover .et-pb-icon:hover {
animation-duration: 2s;
animation-name: bounce;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: all .2s;
}
.bounce-scroll-icon .et-pb-icon {
position: absolute;
top:-10px;
left:0;
right:0;
animation-duration: 2s;
animation-name: bounce;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: all .2s;
}
.bounce-scroll-icon .et-pb-icon:hover {
animation-name: none;
}
@keyframes bounce {
0% {top: -10px; opacity: 1;}
50% {top: 15px; opacity:0;}
100% {top: -10px;opacity:1;}
}
Посмотрите результат двух примеров. Значок прокрутки верхнего заголовка будет анимироваться по умолчанию, а значок прокрутки нижнего заголовка будет анимироваться при наведении курсора.
# 3 Вращающиеся значки при наведении курсора
Добавление небольшого поворота к значку может быть эффективным микровзаимодействием, побуждающим пользователей щелкнуть элемент. Поскольку два самых популярных модуля Divi со встроенными значками - это модуль кнопок и модуль рекламных сообщений, я подумал, что покажу вам, как добавить поворот к этим значкам при наведении курсора.
Поворот значка кнопки при наведении курсора
Divi уже по умолчанию поставляется с полезным микровзаимодействием для значков кнопок. При наведении курсора на кнопку появляется значок кнопки, который перемещается вправо, указывая на то, что при нажатии кнопки вы будете перенаправлены на другую страницу. Но если вы хотите проявить немного больше творчества, вы можете повернуть значок для совершенно нового микровзаимодействия.
Чтобы повернуть значок кнопки при наведении курсора, сначала добавьте новый раздел со строкой из одного столбца. Затем добавьте в строку модуль кнопки.
Затем обновите настройки кнопки следующим образом:
Использовать пользовательские стили для кнопки: ДА
Показывать только значок при наведении курсора на кнопку: НЕТ
Значок кнопки: [выберите значок выбора]
Затем добавьте следующий класс CSS:
Класс CSS: значок кнопки поворота
С нашим значком и классом CSS все, что нам нужно сделать, это добавить следующий настраиваемый CSS в настройки страницы:
/** This rotates the button icon on hover for the button module with the CSS class "rotate-button-icon" **/
.rotate-button-icon:after {
transform: rotate(-90deg);
}
.rotate-button-icon:hover:after {
transform: rotate(0deg);
}
Это приведет к повороту значка против часовой стрелки сначала на 90 градусов, а затем обратно на 0 градусов при наведении курсора.
Вот результат.
Вращение значка модуля Blurb
Чтобы повернуть значок модуля рекламного объявления, давайте сначала создадим новый раздел со строкой из трех столбцов. Затем добавьте модуль аннотации в столбец 1 и обновите следующие настройки аннотации.
Значок использования: ДА
Значок: [добавить значок выбора]
Ориентация текста: по центру
Класс CSS: значок поворота-рекламного объявления
Теперь добавьте следующий пользовательский CSS в настройки страницы:
/** This rotates a blurb icon with the css class "rotate-blurb-icon" **/
.rotate-blurb-icon .et-pb-icon {
transition: 0.2s ease-out;
transform: rotateZ(-90deg);
}
.rotate-blurb-icon .et_pb_blurb_content:hover .et-pb-icon {
transform: rotateZ(0deg);
}
Вот результат.
Это также работает со значком, размещенным слева от заголовка. Все, что вам нужно сделать, это обновить настройки рекламного сообщения следующим образом:
Расположение изображения / значка: слева
Высота строки заголовка: 1,7 мкм
Посмотрите результат.
# 4 Скользящие значки кнопок для отображения и скрытия текста кнопки
Текст кнопки для значка при наведении курсора
Это микровзаимодействие по умолчанию отображает текст кнопки со значком, а затем перемещает значок, чтобы закрыть текст при наведении курсора.
Вот как это сделать.
Добавьте новый раздел со строкой из одного столбца. Затем добавьте модуль кнопки в строку и обновите следующие параметры кнопки:
Использовать собственные стили для кнопки: ДА
Цвет фона кнопки: # 0c71c3
Ширина границы кнопки: 0 пикселей
Цвет значка кнопки: #ffffff
Класс CSS: кнопка-текст-значок
Теперь добавьте следующий настраиваемый CSS в настройки страницы:
/** This styles button to cover button text with icon on hover when button has class "button-text-to-icon" **/
body #page-container .et_pb_button.button-text-to-icon:after {
width: 1em;
transition: all .3s !important;
margin-left: 0;
border-left: 1px solid #dddddd;
left: calc(100% - 1em);
}
body #page-container .et_pb_button.button-text-to-icon:hover:after {
border-left: 1px solid transparent;
left: calc(50% - 0.5em);
transform: scale(1.3);
}
body #page-container .et_pb_button:hover:after {
color: #ffffff;
margin-left: 0px;
left: 0;
width: 100%;
text-align: center;
transform: scale(1.5);
}
А теперь посмотрите на результат.
Значок кнопки в текст при наведении курсора
Вы также можете создать противоположный эффект: сначала отображается значок кнопки, а затем перемещается значок, чтобы отобразить текст кнопки. Для этого продублируйте модуль кнопок и обновите следующие настройки кнопок:
Цвет текста кнопки (по умолчанию): # 0c71c3
Цвет текста кнопки (при наведении): #ffffff
Затем замените класс CSS следующим:
Класс CSS: преобразование значка кнопки в текст
Затем добавьте следующий настраиваемый CSS в настройки страницы:
/** This styles button to reveal button text from icon on hover when button has class "button-text-to-icon" **/
body #page-container .et_pb_button.button-icon-to-text:after {
width: 1em;
transition: all .3s !important;
margin-left: 0;
border-left: 1px solid transparent;
left: calc(50% - 0.5em);
transform: scale(1.3);
}
body #page-container .et_pb_button.button-icon-to-text:hover:after {
border-left: 1px solid #dddddd;
left: calc(100% - 1em);
transform: scale(1);
}
А теперь посмотрите на результат.
# 5 Поворот трехмерного изображения в перспективе
Это микровзаимодействие начинается с изображения модуля изображения, стилизованного по умолчанию с трехмерной перспективой изображения и вращением. Затем при наведении курсора изображение возвращается к обычному отображению изображения.
Вот как это сделать.
Сначала создайте новый раздел со строкой из трех столбцов. Затем добавьте модуль изображения в столбец 1 и добавьте изображение в выбранный модуль изображения.
Для этого мы можем добавить наш собственный CSS прямо в модуль. Перейдите на вкладку «Дополнительно» и добавьте следующий настраиваемый CSS под основным элементом:
Основной элемент CSS (по умолчанию):
transform: perspective(700px) rotateY(45deg); transition: all .2s;
Этот CSS делает две вещи с нашим изображением, используя свойство Transform CSS. Во-первых, он добавляет перспективу 700 пикселей, которая представляет собой расстояние между изображением и перспективой пользователя при просмотре страницы. CSS также добавляет поворот к изображению. RotateY (45deg) поворачивает изображение по оси Y на 45 градусов (по часовой стрелке). А с установленной перспективой изображение теперь имеет трехмерный вид.
Основной элемент CSS (при наведении):
transform: perspective(700px) rotateY(0deg);
Это исключает вращение изображения при наведении, чтобы оно выглядело нормально, чтобы пользователи могли лучше рассмотреть изображение.
А теперь посмотрим на результат.
Приведем еще пару примеров этого микровзаимодействия. Скопируйте модуль изображения и вставьте его в столбец 2 и столбец 3. В модуле дублирования изображения в столбце 2 обновите пользовательский CSS следующим образом:
Основной элемент CSS (по умолчанию):
transform: perspective(700px) rotateX(45deg); transition: all .2s;
Основной элемент CSS (при наведении):
transform: perspective(700px) rotateX(0deg);
Обратите внимание, единственная разница здесь - буква «X» после слова «повернуть». Это указывает изображению повернуться по оси x на 45 градусов. Затем мы устанавливаем значение градуса на 0 при наведении курсора, чтобы вернуть его в нормальное состояние.
Вот результат.
В модуле дублирования изображения в столбце 3 обновите Custom CSS следующим образом:
Основной элемент CSS (по умолчанию):
transform: perspective(700px) rotateY(-45deg); transition: all .2s;
Основной элемент CSS (при наведении):
transform: perspective(700px) rotateY(0deg);
Обратите внимание, что единственное различие между этим CSS и CSS, используемым в изображении в столбце 1, - это значение «-45deg». Это поворачивает изображение по оси Y против часовой стрелки.
Вот окончательный результат всех трех микровзаимодействий изображений с использованием перспективы и поворота.
Не забудьте добавить еще больше встроенных эффектов наведения и дизайна, используя встроенные настройки модуля изображения. Например, это было бы отличным местом для добавления эффекта тени блока.
# 6 Микровзаимодействие кнопочного слайдера
Для этого последнего микровзаимодействия мы собираемся создать ползунок кнопки, который будет отображать дополнительную информацию (фактически, совершенно новую кнопку) при наведении курсора. Основная идея состоит в том, чтобы придать вашей колонке нестандартную высоту, а затем уложить в нее два кнопочных модуля. Верхняя кнопка будет тем, что пользователь видит по умолчанию, а вторая кнопка будет кнопкой с «дополнительной информацией», которую пользователь увидит при наведении курсора на кнопку.
Вот как это сделать.
Эта кнопка будет охватывать всю ширину столбца строки, поэтому лучше всего будет работать, если вы добавите кнопку в строку со столбцом, который не становится слишком широким. В этом примере я собираюсь использовать строку из одного столбца, а затем установить максимальную ширину для моей строки, чтобы кнопка не становилась слишком широкой в больших браузерах.
Создайте новый раздел со строкой из одного столбца. Затем добавьте модуль кнопки в строку и обновите следующие параметры кнопки:
Текст кнопки: «Скачать»
Расположение кнопок: по центру
Использовать собственные стили для кнопки: ДА
Цвет текста кнопки: #ffffff
Цвет фона кнопки: # 0c71c3
Ширина границы кнопки: 0 пикселей
Радиус границы кнопки: 0 пикселей
Значок кнопки: см. Снимок экрана
Цвет значка кнопки: #ffffff
Расположение значка кнопки: слева
Показывать только значок при наведении курсора на кнопку: НЕТ
Пользовательское поле: внизу 0 пикселей
Затем продублируйте только что созданную кнопку, чтобы дубликаты располагались чуть ниже кнопки, которую вы только что создали. Затем обновите настройки повторяющейся кнопки следующим образом:
Текст кнопки: MP3 (3,5 мб)
Цвет текста кнопки: # 0c71c3
Цвет фона кнопки: #ffffff
Значок кнопки: см. Снимок экрана
Цвет значка кнопки: # 0c71c3
Прежде чем мы перейдем к стилизации нашей строки, нам нужно добавить класс CSS к верхней кнопке. Откройте настройки верхней кнопки и добавьте следующий класс CSS:
Класс CSS: верхняя кнопка
Теперь, когда обе кнопки находятся на своих местах, давайте обновим настройки строки с настраиваемой шириной, которая будет служить максимальной шириной наших кнопок, и классом CSS столбца для нашего настраиваемого CSS, который мы добавим в настройки страницы. Откройте настройки строки и обновите следующее:
Настраиваемая ширина: 200 пикселей
Класс CSS столбца: кнопка-ползунок
Обязательно добавьте класс CSS в столбец, а не в строку.
Теперь мы готовы добавить собственный CSS. Откройте настройки страницы и добавьте следующий CSS:
/** This styles the slider button **/
.slider-button {
height: 50px;
overflow:hidden;
border:2px solid #0c71c3;
}
.slider-button .et_pb_button {
display:block;
margin: 0 !important;
}
.slider-button:hover .top-button {
margin-top: -48px !important;
}
Этот CSS будет работать только с кнопкой с размером по умолчанию. Это связано с тем, что мы должны задать столбцу фиксированную высоту, чтобы вторая кнопка была скрыта до наведения. Сейчас высота столбца (с классом «кнопка-ползунок») имеет высоту 50 пикселей. Это также учитывает границу в 2 пикселя, заданную столбцу. При наведении указателя мыши верхняя кнопка (с классом «верхняя кнопка» перемещается вверх из поля зрения с верхним полем -48 пикселей (высота кнопки минус одна из границ 2 пикселя). Но, если вы измените шрифт - размер или отступ кнопок, вам нужно будет соответственно отрегулировать высоту класса кнопки-ползунка вместе с верхним полем кнопки.
Вот окончательный результат.
Не забывайте, что вы можете стилизовать кнопки с другим текстом / информацией и значками для вашего собственного использования. Это отличный способ познакомить пользователей с дополнительной информацией в виде уникального призыва к действию.
БЕСПЛАТНАЯ загрузка: получите готовый макет и файл CSS для этого руководства
Если вы хотите быстро понять, как эти микровзаимодействия будут выглядеть на вашем веб-сайте, вы можете загрузить zip-файл ниже. После загрузки zip-файла найдите файл на жестком диске. Он будет называться «microinteraction-examples.zip». Когда вы разархивируете файл, вы увидите два файла. Файл с именем «microinteraction-examples.json» является макетом Divi. Его нужно будет загрузить в вашу библиотеку Divi. Вы можете сделать это из своей панели управления WordPress, перейдя в Divi> Divi Library, а затем нажав кнопку импорта вверху страницы. Файл с именем «microinteractions.css» содержит пользовательский CSS, используемый в учебнике. Этот CSS необходимо скопировать в настраиваемый CSS-файл настроек страницы или в поле «Дополнительный CSS-код настройки темы». Вы также можете использовать функцию перетаскивания Divi, чтобы перетащить файл microinteractions.css непосредственно в Divi Builder после загрузки вашего макета. Это автоматически добавит CSS в настройки вашей страницы.
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Последние мысли
Надеюсь, вы найдете эти микровзаимодействия полезными. Их просто использовать с Divi (используя только CSS) на всем вашем сайте. Для экономии времени и простоты я использовал основные стили модулей по умолчанию, но не стесняйтесь настраивать параметры дизайна по мере необходимости для более творческих стилей. Кроме того, не стесняйтесь настраивать CSS для этих примеров в соответствии с вашими потребностями или придумывать что-то совершенно новое.
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!