Ефектите за превъртане на Divi носят множество нови дизайнерски възможности на уебсайтовете, които създавате. Фините взаимодействия, които изберете да добавите, наистина могат да помогнат за подобряване на цялостния вид и усещане на вашия уебсайт. Всичко става още по-добро, когато синхронизирате ефектите на превъртане. В този урок ще се занимаем специално със създаването на красива секция за герои, която се сблъсква с колони при превъртане. Дизайнът на главната секция обединява две различни колони при превъртане, което от своя страна помага да се подчертае текстът. 

Възможен резултат

След като преминахме през всички стъпки, нека да разгледаме резултата при различни размери на екрана.

Пресъздайте оформлението на секцията Hero

Добавете нов раздел

Персонализиране на цвета на фона

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

• Цвят на фона: # f4f2f7

разстояние

Отстранете също горната и долната подложка по подразбиране от всички секции.

• Горна подложка: 0px
• Подложка отдолу: 0px

Добавете нов ред

Структура на колоната

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

оразмеряване

Без да добавяте модули все още, отворете параметрите на реда и променете съответно параметрите за оразмеряване:

• Използвайте персонализирана ширина на улука: Да
• Ширина на улука: 1
• Изравнете височините на колоните: Да
• Ширина: 100%
• Максимална ширина: 100%

разстояние

След това премахнете всички по подразбиране горна и долна подплънка.

• Горна подложка: 0px
• Подложка отдолу: 0px

залято

И скрийте преливанията на реда.

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

Настройки на колона 1

разстояние

След това отворете настройките в колона 1 и добавете персонализирани стойности за запълване.

• Горна подложка: 15vw
• Подложка отдолу: 10vw
• Ляв подплънки: 5vw
• Десен подплънки: 5vw

Z индекс

Също така увеличете z индекса на колоната.

• Z индекс: 12

Настройки на колона 2

Изображение на фона

Продължете, като отворите настройките в колона 2 и качете фоново изображение по ваш избор.

• Размер на фоновото изображение: Корица
• Позиция на фоновото изображение: Център
• Повторете фоновото изображение: няма повторение
• Смесване на фонови изображения: Нормално

Добавете текстов модул # 1 в колона 1

Добавете H1 съдържание

Време е да добавите модули, като започнете с първи текстов модул в колона 1. Добавете всяко съдържание H1 по ваш избор.

Настройки за текст на H1

Преминете към раздела за проектиране на модула и променете съответно настройките на текста H1:

• Шрифт на заглавието: Shadows in light
• Тегло на шрифта на заглавието: удебелен
• Цвят на заглавния текст: # 000000
• Размер на заглавния текст: 6vw (десктоп), 11vw (таблет), 13vw (телефон)
• Разстояние между буквите в заглавката: -2px
• Височина на линията на главата: 1.2ем

разстояние

Добавете също и топ марж.

• Горна граница: 10vw

Добавете текстов модул # 2 в колона 1

Добавете съдържание

Поставете друг текстов модул със съдържание на описание по ваш избор.

Текстови настройки

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

• Шрифт на текст: Open Sans
• Цвят на текста: # 1e1e1e
• Размер на текста: 0.9vw (десктоп), 1.9vw (таблет), 3vw (телефон)
• Височина на текстовия ред: 2,4 em

разстояние

И добавете персонализирани стойности на полета на различни размери на екрана.

• Горна граница: 4vw (десктоп), 8vw (таблет), 12vw (телефон)
• Долен марж: 4vw (десктоп), 8vw (таблет), 12vw (телефон)

Добавете модул с бутони към колоната 1

Добавете копие

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

Настройки на бутона

Променете параметрите на бутоните на модула, както следва:

• Използвайте персонализирани стилове за бутона: Да
• Размер на текста на бутона: 1vw (десктоп), 2vw (таблет), 3vw (телефон)
• Цвят на бутона на бутона: #ffffff
• Цвят на фона на бутона: # 000000
• Ширина на рамката на бутона: 0px
• Радиус на рамката на бутона: 100px

