Искате ли членовете на вашия екип да бъдат представени под формата на въртележка с Divi ?
Когато настройвате страницата си About, вероятно ще искате да включите и членовете на вашия екип там. Правейки това, позволявате посетители да се свържете с хората зад вашия бизнес.
Ако търсите начин да анимирате секцията на членовете на вашия екип при превъртане, ще ви хареса този урок.
Ще пресъздадем красива въртележка за членове на екипа с автоматично превъртане, която се движи като ваша посетители превъртете страницата.
Да вървим.
изследване
Преди да се потопим в урока, нека хвърлим бърз поглед на резултата при различни размери на екрана.
Настолен компютър
Мобилна версия
Нека започнем да проектираме с Divi
Прочетете още: Divi: Как да разкриете съдържание при задържане на курсора на мишката върху разделителя на раздела
Добавете нов раздел
Вътрешни магове
Започнете, като добавите нов редовен раздел към страницата, върху която работите. Отворете настройките на раздела и добавете персонализирани подложки за различни размери на екрана.
- Подложка (отгоре и отдолу): 200px (десктоп), 100px (таблет и телефон)
видимост
За да гарантираме, че в нашия дизайн няма да се появяват хоризонтални ленти за превъртане, ние ще скрием препълването на секции в разширения раздел.
- Хоризонтално преливане: Скрито
- Вертикално преливане: Скрито
Добавете ред #1
Структура на колоната
Продължете, като добавите нов ред към раздела, като използвате следната структура на колоните:
Широчина
Без да добавяте още модули, отворете настройките на линията, превключете към раздела Дизайн и променете ширината и максималната ширина в настройките за оразмеряване.
- Ширина: 90%
- Максимална ширина: 1px
разстояние
Добавяме и персонализирани горна и долна подплънка.
- Подложка (отгоре и отдолу): 100px
Добавете текстов модул към колоната
Добавете съдържание с размер H2
Време е да добавите модули, като започнете с първия текстов модул. Въведи а съдържание H2 размер по избор.
Настройки за текст на H2
Превключете към раздела Дизайн на модула и променете текстовите параметри на H2, както следва:
- Шрифт: плаващ пясък
- Тегло на шрифта: Полудебел
- Цвят на текста: #000000
- Размер на текста: 70px (десктоп), 50px (таблет), 40px (телефон)
Добавете модул "Разделител" към колоната
видимост
След това добавете модул делител. Уверете се, че опцията „Показване на разделител“ е активирана.
- Показване на разделител: ДА
Ligne
След това направете някои промени в настройките на линията.
- Цвят на линията: #edf000
- Стил: плътен
- Позиция на линията: отгоре
Оразмеряване
И завършете параметрите на модула, като промените съответно параметрите за оразмеряване:
- Тегло на разделителя: 20px
- Ширина: 11%
- Модул за подравняване: ляво
- Височина: 20px
Добавете ред 2
Структура на колоната
Следващ ред! Използвайте следната структура на колоните:
Оразмеряване
Без още да добавяте модули, отворете настройките на реда и променете настройките за оразмеряване, както следва:
- Използване на персонализирана ширина на улука: Да
- Ширина на улука: 2
- Ширина: 100%
- Максимална ширина: 100%
Интервал (само за таблет и телефон)
След това добавете ляво и дясно подложка само на малки размери на екрана.
- Подложка (отляво и отдясно): 5% (само за таблет и телефон)
Настройки на колоните (5x)
Сега, в следващите три стъпки от този урок, ще направим някои промени в колоните. Приложете трите стъпки към всяка от колоните във вашия ред.
Градиент на фона
Първо добавете градиентен фон към всяка колона.
- Градиентни стопове (25%): rgba(255,255,255,0)
- Градиентни стопове (86%): rgba(0,0,0,0.84)
- Тип: Линеен
- Квадратен градиент над фоновото изображение: ДА
Фоново изображение
След това качете фоново изображение по ваш избор. Това фоново изображение представлява всеки член на екипа, така че използвайте различно изображение за всяка колона.
- Размер на фоновото изображение: корица
- Позиция на фоновото изображение: Център
Добавен персонализиран CSS (само за таблет)
Завършете настройките на колоната, като добавите персонализиран CSS към основния елемент (За изглед Таблети само) от всяка колона.
Тези редове от CSS код ще ни помогнат да поставим колоните една под друга на таблета, вместо две една до друга.
width: 100% !important;
margin: 50px 0px 50px 0px !important;
Добавете модул „Човек“ към колоната
Добавете съдържание
За да споделяме информация за членовете на екипа, ще използваме модул Човек.
Добавете първия модул Person към колона 1 и използвайте съдържание по ваш избор.
Изтриване на изображението
След това изтрийте изображението. Вместо това използваме фоновото изображение на колоната.
Фоново изображение
След това ще добавим наслагване на изображение като фоново изображение за модула.
- Размер на фоновото изображение: корица
- Позиция на фоновото изображение: център
Настройки за текст на заглавието
Превключете към раздела Дизайн модул и променете настройките на текста на заглавието, както следва:
- Ниво на заглавие: H3
- Шрифт на заглавието: плаващ пясък
- Тегло на шрифта: получер
- Цвят на текста на заглавието: #ffffff
- Размер на текста на заглавието: 230%
Настройки на основния текст
Също така променете настройките на текста на тялото.
- Основен шрифт: Open Sans
- Цвят на текста: #ffffff
- Височина на реда: 2,2 em
Настройки за текстови публикации на член на екипа
След това направете някои промени в текстовите настройки на позицията, заемана от члена на екипа.
- Позиция на шрифта: Отворете без
- Цвят на текста на позицията: #edf000
разстояние
И завършете настройките на модула, като добавите персонализирани стойности за подплънки към настройките на разстоянието.
- Подплата: 70% (отгоре), 10% (отдолу, отляво и отдясно)
Клонирайте модула „Човек“ четири пъти
След като завършите модула Person, можете да клонирате целия модул четири пъти.
Поставете дубликати в останалите колони
Поставете дублирани модули в останалите четири колони на реда.
Също така не забравяйте да промените съдържание.
Превърнете ред в въртележка с автоматично превъртане
Вижте също: Divi: Как да създадете решетка с течни колони при задържане
Променете размера на ред #2
Сега, за да превърнем тази линия в автоматично превъртаща се въртележка, ще трябва да отворим отново настройките на линията и да променим ширината и максималната ширина в настройките за оразмеряване.
- Ширина: 180%
- Максимална ширина: 220% (настолен компютър), 100% (таблет и телефон)
Добавете хоризонтално движение към ред 2
Завършете настройките на линията, като добавите хоризонтално движение към настройките на ефекта на превъртане в раздела Подробно под опция Ефекти на превъртане и сте готови!
- Разрешаване на хоризонтално движение: Да
- Начално отместване:
- Десктоп: 2,5
- Таблет и телефон: 0
- Средно отместване: 0 (до 40%)
- Крайно отместване:
- Настолен компютър: -25 (до 62%)
- Таблет и телефон: 0
- Задействане на ефекта на движение: средата на елемента
изследване
След като преминахме през всички стъпки, нека да разгледаме окончателно как изглежда на различни размери на екрана.
Настолен компютър
Изтеглете DIVI сега!!!
Мобилен изглед
Изтеглете DIVI сега!!!
Заключение
В тази статия ви показахме как да бъдете креативни с вградените ефекти на превъртане на Divi.
По-конкретно, пресъздадохме красива въртележка, включваща членове на екипа с автоматично превъртане. Когато посетители превъртете страницата, появява се друга част от въртележката.
Надяваме се, че този урок ще ви вдъхнови за следващите ви проекти. Divi. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...