Divi: Как да включите бутон за превъртане надолу в модула Fullwidth Header

Искате ли да добавите бутон за превъртане надолу към вашия Divi Fullwidth Header модул?

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

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

Да започнем!

Преглед на бутоните за превъртане надолу

Първо, нека разгледаме дизайните, които ще създадем в тази статия.

Пример 1

Пример 2

Изтеглете DIVI сега!!!

Пример 3

Пример 4

Изтеглете DIVI сега!!!

Бутони за превъртане надолу. Дизайн на заглавката с пълна ширина.

Първо ще създадем дизайна на заглавката ни с пълна ширина. Изграждам го от нулата, използвайки дизайни от безплатен пакет за оформление на терапия, наличен в Divi . Създайте нова страница и добавете a модул с пълна ширина на заглавката към нов раздел с пълна ширина.

Вижте също: Divi: Как да създадете организационна диаграма с модула Blurb

Разделител на секции с пълна ширина

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

След това превъртете надолу до делител Кликнете върху раздела дъно и изберете 8-ия разделителен стил. Задайте цвета на #e5e8f0 и въведете 10vw за височина. Затворете настройките на секцията.

• Разделители: Ниски
• Стил: 8-ми стил
• Цвят: #e5e8f0
• Височина: 10vw

Текст на заглавката

След това отворете модула Fullwidth Header и добавете заглавието, подзаглавието и текста на бутона. Изтрийте фиктивния текст за съдържанието на тялото и го оставете празно.

• Заглавие: Започнете своето пътуване към това да се почувствате по-добре днес.
• Подзаглавие: Лесли Сейндън, лицензиран терапевт
• Бутон №1: Уговорете час
• боди: няма

Заглавни изображения

Превъртете до Снимки и избирам заглавно изображение. Избирам изображение, предоставено с Терапевтичен пакет с оформление.

Фон на заглавката

Превъртете до ИсторияПремахнете цвета на фона и изберете раздела Градиент на фона.

• Градиентни стопове:
  • 25%: #2e5b61
  • 100%: RGBA (46, 91, 97, 0,5)

Активиране Поставете градиента над фоновото изображение .

• Квадратен градиент над фоновото изображение: ДА

Фоново изображение на заглавката с пълна ширина

След това изберетеРаздел Фоново изображение и изберете изображение за цял екран. Използвам друго изображение от Therapy Layout Pack.

• Позиция на фоновото изображение: Горе в центъра

Оформление на заглавката с пълна ширина

След това изберетераздел дизайн и активирайте Направете цял екран .

• Направете цял екран: ДА

Икона за превъртане надолу в горния колонтитул с пълна ширина

След това активирайте Показване на бутона за превъртане надолу. Ще стилизираме този бутон в нашите примери, така че засега ще го оставим в настройките по подразбиране.

• Показване на бутона за превъртане надолу: ДА

Заглавно изображение

След това превъртете надолу до Изображение и променете горните леви заоблени ъгли на 200px за настолни компютри. Задайте останалите заоблени ъгли на 0px. Променете заоблените ъгли на 100 пиксела за таблети и телефони.

• Картина със заоблени ъгли:
  • Работен плот: 200px горе вляво, 0px всички останали
  • Таблет и телефон: 100px горе вляво, 0px всички останали

Текст на заглавието

След това превъртете надолу до Заглавен текст. Използвайте H1 за ниво на заглавието. Изберете Cormorant Garamond за шрифт на заглавието, задайте теглото на Bold и цвета на #e1ecea.

• Заглавие:
  • Ниво на заглавие: H1
  • Шрифт: Cormorant Garamond
  • Тегло на шрифта: получер
  • Цвят на текста: #e1ecea

След това задайте Искан За всичките три размера на екрана. Използвайте 90 пиксела за настолни компютри, 40 пиксела за таблети и 24 пиксела за телефони. Променете височината на реда на 1.1em.

• Размер на текста на заглавието: 90px, 40px, 24px
• Височина на заглавния ред: 1,1 см

Текст на субтитрите на заглавката с пълна ширина

След това превъртете надолу до Текст на субтитрите. Променете шрифта на Inter, теглото на получер и цвета на #e1ecea.

• подзаглавие:
  • Шрифт: Интер
  • Тегло на шрифта: получер
  • Цвят на текста: #e1ecea

Нагласи Искан при 22px за настолни компютри, 20px за таблети и 16px за телефони. Променете го височина на реда на 1,6 ем.

• Размер на текста на субтитрите: 22px, 20px, 16px
• Височина на реда на субтитрите: 1,6 em

Бутон за заглавката

