Divi: Как да създадете персонализирани наслагвания на изображения

Искате ли да научите как да проектирате персонализирани наслагвания на изображения с Divi?

Наслагването на изображения отдавна е част от уеб дизайна. Те са идеални за ангажиране на посетителите, като разкриват допълнително съдържание и дизайнерски елементи, когато задържите курсора на мишката върху изображението. 

В този урок ще ви покажем как да проектирате персонализирани наслагвания на изображения в Divi. Тези наслагвания ще се променят и ще разкриват елементи, когато задържите курсора на мишката върху изображението. 

Не е необходим плъгин.

Нека да започнем!

изследване

Ето един бърз поглед върху дизайна, който ще създадем в този урок.

Създайте нова страница с Divi Builder

От таблото за управление на WordPress отидете на Страници> Добавяне на ново за да създадете нова страница.

Дайте му заглавие, което има смисъл за вас, и щракнете Използвайте Divi Builder

След това кликнете Започнете да строите (Изграждане от нулата)

След това ще имате празно платно, за да започнете да проектирате в Divi.

Създаване на персонализирани наслагвания на изображения в Divi

Проектирайте секцията, реда и колоните

За да започнете, създайте ред с три колони в секцията по подразбиране.

Отворете настройките на секцията и добавете следния цвят на фона:

• Фон: #3a0ca3

След това отворете настройките на колона 1 и актуализирайте следното:

• CSS клас: et-overlay-container

• Хоризонтално преливане: Скрито
• Вертикално преливане: Скрито

Изображението е добавено

След като секцията, редът и колоната са готови, добавете нов модул Image към колона 1. Това ще бъде основното изображение зад нашите дизайни за наслагване.

Качете изображение, което изглежда по-скоро като портрет, отколкото като пейзаж. Уверете се, че е достатъчно широко, за да покрие цялата ширина на колоната във всички размери на браузъра.

ЗАБЕЛЕЖКА: Можете да използвате пейзажни изображения, но може да се наложи да коригирате съответно позицията на елементите за наслагване, така че да не се припокриват.

Под раздела Дизайн, актуализирайте следното:

• Поле (отдолу): 0px

Под раздела Подробно, добавете следния CSS клас:

• CSS клас: et-overlay-image

Добавяне на цвят за наслагване на изображение с помощта на модула „Divider“

За да създадем цвета на наслагването на изображението, ще използваме модула Divider.

Първо, добавете модул Divider под изображението.

След това позиционирайте разделителя абсолютно така, че да е поставен над изображението:

• Позиция: Абсолютна

Под раздела съдържание, актуализирайте следното:

• Показване на разделител: НЕ

• Цвят на фона: rgba(247,37,133,0.8)

След това актуализирайте височината и ширината на разделителя:

• Ширина: 100%
• Височина: 100%

С готовия дизайн добавете следния CSS клас към сплитера:

• and-overlay-item

ЗАБЕЛЕЖКА: Този клас трябва да се добави към всички елементи на дизайна с наслагване, които искате да се показват само при задържане на курсора на мишката. Ако не искате елементът да бъде скрит първоначално, пропуснете го.

За да следите дизайнерските елементи/модули, отворете модалния прозорец със слоеве и надпишете модула Divider („Overlay Color“).

Добавен е текст на заглавката на наслагване

Под модула Divider добавете нов модул Text. Той ще служи като текст на заглавката, който ще се показва в горната част на изображението при задържане на курсора на мишката.

Актуализирайте съдържанието с H2 заглавие:

<h2>Coaching</h2>

След това актуализирайте етикета на текстовия модул за бъдещи справки.

Под раздела Дизайн, актуализирайте следното:

• Подравняване на текст: центрирано
• Цвят на текста: Светъл

• Шрифт: Cormorant Garamond
• Тегло на шрифта: получер
• Размер на текста: 40px

• Ширина: 100%
• Максимална ширина: 85%

Под раздела Подробно, актуализирайте позицията, както следва:

• Позиция: Абсолютна
• Местоположение: горе център
• Вертикално отместване: 10%

ЗАБЕЛЕЖКА: Вертикалното отместване може да се нуждае от корекция в зависимост от съотношението на страните на изображението. Например, пейзажно изображение може да изисква по-малко отместване.

След това добавете следните CSS класове към текстовия модул:

• CSS клас: et-overlay-item move-down

В допълнение към класа „et-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%

Премахнете заглавката на наслагването

След това изтрийте модула Overlaid Header Text.

Коригирайте цвета на наслагването и CSS класа

Отворете настройките на модула Divider (цвят на наслагване) и актуализирайте фона със следното:

• Цвят на градиента на левия фон: 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 за всички времена.

Но междувременно, споделете тази статия във вашите различни социални мрежи.

...