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

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

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

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

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

Рабочий стол

Мобильный

Загрузите шаблон сообщения БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

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

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

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

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

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

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

Фоновый цвет

Внутри редактора шаблонов вы заметите раздел. Откройте настройки раздела и добавьте цвет фона.

• Цвет фона: # 270fff

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

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

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

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

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

Размеры

Откройте настройки строки и измените максимальную ширину в настройках размера.

• Максимальная ширина: 1380 пикселей

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

Элементы

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

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

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

Перейдите на вкладку дизайна модуля и измените цвет текста в общих настройках текста.

• Цвет текста: светлый

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

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

• Шрифт заголовка: Work Sans
• Размер текста заголовка: 7rem (рабочий стол), 4rem (планшет), 2rem (телефон)
• Интервал между заголовками: -2 пикселя

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

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

• Мета-шрифт: Work Sans
• Размер метатекста: 1 бэр

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

Интервал

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

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

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

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

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

Размеры

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

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

Интервал

Удалите также все верхние отступы по умолчанию.

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

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

Интервал

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

• Верхний отступ: 200 пикселей (рабочий стол), 50 пикселей (планшет), 20 пикселей (телефон)
• Нижний отступ: 200 пикселей (рабочий стол), 50 пикселей (планшет), 20 пикселей (телефон)
• Отступ слева: 100 пикселей (рабочий стол), 50 пикселей (планшет), 20 пикселей (телефон)
• Отступ справа: 100 пикселей (рабочий стол), 50 пикселей (планшет), 20 пикселей (телефон)

Коробка Тень

Также добавьте тень блока к первому столбцу.

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

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

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

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

• Шрифт текста: Work Sans
• Размер текста: 1 бэр (рабочий стол), 0,9 бэр (планшет и телефон)
• Высота текстовой строки: 2.3em

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

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

• Шрифт заголовка: Work Sans
• Размер текста заголовка 2: 1,6 бэр (H2), 1,5 бэр (H3), 1,4 бэр (H4), 1,3 бэр (H5), 1,2 бэр (H6)
• Высота строки заголовка: 1,3 м

CSS ID

Завершите настройки модуля, добавив CSS ID.

• Идентификатор CSS: содержание сообщения-блога

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

Вставить заголовок CSS-код

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

<style>
#blog-post-content h2, h3, h4, h5, h6 {
margin-top: 50px;
margin-bottom: 50px;
}

#blog-post-content p {
margin-top: 20px;
margin-bottom: 20px;
}
</style>

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

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

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

• Имя: Автор сообщения
• Должность: Автор
• Тело: Автор биографии

Динамическое содержимое изображения

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

• Изображение: Изображение профиля автора

Цвет фона при наведении

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

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

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

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

• Заголовок уровня заголовка: H3
• Шрифт заголовка: Work Sans
• Размер текста заголовка: 1,1 бэр

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

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

• Шрифт: Work Sans
• Размер основного текста: 0,9 бэр
• Высота линии тела: 2em

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

Затем измените настройки текста шрифта позиции.

• Шрифт позиции: Work Sans
• Размер текста позиции: 0,9 бэр

Размер по умолчанию

Измените высоту в настройках размера.

• Высота: 160 пикселей (рабочий стол), авто (планшет и телефон)

Размер при наведении

И верните высоту автоматически при зависании.

• Высота: авто

Интервал

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

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

Граница по умолчанию

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

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

Граница при наведении

Измените ширину границы при наведении.

• Ширина левой границы: 4 пикселя

Тень бокса по умолчанию

Затем добавьте тень блока.

• Сила размытия тени коробки: 60 пикселей
• Цвет тени: rgba (0,0,0,0) (рабочий стол), rgba (0,0,0,0.11) (планшет и телефон)

Hover Box Shadow

Измените цвет тени при наведении.

• Цвет тени: rgba (0,0,0,0.11)

Фильтры по умолчанию

Двигаясь дальше, мы изменим непрозрачность.

• Непрозрачность: 41% (рабочий стол), 100% (планшет и телефон)

Фильтры при наведении

Верните непрозрачность до 100% при наведении курсора.

• Непрозрачность: 100%

Основной элемент CSS

Чтобы добавить эффект липкости, который вы могли заметить при предварительном просмотре этого сообщения, мы добавим несколько строк пользовательского CSS в основной элемент модуля.

position: sticky;
position: -webkit-sticky;
top: 50px !important;

CSS изображения участника

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

text-align: left;

Видимость по умолчанию

Чтобы скрыть содержимое модуля на рабочем столе, мы изменим переполнение на вкладке «Дополнительно».

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

Видимость при наведении

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

• Горизонтальное переполнение: видимое
• Вертикальное переполнение: видимое

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

Добавьте еще один раздел в свой дизайн.

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

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

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

Размеры

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

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

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

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

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

• Цвет фона полей: #ffffff
• Отступ сверху полей: 20 пикселей
• Отступ снизу полей: 20 пикселей
• Шрифт полей: Work Sans
• Размер текста полей: 1 бэр

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

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

• Количество комментариев Уровень заголовка: H2
• Шрифт счетчика комментариев: Work Sans
• Размер текста количества комментариев: 1.5rem

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

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

• Уровень заголовка заголовка формы: H3
• Шрифт заголовка формы: Work Sans
• Размер текста заголовка формы: 1,2 бэр

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

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

• Мета-шрифт: Work Sans
• Размер метатекста: 1 бэр

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

Мы также меняем настройки текста комментариев.

• Шрифт комментария: Work Sans
• Размер текста комментария: 1 бэр
• Высота строки комментария: 2.3em

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

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

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

• Шрифт кнопки: Work Sans

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

Заполнив шаблон, убедитесь, что вы сохранили все изменения, выйдите из построителя тем и просмотрите результат в своих сообщениях!

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

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

Рабочий стол

Мобильный

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

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

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