Искате ли да създадете мрежа с Divi, която е гладка при задържане на курсора?
Ако обичате да създавате уебсайтове, имайки предвид взаимодействието с потребителя, ще харесате този урок.
Днес ще ви покажем как да създадете прозрачна решетка, където фоновото изображение се показва веднага щом някой задържи курсора на мишката върху един от елементите. Дизайнът първоначално е прост и изчистен, което води до красиво изживяване при задържане на курсора.
В този урок ще ви преведем през процеса на създаване стъпка по стъпка.
Да вървим.
изследване
Преди да се потопим в урока, нека набързо разгледаме резултата на екрани с различни размери.
бюро
подвижен
Нека започнем процеса на създаване в Divi
Добавете нов раздел
Цвят на фона
Добавете нов раздел към страницата, върху която работите.
Вижте също: Divi: Как да създадете персонализиран долен колонтитул
Първо, отворете настройките на секцията и приложете бял цвят на фона.
- Фон: #ffffff
Добавете ред #1
Структура на колоната
Продължете, като добавите нов ред, като използвате следната структура на колоните:
оразмеряване
Без да добавяте модули все още, отворете настройките на линията, отидете на раздела Дизайн, разширете опцията Оразмеряване и променете параметрите за оразмеряване, както следва:
- Използване на персонализирана ширина на улука: ДА
- Улей с: 1
- Ширина: 100%
- Максимална ширина: 100%
разстояние
След това разширете опцията Отстояние и променете следните настройки:
- Подложка (отгоре и отдолу): 0px
граница
В опцията „Граница“ направете и следните промени:
- Стилове на граници (отгоре и отдолу): 1px
- Цвят на рамката (отгоре и отдолу): #d3d3d3
Настройки на колона 1
Ховър фон
След това нека персонализираме настройките за колона 1. Приложете градиентен фон към курсора.
- Цвят 1: rgba(255,255,255,0)
- Цвят 2: #000000
- Тип градиент: Линеен
- Цвят на позиция 1: 30%
- Поставете градиент над градиентно изображение: ДА
Фоново изображение при задържане на курсора на мишката
Също така качете фоново изображение, което ще се показва при задържане на курсора на мишката.
- Размер на фоновото изображение: корица
- Позиция на фоновото изображение: Център
CSS клас
И завършете настройките на колоните, като присвоите следния CSS клас в раздела Подробно :
- CSS клас: hover-column
Добавете модул Text #1 към колона 1
Добавете текст с размер H3 (Заглавие 3)
Време е да добавите модули, като започнете с първия модул „Текст“ в колона 1. Въведете текст по ваш избор.
H3 текстови настройки
След това отидете на раздела Дизайн на модула и променете текстовите параметри на H3, както следва:
- Шрифт: Oswald
- Тегло на шрифта Тегло на шрифта: ултра лек
- Стил на шрифта на заглавие 3: TT
- Цвят на текста: #0a0a0a
- Размер на текста на заглавие 3:
- Настолен компютър: 3vw
- Таблет: 7vw
- Телефон: 14vw
- Заглавие 3 Разстояние между буквите: -2px
оразмеряване
Регулирайте ширината за различни размери на екрана в настройките за оразмеряване.
- Ширина:
- Настолен компютър: 44%
- Таблетки: 48%
- Телефон: 50%
разстояние
Нека също променим следните настройки в опцията Отстояние.
- Марж (отдолу): 25vh
- Подплата (отгоре и отдолу): 5%
- Подложка (ляво и дясно): 4%
граница
След това ще добавим граници отдясно и отдолу.
- Ширина на рамката (дясно и отдолу): 1px
- Цвят на рамката (дясно и отдолу): #d3d3d3
CSS клас
Освен това ще завършим настройките на модула, като присвоим следния CSS клас на модула Text:
- CSS клас: hover-title
Добавете модул Text #2 към колона 1
Добавете съдържание
Добавете друг текстов модул точно под предишния с описание по ваш избор.
Текстови настройки
Превключване към раздела Дизайн на модула и съответно променете текстовите параметри:
- Шрифт на текста: Karla
- Цвят на текста: #ffffff
- Размер:
- Настолен компютър: 0,8 vw
- Таблет: 2vw
- Телефон: 3.6vw
- Височина на реда: 2,2 em
разстояние
Също така приложете персонализирани стойности на маржовете.
- Подплата (отдолу): 10%
- Подложка (ляво и дясно): 9%
CSS клас
И попълнете параметрите на модула, като използвате следния CSS клас за модула:
- CSS клас: hover-text
Добавете модул „Бутон“ към колона 1
Добавете описание
Следващият и последен модул, от който се нуждаем, е модул Бутон. Въведете описание по ваш избор.
Настройки на бутона
Променете параметрите на модула, както следва:
- Използване на персонализирани стилове за бутон: ДА
- Размер на текста на бутона:
- Настолен компютър: 1vw
- Таблет: 2,5 vw
- Телефон: 4vw
- Ширина на рамката на бутона: 0px
- Радиус на границата: 0px
- Шрифт на бутона: Karla
- Показване на икона на бутон: ДА
- Разположение на иконата на бутон: вдясно
- Показване на иконата само при над за бутон: НЕ
разстояние
Добавете и персонализирани стойности за разстояние.
- Марж (отдолу): 8%
- Марж (ляв и десен): 9%
- Подплата (отдолу): 5%
- Подплата (вдясно): 20%
кутия сянка
След това приложете сянка в кутия.
- Хоризонтална позиция на сянката на кутията: 0px
- Вертикална позиция на сянката на кутията: 2px
- Цвят на сенките: #000000
CSS клас
И завършете настройките на модула, като присвоите следния CSS клас на бутона:
- CSS клас: бутон за задържане
Повторно използване на колона 1
Изтрийте колони 2, 3 и 4
Сега, след като конструирахме първата колона, можем да я използваме повторно. Първото нещо, което ще направим, е да премахнем празните колони от нашия ред.
Клонирайте колона 1 три пъти
Ще използваме повторно колона 1, като я клонираме три пъти.
Промяна на фоновите изображения при задържане на курсора на мишката върху дублиращи се колони
След това променете фоновите изображения на дублиращите се колони във всяка дублирана колона.
Редактиране на дублирано съдържание
Също така редактирайте съдържанието на модула във всяка дублирана колона.
Уникални граници на колони
Колона 1
Ще трябва да приложим уникални настройки за граници към всяка колона, започвайки с колона 1.
- Ширина на рамката (вдясно):
- Работен плот: 1px
- Таблет: 1px
- Телефон: 0px
- Цвят (вдясно): #d3d3d3
- Ширина на границата (отдолу):
- Работен плот: 0px
- Таблет: 1px
- Телефон: 1px
- Цвят на рамката (отдолу): #d3d3d3
Колона 2
След това имаме колона 2.
Ширина на рамката (вдясно):
- Работен плот: 1px
- Таблет: 1px
- Телефон: 0px
Цвят (вдясно): #d3d3d3 Ширина на границата (отдолу):
- Работен плот: 0px
- Таблет: 1px
- Телефон: 1px
Цвят на рамката (отдолу): #d3d3d3
Колона 3
И ще използваме следните настройки на границите за колона 3:
- Ширина на рамката (вдясно):
- Работен плот: 1px
- Таблет: 1px
- Телефон: 0px
- Цвят (вдясно): #d3d3d3
- Ширина на границата (отдолу):
- Работен плот: 0px
- Таблет: 1px
- Телефон: 1px
- Цвят на рамката (отдолу): #d3d3d3
Добавете персонализиран CSS към настройките на страницата
Отворете настройките на страницата
След като целият дизайн е готов, остава само да добавите персонализиран CSS код, който да задейства ефектите при задържане на курсора върху модулите. За да направите това, отворете настройките на страницата.
Прочетете и нашето ръководство на: Divi: Как да създадете залепващ долен колонтитул с ефект „Разкриване“.
Добавяне на CSS код
И копирайте и поставете следните редове от CSS код:
.hover-column:hover .hover-title {
background-color: #000000;
}
.hover-column:hover .hover-title h3 {
color: white !important;
}
.hover-button {
color: black;
}
.hover-column:hover .hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}
.hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}
.hover-column:hover::before {
opacity: 0;
}
изследване
След като преминахме през всички стъпки, нека да разгледаме за последен път резултата на различни размери на екрана.
бюро
подвижен
Изтеглете DIVI сега!!!
Заключение
В тази статия ви показахме как да създадете красив hover дизайн.
По-конкретно, създадохме колонна мрежа, която в началото е семпла и изчистена. Веднага щом посетителите задържат курсора на мишката върху определен елемент от мрежата, се показва фоновото изображение и стиловете на модулите се променят.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...