Искате ли да подобрите публикациите си в блога? Divi като добавите раздел Hero към него?
Секциите Hero на цял екран изглеждат страхотно на всяка уеб страница, но са особено страхотни в публикации в блогове.
Въпреки че представеното изображение е на цял екран, има много опции за дизайн за поставяне на заглавие и мета текст. Лесно е да се направи с Създател на теми Divi .
В тази статия ще видим няколко начина за добавяне на секция Hero на цял екран към вашия шаблон за публикация в блога. диви.
Нека да започнем.
изследване
Ето предварителен преглед на това, което ще проектираме в този урок.
Прочетете още: Divi: Как да използвате "Gradient Builder", за да разкрасите вашите изображения
Секция Hero със заглавие на публикация Модул за настолна версия
Секция Hero с модул за мобилна версия на Post Title
Алтернативно оформление на секция Hero с модул за десктоп версия за заглавие на публикация
Изтеглете DIVI сега!!!
Алтернативно оформление на секция Hero с мобилен модул за заглавие на публикация
Секция Hero с метаданни Настолна версия
Секция Hero с мобилна версия с метаданни
Изтеглете DIVI сега!!!
Шаблони за публикации в блогове за вашия раздел с герои на цял екран
Можете да създадете шаблона за публикации в блога Divi Създател на теми от нулата или изтеглете шаблон от блога на Elegant Themes. За да ги намерите, потърсете в блога „безплатен шаблон за публикация в блог“. Ако изтеглите шаблон, не забравяйте да го разархивирате.
За нашите примери ще използваме безплатен шаблон за публикация в блога за пакета за оформление на модния дизайнер на Divi . Ние също използваме пакета за оформление безплатно Моден дизайнер на горен и долен колонтитул .
Изтеглете или създайте свой шаблон за публикация в блога за вашата секция Hero на цял екран
Можете да изтеглите своя шаблон за публикация в блога или да създадете такъв от нулата. Ще качим такъв, но процесът за създаване на раздел Hero на цял екран е същият.
Вижте също: Divi: Как да използвате маски и фонови модели за геройска секция
Метод 1: Модул за заглавие на публикация на цял екран
Този метод ще използва Модул PostTitle . Това е добър избор, ако искате да покажете цялата информация заедно. След като имате своя шаблон, изберете иконата за редактиране, за да го отворите.
Шаблонът, който качихме, има раздел с представеното изображение. Ще премахнем този раздел и ще добавим a Секция с пълна ширина на негово място.
Изберете Заглавие на публикацията с пълна ширина в списъка с модули с пълна ширина.
Всички елементи са избрани по подразбиране. Оставете ги активирани. Превъртете до Представено разположение на изображението и изберете Над заглавието.
- Представено разположение на изображението: над заглавието
Превъртете до Цвят на фона и задайте цвета на #fff9f2
- Фон: #fff9f2
Текст на заглавието
Изберете раздела Дизайн. За текст на заглавието запазете H1 и изберете Playfair Display. Задайте го Left Justified и изберете #34332e за цвят.
- Заглавие:
- Ниво на заглавие: H1
- Шрифт: Playfair Display
- Подравняване на текста: подравнено вляво
- Цвят на текста: #34332e
Pour la размер на текста , задайте настолната версия на 65px, мобилната версия на 42px и височината на реда на 1,2em.
- Размер на текста на заглавието (десктоп): 65px (десктоп), 42px (телефон)
- Височина на заглавния ред: 1,2 см
Мета текст
Превъртете до Мета текст. Изберете Montserrat за шрифта и го задайте на средни, главни букви, дясно подравняване за настолната версия и ляво подравняване за мобилната версия. Изберете #7b7975 за цвят.
- меташрифт:
- Шрифт: Монсерат
- Тегло: средно
- Стил: TT
- Метатекст:
- Подравняване: дясно (десктоп), ляво (телефон)
- Цвят: #7b7975
Нагласи размер на шрифта за настолната версия на 14 px, за мобилната версия на 10 px, разстоянието между буквите 1 px и височината на реда 1,6 em. Затворете настройките си и запазете своя шаблон.
- Метатекст:
- Размер (Desktop): 14px
- Размер (телефон): 10px
- Разстояние между буквите: 1px
- Височина на реда: 1,6 em
Заглавие на фоново изображение
Ако решите, че искате заглавието да се показва на представеното изображение, използвайте същите настройки за дизайн и се върнете към раздела съдържание.
Изберете Заглавие/мета фоново изображение за Представено разположение на изображението.
- Представено разположение на изображението: Заглавие/мета фоново изображение
Превъртете до История и изберете Градиент на фона. Задайте ляв цвят на #fff9f2, десен цвят на rgba(255,255,255,0), посока на 90 градуса, начална позиция на 30% и изберете да, за да поставите градиента над изображението на фона. Затворете и запазете вашите настройки.
- Градиентни стопове:
- 30%: #fff9f2
- 100%: rgba(255,255,255,0)
- Посока на градиента: 90 градуса
- Квадратен градиент над фоновото изображение: ДА
Метод 2: Героен раздел на цял екран с метаданни
Този метод ще използва текстови модули с динамично съдържание за информацията. Това е добра опция, ако искате да покажете всички елементи на различни места.
Първо изтеглете шаблона и изтрийте първия раздел. Ще пресъздадем модулите и техните настройки в лявата колона, но ще преминем през тях, за да можете да ги конфигурирате.
Настройки на Hero Section на цял екран с метаданни
Отворете настройките на раздел и превъртете до Фоново изображение. Изберете Градиент на фона и променете настройките, както следва:
- Градиентни стопове:
- 30%: #fff9f2
- 100%: rgba(255,255,255,0)
- Посока на градиента: 90 градуса
- Квадратен градиент над фоновото изображение: ДА
Изберете Фоново изображение и изберете опцията Използвайте динамично съдържание.
Избирам Featured Изображение в опциите.
Изберете раздела Дизайни превъртете до Оразмеряване. Добавете 100vh към минималната височина. Затворете настройките на секцията.
- Минимална височина: 100vh
Настройки на Hero Section на цял екран с метаданни
След това добавете ред с двойна колона към секцията.
Добави Текстов модул в дясната колона.
За неговия съдържание, изберете Използвайте динамично съдържание.
Избирам Заглавие на публикация/архив в списъка с опции.
- Динамично съдържание: заглавие на публикация/архив
Отидете в раздела Design.
- Заглавие:
- Текст: H1
- Шрифт: Playfair Display
- Подравняване на текста: подравнено вляво
- Цвят на текста: #34332e
За размера на текстове , задайте за настолна версия 65px, за мобилна версия 42px и височина на реда 1,2em.
- Заглавие:
- Размер на текста: 65px (десктоп), 42px (телефон)
- Височина на реда: 1,2 em
Превъртете до Отстояние и въведете 50% за горна подложка. Затворете настройките.
- Подплата: 50% (отгоре)
Можете също да прочетете тази статия на: Как да създадете геройска секция с модула за заглавка с пълна ширина на Divi
Герой раздел с категория метаданни
Добавете нов раздел редовно в секцията Hero.
Отворете настройките му и задайте цвят фон на #fff9f2. Затворете настройките.
- Цвят на фона: #fff9f2
След това добавете a Ligne от 4 колони към новия раздел.
Герой на цял екран с текст на категория метаданни
Добави Текстов модул в лявата колона.
Отворете настройките на модула и изберете Използвайте динамично съдържание за тялото на текста.
Изберете Минали категории в списъка.
- Динамично съдържание: Категории публикации
Изберете раздела Дизайн и превъртете надолу до Текст на заглавие. Изберете H4. Изберете Playfair Display за шрифта и го задайте на средни, главни букви, дясно подравняване за настолната версия и ляво подравняване за версията за телефон. Изберете #7b7975 за цвят.
- Заглавие:
- Показване на текст
- Шрифт: Playfair Display
- Тегло на шрифта: средно
- Стил: TT
- Подравняване на текста: центрирано
- Цвят на текста: #7b7975
Задайте размера на шрифта за настолната версия на 14 px, за мобилната версия на 10 px, разстоянието между буквите на 1 px и височината на реда на 1,6 em. Затворете настройките си и запазете своя шаблон.
- Заглавие 4:
- Размер (Desktop): 14px
- Размер (телефон): 10px
- Разстояние между буквите: 1px
- Височина на реда: 1,6 em
Превъртете до Отстояние и добавете 0px към долното поле. Затворете настройките.
- Поле (отдолу): 0px
Секция Hero на цял екран с метаданни за мета текст
След това копирайте модула Category и го плъзнете към следващата колона. Всеки от мета модулите има еднакви настройки. Ще покажем как да създадете първия модул и след това да го копирате два пъти, за да създадете другите модули.
Автор
Отворете настройките и изтрийте съдържание динамичен.
Кликнете върху Използвайте динамично съдържание и изберете Публикувай автор.
- Динамично съдържание: Автор на публикацията
В раздела Дизайн, Променете следните настройки.
- Заглавие 4:
- Шрифт: Монсерат
- Тегло на шрифта: средно
- Стил: TT
- Подравняване на текст (Desktop): Централно
- Подравняване на текст (телефон): ляво
- Цвят: #7b7975
Параметрите на размер на шрифта включват:
- Размер на текста: 14px (десктоп), 10px (телефон)
- Разстояние между буквите: 1px
- Височина на реда: 1,6 em
La долно поле трябва да има 0px.
- Поле (отдолу): 0px
Дата
копие модула Author и го плъзнете към следващата колона.
Изтрий го съдържание Dynamique ток, изберете Използвайте динамично съдържание и изберете Дата на публикуване на публикацията. Затворете настройките.
- Динамично съдържание: Дата на публикуване
Връзка
Enfin, копие модула Дата на публикуване и го плъзнете до последната колона.
Както при другите модули, премахнете динамичното съдържание и изберете Използвайте динамично съдържание .
Избирам Публикуване на коментар от вашите избори.
- Динамично съдържание: Брой публикувани коментари
Този път добавете интервал и думата Коментари в полето След . Затворете малкия модал, след което затворете настройките. Запазете работата си.
- След: Коментари
Прочетете още: Divi: Как да покажа модула Fullwidth Header на цял екран
Résultats
Секция Hero със заглавие на публикация Модул за настолна версия
Секция Hero с модул за мобилна версия на Post Title
Алтернативно оформление на секция Hero с модул за десктоп версия за заглавие на публикация
Алтернативно оформление на секция Hero с мобилен модул за заглавие на публикация
Секция Hero с метаданни Настолна версия
Секция Hero с метаданни за мобилна версия
Изтеглете DIVI сега!!!
Заключение
Това е всичко! Това е нашият поглед върху това как да добавите раздел Hero на цял екран към шаблона за публикация в блога си. Divi.
модули Divi и Theme Builder предлагат няколко опции за създаване на геройски секции на цял екран. Всички методи работят много добре и всички имат своите предимства.
Използвайки тези методи, можете да добавите секция Hero на цял екран към всеки шаблон за публикация в блог на Divi.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...