Искате ли да научите как да проектирате персонализирани наслагвания на изображения с Divi ?
Наслагванията на изображения съществуват в уеб дизайна от дълго време. Те са идеални за ангажиране посетители чрез разкриване съдържание Допълнителни и дизайнерски елементи, когато задържите курсора на мишката върху изображението.
В този урок ще ви покажем как да проектирате персонализирани наслагвания на изображения Divi. Тези наслагвания ще се променят и ще разкриват елементи, когато задържите курсора на мишката върху изображението.
Не са необходими добавки.
Нека да започнем!
изследване
Ето един бърз поглед върху дизайна, който ще създадем в този урок.
Създайте нова страница с Divi Builder
От таблото за управление на WordPress отидете на Страници> Добавяне на ново за да създадете нова страница.
Дайте му заглавие, което има смисъл за вас, и щракнете употреба Divi Строител
След това кликнете Започнете да строите (Изграждане от нулата)
След това ще имате празно платно, за да започнете да проектирате в Divi.
Създаване на персонализирани наслагвания на изображения в Divi
Проектирайте секцията, реда и колоните
За да започнете, създайте ред с три колони в секцията по подразбиране.
Отворете настройките на секцията и добавете следния цвят на фона:
- Фон: #3a0ca3
След това отворете настройките на колона 1 и актуализирайте следното:
- CSS клас: et-overlay-container
- Хоризонтално преливане: Скрито
- Вертикално преливане: Скрито
Добавяне на изображение
Сега, когато секцията, редът и колоната са готови, добавете нов модул Image към колона 1. Това ще бъде основното изображение зад нашите дизайни за наслагване.
Качете изображение, което прилича повече на портрет, отколкото на пейзаж. Уверете се, че е достатъчно широк, за да обхване цялата ширина на колоната във всички размери на браузъра.
ЗАБЕЛЕЖКА: Можете да използвате пейзажни изображения, но може да се наложи да коригирате съответно позиционирането на елементите на наслагването, така че да не се припокриват.
Под раздела Дизайн, актуализирайте следното:
- Поле (отдолу): 0px
Под раздела Подробно, добавете следния CSS клас:
- CSS клас: et-overlay-image
Добавяне на цвят на наслагване на изображение с помощта на модул "Разделител".
За да създадем цвета на наслагването на изображението, ще използваме модул Divider.
Първо добавете разделителен модул под изображението.
След това позиционирайте разделителя в абсолютна стойност, така че да е поставен над изображението:
- Позиция: Абсолютна
Под раздела съдържание, актуализирайте следното:
- Показване на разделител: НЕ
- Цвят на фона: rgba(247,37,133,0.8)
След това актуализирайте височината и ширината на разделителя:
- Ширина: 100%
- Височина: 100%
С готовия дизайн добавете следния CSS клас към сплитера:
- and-overlay-item
ЗАБЕЛЕЖКА: Този клас трябва да се добави към всички елементи на дизайна на наслагване, които искате да показвате само при задържане. Ако не искате елементът да бъде скрит първоначално, оставете го.
За да ви помогнем да следите елементите/модулите на дизайна, отворете модалните слоеве и маркирайте разделителя на модула („Цвят на наслагване“).
Добавен насложен текст на заглавката
Под модула Divider добавете нов модул Text. Това ще служи като заглавен текст за наслагване, който ще се появи в горната част на изображението при задържане.
Актуализирайте съдържание със заглавие H2:
<h2>Coaching</h2>След това актуализирайте етикета на текстовия модул за бъдещи справки.
Под раздела Дизайн, актуализирайте следното:
- Подравняване на текст: центрирано
- Цвят на текста: Светъл
- Шрифт: Cormorant Garamond
- Тегло на шрифта: получер
- Размер на текста: 40px
- Ширина: 100%
- Максимална ширина: 85%
Под раздела Подробно, актуализирайте позицията, както следва:
- Позиция: Абсолютна
- Местоположение: горе център
- Вертикално отместване: 10%
ЗАБЕЛЕЖКА: Вертикалното отместване може да се наложи да се коригира в зависимост от размера на съотношението на изображението. Например изображение от пейзажен тип може да изисква по-малко отместване
След това добавете следните CSS класове към текстовия модул:
- CSS клас: et-overlay-item move-down
В допълнение към класа „and-overlay-item“, добавяме допълнителен клас „преместване надолу“ за да използвате персонализирания CSS, за да преместите заглавката леко надолу при задържане.
Създаване на насложен основен текст
За да създадем тялото на текста за наслагване, можем да дублираме модула Text, използван за заглавката на наслагването. Преди да актуализирате дублиращите се параметри, променете етикета на „Overlay Body“.
Отворете текстовите настройки на новия текстов модул и актуализирайте съдържание на тялото с няколко изречения от текст на параграф.
Под раздела Подробно, променете абсолютното местоположение на модула към центъра.
Тъй като не искаме това да се движи при задържане (само да се показва), актуализирайте CSS класа, за да включва само следното:
- CSS клас: et-overlay-item
Създаване на бутона за наслагване
Последното наслагване върху това изображение ще бъде бутонът. За да създадете бутона, добавете нов модул Button под втория модул Text.
Преди да промените дизайна, актуализирайте позицията на бутона, както следва:
- Позиция: абсолютна
- Вертикално отместване: 10%
Сега бутонът трябва да е центриран в долната част на изображението.
В раздела Подробно, актуализирайте CSS класа и добавете персонализиран CSS фрагмент към основния елемент, както следва:
- CSS клас: et-overlay-item преместване нагоре
- Основен CSS елемент:
min-width: 15em;Обърнете внимание, че към бутона е добавен допълнителен клас, за да го преместите леко нагоре при задържане. Това е, за да допълни движението надолу на текста в заглавката при задържане.
След това актуализирайте следните настройки на дизайна:
- Подравняване на бутоните: центрирано
- Използване на персонализирани стилове за бутон: ДА
- Размер на текста на бутона: 14px
- Цвят на фона: #4361ee
- Ширина на рамката на бутона: 0 пиксела
- Разстояние между буквите на бутоните: 0,1 em
- Тегло на шрифта: получер
- Стил на шрифта на бутона: TT
- Подложка: 0,8 em (отгоре и отдолу), 0px (отляво и отдясно)
Добавяне на персонализиран CSS с модула Code
Добавете кодов модул под бутона.
След това поставете следния CSS в съдържанието на кода. Не забравяйте да обвиете кода в необходимите тагове на скрипта.
<style>
@media all and (min-width: 981px) {
.et-fb-root-ancestor .et-overlay-item {
opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
}
.et-overlay-item {
opacity: 0; /*hides overlay items by default*/
margin-bottom: 0px;
}
.et-overlay-item, .et-overlay-image {
transition: all 400ms !important; /*sets transition speed of all overlay items*/
}
.et-overlay-container:hover .et-overlay-item {
opacity: 1; /*reveals hidden overlay items on hover*/
}
.et-overlay-container:hover .et-overlay-image {
/*add new styles here to change image on hover*/
}
.et-overlay-container:hover .et-overlay-image.et-scale {
transform: scale(1.2); /*adjust scale of image here*/
}
.et-overlay-container:hover .et-overlay-image.et-rotate {
transform: scale(1.4)
rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
}
.et-overlay-container:hover .et-overlay-item.move-up {
margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
}
.et-overlay-container:hover .et-overlay-item.move-down {
margin-top: 10%; /*adjust how far you want the overlay item to move down*/
}
}
</style>
Кодът е коментиран, за да можете да разберете къде можете да коригирате CSS, за да отговаря на вашите нужди.
Дублирайте колоната за повече дизайн
Отворете модалния слой, първо изтрийте двете празни колони.
След това дублирайте два пъти колоната, съдържаща дизайна на насложеното изображение. Трябва да имате общо три колони с еднакъв дизайн.
Създаване на дизайн на наслагване на изображение #2
За този следващ дизайн ще поставим бутона в центъра на изображението (винаги видим). След това ще преместим заглавния и основния текст в изгледа от горната и долната част на изображението.
Коригирайте разположението на основния текст и CSS класа
Отворете настройките на модула за основен текст на наслагването в колона 2 и актуализирайте позицията:
- Местоположение: долу в центъра
- Вертикално отместване: 5%
След това актуализирайте CSS класа със следното:
- CSS клас: et-overlay-item преместване нагоре
Коригирайте местоположението на бутоните и CSS класа
След това отворете настройките на бутона в колона 2 и актуализирайте следното местоположение на позицията:
- Местоположение: Център
След това премахнете CSS класа, тъй като искаме бутонът винаги да остава видим.
Отворете настройките на модула Divider (цвят на наслагване) и променете фона, както следва:
- Фон: rgba(67,97,238,0.8)
След това отворете настройките на бутона и променете цвета на фона:
- Цвят на фона: #f72585
Коригиране на CSS изображение и клас
След това отворете настройките на изображението и качете ново изображение (ако желаете).
След това добавете следния CSS клас към изображението:
- CSS клас: et-overlay-image et-scale
Имайте предвид, че в допълнение към класа "et-overlay-image", има допълнителен клас, наречен "et-scale", който ще увеличи размера на изображението, създавайки ефект на увеличение при задържане.
Създаване на дизайн на наслагване на изображение #3
Сега е време да създадете третия дизайн на насложеното изображение в колона 3.
Коригирайте съдържанието на основния текст на наслагването и CSS класа
Започнете, като отворите настройките на модула за основен текст на наслагване в колона 3. След това добавете заглавието H2 над текста на абзаца. Сега и двете ще бъдат вътре в модул.
След това премахнете CSS класа, така че текстът да остане видим над изображението.
Коригирайте отместването на бутона и CSS класа
Отворете настройките на модула Button и актуализирайте отместването на вертикалната позиция:
- Вертикално отместване: 5%
Премахване на горния колонтитул
След това премахнете модула Overlay Header Text.
Коригирайте цвета на наслагването и CSS класа
Отворете настройките на модула Разделител (цвят на наслагване) и актуализирайте фона до следното:
- Цвят на градиента на левия фон: rgba(67,97,238,0.8)
- Цвят на градиента на десния фон: rgba(247,37,133,0.8)
- Начална позиция: 25%
- Крайна позиция: 75%
И тъй като искаме да запазим градиентното наслагване видимо през цялото време, премахнете CSS класа.
Коригирайте CSS класа на изображението
И накрая, ще добавим допълнителен CSS клас („et-rotate“) към основното изображение, който ще преоразмерява и завърта изображението при задържане.
- CSS клас: et-overlay-image et-rotate
Последни щрихи
Преди да проверим окончателните си резултати, трябва да направим някои корекции.
Премахнете долното поле по подразбиране за всички модули
Тъй като вече актуализирахме полето с долно поле от 0px, можем да разширим това поле до всички модули.
Щракнете с десния бутон върху настройката за поле и изберете „Разширяване на полетата“.
След това изберете да разширите полето до Всички модули на страницата.
Премахнете дублиращите се кодови модули
Не забравяйте да премахнете допълнителните кодови модули, които са били пренесени от дублирането на първата колона. Трябва да имате само един. Можете да направите това лесно от модалните слоеве.
Крайни резултати
След като нашите три дизайна са готови, нека да разгледаме крайните резултати от нашите дизайни за наслагване на изображения.
Изтеглете DIVI сега!!!
А ето и дизайна на мобилен телефон. Ефектите на наслагване при задържане се прилагат само на работния плот. Следователно наслагванията все още ще бъдат видими на мобилни устройства.
Изтеглете DIVI сега!!!
Заключение
Създаването на персонализирани наслагвания на изображения всъщност е много забавно. Има безброй дизайни, които можете да тествате визуално с Divi Builder.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...