Създаването на ефекти на превъртане с помощта на разделител на секции е проста и забавна техника, която може да вдъхне живот на вашия уебсайт с тема Divi WordPress. Разделителят на секции продължава да бъде универсален дизайнерски елемент, полезен за добавяне на нотка креативност към преходите между съдържанието на страницата ви. 

Но с ефектите на превъртане на Divi, разделителите на секции стават още по-интересни! Номерът е да се изолира секция, посветена на избрания стил на разделител. След това можете да добавите всякакви движения, генерирани от превъртане, към секцията, за да създадете красиви ефекти на превъртане като фон за съдържанието на страницата.

Да започнем!

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

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

Как да създадете анимирани разделители за превъртане с Divi

Създаване на двата съдържателни секции

Добавете ред

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

Раздел на маржа (за тестове)

За целите на тестването добавете най-горния поле към раздела, за да имаме място за превъртане. Отворете настройките на раздела и добавете следното:

• Горна граница: 80vh

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

В реда на колона добавете нов текстов модул.

Съдържание на текстовия модул

Вътре в съдържанието на тялото добавете следния H2 заглавие:

<h2>Section Avec Séparateurs</h2>

Дизайн на текстов модул

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

• Шрифт на текст: Roboto
• Подравняване на текста: център
• Елемент 2 Цвят на текста: # bae0d8
• Заглавка 2 Размер на текста: 80px (десктоп), 50px (таблет), 30px (телефон)

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

Под предишния раздел добавете нов редовен раздел.

Добавете ред

В новия раздел добавете ред в колона.

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

След това добавете нов текстов модул към реда.

Дизайн на текстов модул

Засега можем да запазим съдържанието на подложката по подразбиране в тялото. Нека да преминем към раздела за дизайн и да актуализираме следното:

• Шрифт на текст: Roboto
• Цвят на текста на текста: #dddddd
• Размер на текста: 16px
• Височина на текстовия ред: 1,5 em
• Подравняване на текст: отляво
• Максимална ширина: 400 px
• Подравняване на модула: център

Настройки на секцията

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

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

• Цвят на фона: rgba (0,0,0,0)
• Долен марж: 80vh
• Подложка: 0px

Създаване на разделител на анимираните секции

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

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

Напред и създайте нов редовен раздел в средата на двете секции със съдържание.

Контекст на раздела

И отново премахнете цвета на фона по подразбиране на раздела, но актуализирайте следното:

• Цвят на фона: rgba (0,0,0,0)

Дизайн на разделител на секции

Не се притеснявайте, ние ще създадем нашия цвят на фона с разделителите на секциите. За да направите това, кликнете върху раздела за проектиране и добавете горен и долен разделител към раздела, както следва:

Превъзходен дизайн на разделители

• Top Divider Style: вижте екранната снимка
• Цвят на горния разделител: # 524fbf
• Височина на горния разделител: 20vw
• Хоризонтално повторение на горния разделител: 0,6x
• Обръщане на горния разделител: хоризонтален

Дизайн на долен разделител

• Стил на долния разделител: вижте екранната снимка
• Цвят на долния разделител: # 524fbf
• Височина на долния разделител: 20vw
• Хоризонтално повторение на долния разделител: 0,5x
• Наклон на долния разделител: хоризонтален и вертикален

Височина на секцията и подплънки

Тъй като този раздел е предназначен само за дизайн на разделител, можем да се отървем от височината и подложките, така че да се показва само стилът на разделителя и да не излиза ненужно пространство между двете раздели на съдържанието. Актуализирайте следното:

• Височина: 0px
• Подплащане: 0px високо, 0px ниско

Ефекти на превъртане на разделител

След това дайте на секцията следните ефекти на превъртане:

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

• Активирайте хоризонтално движение: ДА

Можем да запазим настройките по подразбиране за тази на изгледа на бюро .

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

• Стартово изместване: 3 (при 0% от прозореца)
• Средно отместване: 0 (при 50% от областта за гледане)
• Крайно отместване: -3 (при 100% от прозорчето)

Под раздела Ефект на мащабиране нагоре и надолу , актуализирайте следното в бюро ...

• Начална скала: 200% (при 0% от прозореца)
• Средна скала: 150% (при 45% -65% от прозореца)
• Крайна скала: 150% (при 100% от изгледа)

След това актуализирайте ефекта Мащабиране нагоре и надолу върху представлява таблетка както следва:

• Начална скала: 400% (при 0% от прозореца)
• Средна скала: 300% (при 45% -65% от прозореца)
• Крайна скала: 400% (при 100% от изгледа)

Основната причина, поради която трябва да коригираме ефектите на движението върху таблета (и телефона), се дължи на хоризонталните стойности на движението с помощта на единици за дължина на пиксела (т.е. 3 = 300 пиксела), които са абсолютни и не се приспособяват към ширината на браузъра.

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

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

Анимационните разделители на раздели на свитъка са забавен и ефективен начин за оживяване на уеб страница. Надявам се, че това ви дава малко вдъхновение, за да предизвикате още по-креативни дизайни.