[Ad_1]
Пойдем.
обследование
Прежде чем мы углубимся в руководство, давайте быстро взглянем на результат на экранах разных размеров.
офис
Мобильный телефон
Скачать макет БЕСПЛАТНО
Чтобы получить бесплатный макет, вам сначала необходимо загрузить его, нажав кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форма ниже. Как новый подписчик, вы будете получать еще больше возможностей Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже в списке, просто введите свой адрес электронной почты ниже и нажмите «Загрузить». Вы не будете «переподписаны» или получите дополнительные электронные письма.
1. Создайте элементную структуру
Добавить новый раздел
Фоновый цвет
Мы начнем это руководство с построения структуры элементов на странице Divi. Добавьте новый раздел и используйте для него белый цвет фона.
- Цвет фона: #ffffff
расстояние
Перейдите на вкладку «Конструкция сечения» и измените настройки интервала следующим образом:
- Верхняя обивка: 80px
- Нижняя обивка: 0px
Добавить новую строку
Структура колонны
Продолжите добавлять новую строку, используя следующую структуру столбцов:
калибровка
Еще не добавляя никаких модулей, откройте настройки ряда и измените максимальную ширину в настройках размеров.
расстояние
Затем удалите все отступы по умолчанию сверху и снизу.
- Верхняя обивка: 0px
- Нижняя обивка: 0px
Добавьте модуль изображения в столбец 1
Скачать изображение
Модули Let's, начиная с модуля изображения в столбце 1. Загрузите изображение по вашему выбору.
Добавить ссылку
Затем добавьте ссылку на модуль изображения.
Шкала эстакады
Затем перейдите на вкладку «Дизайн» и измените настройки масштабирования модуля при наведении курсора.
Класс CSS
Завершите настройку модуля, применив следующий класс CSS на вкладке «Дополнительно»:
Добавить текстовый модуль # 1 в столбец 1
Добавить контент H3
Давайте перейдем к следующему модулю, который представляет собой текстовый модуль, содержащий содержание H3 на ваш выбор.
Настройки текста H3
Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста H3:
- Название 3 Полиция: Актер
- Цвет текста заголовка 3: # 000000
- Заголовок 3 Размер текста:
- Рабочий стол: 35 пикселя
- Таблетка: 28 пикселей
- Телефон: 22px
- Заголовок 3 Высота строки: 1,4em
расстояние
Затем добавьте нижнее поле.
Добавить текстовый модуль # 2 в столбец 1
Добавить контент
Затем добавьте еще один текстовый модуль чуть ниже предыдущего с помощью содержание описание по вашему выбору.
Настройки текста
Измените настройки текста модуля следующим образом:
- Шрифт текста: актер
- Цвет текста: # 75baff
- Размер текста:
- Рабочий стол: 22 пикселя
- Таблетка: 18 пикселей
- Телефон: 15px
- Расстояние между буквами текста: 0.5 пикселя
- Высота строки букв: 2-я
Добавить модуль кнопки в столбец 1
Добавить копию
Следующий и последний модуль, который нам нужен в этом столбце, - это кнопочный модуль. Добавьте копию по вашему выбору.
Настройки кнопок
Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки кнопок:
- Использовать пользовательские стили для кнопки: Да
- Цвет текста кнопки: # 000000
- Ширина границы кнопки: 0px
- Радиус границы кнопки: 1px
- Шрифт кнопки: актер
- Показать значок кнопки: Да
- Расположение значка кнопки: слева
- Показывать только значок кнопки при наведении: Нет
расстояние
Также добавьте собственные значения интервала.
- Нижнее поле: 80px
- Нижняя обивка: 20px
- Правый отступ: 30 пикселей
Shadow box
И завершите настройки модуля, применив следующие настройки тени блока:
- Горизонтальное положение тени блока: 0 пикселей
- Положение тени вертикального блока: 2 пикселя
- Цвет тени: # 000000
Удалить столбец 2
После того, как вы заполнили первый столбец и все модули в нем, удалите второй пустой столбец из строки.
Клонировать столбец 1
И повторно используйте первый столбец, клонировав его один раз.
Клонировать всю строку
Продолжайте, клонируя всю строку один раз.
Отредактируйте весь повторяющийся контент, изображения и ссылки
Затем обязательно отредактируйте все содержание, изображения и ссылки в каждом из повторяющихся столбцов.
2. Добавьте курсор
Добавить новую строку в раздел
Структура колонны
Теперь, когда у нас есть структура элементов, пришло время создать дизайн слайдера. Для этого мы добавим новую строку в наш раздел, используя следующую структуру столбцов:
расстояние
Откройте настройки строки и удалите все отступы по умолчанию сверху и снизу.
- Верхняя обивка: 0px
- Нижняя обивка: 0px
Добавить текстовый модуль курсора в новый столбец строки
Добавить контент
Затем добавьте текстовый модуль в новую строку. Этот текстовый модуль будет посвящен созданию дизайна кнопки курсора. Добавьте копию по вашему выбору в область содержимого.
Фоновый цвет
Затем добавьте цвет фона.
- Цвет фона: # 47669b
Настройки текста
Перейдите на вкладку Дизайн и задайте соответствующий стиль для текста:
- Шрифт текста: актер
- Толщина шрифта текста: полужирный
- Стиль шрифта текста: заглавные
- Цвет текста: #ffffff
- Расстояние между буквами текста: 2 пикселя
- Выравнивание текста: центр
калибровка
Затем добавьте значение ширины и высоты к параметрам размера.
- Ширина: 150px
- Высота: 150px
Граница
Превращаем этот модуль в круг, изменяя настройки границы.
Shadow box
Мы также добавим легкую тень от коробки.
- Сила размытия тени блока: 0 пикселей
- Сила распространения тени коробки: 20 пикселей
- Цвет тени: rgba (7,213,255,0.14)
Класс CSS
Затем мы дадим нашему модулю класс CSS.
CSS основной элемент
Мы также добавляем строки кода CSS к основному элементу модуля.
transition: all .1s linear; pointer-events: none; display: flex; justify-content: center; align-items: center;
Должность
А параметры модуля мы дополним, изменив позицию в расширенной вкладке:
- Положение: исправлено
- Расположение: вверху слева
- Z индекс: 2
Добавьте модуль кода под текстовый модуль
Теперь, когда мы разработали наш слайдер, пришло время заставить эту функцию работать. Для этого мы добавим новый модуль кода чуть ниже текстового модуля курсора.
Добавить теги стиля и скрипта
Добавьте теги стиля и сценария в свой модуль кода.
Добавить код CSS
Вставьте следующие строки кода CSS между тегами стиля:
.hide-cursor {
cursor: none;
}
.cursor {
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
visibility: hidden;
opacity: 0;
}
.show-cursor {
visibility: visible !important;
opacity: 1;
}
Добавить код JQuery
И используйте следующие строки кода JQuery между тегами скрипта:
jQuery(document).ready(function($){
var cursor = $('.cursor');
$('.image-cursor').mousemove(function(e){
cursor.css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
cursor.addClass('show-cursor');
$('body').addClass('hide-cursor');
});
$('.image-cursor').mouseleave(function() {
cursor.removeClass('show-cursor');
$('body').removeClass('hide-cursor');
});
});
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.
офис
Мобильный телефон
Заключительные мысли
В этом уроке мы показали вам, как добавить больше взаимодействия к интерактивным элементам на вашей странице. В частности, мы показали вам, как вызвать кнопку курсора, когда кто-то наводит курсор на выбранный вами элемент. Это добавляет дополнительное взаимодействие к дизайну вашей страницы и может помочь увеличить рейтинг кликов! Вы также могли бесплатно скачать файл JSON. Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.
Если вы хотите узнать больше о Divi и получить больше подарков Divi, убедитесь, что Подпишитесь на нашу рассылку et Канал Youtube Так что вы всегда будете одними из первых, кто узнает и получит удовольствие от этого бесплатного контента.
[Ad_2]
