Страницата, която говори за вас (за) е една от най-важните страници от вас уеб сайт. Това позволява на хората да ви опознаят по-добре и да решат дали им е приятно да направят следващата стъпка. Ако търсите лесен начин да включите разказ на тази страница, този урок ще ви хареса. Ще използваме ефектите на превъртане на Divi, за да създадем плавен преход на разказ при превъртане. Щом една част от историята избледнее, се появява друга. Това дава посетители усещането да четеш интересна история. 

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

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

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

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

Цвят на фона

Започнете с добавяне на първа секция към вашата страница „Информация“. Отворете настройките на раздела и променете цвета на фона на черен.

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

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

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

• Минимална височина: 100vh

2. Добавете анимирана линия

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

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

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

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

Отворете параметрите на линията и позволете на линията да заеме цялата ширина на контейнера с секции чрез промяна на параметрите за оразмеряване.

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

разстояние

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

• Ляв подплънки: 20vw (бюро), 10vw (таблет и телефон)
• Дясно подплънки: 20vw (бюро) 10vw (таблет и телефон)

Анимация

За да увеличим ефекта от разказването на истории, ще използваме и постепенна анимация за линията.

• Анимационен стил: Fade
• Продължителност на анимацията: 3000ms
• Крива на скоростта на анимация: лекота навлизане
• Повторение на анимацията: веднъж

Позиция

И накрая, ще се уверим, че линията е разположена в центъра на контейнера за секции, като променяме опциите за позициониране.

• Позиция: абсолютна
• Местоположение: Център

3. Поставете заглавие с ефекти на превъртане

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

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

Единственият модул, от който се нуждаем в този ред, е текстов модул със съдържание H1.

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

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

• Шрифт на заглавието: Nunito
• Тегло на шрифта на заглавието: Полу-удебелен
• Цвят на заглавния текст: #ffffff
• Размер на заглавния текст: 7vw (десктоп), 9vw (таблет), 11vw (телефон)

Вертикално движение

Ще добавим и фина вертикална анимация.

• Активиране на вертикалното движение: Да
• Стартово изместване: 0 (при 50%)
• Средно компенсиране: 10 (при 100%)
• Окончателно компенсиране: 10

Ефект на превъртане на входящи и изходящи

С входящ и изходящ ефект на избледняване.

• Активиране на избледняване и изчезване: Да
• Начална непрозрачност: 100%
• Средна непрозрачност: 100% (при 55%)
• Крайна непрозрачност: 0% (до 62%)

Мащабиране на ефекта на превъртане нагоре и надолу

Не на последно място, ние също ще използваме ефект на превъртане нагоре и надолу.

• Разрешаване на мащабиране нагоре и надолу: Да
• Начална скала: 100% (до 40%)
• Средна скала: 95% (до 74%)
• Крайна скала: 90%

4. Клонирайте цял раздел веднъж и включете текста на описанието с ефекти на превъртане

Редактирайте заглавието и съдържанието

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

Променете текстовите параметри на текстовия модул H2

Променете съответно H2 текстовите настройки:

• Дял 2 Полиция: Нунито
• Заглавие на шрифта 2: полу-удебелен шрифт
• Елемент 2 Цвят на текста: #ffffff
• Елемент 2 Размер на текста: 5vw (десктоп), 7vw (таблет), 8vw (телефон)
• Височина на линия 2: 1em (офис), 1.2em (таблет и телефон)

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

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

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

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

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

• Шрифт на текст: Open Sans
• Цвят на текста: #ffffff
• Размер на текста: 1vw (десктоп), 2.5vw (таблет), 3vw (телефон)
• Височина на текстовия ред: 3.1em (бюро), 2.5em (таблет и телефон)

разстояние

Използвайте и горен марж.

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

Ефект на превъртане на входящи и изходящи

След това превключете към ефекти за превъртане в разширения раздел и използвайте следните настройки за избледняване и избледняване:

• Активиране на избледняване и изчезване: Да
• Начална непрозрачност: 100%
• Средна непрозрачност: 0% (при 31%)
• Крайна непрозрачност: 0% (до 35%)

Мащабиране на ефекта на превъртане нагоре и надолу

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

• Разрешаване на мащабиране нагоре и надолу: Да
• Начална скала: 100% (до 40%)
• Средна скала: 95% (до 74%)
• Крайна скала: 90%

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

изследване

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

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

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