• Шрифт на бутона: Отваряне без

разстояние

И завършете настройките на бутоните, като добавите персонализирани стойности за подплата на различни размери на екрана.

• Горна подложка: 1vw (десктоп), 2vw (таблет), 3vw (телефон)
• Подложка отдолу: 1vw (бюро), 2vw (таблет), 3vw (телефон)
• Ляв подплънки: 3vw (десктоп), 5vw (таблет), 7vw (телефон)
• Дясно подплънки: 3vw (бюро), 5vw (таблет), 7vw (телефон)

Добавете текстов модул в колоната 2

Добавете съдържание

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

Текстови настройки

Преминете към раздела за дизайн на модула и променете съответно настройките на текста:

• Шрифт на текста: сенки на светлината
• Цвят на текста: rgba (0,0,0,0,25)
• Размер на текста: 9vw (десктоп), 14vw (таблет и телефон)
• Разстояние между текстовите букви: -3px
• Височина на реда на текста: 1em
• Подравняване на текст: център (офис), отляво (таблет и телефон)

разстояние

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

• Горна подложка: 5vw (бюро),
• Подложка отдолу: 60vw (таблет и телефон)
• Ляв подплънки: 5vw (таблет и телефон)

Прилагане на анимации за превъртане

раздел

Изкачване и слизане

След като всичките ви модове са на място, е време да приложите ефектите за превъртане! Първо отворете параметрите на раздела и използвайте следния ефект на мащаба:

• Активирайте Sclaing отгоре надолу
• Начална скала: 100% (до 49%)
• Средна скала:
  • Офис: 70% (100%)
  • Таблет и телефон: 100% (100%)
• Крайна скала:
  • Офис: 70%
  • Таблет и телефон: 100%

Колона 1

Хоризонтално движение

Продължете, като отворите настройките в колона 1 и използвайте следния ефект на хоризонтално движение:

• Активиране на хоризонтално движение: Да
• Старт компенсира: 0
• Средно компенсиране:
  • Офис: 0 (при 65%)
  • Таблет и телефон: 0 (93%)
• Край компенсира:
  • Офис: 6
  • Таблет и телефон: 0

Изкачване и слизане

Също така приложете ефект на мащабиране нагоре и надолу към колоната.

• Разрешаване на мащабиране нагоре и надолу: Да
• Начална скала:
  • Офис: 10%
  • Таблет и телефон: 100%
• Средна скала:
  • Офис: 90%
  • Таблет и телефон: 100%
• Крайна скала: 100%

Колона 2

Хоризонтално движение

След това отворете параметрите в колона 2 и използвайте следните параметри на хоризонтално движение:

• Активиране на хоризонтално движение: Да
• Старт компенсира: 0
• Средно компенсиране:
  • Офис: 0 (при 53%)
  • Таблет и телефон: 0 (56%)
• Край компенсира:
  • Офис: -6 (при 53%)
  • Таблет и телефон: 0 (100%)

Избледняват и излизат

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

• Активиране на избледняване и изчезване: Да
• Първоначална непрозрачност: 100% (при 47%)
• Средна непрозрачност:
  • Офис: 0% (47%)
  • Таблет и телефон: 100% (47%)
• Край на непрозрачността:
  • Офис: 0%
  • Таблет и телефон: 100%

Заключителни мисли

В тази статия ви показахме как креативно да използвате ефектите за превъртане на Divi, за да създадете свиваща се секция на героя. Докато посетителите превъртат, двете различни колони и техните елементи започват да се сливат. Това от своя страна ще ви позволи да подчертаете допълнително текста.

Други ресурси

Ето списък със съдържание, което ще ви позволи да правите повече с вашата WordPress тема Divi.

• Как да използвате блога модул на Divi
• Как да използвате кодовия модул на Divi
• Как да използвате модула Summary на Divi