[Ad_1]
Да вървим.
изследване
Преди да се потопим в урока, нека да разгледаме набързо резултата при различни размери на екрана.
бюро
подвижен
Изтеглете оформлението БЕЗПЛАТНО
За да получите безплатните оформления, първо трябва да ги изтеглите, като използвате бутона по-долу. За да получите достъп до изтеглянето, ще трябва да се регистрирате за нашия пощенски списък Divi Daily, като използвате формата по-долу. Като нов абонат, ще получавате още повече Divi предимства и безплатен пакет Divi Layout всеки понеделник! Ако вече сте в списъка, просто въведете имейл адреса си по-долу и кликнете върху „изтегляне“. Няма да бъдете „повторно абонирани“ или да получавате допълнителни имейли.
Нека започнем да се пресъздаваме!
Добавете 2x секции с заместители
Добавете нов раздел
Започнете, като добавите раздел със заместител към страницата, върху която работите.
оразмеряване
Отворете настройките на раздела и променете височината в настройките за оразмеряване.
Секция за клониране
Клонирайте секцията веднъж. Това ви оставя с две секции за контейнери на вашата страница. Тези секции за контейнери ще ви помогнат да видите крайния ефект, след като преминете през урока. На активен уебсайт секциите за контейнери ще бъдат заменени с нормални секции, които използвате в цялата страница.
Добавете нова секция между разделите на заместители
След като разделите на заместителя са на място, добавете нов раздел между разделите на заместителя.
Цвят на фона
Отворете настройките на раздела и използвайте бял цвят на фона.
- Цвят на фона: #ffffff
разстояние
Превключете към раздела за проектиране на секции и променете съответно горната и долната стойност на подложката:
- Подплата отгоре: 10vh
- Подложка отдолу: 10vh
Добавете ред №1
Структура на колоната
Продължете, като добавите нов ред към раздела, като използвате следната структура на колоните:
оразмеряване
Без още да добавяте модули, отворете настройките на реда, отидете на настройките за оразмеряване и променете максималните стойности на ширината и ширината.
- Ширина: 100%
- Максимална ширина: 100%
Добавете текстов модул към колоната
Добавете копие
Единственият модул, от който се нуждаем за този ред, е текстов модул. Добавете копие по ваш избор.
Текстови настройки
Превключете към раздела за проектиране на модули и променете съответно текстовите настройки:
- Текстов шрифт: Montserrat
- Тегло на текстовия шрифт: ултра смел
- Стил на шрифта на текста: главни букви
- Цвят на текста: # fff2ea
- Размер на текста: 11vw
- Височина на текстовия ред: 1 ем
- Подравняване на текста: в центъра
Добавете ред №2
Структура на колоната
Добавете друг ред към раздела, като използвате следната структура на колоните:
оразмеряване
Без още да добавяте модули, отворете настройките на реда и променете настройките за оразмеряване, както следва:
- Използвайте персонализирана ширина на улука: Да
- Ширина на улука: 2
- Ширина: 90%
- Подравняване на линията: в центъра
Добавете модул с изображения към колоната
Качете изображение
Добавете модул за картина към колоната на реда. Качете изображение по ваш избор.
подравняване
Превключете към раздела за проектиране на модули и променете съответно подравняването на изображението:
оразмеряване
След това преминете към настройките за оразмеряване и принудете модула с пълна ширина.
Добавете модул с бутони към колоната
Добавете копие
Следващият и последен модул, който ще добавим към колоната, е модул с бутони. Използвайте копие по ваш избор.
Подравняване на бутоните
Отидете в раздела Дизайн и променете подравняването на бутоните.
Настройки на бутона
След това оформете бутона, както следва:
- Използвайте персонализирани стилове за бутон: Да
- Размер на текста на бутона: 16px
- Цвят на текста на бутона: # 000000
- Цвят на фона на бутона: #ffffff
- Ширина на границата на бутона: 0px
- Разстояние между буквите на бутоните: 2px
- Шрифт на бутона: Montserrat
- Тегло на шрифта на бутона: удебелен
- Стил на шрифта на бутона: главни букви
разстояние
Също така използвайте персонализирани стойности за подложки в настройките за интервали.
- Подплата отгоре: 20px
- Подложка отдолу: 20px
- Подложка отляво: 5%
- Подложка отдясно: 5%
Добавете абсолютно позициониране към ред 1
След като завършите втория ред, върнете се към ред #1. Отворете настройките на реда, отидете в раздела за разширени и направете секцията абсолютна. По този начин редът и текстовият модул в него ще бъдат поставени под реда, съдържащ модула за изображение.
- Позиция: Абсолютна
- Местоположение: Център
Клонирайте ред n ° 1 и поставете дубликата под ред n ° 2
За да позволим на текстовия модул да се появи над изображението, ще ни трябва друг ред с по-висока стойност на z-индекс. Клонирайте първия ред и поставете дубликата под втория ред.
Приложете ефекти към ред 3
Увеличете Z индекса
Отворете дублиращия се ред и променете z индекса в раздела разширени.
Промяна на цвета на текста
Отворете текстовия модул в реда и променете цвета на текста.
Приложете режим на смесване към линията
След това отворете настройките на реда и променете режима на смесване в настройките на филтрите.
Използвайте превъртащия ефект върху текстовия модул в ред # 3
Добавете ефект на избледняване и изчезване
Завършете урока, като отворите отново текстовия модул, отидете на ефектите на превъртане и активирате ефекта на избледняване и изчезване. това е!
- Активиране на избледняване и изчезване: Да
- Начална непрозрачност: 0%
- Средно непрозрачно: 0% (до 26%)
- Крайна непрозрачност: 100% (при 28%)
- Задействане на ефект на движение: В средата на елемента
изследване
След като преминахме през всички стъпки, нека да разгледаме окончателно как изглежда на различни размери на екрана.
бюро
подвижен
Заключителни мисли
В тази статия ви показахме как да станете креативни с вградените ефекти на превъртане на Divi. По-конкретно, ние ви показахме как да смесвате копие при превъртане. Първоначално изглежда, че копието е под изображението. След превъртане копието се разкрива над изображението и се слива с изображението. Вие също успяхте да изтеглите JSON файла безплатно! Ако имате въпроси или предложения, не се колебайте да оставите коментар в секцията за коментари по-долу.
Ако искате да научите повече за Divi и да получите още безплатни продукти от Divi, не забравяйте да се абонирате за нашия имейл бюлетин и YouTube канал, за да сте винаги сред първите хора, които научават и се възползват от това безплатно съдържание.
[Ad_2]