Превъртете надолу до настройките на Бутон едно и активирайте Използвайте персонализирани стилове за бутон едно Променете размера на 14px, цвета на текста на #2e5b61 и цвета на фона на #e1ecea.

• Използвайте персонализирани стилове за бутон едно: ДА
• Бутон едно
  • Размер на текста: 14px
  • Цвят на текста: #2e5b61
  • Фон: #e1ecea

Променете ширината на граница при 0px и радиуса на граница на 50px. Използвайте Inter за шрифта и променете теглото на полу-удебелено.

• Бутон едно:
  • Ширина на рамката: 0px
  • Радиус на границата: 50px
  • Шрифт: Интер
  • Тегло: Получер

за Подплънки на бутоните , използвайте 20px за отгоре и отдолу и 40px за отляво и отдясно.

• Подплата на един бутон: 20 px отгоре и отдолу, 40 px отляво и отдясно

Прочетете още: Divi: Как да създадете секция Fluid Hero

Примери за бутони за превъртане надолу

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

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

• Избор на икона - Изберете от 11 икони. Те включват различни дизайни на стрелки със или без фон, включително некръгчета, кръгчета и плътни.
• Цвят – стандартният инструмент за избор на цвят на Divi.
• размер – стандартната настройка на размера Divi.

Включва и CSS поле в раздела „Разширени“. 

Ще използваме всички тези параметри.

Вижте също: Divi: 5 наслагвания на маски и модели, приложими към фоново изображение

Пример #1

За първия ни пример ще използваме икона без фон или кръг. Изберете първата икона, променете цвета на #e1ecea и променете размера на 66px за настолни компютри, 60px за таблети и 50px за телефони.

• Икона: 1-ва икона
• Цвят: #e1ecea
• Размер: 66px (десктоп и таблет), 50px (телефон)

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

Пример 2

За втория ни пример ще използваме оградена с кръг икона. Изберете седмата икона и променете цвета ѝ на #e8c553. Ще увеличим иконата за тази. Променете размера на 78px за настолни компютри, 70px за таблети и 60px за телефони.

• Икона: 7-ма икона
• Цвят: #e8c553
• Размер: 78px (десктоп), 70px (таблет), 60px (телефон)

Този цвят е вариация на жълтото в пакета за оформление, но е по-светъл и изглежда по-добре на зелен фон. Иконата има остри ъгли, но кръгът се вписва в заобления дизайн на оформлението.

Пример 3

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

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

Изберете осмата икона и променете цвета й на #0e4951. Задайте размера на 60px за настолни компютри, 56pc за таблети и 50px за телефони.

• Икона: 8-ма икона
• Цвят: #0e4951
• Размер: 60px (десктоп), 56px (таблет), 50px (телефон)

Зеленото е по-тъмен нюанс на зеленото на фона. По-тъмният нюанс се откроява на фона на зеленото и все още съответства на останалата част от оформлението.

Пример 4

Ами ако искате да комбинирате цветове, за да имате цвят на фона зад иконата за изрязване? Можем да направим това с CSS. 

За този пример ще използваме CSS, за да създадем фонова форма зад иконата, която ще се вижда през изрязаната икона. Самата икона ще използва стандартни настройки.

Изберете единадесетата икона и променете цвета ѝ на #e1ecea. Ще зададем по-малък размер на иконата за нея и ще създадем по-голям фон. Променете размера на 50px за настолни компютри, 40px за таблети и 30px за телефони.

• Икона: 11^ри
• Цвят: #e1ecea
• Размер: 50px (десктоп), 40px (таблет), 30px (телефон)

След това отидете на раздела Подробно и превъртете надолу до полето Бутон за превъртане надолу и въведете този CSS:

border-radius: 45%;
padding:12px 40px 14px 40px;
background-color:#2e5b61

Този CSS формат добавя отстъп отгоре, отдясно, отдолу и отляво. Използвах това отстъпване, за да създам овал на фона, който допълва дизайна на заглавката, използвайки ръководства за дизайн на оформлението.

Резултати от различните примери

Пример 1

Пример 2

Изтеглете DIVI сега!!!

Пример 3

Пример 4

Изтеглете DIVI сега!!!

Заключение

Това е нашият преглед на четирите бутона за превъртане надолу, които можете да включите в модула си Divi Fullwidth Header. Бутонът за превъртане включва няколко икони, от които да избирате, и можете да зададете неговия цвят и размер. 

Като използвате полето CSS, можете допълнително да персонализирате бутона. Комбинациите от опции за стилизиране на бутони и CSS ви дават изобилие от възможности за дизайн с вашите бутони за превъртане надолу.

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

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

Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.

Но междувременно, споделете тази статия във вашите различни социални мрежи.

...