Искате ли да създадете раздел Hero в Divi който е течен вместо традиционния отзивчив?
Разделът Hero на a уеб сайт е един от най-добрите кандидати за течен дизайн. За разлика от традиционния адаптивен дизайн, който се настройва към различни точки на прекъсване, плавният дизайн се адаптира безпроблемно към прозореца на браузъра и поддържа дизайна последователен на всяко устройство. В крайна сметка секцията Hero е първото нещо, което потребителите виждат на a уеб сайт.
В този урок ще ви покажем как да създадете цял флуиден герой раздел в Divi. Ключът към създаването на този флуиден дизайн е да добавите течен основен размер на шрифта към всеки от използваните модули и след това да включите единицата за дължина em (кой е спрямо размера на основния шрифт ) в настройките на модула.
Да започнем!
изследване
Ето един бърз поглед върху дизайна, който ще създадем в този урок.
Забележете как плавният дизайн се адаптира плавно към ширината на прозореца на браузъра.
Създайте нова страница с Divi Builder
За да започнете, ще трябва да направите следното:
От таблото за управление на WordPress отидете на Страници> Добавяне на ново за да създадете нова страница.
Дайте му заглавие, което има смисъл за вас, и щракнете употреба Divi Строител
След това кликнете Започнете да строите (Изграждане от нулата)
След това ще имате празно платно, в което да започнете да проектирате Divi.
Прочетете още: Divi: Как да създадете раздел Hero с модула Fullwidth Header
Как да проектираме секция Fluid Hero в Divi
Настройки на секцията
За да започнете, нека актуализираме съществуващите настройки на дизайна за секцията. Отворете настройките на раздела и актуализирайте следното:
- Градиентни стопове:
- 30%: #ff2000
- 30%: #121212
- Посока на градиента: 45 градуса
Под раздела Дизайн, актуализирайте подложката:
- Подплата: 0px отгоре, 0px отдолу
Създайте линия
След това добавете ред с една колона към секцията.
Настройки на линията
Отворете настройките на линията и актуализирайте следното под раздела Дизайн :
- Ширина на улука: 1
- Ширина: 100%
- Максимална ширина: 1px
- Минимална височина: 100 vh (десктоп), няма (таблет и телефон)
- Подплата: 0px (отгоре и отдолу)
Създайте преливащ заглавен текст с рамка
Сега, когато разделът и редът са завършени, можем да добавим течащия заглавен текст към раздела Hero. Също така ще добавим плавна граница към текстовия модул за креативен елемент на дизайна.
Добавяне на текстов модул
За да създадете заглавен текст и рамка, добавете нов текстов модул към колоната.
Текстови настройки
Под раздела съдържание, актуализирайте го съдържание на тялото със следния HTML код:
<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>
За да направим елементите на дизайна плавни, първо трябва да добавим течен основен размер на шрифта към модула, като използваме функцията CSS Clamp().
Под раздела Подробно, поставете следния CSS фрагмент:
font-size: clamp(32px, 4.1vw, 70px);
Под раздела Дизайн, актуализирайте следните настройки за дизайн на заглавен текст:
- Текст на заглавието:
- Тип: H1
- Шрифт: Монсерат
- Тегло на шрифта: Тежък
- Цвят: #ffffff
- Размер: 1 ем
- Разстояние между буквите: 0,1 em
- Височина на реда: 1,2 em
Също така актуализирайте подложката на мода, както следва:
- Подплата: 1-во (отгоре, отдолу, отляво и отдясно)
За да създадете течен дизайн на границата, актуализирайте следното:
- Ширина на границата: 1 ем
- Цвят на рамката: #ffffff
- Цвят на долната граница: прозрачен
- Цвят на лявата граница: ясен
Създаване на акцентираща рамка
За да създадем границата на акцента, можем да дублираме съществуващия модул Text.
Изтрий го съдържание на съществуващото тяло и актуализиране на проектните параметри, както следва:
- Максимална ширина: 6,5 см
- Височина: 3,25 ем
- Ширина на границата: 0,5 em
- Цвят на рамката: #ff2000
За да позиционирате границата на акцента, добавете абсолютна позиция с отместване, равно на ширината на рамката в модула Текст на заглавието (1em).
Под раздела Подробно, актуализирайте следните опции за позиция:
- Позиция: Абсолютна
- Местоположение: горе вдясно
- Вертикално отместване: 1em
- Хоризонтално отместване: 1em
Създайте текст на субтитрите
Под текста на заглавието ще добавим преливащия текст на субтитрите. Тъй като този текст е по-малък, ще добавим по-малък размер на шрифта за течен корен.
Добавяне на нов текстов модул
За да създадете текста на надписа, добавете нов текстов модул под съществуващия модул за заглавен текст.
Можете да добавите няколко изречения за допълващ текст, както следва:
- Съдържание: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Добавяне на течен коренов размер на шрифта
След това трябва да добавим нов течен размер на шрифта, който е по-подходящ за малки текстове. В раздела Разширени поставете следния CSS фрагмент под основния елемент:
font-size: clamp(14px, 1.4vw, 24px);
Настройки за дизайн на текст
Под раздела Дизайн, актуализирайте следното:
- Текст :
- Тегло на шрифта: Полудебел
- Цвят: #ffffff
- Размер: 1 ем
- Височина: 1,6 ем
След това актуализирайте размера и разстоянието, както следва:
- Максимална ширина: 19 см
- Поле: 2 em (отдолу), автоматично (ляво), 5 em (дясно)
Създайте бутона за течност
За да създадете флуиден бутон, добавете нов модул Бутон под модула Текст на субтитрите.
След това актуализирайте текста на бутона, за да гласи „7 дни безплатен път“.
Добавяне на течен коренов размер на шрифта
След това трябва да добавим нов течен размер на шрифта, подходящ за бутон.
Под раздела Подробно, поставете следния CSS фрагмент под основния елемент:
font-size: clamp(20px, 2.35vw, 40px);
Настройки за дизайн на бутони
Под раздела Дизайн, актуализирайте следното:
- Подравняване на бутоните: дясно
- Използвайте персонализиран размер за бутон: ДА
- Цвят на текста на бутона: #ff2000
- Градиентни стопове:
- Цвят 1 25%: прозрачен
- Цвят 2 25%: #ffffff
- Посока на градиента: 45 градуса
- Бутон:
- Ширина на рамката: 0 пиксела
- Радиус на границата: 0 пиксела
- Шрифт: Монсерат
- Тегло на шрифта: дебел
- Стил: курсив
- Показване на икона на бутон: ДА
- Икона: стрелка във формата на триъгълник надясно (вижте екранната снимка)
- Разположение на иконата: вдясно
- Поле: 8em (дясно)
- Подложка: 0,2 em (отгоре и отдолу), 1,5 em (отляво), 1 em (отдясно)
Създайте изображение за секцията Hero
С всички съдържание на секцията Hero до правилния размер на страницата, ние сме готови да добавим изображението на секцията Hero от лявата страна. За да направите това, първо добавете модул Image под бутона.
Отворете настройките на изображението и качете изображение.
Настройки за дизайн на изображението
Под раздела Дизайн, актуализирайте следните настройки:
- Подравняване на изображението: ляво (настолен компютър и таблет), централно (телефон)
- Максимална ширина: 48% (настолен компютър и таблет), 70% (телефон)
- Подплата: 4% (отляво)
И накрая, дайте на изображението абсолютна позиция с отместване, като използвате единицата за дължина vmin, както следва:
- Позиция: Абсолютна (настолен компютър и таблет), относителна (телефон)
- Местоположение: горе вляво (настолен компютър и таблет)
- Вертикално отместване: 30vmin (настолен компютър и таблет), 0px (телефон)
Краен резултат
Ето крайния резултат на страница на живо.
Вижте също: Divi: Как да използвате маски и фонови модели за геройска секция
Ето как плавният дизайн се адаптира плавно към ширината на прозореца на браузъра.
Изтеглете DIVI сега!!!
Заключение
Добавянето на течен дизайн към секция Hero може да бъде удобен начин да се гарантира, че горната част на сгъването е красиво последователна във всички размери на браузъра, без да се налага да актуализирате дизайна на точки, конкретни спирания или да използвате медийни заявки.
Надяваме се, че тази техника ще добави още едно полезно дизайнерско умение за бъдещи проекти.
Също така се надяваме, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...