Показ ваших последних сообщений в блоге в потрясающем мобильном дизайне с Divi

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

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

Давайте приступим к делу!

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

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

Начнем воссоздавать!

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

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

Создайте новую страницу или откройте существующую и добавьте к ней обычный раздел. Откройте настройки и затем добавьте градиентный фон.

• Цвет 1: # 2e1b8f
• Цвет 2: #ffffff
• Направление градиента: 90 градусов
• Стартовая позиция: 53,3%
• Конечная позиция: 53,3%

Интервал

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

• Верхнее поле: 100 пикселей
• Нижнее поле: 100 пикселей
• Левое заполнение: 26vw (рабочий стол), 13vw (планшет), 0vw (телефон)
• Правое заполнение: 22.8vw (рабочий стол), 11.4vw (планшет), 0vw (телефон)

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

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

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

Цвет фона столбца 2

Еще не добавляя никаких модулей, откройте настройки строки и добавьте цвет фона для второго столбца.

• Цвет фона столбца 2: # f7f7f7

Цвет фона столбца 3

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

• Цвет фона столбца 3: # f7f7f7

Размеры

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

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да

Отображать

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

display: flex;

Добавить модуль Blurb в столбец 1

Выбрать значок

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

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

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

• Цвет 1: # 5000ff
• Цвет 2: rgba (41,196,169,0)
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 28%
• Конечная позиция: 28%

Настройки значков

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

• Цвет значка: #ffffff
• Размещение изображения / значка: вверху
• Использовать шрифт значков: Да
• Размер шрифта значка: 22px

Интервал

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

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

Граница

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

• Ширина нижней границы: 1 пикс.
• Цвет нижней границы: #ffffff
• Стиль нижней границы: пунктирная

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

Добавить содержимое

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

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

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

• Шрифт текста: Didact Gothic
• Толщина шрифта текста: полужирный
• Цвет текста: #ffffff

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

Добавить содержимое

Переходим ко второй колонке! Здесь нам понадобится только текстовый модуль. Введите контент по вашему выбору.

Фоновый цвет

Переходим к настройкам фона и добавляем полностью белый цвет фона.

• Цвет фона: #ffffff

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

Мы также меняем внешний вид нашего контента, изменяя настройки текста на вкладке «Дизайн».

• Шрифт текста: Source Serif Pro
• Толщина шрифта текста: полужирный
• Цвет текста: # 000000
• Размер текста: 13 пикселей
• Ориентация текста: по центру

Размеры

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

• Ширина: 60%
• Выравнивание модуля: слева

Интервал

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

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

Коробка Тень

Наряду с тонкой тенью коробки.

• Сила размытия тени коробки: 80 пикселей
• Цвет тени: rgba (0,0,0,0.23)

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

Добавить содержимое

Переходим к следующему и последнему столбцу. Добавьте текстовый модуль с заголовком H3 вашего сообщения в блоге и ссылкой. Добавьте сведения о публикации в виде текста абзаца прямо под заголовком.

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

Перейдите на вкладку «Дизайн» текстового модуля и измените параметры текста.

• Шрифт текста: Source Serif Pro
• Цвет текста: # a8a8a8
• Размер текста: 12 пикселей

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

Продолжите, также изменив настройки текста H3.

• Шрифт заголовка 3: Didact Gothic
• Толщина шрифта заголовка 2: полужирный
• Размер текста заголовка 3: 17 пикселей

Интервал

Наконец, нам нужно добавить несколько значений пользовательского интервала. Вы заметите, что мы также добавляем отрицательное левое поле к модулю. Это последний шаг к созданию другой структуры столбцов на экранах меньшего размера. Таким образом, хотя структура столбцов технически осталась прежней, мы объединили фон столбцов, ширину модуля и отрицательное левое поле, чтобы получить другой результат.

• Верхнее поле: 35 пикселей
• Левое поле: -80 пикселей (рабочий стол), -50 пикселей (планшет и телефон)
• Отступ справа: 20 пикселей

Клонировать строку дважды

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

Изменить значки

Измените значок каждого дубликата.

Изменить контент и ссылки

Вместе с задействованным контентом и ссылками, и готово!

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

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

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

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