Хотели бы вы, чтобы отображались значки социальных сетей при наведении курсора на фотографии в Divi ?
При создании страницы «О нас» вы можете рассмотреть возможность добавления различных членов команды вашей компании в витрину.
Когда вы начнете этот процесс проектирования, вы заметите, что с самого начала нельзя упустить три вещи: изображение, имя и позицию. Но если вы хотите еще больше продемонстрировать членов своей команды, вы также можете рассмотреть возможность добавления их ссылок в социальных сетях в дизайн.
Конечно, вы можете пойти по старинке и добавить модуль «Следите за нами в социальных сетях» под именем и должностью человека. Однако вы также можете добавить небольшое взаимодействие, показывая эти значки, как только кто-то наводит курсор на одно из изображений человека.
В сегодняшнем уроке мы покажем вам, как именно это сделать, используя Divi.
Пойдем.
обследование
Прежде чем углубиться в руководство, давайте быстро взглянем на результат на разных размерах экрана.
Результат на ноутбуке
Результат на мобильном
Начнем реализацию с Divi!
Добавить раздел № 1
Фоновый цвет
Добавьте новый раздел на страницу, над которой вы работаете.
Откройте настройки раздела и измените цвет фона.
- Фон: #0f0f0f
расстояние
Перейти на вкладку Проект выпадающий вариант Расстояние а затем измените настройки интервала.
- Отступы (сверху и снизу): 100 пикселей
Добавить новую строку
Структура колонны
Продолжите, добавив новую строку, используя следующую структуру столбцов:
Добавить модуль «Текст» №1 в колонку
Добавьте заголовок размером H1.
Добавьте первый модуль "Текст" в столбец строки
Добавьте немного содержание размер H1 (Заголовок 1) по вашему выбору.
Настройки текста H1
Перейти на вкладку Проект, вытащите опцию Заголовок текста и соответствующим образом измените настройки текста H1:
- Шрифт заголовка: Алата
- Цвет текста заголовка: #ffffff
- Размер текста:
- Рабочий стол: 50 пикселей
- Планшет: 45px
- Телефон: 35px
- Высота строки заголовка: 1,2 см
Добавьте в колонку модуль "Разделитель"
видимость
Далее мы собираемся добавить модуль «Разделитель». Убедитесь, что опция «Показать разделитель» включена.
- Показать разделитель: ДА
Линия
Перейти на вкладку Проект, вытащите опцию линия и изменить цвет линии.
- Цвет линии: #ffffff
калибровка
Выпадающий вариант Калибровка и изменить настройки размера, а также.
- Вес разделителя: 2px
- Максимальная ширина: 100 пикселей
- Высота: 2 пикселя
Добавить модуль «Текст» №2 в колонку
Добавить содержание описания
Следующий и последний модуль, который нам понадобится в этой строке, — это еще один модуль «Текст» с содержание описание по вашему выбору.
Настройки текста
Перейти на вкладку Проект, вытащите опцию Текст и измените настройки текста следующим образом:
- Шрифт текста: Алата
- Цвет текста: #7c7c7c
- Размер: 17 пикселей
- Высота текстовой строки: 1,9 см
расстояние
Также удалите нижнее поле по умолчанию.
- Поле (снизу): 0px
Добавить раздел № 2
Градиентный фон
Добавьте еще один раздел чуть ниже предыдущего и используйте для него градиентный фон.
- Левый цвет: #0f0f0f
- Правильный цвет: #000000
- Левая позиция: 10%
- Правильное положение: 90%
расстояние
Перейти на вкладку Проект, вытащите опцию Расстояние а затем измените настройки интервала.
- Отступ (сверху): 0px
- Отступ (снизу): 200px
Добавить новую строку
Структура колонны
Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:
калибровка
Откройте настройки линии и измените параметры размера следующим образом:
- Использовать пользовательскую ширину желоба: ДА
- Ширина желоба: 2px
Добавьте модуль «Подписка в социальных сетях» в столбец 1.
Добавьте социальные сети по вашему выбору
Первый модуль, который нам нужен в нашей строке, — это модуль «Подписка в социальных сетях» в столбце 1. Добавьте социальные сети по вашему выбору.
Удалить цвет из каждой социальной сети по отдельности
Открывайте каждую социальную сеть по отдельности
Удалите цвет фона.
Добавьте ссылку на каждую социальную сеть отдельно
Также добавьте ссылку, соответствующую каждой социальной сети.
Цвет фона по умолчанию
Затем вернитесь к общим настройкам модуля и примените следующий цвет фона:
- Фон: RGBA(0,0,0,0)
Цвет фона при наведении
Изменение цвета фона при наведении.
- Фон (при наведении): #494949
Фоновое изображение
Затем загрузите фоновое изображение.
- Размер фонового изображения : Обложка
- Смешение фонового изображения: умножение
Alignement
Перейти на вкладку Проект и изменить выравнивание.
- Модуль выравнивания: Центр
значок
Также измените цвет значка.
- Цвет значка: rgba(0,0,0,0)
расстояние
Затем перейдите к настройкам интервала (Расстояние) и примените следующие значения:
- Поле (снизу): 0px
- Обивка (сверху):
- Рабочий стол: 250 пикселей
- Планшет: 450px
- Телефон: 200px
- Отступ (снизу): 20px
граница
Мы также меняем настройки границ.
- Закругленные углы: 100 пикселей
- Ширина границы: 2 пикселя
- Цвет границы: rgba (255,255,255,0 XNUMX XNUMX)
Граница при наведении
Используйте другой цвет границы при наведении.
- Цвет границы (при наведении): #ffffff
Класс CSS
Затем перейдите на вкладку Фильтр и примените пользовательский класс CSS.
- Класс CSS: команды-социальные сети
Пользовательский CSS (до)
И завершите настройку модуля, включив настройку наведения на элемент "До" и скопировав и вставив следующие строки кода CSS:
content: "Restons connectés!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;
Добавьте модуль «Человек» в столбец 1.
Добавить содержание описания
Следующий и последний модуль, который нам понадобится в столбце 1, — это модуль «Человек». Добавь немного содержание описание по вашему выбору.
Настройки текста
Перейти на вкладку Проект и измените настройки текста следующим образом:
- Выравнивание текста: по центру
- Цвет текста: светлый
Настройки текста заголовка
Затем настройте текст заголовка.
- Шрифт заголовка: Алата
- Размер текста заголовка:
- Рабочий стол: 27 пикселей
- Планшет: 25px
- Телефон: 22px
Настройки текста описания вакансии
Затем отредактируйте настройки текста описания вакансии.
- Шрифт позиции: Алата
- Размер текста позиции:
- Рабочий стол: 17 пикселей
- Планшет и телефон: 15 пикселей
расстояние
Измените параметры интервала следующим образом:
- Отступы (сверху и снизу): 40 пикселей
граница
И завершите настройку модуля, применив следующие настройки границ:
- Ширина границы: 1 пикселя
- Цвет границы: #ffffff
Удалить оставшиеся столбцы из строки
После завершения модулей столбца 1 вы можете удалить оставшиеся два столбца из строки.
Клонировать столбец дважды
Повторно используйте столбец 1, клонировав его дважды.
Клонировать всю строку
Затем клонируйте всю строку столько раз, сколько необходимо.
Редактировать весь дублированный контент
Добавьте модуль кода под последним текстовым модулем в строке 1 раздела 1.
Теперь, чтобы убедиться, что каждая социальная сеть меняет свой стиль при наведении курсора на весь модуль, нам понадобится несколько строк кода CSS. Мы поместим этот код в новый модуль кода, который мы добавим в первый раздел, сразу под текстом описания.
Добавить CSS-код
Скопируйте и вставьте следующие строки кода CSS, и все готово:
<style>
.team-socials:hover li a.icon:before {
color: black !important;
}
.team-socials:hover li a.icon {
background-color: white;
}
</style>
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.
офис
Скачайте DIVI прямо сейчас!!!
Мобильный телефон
Скачайте DIVI прямо сейчас!!!
Заключение
В этой статье мы показали вам, как творчески подойти к представлению членов вашей команды.
В частности, мы показали вам, как отображать значки социальных сетей при наведении курсора на одно из изображений члена команды. Результатом является тонкое, но забавное взаимодействие, которое вы можете использовать для любого типа Веб-сайт что вы создаете.
Если вам нужно больше элементов для завершения проектов по созданию веб-сайтов, также просмотрите наше руководство на Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
А между тем, поделитесь этой статьей в разных социальных сетях.
