Искате ли да създадете мрежа с Divi да бъде течен при задържане?
Ако обичате да създавате уебсайтове, имайки предвид взаимодействието с потребителите, този урок ще ви хареса.
Днес ще ви покажем как да създадете прозрачна мрежа, чието фоново изображение се разкрива веднага щом някой задържи курсора на мишката върху един от елементите. Дизайнът първоначално е семпъл и изчистен. Това води до приятно изживяване при зависване.
В този урок ще ви преведем през процеса на създаване стъпка по стъпка.
Да вървим.
изследване
Преди да се потопим в урока, нека хвърлим бърз поглед на резултата при различни размери на екрана.
бюро
подвижен
Нека започнем процеса на създаване в Divi
Добавете нов раздел
Цвят на фона
Добавете нов раздел към страницата, върху която работите.
Вижте също: Divi: Как да създадете персонализиран долен колонтитул
Първо отворете настройките на секцията и приложете бял цвят на фона.
- Фон: #ffffff
Добавете ред #1
Структура на колоната
Продължете, като добавите нов ред, като използвате следната структура на колоните:
оразмеряване
Без да добавяте модули, отворете настройките на линията, отидете на раздела Дизайн, дръпнете надолу опцията Оразмеряване и променете параметрите за оразмеряване, както следва:
- Използване на персонализирана ширина на улука: ДА
- Улей с: 1
- Ширина: 100%
- Максимална ширина: 100%
разстояние
След това дръпнете надолу опцията Отстояние и променете следните настройки:
- Подложка (отгоре и отдолу): 0px
граница
В опцията Border също направете следните промени:
- Стилове на граници (отгоре и отдолу): 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 за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...