Искате ли да създадете страница в блог с модула Блог de Диви?
Обикновено всеки пакет за оформление на Divi, публикуван на Елегант Палитри предлага оформление на блог, което ви помага да създавате вашия блог достатъчно бързо. Но искали ли сте някога да видите как сами да създадете една от тези блог страници?
В тази статия ще видим как да създадете блог страница с модула Blog на Divi. Ще преминем през всяка настройка стъпка по стъпка.
Да започнем!
изследване
Преди да започнем, нека първо видим общ преглед на това, което ще създадем.
Създайте нова блог страница
Създайте нова страница
Първо, ще създадем нашата страница. В таблото за управление на WordPress щракнете Pages > Прибавям.
Дайте на страницата заглавие, което има смисъл за вас.
- Заглавие на страницата: Блог на Divi
Преминете към Divi Builder
Щракнете върху лилавия бутон в центъра на страницата: Използвайте Divi Builder .
Добавете раздел за заглавие на страницата на блога
Персонализирайте секцията
Ще започнем с първия раздел. Отворете ги параметри на раздела .
Превъртете до Фон и променете цвета на #f9f3fd. Въведете Blog като администраторски етикет. Затворете настройките на секцията.
- Фон: #f9f3fd
- Администраторски етикет: Блог
Създайте заглавие на страницата на блога
След това ще добавим a Ligne за титлата. Изберете зелената икона и изберете реда с една колона.
След това добавете a текстов модул на линията.
Персонализирайте модула Текст за заглавие на блога
Отворете ги Параметри на текстов модул и изберете H1. Добавете заглавието Нашият блог.
- Шрифт: Заглавие 1
- Текст: Нашият блог
След това отидете наРаздел Стил и задайте подравняването на Centered. За текста на заглавието H1 изберете Cormorant Infant за шрифт и го направете удебелен.
- Подравняване на текста: Центрирано
- Текст в горния колонтитул: H1
- Заглавен шрифт: Корморан
- Заглавка с мека светлина: удебелен текст
Задайте цвят на #442854, размер на 130px и височина на линията на 0,8em.
- Цвят: #442854
- Размер на текста на работния плот: 130px
- Височина на линията: 0,8em
Създайте най-новата статия и раздел с призив за действие
Нашата секция се състои от най-новата статия и имейл за включване.
Добавете нов ред под нашия първи ред и изберете дизайна на колоната 2/3 отляво и 1/3 отдясно.
Отворете ги параметри на линията като щракнете върху иконата на зъбно колело.
ИзберетеРаздел Стил, превъртете до разстояние и добавете 0px към долното вътрешно поле. Затворете настройките.
- Долно вътрешно поле: 0px
Добавете и персонализирайте представения модул за публикация в блог
След това ще добавим a блог-модул . Това ще съдържа последната ни статия. Щракнете върху сивата икона със знак плюс в лявата колона на нашия нов ред и добавете модула Blog.
Съдържание
при Съдържание , въведете 1 за броя на публикациите.
- Брой позиции: 1
елементи
Превъртете до елементи и премахнете отметката от „Автор“ и „Пагинация“. Ще оставим останалите по подразбиране.
- Покажи автор: не
- Показване на пагинация: Не
разпореждане
След това изберете Раздел Стил и изберете Цял екран за оформлението и изключете представеното наслагване на изображение.
- Модел: Цял екран
- Избрано наслагване на изображение: Дезактивирано
Текст на заглавието
Превъртете до Текст на заглавието . Изберете H2 и изберете Cormoran Infant. Изберете Bold и променете цвета на #442854.
- Вмъкнете заглавие трето: H2
- Заглавие на шрифта: Cormorant Infant
- Мека светлина Заглавие: Удебелен текст
- Цвят на текста на заглавието: #442854
Задайте размера на шрифта на 30 пиксела. Променете височината на линията на 1.1 em.
- Размер: 30 пиксела за десктоп, 20 пиксела за таблет, 18 пиксела за телефон
- Височина на заглавния ред: 1,1 см
Тялото на текста
След това превъртете надолу до основен текст . Изберете Cabin за шрифта, променете цвета на #442854 и променете височината на линията на 1,8em.
- Полицейски корпус: Кабина
- Цвят на основния текст: #442854
- Височина на линията на тялото: 1,8 em
Текстови метаданни
След това превъртете надолу до Текстови метаданни . Задайте параметрите, както следва:
- Шрифт за метаданни: Cormorant Infant
- Метаданни Приглушена светлина: Редовна
- Стил на копиране на метаданни: Няма
- Цвят на текста на метаданните: #442854
- Размер на текста на метаданните: Настолен компютър 16px, Таблет 15px, Телефон 14px
- Височина на реда с метаданни: 1,8 em
разстояние
След това превъртете надолу до разстояние и променете горното поле на 0vw.
- Горен марж: 0vw
Кутия за сянка
Накрая превъртете надолу до Кутия за сянка и го деактивирайте.
- Shadow Box: Деактивирайте
Добавете и персонализирайте текстов модул за имейл на блог
Сега ще се преместим в дясната колона и създайте призив за действие чрез имейл . Първо добавете текстов модул в дясната колона. Щракнете върху сивата икона със плюс и потърсете Текст.
Съдържание
Изберете Заглавие 2 и въведете текста Абонирайте се за нашите оферти.
- Шрифт: Заглавие 2
- Текст: Абонирайте се за нашите предложения
Заглавен текст
за текстове от заглавието, изберете Center Alignment, изберете H2, изберете Cormorant Infant и го задайте на Bold.
- Подравняване на текста: Центрирано
- Текст в горния колонтитул: H2
- Заглавен шрифт: Корморан
- Заглавка с мека светлина: удебелен
Променете цвета на #442854, размера на 32px и височината на линията на 0,95em.
- Цвят на текста в горния колонтитул: #442854
- Размер на заглавния текст: 32 пиксела
- Височина на горната линия: 0,95 em
разстояние
Накрая превъртете надолу до разстояние и добавете 10 пиксела към долното поле. Затворете настройките на текстовия модул.
- Долно поле: 10px
Добавете и персонализирайте модула Blog Email Optin
След това тръгваме създайте форма електронна поща . Добавете модул за опция за имейл под текстовия модул в дясната колона.
Съдържание
Първо премахнете заглавието и основния текст.
- Заглавие: Няма
- Основен текст: няма
Превъртете до Имейл акаунт и добавете вашия доставчик на услуги.
След това превъртете надолу до Фон и премахнете избора от цвета на фона.
- Използвайте цвят на фона: не
полета
Отидете в Раздел Стил и променете цвета на фона на полетата на rgba(255,255,255,0) и цвета на текста на #442854.
- Полета за цвят на фона: rgba(255,255,255,0)
- Полета за цвят на текста: #442854
Превъртете надолу до опции за шрифтове и променете шрифта на кабина, размера на 16px и височината на линията на 1,8em.
- Полета за шрифтове: Cabin
- Полетата за размер на текста: 16 пиксела
- Височина на полевия ред: 1,8 em
След това коригирайте заобления ъгъл на полетата на 32px, ширината на рамката на 2px и променете цвета на рамката на #442854.
- Контроли за заоблен правоъгълник: 32px
- Полета с ширина на границата: 2px
- Полета за цвят на рамката: #442854
бутон
Превъртете до Бутон и изберете Използвайте персонализирани стилове за Button . Променете размера на 18ps, цвета на бутона на бяло и цвета на фона на бутона на #442854.
- Използване на персонализирани стилове за бутона: Да
- Размер на текста на бутона: 18 пиксела
- Цвят на текста на бутона: #ffffff
- Бутон за фон: #442854
Променете радиуса на границата на 50 пиксела, шрифта на Cormorant Infant и направете теглото удебелено.
- Бутон за радиус на границата: 50px
- Бутон за шрифт: Бебе Корморан
- Бутон за мека светлина: Удебелен текст
И накрая, нека добавим малко полета. Въведете 20px за горното поле, 12px за горното и долното поле и 32px за лявото и дясното поле. Затворете настройките за опция за имейл.
- Бутон за горно поле: 20 px
- Горен и долен бутон за подплата: 12 px
- Подложка отляво и отдясно на бутона: 32px
Добавете нов ред за списък с публикации в блога
Сега ще го направим създайте списък с елементи на страницата. Първо добавете нов ред с една колона под предишния ни раздел.
Настройки на линията
Отидете на Раздел Стил и добавете 0px към вътрешното поле на Vertex. Затворете настройките на линията.
- Върх на вътрешен марж: 0px
Добавете блог модул към вашата линия
Добави блог-модул към новия си ред, като щракнете върху сивата икона плюс и щракнете върху Блог.
Оформяне на емисията с публикации в блога
Нека променим емисията на страницата на блога.
Съдържание на емисията на блога
Отворете ги Настройки на блог модула и въведете 3 за броя на публикациите. Това ви позволява да изберете броя на публикациите, които да се показват на екрана.
По-малко число, като 3, ни позволява да се съсредоточим върху последните публикации и да намалим размера на страницата. Това е добър избор, ако не публикувате често или искате да поддържате страницата по-чиста. Показването на повече публикации, като например 6-9, е добра идея, ако искате да се съсредоточите върху потока на блога.
- Брой публикации: 3
Въведете 1 за отместване. Това казва на Divi да започне с втората публикация в блога, което ни пречи да покажем същата статия, която вече е била показана в публикацията в блога, показана над нея.
- Номер на офсетния пост: 1
елементи
Превъртете до елементи . Активиране на представено изображение, дата, фрагмент от категории и пагинация. Деактивирайте останалите.
- Показване на представено изображение: Да
- Данни: Да
- Категории: Да
- Откъс: Да
- Пагинация: Да
Заден план
Достъп до Фон и задайте цвета на фона на решетката на rgba(255,255,255,0)
- Цвят на фона на плочката на мрежата: rgba (255,255,255,0)
Оформление и наслагване
След това отидете на Раздел Стил . Оставете оформлението зададено на Мрежа. Избрахме оформлението с пълна ширина за публикацията в блога, представена над тази. Ще използваме оформлението на мрежата за тази емисия на блога, което е опцията по подразбиране. Деактивирайте представеното наслагване на изображение.
- Оформление: Решетка
- Избрано наслагване на изображение: Дезактивирано
Текст на заглавието
за заглавен текст , изберете H2. Изберете Cormorant Infant, задайте го Bold и въведете #442854 за цвят.
- Вмъкнете заглавие трето: H2
- Заглавие на шрифта: Cormorant Infant
- Мека светлина Заглавие: Удебелен текст
- Цвят на текста на заглавието: #442854
Изберете 20px за размера на текста. Задайте височината на линията на 1,1 em.
- Размер на заглавния текст: Desktop 20px
- Височина на заглавния ред: 1,1 см
Тялото на текста
Превъртете до Основен текст и изберете Cabin. Задайте цвета на #442854.
- Полицейски корпус: Кабина
- Цвят на основния текст: #442854
Задайте височината на линията на 1,8 em.
- Височина на линията: 1,8 em
Текстови метаданни
Превъртете до Текстови метаданни и изберете Корморан Инфант. Задайте тегло на нормално, стил на никакъв и цвят на #442854.
- Шрифт за метаданни: Cormorant Infant
- Метаданни Приглушена светлина: Редовна
- Стил на копиране на метаданни: Няма
- Цвят на текста на метаданните: #442854
- Размер на текста на метаданните: работен плот 16px, таблет 15px, телефон 14px
- Височина на реда с метаданни: 1,8 em
Текст за пагинация
Сега да преминем към Номериране на страници . За шрифт изберете Cormorant Infant, изберете Bold и променете цвета на #442854.
- Шрифт Показване на пагинация: Корморан бебе
- Показване на пейджинг мека светлина: Получер
- Цвят на текста. Показване на пагинация: #442854
разстояние
След това ще преминем към разстояние и добавете полето 0vw в горната част. Това предотвратява припокриването на нашия модул с предишния модул.
- Горен марж: 0vw
граница
Превъртете до граница и въведете 0px за всичките четири ъгъла. Това ни дава нашата квадратна форма за картата.
- Оформление на заоблена правоъгълна мрежа: 0px
Кутия за сянка
Накрая превъртете надолу до Box Shadow и го деактивирайте. Затворете настройките на блога. Разделът с блога е завършен.
- Кутия за сянка: няма
Добавете нов раздел „Призив към действие“ към страницата на блога
След това тръгваме създайте секцията „Призив към действие“. на страницата. Този раздел включва паралакс фоново изображение на цял екран, контакт и социални връзки за следване.
Добавете нов раздел
Щракнете върху синята икона, за да добавете нов редовен раздел в долната част на страницата.
- Раздел: Редовен
Оформете секцията Call to Action
Отворете ги параметри на раздела като щракнете върху иконата му на зъбно колело.
Заден план
Превъртете до Фон и изберете раздела Изображение. Кликнете върху сивата икона с надпис Фоново изображение.
Изберете изображение на цял екран от вашата медийна библиотека. Изберете Използване на паралакс ефект, след което изберете CSS за метода на паралакс.
- Изображение на фона
- Използване на паралакс ефект: Да
- Паралакс метод: CSS
Превъртете надолу до Admin Label и въведете „Footer“ в полето. Това ще ви помогне да следите секциите.
- Администраторски етикет: Долен колонтитул
След това отидете на Раздел Стил.
- Вътрешен марж: 10vw (отгоре и отдолу)
Добавете нов ред
Щракнете върху иконата със зелен плюс и добавете ред към една колона за нашето съдържание.
оразмеряване
Отворете ги параметри на линията и отидете в раздела Стил.
- Максимална ширина: 320 пиксела
Модул за заглавен текст
Нашата секция Call to Action е представена със заглавие. За да създадете това, добавете текстов модул на линията.
Персонализирайте текста на заглавието
Добавете вашето заглавие и променете шрифта на Заглавие 3.
- Шрифт: Заглавие 3
- Текст: Всичко за Divi
Заглавен текст
Отидете на Раздел Стил и превъртете до Текст на субтитрите . Изберете център за подравняване, изберете H3, изберете Cormorant Infant, задайте го на Bold и изберете бяло за цвят.
- Подравняване на текст: Център
- Текст в горния колонтитул: H3
- Заглавен шрифт: Корморан
- Заглавка с мека светлина: удебелен
- Цвят на текста на заглавката: #ffffff
- Размер на текста в горния колонтитул: 42 пиксела за десктоп, 20 пиксела за таблет, 16 пиксела за телефон
- Височина на горната линия: 1,1 em
разстояние
Накрая превъртете надолу до разстояние и добавете 10 пиксела към долното поле. Затворете настройките на модула.
- Долно поле: 10px
Текстов модул за адреса
Добавете друг текстов модул за вашия физически адрес.
Стил на модула Текст на физическия адрес
Текст на адреса
Добавете адреса си като текст на абзаца.
- Стил: Абзац
- Текст: вашият адрес
Текст на абзаца
След това отидете на Текст в Раздел Стил и изберете Cormorant Infant, полу-удебелено, и го задайте на бяло.
- Шрифт: Бебе Корморан
- Мек светъл текст: полуудебелен
- Цвят на текста Текст: #ffffff
- Текст Размер на текста: 28px за настолен компютър, 20px за таблет, 16px за телефон
- Височина на текстовия ред: 1,2 em
Добавете модула, последвайте ни в социалните мрежи
Последният ни модул е модулът Последвайте ни в социалните мрежи . Добавете го в края на реда.
Стилизирайте Следвайте ни в модула за социални медии
Ще започнем с Раздел Стил този път. Изберете Център за подравняване на модули и променете цвета на иконата на #442854.
- Подравняване на модула: Център
- Цвят на иконата: #442854
Превъртете до Bordure и добавете 23 пиксела за заоблени ъгли.
- Заоблен правоъгълник: 32px
Добавете и персонализирайте вашите социални мрежи
Сега се върнете към Раздел Съдържание и добавете всички социални мрежи, които искате да включите. Щракнете върху сивата икона плюс.
Отворете ги настройки за всяка от вашите социални мрежи , изберете мрежата и добавете връзката към вашия акаунт. Задайте цвета на фона на #f9f3fd. Затворете настройките на подмодула.
- Социална мрежа: ваш избор
- URL адрес на връзката към акаунта: вашата връзка
- Цвят на фона: #f9f3fd
Запазете страницата на блога и излезте от визуалния конструктор
Enfin, запишете страницата в долния десен ъгъл и изберете Излезте от Visual Builder в горната част на страницата. Готови сте да видите работата си.
Визуализация на страницата на блога
Ето нашите резултати.
Изтеглете DIVI сега!!!
Заключение
Така ! Това е нашият поглед към това как да създадете блог страница с Divi.
Divi Builder улеснява създаването на интересни оформления и има множество начини за използване на всеки от модулите. Както беше разгледано в този урок, възможно е да се използват множество версии на модула на блога на една и съща страница, за да се покаже емисията на блога по различни начини.
Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...