Искате ли да персонализирате модула Fullwidth Header на Divi, като балансирате основните и вторичните бутони?
Модулът Divi Fullwidth Header улеснява добавянето на красиви секции Hero към вашите уеб сайт. Модулът се предлага с два бутона, текст на заглавие, текст на субтитри, основен текст, лого и изображение, което прави опциите за персонализиране безкрайни.
В днешната статия ще ви покажем как да пресъздадете геройски секции с помощта на Заглавие на Divi Fulldwidth. Ще започнем нашия дизайн с помощта на 3 предварително направени пакета за оформление и ще проектираме нашите секции с фокус върху основния и вторичния баланс на бутоните.
Искаме основният бутон да се откроява, защото това е основният ни призив за действие, като същевременно поддържаме вторичния бутон видим и достъпен, без да изпреварваме основния бутон.
Принципи на проектиране на първичен и вторичен бутон
Основните бутони и вторичните бутони са помощно ръководство посетители вашият уеб сайт към определени акции. Първичните бутони обикновено са най-често срещаното или желано действие, а вторичните бутони са по-рядко. Това помага за насочване на посетители до където искат да отидат.
За да направите това, основните бутони трябва да се открояват визуално, а вторичните бутони не трябва да изпъкват толкова много. Това означава, че основните бутони трябва да бъдат по-отличителни и с по-голяма визуална тежест, за да привлекат повече внимание.
Сега, след като разбираме как работят основните и вторичните бутони, нека да преминем към урока!
изследване
Ето един поглед към трите заглавки с пълна ширина, които ще проектираме днес.
Нека започнем, като създадем нова страница с Divi Builder
От таблото за управление на WordPress отидете на Страници> Добавяне на ново за да създадете нова страница.
Дайте му заглавие, което има смисъл за вас, и щракнете Използвайте Divi Builder
След това кликнете Започнете да строите (Изграждане от нулата)
След това ще имате празно платно, за да започнете да проектирате в Divi.
Прочетете още: Divi: Как да използвате маски и фонови модели за геройска секция
Дизайн на първия пример
Сега, след като нашата страница е настроена, нека започнем със заглавката с пълна ширина на UX целевата страница.
Конфигуриране на нашата страница
Преди да започнем да персонализираме, ще трябва да заредим предварително дефинирания пакет за оформление UX от библиотека Divi. Когато активирате Visual Builder, ще видите изскачащи три опции, изберете Преглед на оформления.
Заредете пакета за оформление
За да заредите пакета UX оформление на вашата страница:
- В раздела „Предварително направени оформления“, използвайте функцията за търсене, за да намерите пакета UX оформление.
- След като го намерите, щракнете върху него. Това ще покаже подробности за оформлението и наличните страници.
- Кликнете върху Приземяване, след което щракнете върху „Използване на това оформление“.
Ще пресъздадем горната част на оформлението като модул Заглавка с пълна ширина.
Изтрийте първия раздел
Тъй като ще пресъздадем първата секция, използвайки вместо това модула Fullwidth Header, ще трябва да изтрием тази секция. Задръжте курсора на мишката върху секцията и щракнете върху иконата на кошчето.
Добавете секция с пълна ширина
Преди да можем да добавим заглавката с пълна ширина, трябва да добавим секция с пълна ширина.
Кликнете върху стрелката "+" за да покажете секциите Divi, след което щракнете върху "Пълна ширина". Това автоматично ще покаже библиотеката на Divi Fullwidth Module.
Добавете заглавка с пълна ширина
В библиотеката на модула Divi Fullwidth щракнете върху " Заглавка с пълна ширина".
Добавете съдържание
Преди да започнем да персонализираме модула, нека го добавим съдържание необходими за този модул.
Добавете текстово съдържание
В раздела Текст добавете съдържание подходящ:
- Заглавие: Подобрете вашите знания за UX дизайн
- Подзаглавие: Курс по UX дизайн
- Бутон №1: Преглед на курса
- Бутон №2: Научете повече
- Тяло: по подразбиране
Добавяне на изображения
Сега, когато имаме наши съдържание Текст на място, трябва да добавим две изображения към нашия дизайн.
- В раздела Снимки, добавете изображението на логото (звездите) и заглавното изображение (снимката на лицето, което държи телефон).
Промяна на цвета на фона
В раздела История, конфигурирайте този параметър:
- Цвят на фона: #131517
Персонализиране на заглавката на пълната ширина
Сега, когато нашето съдържание е настроено, нека добавим малко стил към него чрез Дизайн.
Икона за превъртане надолу
Нека добавим иконата за превъртане надолу, стрелката надолу.
- Показване на бутона за превъртане надолу: ДА.
- Изберете иконата със стрелка надолу.
- Цвят на иконата за превъртане надолу: #000
Изображение
Нека добавим криви към нашите изображения, като закръглим ъглите.
В раздела Изображение, конфигурирайте следните настройки:
- Изображение Заоблени ъгли : Щракнете върху бутона за връзка на веригата, за да прекратите връзката между ъглите, след което въведете 1000px в полетата за въвеждане в долния ляв и долния десен ъгъл. Това ще закръгли долния ляв и долния десен ъгъл на нашите изображения.
Текст на заглавието
Тук нека персонализираме текста на заглавието на този модул. В раздела Заглавен текст, конфигурирайте тези настройки:
- Заглавие:
- Шрифт: PT Sans
- Тегло на шрифта: получер
- Размер на текста: 5 бр
- Височина на реда: 1,2 em
Тялото на текста
Това е мястото, където персонализираме основния текст за този модул. В раздела Основен текст, конфигурирайте тези настройки:
- Основен шрифт: Mukta
- Размер на основния текст: 18px
Текст на субтитрите
Това е мястото, където персонализираме текста на надписа за този модул. В раздела Текст на субтитрите, конфигурирайте тези настройки:
- подзаглавие:
- Шрифт: Mukta
- Тегло на шрифта: получер
- Стил: главни букви
- Цвят на текста: #13d678
- Разстояние между буквите: 3px
бутон едно
Това е мястото, където можем да дефинираме персонализирани стилове за бутон едно: главния бутон. В раздела Бутон едно, конфигурирайте тези настройки:
- Използвайте персонализиран стил за бутон едно: ДА
- Бутон едно:
- Цвят на текста: #ffffff
- Цвят на фона: #13d678
- Ширина на рамката: 0 пиксела
- Радиус на границата: 100px
- Шрифт: Mukta
- Тегло на шрифта: получер
- Показване на икона на бутон One: ДА
- Икона: стрелка надясно
- Показване на икона само при задържане на курсора на мишката за първи бутон: Не
Бутон две
Сега нека персонализираме втория: вторичния бутон. В раздела Бутон две, конфигурирайте тези настройки:
- Използване на персонализиран стил за бутон: ДА
- Бутон две
- Цвят на текста: #ffffff
- Цвят на фона: #303030
- Ширина на рамката: 0 пиксела
- Радиус на границата: 100 пиксела
- Шрифт: Mukta
- Тегло на шрифта: получер
- Показване на икона на бутон две: Да
- Икона на бутон две: стрелка надясно
- Показване само на икона при задържане на курсора на мишката Бутон две: ДА
Добавете връзки към бутони
Не забравяйте да добавите връзки към вашите бутони! В раздела връзка, конфигурирайте следните настройки:
- URL адрес на връзката на бутон #1: Поставете URL адреса на бутон 1 тук.
- URL адрес на връзката на бутон #1: Поставете URL адреса на бутон 2 тук.
Запазете работата си
Сега, след като имаме нашия напълно проектиран хедър с пълна ширина, не забравяйте да запазите дизайна си!
- Щракнете върху зелената стрелка в долния десен ъгъл на прозореца на модула.
- Спестявания
- Излезте от VisualBuilder.
Прочетете още: Divi: Как да създадете секция Fluid Hero
Забавлявайте се да експериментирате
Начините за персонализиране на модула за заглавие на пълната дължина на диви са безкрайни. Възползването от основния бутон и вторичния бутон може да ви помогне да насочите вашия посетители Към страницата искате те да видят или да предприемат действието (като подаване на заявка), искате да предприемат те.
Нека да разгледаме още два примера за заглавки с пълна ширина, които имат основен бутон, който се откроява.
Заглавка с пълна ширина от пакета „Център за пенсиониране“.
Стилове на бутони
Нека да разгледаме уникалните основни и вторични стилове на бутони.
бутон едно
В раздела Button One конфигурирайте следните настройки:
- Използвайте персонализирани стилове за бутон едно: ДА
- Бутон едно:
- Размер на текста: 14px
- Цвят на текста: #ffffff
- Цвят на фона: #0a0a0a
- Ширина на рамката: 0 пиксела
- Радиус на границата: 10px
- Разстояние между буквите: 3px
- Тегло на шрифта: получер
- Стил на шрифта: TT
- Показване на икона само при задържане на мишката за Buttpn One: ДА
- Подплата на един бутон: 15px (отгоре и отдолу), 25px (отляво и отдясно)
Бутон две
В раздела Бутон две, конфигурирайте следните настройки:
- Използване на персонализиран стил за бутон: ДА
- Бутон две:
- Размер на текста: 14px
- Цвят на текста: #ffffff
- Цвят на фона: #0a0a0a
- Ширина на рамката: 0 пиксела
- Радиус на границата: 10px
- Тегло на шрифта: получер
- Стил на шрифта: TT
- Подложка на бутон две: 10px (отдолу), 10px (ляво и дясно)
И ето го! Два уникални бутона, един, който се откроява, и един, който заема второ място.
Заглавие с пълна ширина на пакета "Финансово планиране".
Стилове на бутони
Нека да разгледаме уникалните основни и вторични стилове на бутони.
бутон едно
В раздела Бутон едно, конфигурирайте следните настройки:
- Използвайте персонализиран стил за бутон едно: ДА
- Бутон едно:
- Размер на текста: 18px
- Цвят на текста: #ffffff
- Цвят на фона: #1b4ffe
- Padding: 15px()отгоре и отдолу); 25px (ляво и дясно)
Бутон две
В раздела Бутон две, конфигурирайте следните настройки:
- Използвайте персонализиран стил за бутон две: ДА
- Бутон две:
- Цвят на текста: #1b4ffe
- Цвят на фона: Прозрачен
- Цвят на иконата: #1b4ffe
Изтеглете DIVI сега!!!
Заключение
Модулът за заглавие на пълната ширина на Divi улеснява създаването на зашеметяващи секции на герои на вашия уеб сайт.
Стратегическото използване на първични и вторични бутони ще подобри вашето потребителско изживяване и ще помогне на посетителите на уебсайта да предприемат действията, които искат.
Опциите за персонализиране са безкрайни със заглавката с пълна ширина, така че се забавлявайте да експериментирате!
Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...