Искате ли да покажете модула Divi Fullwidth Header на цял екран?
Заглавките на цял екран заемат целия екран, независимо от размера на екрана на посетител. Това е чудесно за привличане на вниманието на потребителите. За щастие е лесно да създадете заглавка на цял екран с модула Заглавка с пълна ширина на Диви.
В тази статия ще ви покажем как да създадете заглавка с пълна ширина, да я персонализирате и да я показвате на цял екран. Можете да използвате този подход, за да създадете всяка секция герой на цял екран за вашите страници.
Нека да започнем.
изследване
Нека да видим визуализация на това, което ще проектираме в този урок.
бюро
таблетирана
Тел
Как да направите вашия Divi Fullwidth Header заглавен колонтитул на цял екран
Започнете, като добавите секция с пълна ширина към страницата, върху която работите.
След това добавете a Модул за заглавка с пълна ширина до секцията с пълна ширина.
Отварят се настройките на модула. Изберете раздел Дизайн. Активирайте извиканата опция Направете цял екран
Вече имаме заглавка на цял екран. Толкова е просто.
Икона за активиране на превъртане
Можем също да добавим бутон, който казва на потребителя да превърти надолу. Трябва обаче да го активираме. Този бутон винаги се вижда в опцията за цял екран. Опцията за заглавка на цял екран винаги съответства на височината на екрана на посетител.
- Показване на бутона за превъртане надолу: ДА
Divi Fullwidth Fullscreen Пример за заглавка
Параметри на заглавния модул с пълна ширина
Ето стъпките за всеки раздел от настройките на модула Fullwidth Header.
Прочетете още: Divi: Как да комбинирате фонови маски и разделители
Texte
Всички първо добавете текста който ще се вижда в заглавката с пълна ширина. Това включва заглавие, подзаглавие, съдържание и текста на бутона.
- Заглавие: Създай вашия блог с Диви
- Подзаглавие: Blogpascher
- Бърън #1: Резюме
- Бутон #2: График
- Тяло: (по подразбиране)
Снимки
след това добавете снимка. Това се показва от дясната страна на заглавката с пълна ширина, измествайки текста наляво.
- Заглавно изображение: по ваш избор
фон
Превъртете до История и задайте цвета на #f6f5ee.
- Цвят на фона: #f6f5ee
разпореждане
След това отидете до раздела Дизайн.
- Направете цял екран: ДА
Икона за превъртане надолу
- Показване на бутона за превъртане надолу: ДА
- Цвят на иконата за превъртане надолу: #000000 (настолен компютър и таблет), #ffffff (телефон)
- Размер на иконата за превъртане надолу: 70px (десктоп), 60px (таблет), 50px (телефон)
Текст на заглавието
След това ще коригираме заглавен текст.
- Ниво на заглавие: H1
- Шрифт: Интер
- Тегло на шрифта: Удебелен
- Подравняване на текста: центрирано
- Цвят на текста: #000000
- Размер на текста на заглавието: 75px (десктоп), 40px (таблет), 24px (телефон)
- Височина на заглавния ред: 1.2 cm
Текст на описанието
След това превъртете надолу до Основен текст.
- Шрифт: Open Sans
- Подравняване: Ляво
- Цвят: #000000
- Размер на текста: 16px (десктоп), 15px (таблет), 14px (телефон)
- Височина на линията: 1.8em
подзаглавие
След това превъртете надолу до Текст на субтитрите.
- Шрифт: Интер
- Тегло на шрифта: получер
- Стил: TT
- Подравняване: Център
- Цвят: #ff5a17
- Размер: 14px
- Разстояние между буквите: 1px
- Височина на линията: 1.8em
Бутон #1
След това превъртете надолу до Бутон едно.
- Използване на персонализирани стилове за бутон: ДА
- Размер на текста: 20px (десктоп), 18px (таблет), 16px (телефон)
- Цвят на текста: #000000
- Цвят на фона: #ffffff
- Ширина на рамката: 0px
- Радиус на границата: 0px
- Шрифт: Интер
- Тегло на шрифта: получер
- Икона: ваш избор
- Цвят на иконата: #000000
- Разположение: Право
- Показване на икона само при задържане на курсора на мишката за първи бутон: НЕ
Накрая превъртете надолу до опциите Подложка за един бутон.
- Подплата:
- Работен плот: 20px (отгоре и отдолу), 40px (отляво и отдясно)
- Таблет: 16px (отгоре и отдолу), 40px (отляво и отдясно)
- Телефон: 12px (отгоре и отдолу), 40px (отляво и отдясно)
Бутон #2
Накрая превъртете надолу до Бутон две.
- Използвайте персонализирани стилове за бутон две: Да
- Размер на текста: 20px (десктоп), 18px (таблет), 16px (телефон)
- Цвят на текста: #ffffff
- Цвят на фона: #ff5a17
- Ширина на границата: 0px
- Радиус на границата: 0px
- Шрифт: Интер
- Тегло на шрифта: получер
Изберете любимата си икона.
- Икона: ваш избор
- Цвят на иконата: #000000
- Разположение: ляво
- Показване на икона само при задържане на курсора на мишката за бутон две: НЕ
Накрая превъртете надолу до опциите Бутон две подложки.
- Подплата:
- Работен плот: 20px (отгоре и отдолу), 40px (отляво и отдясно)
- Таблет: 16px (отгоре и отдолу), 40px (отляво и отдясно)
- Телефон: 12px (отгоре и отдолу), 40px (отляво и отдясно)
Крайни резултати
Ето как изглежда нашата заглавка с пълна ширина на настолни компютри, таблети и телефони.
Можете също така да се консултирате с: Divi: Как да използвате ефекти на сянка и задържане на мишката, за да създадете интерактивно съдържание
бюро
таблетирана
Тел
Изтеглете DIVI сега!!!
Заключение
Ето нашия поглед върху това как да създадете Fullwidth Header с вашия модул Divi Fullwidth Header.
Процесът е прост и изглежда страхотно на всяко устройство. Добавяне на бутона Превъртете надолу е страхотна визуализация, която казва на потребителите, че могат да превъртат.
Проектирането на заглавка на цял екран е подобно на проектирането на раздел Hero. Следването на няколко прости насоки може да ви помогне да създадете невероятни заглавки на цял екран с модула Fullwidth Header на Divi.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...