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

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

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

В тази статия ще видим как да го персонализирате и ще видим четири бутона за превъртане надолу, които можете да включите във вашия модул Fullwidth Header. Ще видим също как да го персонализирате с 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.1 em.

• Размер на текста на заглавието: 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 за заглавие с пълна ширина. Бутонът за превъртане включва няколко икони за избор и можете да зададете цвета и размера му. 

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

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

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

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

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

...