Искате ли да създадете биография с DIVI на членовете на вашия екип с ефект на задържане?
Не е тайна, че страниците за Тези страници са идеални за създаване на взаимодействия на вашия уебсайт. Те също така подчертават човешката страна на бизнеса, стоящ зад уебсайта.
Едно от нещата, които можете да направите, за да подобрите опит на страницата за е да предоставите раздел за членовете на екипа, който поставя вашите служители в светлината на прожекторите.
Прочетете още: Divi: Как да създадете прозрачен и лепкав глобален хедър
В този урок ще ви покажем стъпка по стъпка как да го направите. След като разберете подхода, можете да го персонализирате, за да отговаря на вашите собствени нужди.
Да вървим!
изследване
Преди да се потопим в урока, нека разгледаме резултата на екрани с различни размери.
Настолен компютър
подвижен
Добавете нов раздел
разстояние
Създайте нова страница или отворете съществуваща и добавете нова секция, като използвате следните персонализирани стойности за подплата:
- Вътрешно поле (отгоре и отдолу): 100px
Добавете ред #1
Структура на колоната
След като приключите с добавянето на персонализирани вътрешни полета към секцията си, можете да затворите настройките на секцията и да добавите нов ред, използвайки една колона.
Добавяне на текстов модул
Добавете текстов модул към колоната със заглавие с размер H2 по ваш избор.
Настройки за текст на H2
След това отидете на настройките на H2 текст и направете някои промени.
- Заглавен шрифт: Cinzel
- Стил на копиране на горния колонтитул: Tt (вижте заснемането)
- Подравняване на текста: Центрирано
- Размер на заглавния текст: 70px
Добавяне на разделителен модул
видимост
Продължете, като добавите нов разделителен модул точно под текстовия модул.
- Показване на разделител: Да
Цвят на разделителя
Отидете в раздела „Стил“, отворете настройките за цвят и променете цвета на разделителя съответно:
- Цвят на етикета: #333333
оразмеряване
Тогава ще намалим размера на разделителя и ще го центрираме.
- Максимална ширина: 26%
- Подравняване на текст: Център
Добавете ред 2
Структура на колоната
Малко под предишния ред, който сте добавили, продължете и добавете нов ред, използвайки три колони с еднакъв размер.
оразмеряване
Без да добавяте модули, отворете настройките на линията и направете някои промени в настройките за оразмеряване.
- Използвайте персонализирана ширина на улука: Да
- Разстояние между колоните: 1
- Максимална ширина: 2 пиксела
- хармонизиране на височините на колоните: Да
разстояние
След това отворете настройките за разстояние и добавете персонализирани стойности за полета.
- Поле (отгоре и отдолу): 50 px
- Вътрешно поле: (Горно и долно: 10px), (Ляво и дясно: 5px)
Въведете параметрите на всяка от колоните и също така променете стойностите на вътрешните полета, както следва:
- Вътрешно поле (ляво и дясно): 5px
Кутия за сянка
Ние също така придаваме на нашата линия известна дълбочина, като добавяме сянка на кутия към нея със следните настройки:
- Сила на замъгляване на сянката на кутията: 80px
- Сила на разпръскване на сянка в кутия: -14px
- Цвят на шрифта на субтитрите: rgba(0,0,0,0.3)
Добавете модул Image към колона 1
Заредете изображение в модула Изображение
Време е да започнете да добавяте модули!
За да постигнем ефекта на био-обзор, ще ни трябват общо два модула; модул за изображение и модул за обобщение.
Вижте също: Divi: Как да създадете адаптивна решетка с изображения с връзки и ефекти при задържане
Модулът „Изображение“ ще съдържа изображението на члена на екипа, когото искате да представите. Модулът „Обобщение“, от друга страна, ще се използва за добавяне на иконата в долния ляв ъгъл и биографията при задържане на курсора на мишката.
Добавете модул Image към първата колона, като използвате изображение с квадратен размер.
филтри
Дизайнът, който създаваме, е изцяло в сива скала. За да добавите тази сива скала към нашето изображение, отидете в настройките на филтрите и премахнете цялата наситеност.
- Наситеност: 0%
Добавете модула Резюме към колона 1
Продължете, като добавите нов модул „Обобщение“ точно под модула „Изображение“ в колона 1. Добавете името на члена на екипа в полето за заглавие и въведете допълнителна информация за члена на екипа в областта за съдържание.
Изберете иконата
Следващото нещо, което ще направим, е да изберем икона за избор, която ще покаже на посетителите, че има нещо повече от просто изображение.
Цвят на фона по подразбиране
След това ще изберем напълно прозрачен цвят на фона.
- Фон: rgba (255,255,255,0)
Цвят на фона при задържане на курсора на мишката
И ние ще променим този цвят при задържане.
- Цвят на фона: rgba (255,255,255,0.88)
Настройки на иконите по подразбиране
Искаме видима икона, която ще помага на посетителите да разберат, че могат да задържат курсора на мишката върху нея. Променете настройките на иконата, за да получите икона като тази.
- Цвят на иконата: #ffffff
- Цвят на фона на изображение/икона: #000000
- Разположение на изображение/икона: отляво
- Ширина на изображение/икона: 50px
- Изображение/икона със заоблен правоъгълник: 100px
Настройки на иконата при задържане на курсора на мишката
Не искаме обаче иконата да се появява при задържане на курсора на мишката. Ето защо ще използваме напълно прозрачен цвят.
- Цвят на иконата: rgba (255,255,255,0)
- Цвят на фона на изображение/икона: rgba(255,255,255,0)
Настройки на текста на заглавието по подразбиране
След това отидете на настройките на текста на заглавието и направете някои промени.
- Заглавие на шрифта: Cinzel
- Мек светъл текст: удебелен текст
- Заглавие Стил на копиране: Tt
- Цвят на текста на заглавието: #000000
- Размер на заглавния текст: 0px
Настройки за заглавие на курсора
Променете размера на текста при задържане.
- Размер на текста на заглавието: 30px
Текст на презентацията по подразбиране
Също така променете настройките на рекламния текст.
- Тяло на шрифта: Open Sans
- Цвят на основния текст: #000000
- Размер на основния текст: 0px
Настройки за задържане на основния текст
И отново, променете размера на основния текст при задържане.
- Размер на основния текст: 14px
Разстояние по подразбиране
И накрая, ще трябва да създадем припокриване между модула Резюме и модула Изображение, като използваме отрицателно горно поле.
- Горно поле: -3,7 vw (десктоп), -9 vw (таблет и телефон)
- Долно поле: 1,5 vw (таблет), 2 vw (телефон)
Разстояние при зависване
Променете стойностите на маржовете при задържане.
- Марж (отгоре): -11,38 vw
- Вътрешно поле: (отгоре и отдолу: 20px), (дясно: 50px)
Клонирайте колона 1 два пъти
Завършихме създаването на първия ни био ефект при задържане на курсора на мишката. За да спестим време, можем просто да клонираме колона 1 два пъти от настройките на реда. Първо изтрийте другите две колони, след което щракнете двукратно, за да клонирате колона 1.
Променете изображението и съдържанието на модула „Обобщение“ в клонираните колони
Не забравяйте да промените изображението в модула „Изображение“ и описанието в модула „Обобщение“, за да завършите!
изследване
След като преминахме през всички стъпки, нека да разгледаме за последен път резултата на различни размери на екрана.
Настолен компютър
подвижен
Изтеглете DIVI сега!!!
Заключение
В тази статия ви показахме как да създадете ефект на задържане на курсора на мишката върху снимки на членове на екипа, използвайки само вградените опции на Divi. Споменахме също колко е важно да се създават добри страници „За нас“, тъй като те са сред най-посещаваните уеб страници.
Използването на ефекти при задържане на курсора върху снимки на членове на екипа не само ще издигне страницата ви „За нас“ на следващото ниво, но и ще създаде взаимодействие с посетителите ви. Ако имате въпроси или предложения, нека се свържем. раздел коментари за да го обсъдим.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...