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

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

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

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

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

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

Установите плагин календаря событий

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

Чтобы добавить настраиваемые типы сообщений на наш веб-сайт, мы будем использовать плагин Календарь событий. Это бесплатный плагин, который вы можете найти, перейдя в панель управления WordPress> Плагины> Добавить> Поиск плагина календаря событий .

Активировать плагин

После того, как вы установили плагин, убедитесь, что вы активировали его сразу, чтобы начать использовать.

Изменить настройки настройщика тем

Изменить типографику

Теперь, прежде чем мы создадим мероприятие, давайте начнем с правильного понимания основ нашего веб-сайта. Откройте настройщик тем, перейдя в панель управления WordPress> Внешний вид> Настроить . Перейдите к типографике вашего веб-сайта, выбрав Общие настройки> Типографика далее . Как только вы окажетесь там, примените следующие настройки:

• Размер основного текста: 16
• Высота линии тела: 1,9
• Шрифт заголовка: Roboto

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

Плагин календаря событий также имеет некоторые собственные настройки в настройщике тем. Вернитесь в главное меню Настройщика тем> Календарь событий> Общая тема> и используйте следующие цвета:

• Акцентный цвет: # 06c8ff
• Рекомендуемый цвет выделения: # 06c8ff

Вернитесь к настройкам Календарь событий> Общая тема и используйте тот же цвет «# 06c8ff» для всех опций, которые вы там найдете.

Добавить новое событие

Добавить новое событие

Теперь мы готовы создать новое мероприятие. Для этого перейдите в панель управления WordPress> События> Добавить новый . После того, как вы добавили новое событие, не забудьте присвоить ему название.

Добавить сведения о мероприятии

Продолжите, введя информацию о вашем мероприятии. Это включает:

• Время и дата
• Место нахождения
• Организаторы
• Веб-сайт мероприятия
• Стоимость мероприятия

Добавить избранное изображение

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

Изменить настройки страницы Divi

В правом углу вашего мероприятия вы увидите настройки страницы Divi. Там удалите боковую панель, выбрав «Без боковой панели» для макета страницы.

Опубликовать мероприятие

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

Это дизайн страницы по умолчанию без включения Visual Builder:

Откройте целевую страницу Meetup и сохраните элементы дизайна

Найдите и сохраните строку в библиотеке Divi

Эффективная работа важнее, чем тяжелая работа. Вот почему мы собираемся сэкономить время и силы, повторно используя элементы пакета макетов встречи. Начните с открытия целевой страницы с помощью Divi Visual Builder. Затем найдите следующую строку на своей странице и сохраните ее в своей библиотеке Divi:

Найдите и сохраните раздел в библиотеке Divi

Нам также понадобится следующий раздел, так что продолжайте и сохраните его:

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

Добавление пользовательских строк кода CSS для соответствия пакету макетов Meetup

Мы можем использовать Visual Builder для страниц событий, но, к сожалению, мы не можем использовать его везде. Чтобы убедиться, что все соответствует пакету макетов Meetup, мы заранее добавим несколько строк кода CSS:

#tribe-events {
margin: 5%;
}
.tribe-events-single-event-title {
font-weight: 300;
font-size: 60px !important;
}
#tribe-events-content a {
font-family: Roboto !important;
font-weight: 300 !important;
}
.tribe-events-event-image{
display: none;
}

Перейти на Visual Builder

Теперь мы можем переключиться на использование Visual Builder на нашем мероприятии!

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

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

Вы увидите, что на странице уже есть раздел. Это место на странице, которое мы можем изменить. Начните с открытия раздела настроек и добавьте фоновое изображение bg-4.png . Вы можете найти это изображение в своей медиа-библиотеке, если вы уже загрузили пакет макетов Meetup на свой веб-сайт. Наряду с фоновым изображением используйте следующие настройки:

• Размер фонового изображения: фактический размер
• Расположение фонового изображения: внизу справа

Интервал

Затем откройте настройки интервала вашего раздела и добавьте «100 пикселей» к верхнему полю.

Граница

Мы также создаем такой эффект временной шкалы для нашего шаблона. Перейдите в настройки границы и добавьте следующую левую границу:

• Ширина левой границы: 7 пикселей
• Цвет левой границы: # 8301e9

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

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

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

Размеры

Откройте настройки своей строки и включите опцию «Сделать эту строку полной» в настройках размера. Это то, что мы собираемся сделать для каждой строки в этом макете.

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

Размеры

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

• ПК: 47%
• Планшет и телефон: 100%

Импортировать сохраненную строку

Прямо под строкой, которую вы добавили, импортируйте строку, которую вы сохранили в свою библиотеку Divi.

Размеры

Нам нужно будет изменить некоторые вещи в этой строке, начиная с настроек размера. Включите параметр «Сделать эту строку полной шириной».

Удалить основной текстовый модуль и кнопочный модуль

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

Клонировать текстовый модуль и удалить размер

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

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

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

Добавить границу

Мы также добавляем левую границу в этот раздел:

• Ширина левой границы: 7 пикселей
• Цвет левой границы: # 06c8ff

Изменить размер каждой строки

В только что импортированном разделе есть несколько строк. Включите параметр «Сделать эту строку полной шириной» для каждой из этих строк.

Изменить выравнивание кнопок

Наконец, также измените выравнивание кнопок влево.

Сохранить шаблон в библиотеке Divi

Добавить в библиотеку

Шаблон макета готов! Теперь вы можете сохранить его в своей библиотеке Divi и повторно использовать для других событий.

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

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

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

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