Вы хотите создать страницу блога с модулем блога de Диви?
Обычно каждый пакет макетов Divi, опубликованный на Элегантные темы предлагает макет блога, который поможет вам создать ваш блог достаточно быстро. Но хотели ли вы когда-нибудь узнать, как создать одну из этих страниц блога самостоятельно?
В этой статье мы увидим, как создать страницу блога с модулем блога Divi. Мы рассмотрим каждую настройку шаг за шагом.
Давайте начнем!
обследование
Прежде чем мы начнем, давайте сначала посмотрим, что мы собираемся создать.
Создать новую страницу блога
Создать новую страницу
Сначала мы создадим нашу страницу. В панели управления WordPress нажмите Разделы > добавлять.
Дайте странице название, которое имеет смысл для вас.
- Название страницы: Блог на Divi
Переключиться на Divi Builder
Нажмите фиолетовую кнопку в центре страницы: Использовать Divi Builder .
Добавить раздел для заголовка страницы блога
Настроить раздел
Начнем с первого раздела. Откройте их параметры сечения .
Прокрутите до фон и измените цвет на #f9f3fd. Введите Блог в качестве метки администратора. Закройте настройки раздела.
- Фон: #f9f3fd
- Ярлык администратора: Блог
Создать заголовок страницы блога
Затем мы добавим линия для названия. Выберите зеленый значок и выберите строку с одним столбцом.
Затем добавьте текстовый модуль на линии.
Настройте текстовый модуль заголовка блога
Открой их Настройки текстового модуля и выберите H1. Добавьте заголовок Наш блог.
- Шрифт: Название 1
- Текст: Наш блог
Затем перейдите вВкладка "Стиль" и установите выравнивание по центру. Для текста заголовка H1 выберите шрифт Cormorant Infant и сделайте его полужирным.
- Выравнивание текста: по центру
- Текст заголовка: H1
- Шрифт заголовка: Cormorant Infant
- Мягкий светлый заголовок: жирный шрифт
Установите цвет на #442854, размер на 130px и высоту линии на 0,8em.
- Цвет: #442854
- Размер текста на рабочем столе: 130 пикселей
- Высота строки: 0,8 эм
Создайте раздел «Последняя статья» и «Призыв к действию»
Наш раздел состоит из последней статьи и подписки по электронной почте.
Добавить новую строку под нашей первой строкой и выберите дизайн столбца 2/3 слева и 1/3 справа.
Открой их параметры линии нажав на значок шестеренки.
ВыберитеВкладка "Стиль", прокрутите до расстояние и добавьте 0px к нижнему внутреннему полю. Закрыть настройки.
- Нижнее внутреннее поле: 0px
Добавьте и настройте рекомендуемый модуль сообщений в блоге.
Затем мы добавим блог-модуль . Это будет наша последняя статья. Щелкните значок серого плюса в левом столбце нашей новой строки и добавьте модуль «Блог».
Содержание
Sous Содержание , введите 1 для количества сообщений.
- Количество позиций: 1
Элементы
Прокрутите до Элементы и снимите флажок Автор и разбиение на страницы. Оставим остальные по умолчанию.
- Показать автора: нет
- Показать пагинацию: Нет
Предоставление
Затем выберите Вкладка "Стиль" и выберите «Полный экран» для макета и отключите наложение избранного изображения.
- Модель: Полноэкранный
- Выбранное наложение изображения: отключено
Текст заголовка
Прокрутите до Текст заголовка . Выберите H2 и выберите Cormoran Infant. Выберите Жирный и измените цвет на #442854.
- Вставьте третий заголовок: H2
- Название шрифта: Cormorant Infant
- Мягкий свет Заголовок: Жирный текст
- Цвет текста заголовка: #442854
Установите размер шрифта 30 пикселей. Измените высоту строки на 1.1em.
- Размер: 30 пикселей для компьютера, 20 пикселей для планшета, 18 пикселей для телефона.
- Высота строки заголовка: 1,1 см
текст тела
Затем прокрутите вниз до Основной текст . Выберите Cabin для шрифта, измените цвет на #442854 и измените высоту строки на 1,8em.
- Полицейский корпус: Кабина
- Цвет основного текста: #442854
- Высота линии кузова: 1,8 см
Текстовые метаданные
Затем прокрутите вниз до Текстовые метаданные . Установите параметры следующим образом:
- Шрифт метаданных: Cormorant Infant
- Тусклый свет метаданных: обычный
- Стиль копирования метаданных: Нет
- Цвет текста метаданных: #442854
- Размер текста метаданных: рабочий стол 16 пикселей, планшет 15 пикселей, телефон 14 пикселей
- Высота строки метаданных: 1,8 em
расстояние
Затем прокрутите вниз до расстояние и измените верхнее поле на 0vw.
- Верхнее поле: 0vw
Shadow box
Наконец, прокрутите вниз до Shadow box и выключите его.
- Коробка теней: отключить
Добавить и настроить текстовый модуль электронной почты блога
Теперь мы собираемся перейти к правому столбцу и создать призыв к действию по электронной почте . Сначала добавьте модуль Text в правый столбец. Щелкните значок серого плюса и выполните поиск текста.
Содержание
Выберите Заголовок 2 и введите текст Подпишитесь на наши предложения.
- Шрифт: Заголовок 2
- Текст: Подпишитесь на наши предложения
Текст заголовка
Для тексты заголовка, выберите Center Alignment, выберите H2, выберите Cormorant Infant и установите для него значение Bold.
- Выравнивание текста: по центру
- Текст заголовка: H2
- Шрифт заголовка: Cormorant Infant
- Мягкий светлый заголовок: полужирный
Измените цвет на #442854, размер на 32px и высоту строки на 0,95em.
- Цвет текста заголовка: #442854
- Размер текста заголовка: 32 пикселя
- Высота строки заголовка: 0,95 em
расстояние
Наконец, прокрутите вниз до расстояние и добавьте 10 пикселей к нижнему полю. Закройте настройки текстового модуля.
- Нижнее поле: 10 пикселей
Добавить и настроить модуль Blog Email Optin
Тогда мы идем создать форма Эл. адрес . Добавьте модуль Email Optin под текстовым модулем в правом столбце.
Содержание
Во-первых, удалите заголовок и основной текст.
- Название: Нет
- Основной текст: нет
Прокрутите до Адрес электронной почты и добавьте своего поставщика услуг.
Затем прокрутите вниз до фон и отмените выбор цвета фона.
- Использовать цвет фона: нет
Des Champs
Перейти к Вкладка "Стиль" и измените цвет фона поля на rgba(255,255,255,0) и цвет текста на #442854.
- Поля цвета фона: rgba(255,255,255,0)
- Цветовые поля текста: #442854
Прокрутите вниз до параметры шрифта и измените шрифт на кабину, размер на 16px и высоту строки на 1,8em.
- Поля шрифта: Кабина
- Поля Размер текста: 16 пикселей
- Высота строки поля: 1,8 см
Затем настройте закругленный угол полей на 32 пикселя, ширину границы на 2 пикселя и измените цвет границы на #442854.
- Элементы управления «Прямоугольник со скругленными углами»: 32 пикселя.
- Поля ширины границы: 2px
- Поля цвета границы: #442854
кнопка
Прокрутите до кнопки и выберите Используйте пользовательские стили для кнопки . Измените размер на 18ps, цвет кнопки на белый и цвет фона кнопки на #442854.
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 18 пикселей
- Цвет текста кнопки: #ffffff
- Фоновая кнопка: #442854
Измените радиус границы на 50 пикселей, шрифт на Cormorant Infant и сделайте толщину полужирным шрифтом.
- Кнопка «Радиус границы»: 50 пикселей
- Кнопка шрифта: младенец баклана
- Кнопка Soft Light: жирный текст
Наконец, давайте добавим немного полей. Введите 20 пикселей для верхнего поля, 12 пикселей для верхнего и нижнего отступов и 32 пикселя для левого и правого отступов. Закройте настройки электронной почты.
- Кнопка «Верхнее поле»: 20 пикс.
- Верхняя и нижняя кнопки заполнения: 12 пикселей
- Кнопка слева и справа Padding: 32px
Добавить новую строку для списка постов в блоге
Мы сейчас идем создать список предметов страницы. Во-первых, добавьте новую строку с одним столбцом ниже нашего предыдущего раздела.
Настройки линии
Перейти к Вкладка "Стиль" и добавьте 0px к внутреннему полю вершины. Закройте настройки линии.
- Вершина внутреннего поля: 0px
Добавьте модуль блога в свою строку
Добавить блог-модуль на новую строку, щелкнув значок серого плюса и выбрав Блог.
Стилизация ленты постов в блоге
Давайте изменим ленту страницы блога.
Контент ленты блога
Открой их Настройки модуля блога и введите 3 для количества сообщений. Это позволяет вам выбрать количество сообщений, отображаемых на экране.
Меньшее число, например 3, позволяет нам сосредоточиться на последних сообщениях и уменьшить размер страницы. Это хороший выбор, если вы не публикуете сообщения часто или хотите сохранить чистоту страницы. Показывать больше сообщений, например 6–9, — хорошая идея, если вы хотите сосредоточиться на потоке блога.
- Количество сообщений: 3
Введите 1 для смещения. Это говорит Divi начать со второго сообщения в блоге, что не позволяет нам отображать ту же статью, которая уже отображалась в сообщении блога, показанном над ним.
- Номер смещения поста: 1
Элементы
Прокрутите до Элементы . Включите избранное изображение, дату, фрагмент категорий и разбиение на страницы. Отключите остальные.
- Показать избранное изображение: Да
- Данные: Да
- Категории: Да
- Выдержка: да
- Пагинация: Да
Задний план
Доступ к фон и установите цвет фона плитки сетки на rgba (255,255,255,0)
- Цвет фона плитки сетки сетки: rgba (255,255,255,0)
Макет и наложение
Затем перейдите в Вкладка "Стиль" . Оставьте для макета значение «Сетка». Мы выбрали полноразмерный макет для поста в блоге, показанного выше. Мы будем использовать сетку для этой ленты блога, которая является опцией по умолчанию. Отключите наложение рекомендуемого изображения.
- Макет: Сетка
- Выбранное наложение изображения: отключено
Текст заголовка
Для текст заголовка , выберите H2. Выберите Cormorant Infant, установите жирный шрифт и введите цвет #442854.
- Вставьте третий заголовок: H2
- Название шрифта: Cormorant Infant
- Мягкий свет Заголовок: Жирный текст
- Цвет текста заголовка: #442854
Выберите 20 пикселей для размера текста. Установите высоту строки на 1,1 см.
- Размер текста заголовка: Рабочий стол 20px
- Высота строки заголовка: 1,1 см
текст тела
Прокрутите до Основной текст и выберите Кабина. Установите цвет #442854.
- Полицейский корпус: Кабина
- Цвет основного текста: #442854
Установите высоту строки на 1,8 см.
- Высота строки: 1,8 см
Текстовые метаданные
Прокрутите до Текстовые метаданные и выберите младенца баклана. Установите вес на нормальный, стиль на отсутствие и цвет на #442854.
- Шрифт метаданных: Cormorant Infant
- Тусклый свет метаданных: обычный
- Стиль копирования метаданных: Нет
- Цвет текста метаданных: #442854
- Размер текста метаданных: рабочий стол 16 пикселей, планшет 15 пикселей, телефон 14 пикселей
- Высота строки метаданных: 1,8 em
Текст пагинации
Теперь давайте перейдем к Нумерация страниц . Для шрифта выберите Cormorant Infant, выберите Bold и измените цвет на #442854.
- Пагинация шрифтового шоу: Младенец баклана
- Показать пейджинг Мягкий свет: Жирный
- Цвет текста Показать пагинацию: #442854
расстояние
Затем мы перейдем к интервал и добавьте поле 0vw вверху. Это предотвращает наложение нашего модуля на предыдущий модуль.
- Верхнее поле: 0vw
граница
Прокрутите до граница и введите 0px для всех четырех углов. Это дает нам нашу квадратную форму для карты.
- Макет сетки прямоугольника со скругленными углами: 0px
Shadow box
Наконец, прокрутите вниз до Box Тень и отключите его. Закройте настройки блога. Раздел блога завершен.
- Теневой ящик: нет
Добавьте на страницу блога новый раздел «Призыв к действию».
Тогда мы идем создать раздел «Призыв к действию» страницы. Этот раздел включает полноэкранное фоновое изображение параллакса, обращайтесь и социальные следующие ссылки.
Добавить новый раздел
Щелкните синюю иконку, чтобы добавить новый обычный раздел внизу страницы.
- Раздел: Обычный
Стиль раздела «Призыв к действию»
Открой их параметры сечения нажав на значок шестеренки.
Задний план
Прокрутите до фон и выберите вкладку Изображение. Нажмите на серый значок с надписью «Фоновое изображение».
Выберите полноэкранное изображение из своей медиатеки. Выберите «Использовать эффект параллакса», затем выберите CSS для метода параллакса.
- Фоновое изображение
- Использовать эффект параллакса: Да
- Метод параллакса: CSS
Прокрутите вниз до метки администратора и введите «Нижний колонтитул» в поле. Это поможет вам отслеживать разделы.
- Тег администратора: Нижний колонтитул
Затем перейдите в Вкладка "Стиль".
- Внутреннее поле: 10vw (сверху и снизу)
Добавить новую строку
Нажмите зеленый значок плюса и добавить строку в один столбец для нашего контента.
калибровка
Открой их параметры линии и перейдите на вкладку Стиль.
- Максимальная ширина: 320 пикселей
Текстовый модуль заголовка
Наш раздел «Призыв к действию» имеет заголовок. Чтобы создать это, добавить текстовый модуль на линии.
Настроить текст заголовка
Добавьте свой заголовок и измените шрифт на Заголовок 3.
- Шрифт: Заголовок 3
- Текст: Все о Диви
Текст заголовка
Перейти к Вкладка "Стиль" и прокрутите до Текст субтитров . Выберите центр для выравнивания, выберите H3, выберите Cormorant Infant, установите для него значение Bold и выберите белый цвет.
- Выравнивание текста: по центру
- Текст заголовка: H3
- Шрифт заголовка: Cormorant Infant
- Мягкий светлый заголовок: полужирный
- Цвет текста заголовка: #ffffff
- Размер текста заголовка: 42 пикселя для ПК, 20 пикселов для планшетов, 16 пикселов для телефонов.
- Высота строки заголовка: 1,1 em
расстояние
Наконец, прокрутите вниз до расстояние и добавьте 10 пикселей к нижнему полю. Закройте настройки модуля.
- Нижнее поле: 10 пикселей
Текстовый модуль для адреса
Добавить еще один текстовый модуль для вашего физического адреса.
Стиль текстового модуля физического адреса
Текст адреса
Добавьте свой адрес в качестве текста абзаца.
- Стиль: Абзац
- Текст: ваш адрес
Текст абзаца
Затем перейдите к тексту в Вкладка "Стиль" и выберите Cormorant Infant, полужирный, и установите его на белый цвет.
- Шрифт: Баклан Младенец
- Мягкий светлый текст: полужирный
- Цвет текста Текст: #ffffff
- Текст Размер текста: 28 пикселей для компьютера, 20 пикселей для планшета, 16 пикселей для телефона.
- Высота строки текста: 1,2 em
Добавьте модуль следите за нами в социальных сетях
Наш последний модуль — это модуль Следите за нами в социальных сетях . Добавьте его в конец строки.
Стилизация Модуль «Подпишитесь на нас в социальных сетях»
Мы начнем с Вкладка "Стиль" в это время. Выберите Center for Module Alignment и измените цвет значка на #442854.
- Выравнивание модуля: по центру
- Цвет значка: #442854
Прокрутите до Bordure и добавьте 23 пикселя для закругленных углов.
- Прямоугольник со скругленными углами: 32 пикселей
Добавьте и настройте свои социальные сети
Теперь вернитесь к Вкладка «Контент» и добавьте любые социальные сети, которые вы хотите включить. Щелкните значок серого плюса.
Открой их настройки для каждой из ваших социальных сетей , выберите сеть и добавьте ссылку в свой аккаунт. Установите цвет фона на #f9f3fd. Закройте настройки подмодуля.
- Социальная сеть: на ваш выбор
- URL ссылки на аккаунт: ваша ссылка
- Цвет фона: #f9f3fd
Сохраните страницу блога и выйдите из визуального конструктора.
Enfin, сохранить страницу в правом нижнем углу и выберите Выйти из визуального конструктора в верхней части страницы. Вы готовы увидеть свою работу.
Предварительный просмотр страницы блога
Вот наши результаты.
Скачайте DIVI прямо сейчас!!!
Заключение
Так ! Это наш взгляд на то, как создать страницу блога с Divi.
Divi Builder позволяет легко создавать интересные макеты, и каждый из модулей можно использовать несколькими способами. Как было показано в этом руководстве, можно использовать несколько версий модуля «Блог» на одной странице, чтобы отображать ленту блога по-разному.
Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
