Бихте ли искали да създадете раздел Hero Divi с модула Fullwidth Header или да проектирате такъв сами?
Изградете раздел герой на уеб сайт от нулата или с помощта на модула Divi Fullwidth Header са двата начина да създадете привлекателен дизайн за вашия уебсайт.
В тази статия ще разгледаме предимствата и недостатъците на използването на модул Fullwidth Header спрямо създаването на ваша собствена секция Hero с Divi.
Да вървим!
Значението на секциите Hero на уебсайта
Секция Hero е първата секция, която вие посетители вижте кога пристигат при вас уеб сайт. Това често е банер с пълна ширина и може да се нарече Hero Header. Това е видно място на вашия уебсайт, защото има силата да остави трайно първо впечатление.
Прочетете още: Divi: Как да покажа модула Fullwidth Header на цял екран
Ето защо е важно той да бъде проектиран по такъв начин, че да е лесен за четене, като същевременно привлича вниманието и е завладяващ. Секциите на Hero на уебсайта са важни, защото могат да привлекат вниманието на потенциални клиенти, бързо да опишат страница и да доведат до допълнителна ангажираност и потенциални клиенти. Главните секции трябва да бъдат брандирани, да включват H1 заглавие и CTA.
Създайте раздел Hero от нулата
Проектирането на секция Hero от нулата ви позволява да имате пълен контрол върху дизайна и съдържание. В зависимост от вашата ситуация и нужди, това може да бъде чудесно решение за вашия уебсайт.
Нека да разгледаме плюсовете и минусите на този подход.
Ползи от този подход
Първо, нека да разгледаме предимствата от създаването на раздел Hero на уебсайт от нулата с помощта на Divi.
- Пълен контрол върху дизайна
- Използвайте всеки модул Divi
Недостатъци на този подход
Сега нека да разгледаме недостатъците на създаването на раздел за герои от нулата.
- Трябва да изградите от нулата
- Изисква множество модификации
Създайте раздел Hero с модула Divi Fullwidth Header
Създаването на секция герой с помощта на модула Divi Fullwidth Header улеснява създаването на привличащ вниманието, адаптивен за мобилни устройства дизайн само за минути.
Нека да разгледаме плюсовете и минусите на този подход.
Ползи от този подход
Нека да разгледаме предимствата от изграждането на секция Hero с модула Divi Fullwidth Header.
- Всичко твое съдържание е в един модул
- Дизайнът вече е оптимизиран
Недостатъци на този подход
Сега нека оценим недостатъците на проектирането на секция Hero с модула Divi Fullwidth Header.
- По-малко гъвкавост с дизайна
Модулът Divi Fullwidth Header се предлага с опции за съдържание предварително зададени, докато много от тях могат да бъдат ограничени, ако искате да добавите част от съдържанието, което не е налично в модула. Това означава, че ще имате по-малко гъвкавост с цялостния дизайн.
Изграждане на двете секции Hero стъпка по стъпка
Сега, след като разбирате плюсовете и минусите на двата подхода, нека изградим всеки раздел Hero, за да можете да видите как точно работи всеки подход.
Създайте нова страница с Divi Builder
За да започнете, ще трябва да направите следното:
- Инсталирайте Divi на вашия уебсайт WordPress.
- Добавете страница и й дайте заглавие.
- Активирайте визуалния конструктор
Създайте своя раздел Hero от нулата
Сега, след като страницата ни е настроена, нека започнем да създаваме раздел за герои от нулата.
Изтеглете DIVI сега!!!
Активирайте "Divi Builder"
За да използваме конструктора за плъзгане и пускане на Divi, ще трябва да активираме Visual Builder, като щракнем върху бутона „Използване на DiviBuilder“. Това ще презареди страницата с помощта на Divi Visual Builder.
Изберете: Изградете от нулата
След като страницата ви се презареди с активиран визуален конструктор, щракнете върху опциите „ ИЗГРАЖДАЙТЕ ОТ НУЛАТА така че да имаме празна страница, с която да работим, когато проектираме.
Добавете ред и конфигурирайте колони
Създайте ред със следната структура на колони.
Добавете модове
Сега нека добавим модулите за съдържание, които ще ни трябват.
- 2 текстови модула, разделител, бутон в лявата колона
- 1 Image Module в средната колона
- 1 Image Module в дясната колона
Раздел стил
Сега нека конфигурираме настройките на секцията.
Добавете раздел, след което конфигурирайте следните настройки:
- Фон: #1d1d25
Стил на заглавния текст
Персонализиране на заглавния текст:
- Заглавие 1:
- Тегло на шрифта: Полудебел
- Цвят на текста: #ffffff
- Размер на текста: 90px
- Височина на реда: 1,1 em
сепаратор
Конфигурирайте настройките на разделителя:
- Цвят на линията: rgba(255,255,255,0.3)
- Тегло на разделителя: 10px
- Максимална ширина: 260 пиксела
основен текст
Персонализиране на основния текст:
- Цвят на текста: rgba(255,255,255,0.7)
- Размер на текста: 13px
- Височина на реда: 1,8 em
бутон
Сега нека персонализираме бутона.
В раздела Бутон:
- Използване на персонализирани стилове за бутон: Да
- Размер на текста на бутона: 14px
- Цвят на текста: #ffffff
- Фон на бутона:
- Ширина на рамката: 0 пиксела
- Радиус на границата: 0 пиксела
В раздела Разстояние:
- Отгоре и отдолу: 40px
- Ляво и дясно: 20px
Добавяне на изображения
Добавете изображенията към модулите за изображения.
Коригирайте настройките на линията
Параметри на реда:
- Поле (ляво): 15vw
Коригирайте 2-ра колона
Във втората колона конфигурирайте тези настройки:
Персонализиран CSS
Поставете следния код в секцията с код на основния елемент:
argin-right: -15vw!important;
z-index: 100!important;разстояние
Добавете 100 пиксела горна подложка.
Така ! Вече имате напълно проектиран персонализиран раздел Hero.
Изтеглете DIVI сега!!!
Създайте своя Hero раздел с модула Fullwidth Header на Divi
Сега нека видим как да пресъздадем тази секция Hero с помощта на модула Fullwidth Header на Divi.
Изтеглете DIVI сега!!!
Добавете страница и изберете Build From Scratch
Добавете нова страница, дайте й заглавие, след това щракнете върху „Използване на Divi Builder“, след което изберете Build From Scratch.
Вмъкнете раздел с пълна ширина и заглавка с пълна ширина
Вмъкване на раздел Пълна ширина, след това изберете Заглавка с пълна ширина в библиотеката на модула.
Съдържание
Добавете текстовото съдържание към модула в раздела Текст.
Снимки
Добавете изображенията в раздела за изображения.
Промяна на цвета на фона
В раздела на фона конфигурирайте следната настройка:
- Фон: #1D1D25
Заглавен текст
Конфигурирайте настройките на заглавния текст:
- Тегло на шрифта на заглавието: получер
- Размер на текста: 90px
основен текст
Конфигурирайте настройките на основния текст:
- Цвят на основния текст: rgba(255,255,255,0.55)
Текст на субтитрите
Конфигурирайте настройките на текста на надписа:
- Тегло на шрифта на субтитрите: получер
- Цвят на текста: #4C594C
- Разстояние между буквите: 3px
копчета
Сега нека персонализираме двата бутона.
бутон едно
В раздела Button One конфигурирайте следните настройки:
- Използвайте персонализирани стилове за бутон едно: Да
- Бутон едно
- Фон: #4c594c
- Ширина на рамката: 0 пиксела
- Радиус на границата: 0px
- Показване на икона: ДА
- Показване на иконата само при задържане: Не
- Padding: 25 пиксела (отгоре и отдолу); 25px(ляво), 50px(дясно)
Бутон две
В раздела Бутон две конфигурирайте следните настройки:
- Използвайте персонализирани стилове за бутон две: ДА
- Ширина на двете граници на бутона: 0 пиксела
- Радиус на границата: 0px
- Подложка: 25px (отгоре, отдолу, отляво и отдясно)
- Button Box Shadow: Изберете 4-то
- Хоризонтална позиция на сянката на кутията: 0px
- Вертикална позиция на сянката на кутията: 2px
- Цвят на сянката: #ffffff
Така ! Вече имате напълно проектирана секция Hero с помощта на модула Divi Fullwidth Header.
Вижте също: Divi: Как да създадете фонови преходи между елементи
Изтеглете DIVI сега!!!
Заключение
Изграждането на секция Hero с Divi е лесно, независимо дали изграждате от нулата или използвате модула Fullwidth Header. И двете опции ви позволяват да създавате зашеметяващи дизайни на заглавки, които привличат интереса ви посетители.
В зависимост от вашите уникални нужди, всяка от опциите е чудесен вариант, който трябва да имате предвид, когато оформяте своя раздел Hero.
След като прочетете плюсовете и минусите и на двете, как бихте проектирали своя раздел Hero?
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...