Как разделить экран вашего шаблона сообщения в блоге с помощью конструктора тем Divi

При создании веб-сайта высока вероятность того, что вы разместите на нем страницу блога и сообщения в блогах. Конечно, самая важная часть стратегии блога - это создание высококачественного контента для сообщений блога, но дизайнерская часть всего этого также играет большую роль в успехе вашей стратегии. Создавая веб-сайт с Divi, вы можете упростить внешний вид ваших сообщений в блоге внутри Divi Theme Builder, создав шаблон сообщения с динамическим содержимым. Мы постоянно публикуем в нашем блоге шаблоны сообщений, которые помогают ускорить процесс, но если вы специально хотите создать сообщение в блоге с разделенным экраном, вам понравится этот пост. Мы покажем вам шаг за шагом, как это сделать, и вы также сможете бесплатно скачать файл шаблона JSON!

Давайте перейдем к этому.

Предварительный просмотр

Прежде чем мы углубимся в руководство, давайте быстро посмотрим на результат для разных размеров экрана.

Рабочий стол

Мобильный

Загрузите шаблон публикации блога с разделенным экраном БЕСПЛАТНО

Чтобы получить бесплатный шаблон сообщения блога с разделенным экраном, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

1. Перейдите в Divi Theme Builder и добавьте новый шаблон сообщения.

Перейдите в конструктор тем Divi и добавьте новый шаблон

Начните с перехода к Divi Theme Builder. Оказавшись там, добавьте новый шаблон.

Использовать шаблон для всех сообщений

Используйте новый шаблон для всех своих сообщений.

• Использовать: все сообщения

Начать создание тела шаблона

И приступаем к созданию тела шаблона.

2. Создайте тело шаблона сообщения в блоге

Настройки раздела

Интервал

Оказавшись внутри редактора шаблонов, вы заметите раздел. Откройте его настройки, перейдите на вкладку дизайна и удалите все стандартные верхние и нижние отступы.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить новую строку

Структура столбца

Продолжите, добавив новую строку, используя следующую структуру столбцов:

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и измените настройки размера следующим образом:

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да
• Ширина: 100%
• Максимальная ширина: 100%
• Мин. Высота: 100vh (рабочий стол), авто (планшет и телефон)
• Макс.высота: 100vh (рабочий стол), нет (планшет и телефон)

Интервал

Затем удалите все стандартные верхние и нижние отступы.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Переполнения

И установите скрытые переполнения строки.

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

Столбец 1 Настройки

Градиентный фон

Затем откройте настройки столбца 1 и добавьте градиентный фон.

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: # 000000
• Тип градиента: линейный
• Поместите градиент над фоновым изображением: Да

Фоновая картинка

Мы используем динамическое выделенное изображение в качестве фонового изображения для следующего столбца.

• Фоновое изображение: избранное изображение

Столбец 2 Настройки

Интервал

Затем мы откроем настройки столбца 2 и добавим некоторые пользовательские значения отступов в настройки интервала.

• Верхняя набивка: 8%
• Нижняя обивка: 8%
• Левый отступ: 8%
• Правое заполнение: 8%

Переполнения

Чтобы люди могли прокручивать второй столбец, где будет отображаться содержимое сообщения и поле для комментариев, мы собираемся изменить вертикальное переполнение в настройках видимости.

• Вертикальное переполнение: прокрутка (рабочий стол), видимость (планшет и телефон)

Добавить модуль заголовка сообщения в столбец 1

Элементы

Пришло время добавить модули, начиная с модуля заголовка сообщения в столбце 1. Отключите параметр избранного изображения в настройках элементов.

• Показать избранное изображение: Нет

Настройки текста заголовка

Перейдите на вкладку дизайна и соответствующим образом измените настройки текста H1:

• Заголовок Уровень заголовка: H1
• Шрифт заголовка: Work Sans
• Толщина шрифта заголовка: полужирный
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 60 ​​пикселей (рабочий стол), 45 пикселей (планшет), 35 пикселей (телефон)
• Интервал между заголовками: -1px
• Высота строки заголовка: 1,2 мм

Настройки метатекста

Затем измените настройки метатекста.

• Мета-шрифт: Work Sans
• Стиль мета-шрифта: прописные
• Цвет метатекста: #eaeaea
• Интервал между буквами в мета: 2 пикселя

Размеры

Затем измените ширину для разных размеров экрана.

• Ширина: 81% (рабочий стол), 100% (планшет и телефон)

Интервал

Затем добавьте несколько значений адаптивного заполнения.

