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

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

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

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

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

Рабочий стол

Мобильный

Скачайте БЕСПЛАТНО простой шаблон сообщения в блоге, удобный для пользовательского интерфейса

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

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

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

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

СКАЧАТЬ

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

Подпишитесь на наш канал Youtube

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

Перейти в конструктор тем Divi

Начните с перехода к Divi Theme Builder.

Создать новый шаблон

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

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

2. Начать создание тела сообщения в блоге

Затем начните создавать собственное тело вашего шаблона сообщения.

Добавить строку №1 в существующий раздел

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Граница столбца 1 и 2

Добавьте правую границу к следующему первому и второму столбцу.

• Ширина правой границы: 1 пиксель (рабочий стол), 0 пиксель (планшет и телефон)
• Цвет правой границы: # 333333

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

Динамический контент

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

• Текстовый модуль в столбце 1: Категории сообщений

• Текстовый модуль в столбце 2: Дата публикации публикации

• Текстовый модуль в столбце 3: количество комментариев
• После: Комментарии

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

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

• Шрифт текста: Lato
• Размер текста: 1,1 бэр
• Расстояние между буквами текста: 1 пикс.
• Высота текстовой строки: 2em

Добавить строку №2

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

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

Добавить текстовый модуль №1 в столбец

Динамический контент

Добавьте текстовый модуль и выберите динамическое содержимое заголовка сообщения.

• Динамический контент: заголовок сообщения

• Раньше: <H1>
• После: </H1>

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

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

• Шрифт заголовка: Playfair Display
• Выравнивание текста заголовка: по центру
• Размер текста заголовка: 6,2 бэр (рабочий стол), 3,2 бэр (планшет), 2,3 бэр (телефон)

Интервал

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

• Верхнее поле: 50 пикселей
• Нижнее поле: 100 пикселей

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

Динамический контент

Добавьте еще один текстовый модуль прямо под предыдущим и выберите динамическое содержимое отрывка публикации.

• Динамическое содержание: выдержка из публикации

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

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

• Шрифт текста: Lato
• Размер текста: 1,1 бэр
• Расстояние между буквами текста: 1 пикс.
• Высота текстовой строки: 2em
• Выравнивание текста: по центру

Добавить строку №3

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

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

Отображать

Убедитесь, что столбцы расположены рядом друг с другом, добавив одну строку кода CSS к основному элементу строки.

display: flex;

Добавить модуль изображения в столбец 1

Динамический контент

Продолжите, добавив модуль изображения в столбец 1 и выберите динамическое содержимое изображения профиля автора.

• Динамическое содержимое: изображение профиля автора

Выравнивание

Перейдите на вкладку дизайна модуля и измените выравнивание изображения.

• Выравнивание изображения: вправо

Размеры

Затем измените ширину.

• Ширина: 50 пикселей

Интервал

Добавьте немного правого поля на планшете и телефоне.

• Правое поле: 20 пикселей (планшет и телефон)

Граница

И завершите настройки модуля, добавив некоторый радиус границы в настройки границы.

• Все углы: 100 пикселей

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

Динамический контент

Во втором столбце нам понадобится текстовый модуль. Выберите динамическое содержимое автора сообщения.

• Динамический контент: Автор сообщения

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

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

• Шрифт текста: Lato
• Размер текста: 1,1 бэр
• Расстояние между буквами текста: 1 пикс.

Интервал

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

• Верхнее поле: 15 пикселей
• Левое поле: 20 пикселей (планшет и телефон)

Добавить строку №4

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

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

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

Оставьте поле содержимого пустым

Добавьте текстовый модуль в столбец и убедитесь, что вы оставили поле содержимого пустым.

Динамическое фоновое изображение

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

• Динамический контент: избранное изображение

Размеры

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

• Ширина: 800 пикселей (рабочий стол), 500 пикселей (планшет), 300 пикселей (телефон)
• Выравнивание модуля: по центру

Интервал

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

• Верхний отступ: 400 пикселей (рабочий стол), 250 пикселей (планшет), 150 пикселей (телефон)
• Нижний отступ: 400 пикселей (рабочий стол), 250 пикселей (планшет), 150 пикселей (телефон)

Граница

И добавьте некоторый радиус границы в настройки границы, чтобы превратить модуль в круг.

• Все углы: 500 пикселей

Добавить новый раздел

Переходим к следующему регулярному разделу.

Добавить строку №1

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

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

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

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

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

• Шрифт текста: Lato
• Размер текста: 1,1 бэр
• Расстояние между буквами текста: 1 пикс.
• Высота текстовой строки: 2.3em

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

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

• Шрифт заголовка: Playfair Display
• Размер текста H2: 3,5 бэр (рабочий стол), 2 бэр (планшет и телефон)
• Размер текста H3: 2,5 бэр (рабочий стол), 1,5 бэр (планшет и телефон)
• Размер текста H4: 2,3 бэр (рабочий стол), 1,3 бэр (планшет и телефон)
• Размер текста H5 и H6: 2 бэр (настольный компьютер), 1 бэр (планшет и телефон)

Добавить строку №2

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

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

Интервал

Добавьте настраиваемое верхнее поле к строке.

• Верхнее поле: 100 пикселей

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

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

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

• Цвет фона полей: #ffffff
• Шрифт полей: Lato
• Размер текста полей: 1.1rem

• Все углы: 0 пикселей
• Ширина границы поля: 1px
• Цвет границы полей: # 000000

Настройки изображения

Измените также настройки изображения.

• Все углы: 100 пикселей

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

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

• Заголовок уровня заголовка: H2
• Шрифт заголовка: Playfair Display
• Размер текста заголовка: 3rem (рабочий стол), 2rem (планшет и телефон)
• Высота строки заголовка: 1,4 мкм

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

Также стилизуйте метатекст.

• Мета-шрифт: Playfair Display
• Размер метатекста: 1,4 бэр

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

Мы используем следующие настройки для настроек текста комментария:

• Шрифт комментария: Lato
• Размер текста комментария: 1.1rem
• Расстояние между буквами комментария: 1px
• Высота строки комментария: 2em

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

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

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

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

3. Сохраните изменения шаблона и построителя тем.

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

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

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

Рабочий стол

Мобильный

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

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

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