Искате ли да знаете как да създадете раздел Hero с модула Fullwidth Header на Divi?
Изграждането на раздел Hero е чудесен начин да привлечете вниманието към съдържание важни за вашата страница. Това е съдържание голям размер, който можете да използвате, за да разкажете своята история, да споделите информация за работата си или да подчертаете продукт или услуга.
С модула Fullwidth Header на Divi можете да добавите заглавие, подзаглавие, два бутона, основен текст, изображение на лого и изображение на заглавие. Разбира се, можете също да използвате опциите за фон, за да добавяте и комбинирате изображения, градиенти, цветове, шарки и маски.
Можете да промените всички тези настройки в настройките на модула, вместо да се налага да превключвате между няколко модула с изображения, текст и бутони.
В този урок ще ви покажем как да създадете атрактивен и привличащ вниманието Hero раздел с помощта на модула Fullwidth Header на Divi.
Да вървим!
изследване
Ето предварителен преглед на това, което ще проектираме.
Какво трябва да започнете
Преди да започнете, уверете се, че имате най-новата версия на Divi на вашия уеб сайт.
Сега сте готови да започнете!
Как да създадете геройска секция с модула за заглавка с пълна ширина на Divi
Прочетете още: Divi: Как да използвате „Gradient Builder“, за да разкрасите вашите изображения
Създайте нова страница с предварително дефинирано оформление
Нека започнем с използване на предварително дефинирано оформление от библиотеката Divi. За този дизайн ще използваме началната страница ветеринарен пакет оформление.
От таблото за управление на Worpress добавете нова страница към вашата уеб сайт
Дайте му заглавие, след което изберете опцията Използвайте Divi Builder.
За този пример ще използваме предварително дефинирано оформление от библиотеката Divi. Така че изберете Преглед на оформления.
Намерете и изберете оформлението Развъдчик на кучета.
Изберете Използвайте това оформление за да добавите оформлението към вашата страница.
Вече сме готови за проектиране.
Добавете модула Fullwidth Header
Ще пресъздадем раздела за героя с помощта на модула Fullwidth Header. Добавете нова секция с пълна ширина към страницата под съществуващата заглавка.
Добавете модул Fullwidth Header към секцията.
След това изтрийте оригиналната заглавна секция.
Персонализирайте модула Fullwidth Header
Добавете съдържание
Отворете настройките на модула и добавете съдържание до модула:
- Заглавие: ветеринарен лекар
- Подзаглавие: Divivet. Сервирайте нашите най-добри приятели
- Бутон №1: Всички услуги
- Бутон №2: Уговорете час
- Тяло: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta.
След това добавете заглавно изображение.
Настройки за градиентен фон
Отидете на фоновите настройки. Изтрийте оригиналния фонов цвят, след което добавете фонов градиент.
- 0%: rgba(255,170,205,0.48)
- 40%: rgba(110,66,255,0.24)
- 87%: rgba(124,239,255,0.71)
- Тип градиент: Елиптичен
- Позиция на градиента: вдясно
След това изберете раздела Фонова маска и добавете фонова маска.
- Фон на маската: Ъглово петно
- Цвят на маската: #FFFFFF
- Трансформация: вертикална
Персонализиране на текста
Превключете към раздела Дизайн и променете настройките на заглавието
- Шрифт на заглавието: Nunito
- Тегло на заглавния шрифт: Ultra Bold
- Стил на шрифта: TT (главни букви)
- Цвят на текста на заглавието: #a9cb6b
- Размер на текста: 14px
- Разстояние между заглавните букви: 2px
Отидете в раздела на Основен текст и персонализирайте шрифта.
- Цвят на текста: #000000
- Размер на основния текст:
- Работен плот: 18px
- Телефон: 14px
- Височина на тялото: 1.8 ем
Вижте също: Divi: Как да персонализирате кошницата и иконите за търсене на модула „Меню с пълна ширина“
След това отворете настройките на субтитрите и персонализирайте шрифта.
- Шрифт на субтитрите: Nunito
- Тегло на шрифта на субтитрите: получер
- Цвят на текста: #000000
Накрая променете размера на текста
- Размер на текста на субтитрите:
- Работен плот: 56px
- Подвижен: 32px
- Височина на реда на субтитрите: 1.2em
Персонализиране на бутон #1
След това ще персонализираме стиловете на бутоните. Започнете, като активирате персонализирани стилове за бутон едно, след което коригирайте размера на текста.
- Използване на персонализирани стилове за бутон: ДА
- Размер на текста на първия бутон: 14px
Добавете фонов градиент към бутона. Стойностите на градиента са както следва:
- 58%: #316EFF
- 100%: #1D2B60
- Посока на градиента: 90 градуса
След това персонализирайте настройките на рамката и настройките на шрифта.
- Бутон едно:
- Ширина на рамката: 0px
- Радиус на границата: 80px
- Разстояние между буквите: 2px
- Шрифт: Nunito
- Тегло на шрифта: Ultra Bold
- Стил: TT (с главни букви)
- Показване на икона на бутон One: НЕ
След това персонализирайте настройките за полето и подложката за дизайна на работния плот и добавете сянка на кутия.
- Бутон Едно поле
- Горна част: 200px
- Отдолу: 0px
- Подплата за бутон едно:
- Горна част: 16px
- Долу: 16px
- Ляво: 2em
- Вдясно: 50 em
- Box Shadow: Преглед на заснемане
Използвайте адаптивни настройки, за да зададете различни стойности на маржове и подложки на мобилни устройства.
- Бутон едно поле-отгоре-мобилен: 25px
- Бутон One Padding-Right-Mobile: 10em
Персонализиране на бутон #2
Първо щракнете с десния бутон върху бутона №1 и щракнете Копиране на стилове на един бутон.
След това щракнете с десния бутон върху бутон две и поставете стиловете от бутон #1.
Сега можем да персонализираме бутон две. Промяна на цвета на текста.
- Цвят на текста на бутон две: #121F60
Персонализирайте фоновия градиент за бутон две.
- 30%: rgba(0,229,198,0)
- 100%: #00e5c6
Използвайте адаптивни настройки, за да коригирате градиента на фона за мобилни устройства.
- 0%: rgba(0,229,198,0)
- 100%: #00e5c6
След това коригирайте полето и подложката за дизайна на работния плот.
- Поле на бутон две:
- Горе: 0 пиксела
- Отдолу: 0px
- Ляво: 30%
- Бутон две подложки:
- Горна част: 16px
- Отдолу: 16px
- Ляво: 48em
- Вдясно: 2 em
Използвайте настройките на responsifq, за да зададете различни стойности на маржове и подложки за мобилен дизайн.
- Бутон две поле-ляво-мобилно: 5%
- Бутон две подложки:
- Ляв мобилен: 35%
- Десен мобилен: 5%
Персонализиран CSS
И накрая, по-голямата част от проектантската работа е завършена. Сега трябва да добавим персонализиран CSS, за да завършим дизайна. Превключване към раздела Подробно и отворете секцията Персонализирана CSS.
Първо, нека започнем с CSS за заглавното изображение. Този CSS позволява заглавното изображение да се показва над бутона.
z-index: 1;
position:relative;
След това персонализиран CSS в заглавието. Ще зададем различни стойности за настолни и мобилни изгледи, като използваме адаптивни настройки.
За настолен компютър:
padding-top:50px;
padding-bottom:30px;
За мобилни устройства:
padding-top:5px;
padding-bottom:10px;
Накрая добавете следния CSS към бутон едно и бутон две.
white-space: nowrap;
Краен резултат
Ето окончателния дизайн за нашата секция за герои с пълна ширина.
Прочетете още: Divi: Как да създадете раздел за членове на екипа като въртележка
Изтеглете DIVI сега!!!
Заключение
Модулът Fullwidth Header ви позволява лесно да създадете красива секция Hero, за да рекламирате услугите си и да кажете на вашите посетители за какво говориш уеб сайт.
Вградените настройки улесняват персонализирането на всеки аспект от заглавката и всичко е на едно място, така че няма нужда да превключвате между множество модули, за да изградите своя Hero раздел.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...