• Верхняя набивка: 8% (только для планшетов и телефонов)
• Нижняя набивка: 8% (только планшет и телефон)
• Левое заполнение: 7% (планшет), 8% (телефон)
• Правое заполнение: 7% (планшет), 8% (телефон)

Позиция

И завершите настройки модуля, изменив настройки положения следующим образом:

• Позиция: абсолютная (настольный компьютер), по умолчанию (планшет и телефон)
• Расположение: внизу по центру
• Вертикальное смещение: 10%

Добавить модуль содержимого публикации в столбец 2

Переходим к следующему столбцу. Итак, первый модуль, который нам нужен, - это модуль содержимого публикации. Этот модуль будет динамически отображать содержимое вашего сообщения.

Настройки текста заголовка

Внесите некоторые изменения в настройки текста заголовка модуля.

• Шрифт заголовка: Work Sans
• Толщина шрифта заголовка: полужирный
• Размер текста заголовка:
  • H2: 40 пикселей
  • H3: 30 пикселей
  • H4: 25 пикселей
  • H5: 16 пикселей
  • H6: 14 пикселей
• Расстояние между буквами заголовка: -1 пиксель (H2, H3 и H4)

CSS-класс

И добавьте класс CSS. На следующем шаге этого руководства мы будем использовать этот класс CSS для создания некоторого промежутка между заголовками и абзацами.

• Класс CSS: содержание сообщения блога

Добавить модуль кода в столбец 2

Добавить CSS-код для промежутка между абзацами и заголовками

Добавьте модуль кода прямо под модулем содержимого публикации и добавьте следующие строки кода CSS для создания пробелов между заголовками и абзацами:

<style>
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-post-content h6
{
margin-top: 20px;
margin-bottom: 20px;
}
</style>

Добавить модуль комментариев в столбец 2

Настройки полей

Следующий и последний модуль, который нам нужен в столбце 2 для выполнения этого руководства, - это модуль комментариев. Соответственно измените настройки полей модуля:

• Цвет фона полей: #ffffff
• Цвет текста полей: # 000000
• Отступ сверху полей: 30 пикселей
• Отступ снизу полей: 30 пикселей
• Отступ слева от поля: 30 пикселей
• Отступ справа от поля: 30 пикселей
• Шрифт полей: Work Sans

• Стиль шрифта полей: прописные.
• Размер текста полей: 15 пикселей
• Расстояние между буквами полей: 3 пикселя
• Поля со скругленными углами: 10 пикселей (все углы)

• Поле поля Shadow Blur Strength: 30 пикселей
• Цвет тени поля поля: rgba (0,0,0,0.06)

Параметры текста счетчика комментариев

Затем измените настройки текста счетчика комментариев.

• Шрифт счетчика комментариев: Work Sans
• Толщина шрифта счетчика комментариев: полужирный

Настройки текста заголовка формы

Измените также настройки текста заголовка формы.

• Уровень заголовка заголовка формы: H3
• Шрифт заголовка формы: Work Sans
• Толщина шрифта заголовка формы: полужирный шрифт

Настройки метатекста

Далее мы внесем некоторые изменения в настройки метатекста.

• Мета-шрифт: Work Sans
• Толщина мета шрифта: полужирный
• Цвет метатекста: # 000000

Настройки кнопок

Затем мы соответствующим образом стилизуем кнопку:

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 16 пикселей
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 000000
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 100 пикселей

• Расстояние между буквами кнопки: 2 пикселя
• Шрифт кнопки: Work Sans
• Стиль шрифта кнопок: прописные

• Набивка кнопки сверху: 2%
• Набивка нижней части кнопок: 2%
• Нижняя левая набивка: 5%
• Набивка правой кнопки: 5%

Интервал

Мы также добавим немного верхнего поля.

• Максимальная маржа: 15%

CSS тела комментария

И мы завершим настройку модуля, добавив одну строку кода CSS в тело комментария модуля на вкладке «Дополнительно».

margin-top: 50px

3. Сохраните изменения в построителе тем и просмотрите результат.

Теперь, когда мы завершили шаблон сообщения в блоге, осталось только сохранить все изменения Divi Theme Builder и просмотреть результат в наших сообщениях в блоге!

Предварительный просмотр

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим на результат для разных размеров экрана.

Рабочий стол

Мобильный

Последние мысли

В этом посте мы показали вам другой подход к созданию шаблона сообщения в блоге для вашего сайта Divi. В частности, мы показали вам, как создать дизайн шаблона сообщения блога с разделенным экраном, используя конструктор тем Divi и динамический контент. Мы пошагово провели вас через этот процесс и добавили файл JSON, который вы также можете скачать бесплатно! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.