Как использовать глобальные предустановки с блоками макета Divi для оптимизации дизайна сообщений в блогах

Создавать контент для вашего блога достаточно сложно, не беспокоясь о дизайне. Вот почему для вашего сайта важно, чтобы элементы дизайна были легкодоступными (или предварительно разработанными), чтобы вы могли больше сосредоточиться на создании потрясающего контента. Конечно, традиционная дочерняя тема WordPress может справиться с этим, но в большинстве случаев вы застряли в дизайне, который нелегко изменить.

С Divi мы получаем больший контроль над дизайном сообщения в блоге. Глобальные предустановки Divi позволяют вам создавать дизайн всего сайта (например, дочернюю тему) для элементов по всему сайту с дополнительным удобством, поскольку вы можете настроить дизайн, как вы хотите, с помощью нескольких щелчков мышью. Кроме того, если вы привыкли создавать контент в редакторе блоков WordPress по умолчанию, вы можете использовать всю мощь блока макета Divi, чтобы на лету втягивать эти глобальные предустановленные элементы в контент публикации. Это позволит вам добавлять новые элементы дизайна в сообщение блога, которое соответствует шаблону и остальной части сайта.

В этом уроке мы покажем вам, как использовать глобальные предустановки с блоками Divi Layout, чтобы упростить процесс создания сообщения в блоге. Для этого мы покажем вам, как использовать глобальные предустановки для быстрого и эффективного создания нового контента в блоге. Это поможет создать впечатления от ведения блога, не ставящие под угрозу общий бренд вашего сайта.

Давайте начнем!

Sneak Peek

Вот краткий обзор дизайна, который мы построим в этом уроке.

Краткий обзор глобальных предустановок

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

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

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

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

Глобальные предустановленные руководства по стилям (например, те, которые мы собираемся использовать в этом руководстве) могут быть созданы для быстрого старта дизайна элементов при разработке вашего веб-сайта. Эти руководства по стилю содержат набор модулей с различными предустановками, которые соответствуют дизайну вашего сайта. Наличие предустановок, доступных вначале, упростит процесс проектирования, избавив от утомительной работы по обновлению настроек дизайна для каждого нового модуля. У нас даже есть руководство по стилю для тех, кто хочет создать свой собственный.

Краткий обзор блоков макета Divi

Блок макета Divi позволяет пользователям добавлять любой макет Divi в сообщение блога в редакторе Gutenberg. Мы даже можем преобразовать блок макета Divi в блок многократного использования в Gutenberg, как и любой другой блок WordPress. Это открывает дверь для упрощения некоторых полезных макетов Divi Layout в обычном процессе написания поста в Гутенберге.

Как глобальные пресеты и блоки макета работают вместе

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

Использование глобальных предустановок с блоками макета Divi для оптимизации дизайна сообщений в блогах

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

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

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

После того, как вы загрузите zip-файл на свой компьютер, разархивируйте его и вернитесь в панель управления WordPress.

Чтобы импортировать файл JSON руководства по стилю в библиотеку Divi…

1. перейдите в Divi> Divi Library.
2. Нажмите кнопку «Импорт и экспорт».
3. Во всплывающем окне «Переносимость» выберите вкладку импорта.
4. Выберите файл JSON глобального руководства по стилю веб-агентства.
5. Убедитесь, что вы выбрали Импорт предустановок.
6. Затем нажмите кнопку импорта.

Теперь все эти глобальные пресеты доступны в Divi Builder.

Загрузка шаблона сообщения

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

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

Чтобы импортировать шаблон сообщения…

1. перейдите в Divi> Theme Builder.
2. Затем щелкните значок переносимости.
3. Под модальным окном переносимости выберите вкладку импорта.
4. Выберите файл JSON с шаблоном сообщения, который вы скачали.
5. Затем нажмите кнопку импорта.

Использование предустановок для обновления / разработки шаблона сообщения

Когда у вас есть настраиваемый шаблон сообщения, щелкните его, чтобы отредактировать настраиваемый шаблон тела. Там вы также можете увидеть дизайн шаблона сообщения и внести изменения, используя глобальные предустановки, доступные из импортированного руководства по стилю. Если вы создавали свой собственный шаблон сообщения с нуля, вы могли бы использовать глобальные предустановки, чтобы помочь согласовать дизайн шаблона сообщения с другими элементами на веб-сайте. Например, вы можете использовать предустановку «WALP - H1 - 1» в заголовке сообщения следующим образом:

Или вы можете использовать предустановку модуля аннотации «WALP - Blurb 2» в аннотации, которая содержит динамическую информацию об авторе.

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

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

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

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

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

Использование глобальных предустановок с блоками макета Divi

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

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

Прямо сейчас, если вы просмотрели сообщение в интерфейсе пользователя, содержимое сообщения будет отображаться в шаблоне сообщения, а содержимое (заголовки, основной текст и т. Д.) Наследует стиль из настроек модуля содержимого сообщения.

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

Чтобы добавить дополнительный контент, который должен соответствовать вашему шаблону сообщения и сайту, вы можете использовать блоки Divi Layout. Это позволит вам добавлять любой контент и стилизовать его с помощью Divi Builder. И, поскольку мы также можем использовать глобальные предустановки, мы можем еще больше оптимизировать дизайн контента нашего блога на лету.

Дизайн №1: Создание CTA для блога с помощью глобальных предустановок и блока макета Divi

В этом первом примере давайте создадим настраиваемый CTA для блога, который соответствует шаблону сообщения и дизайну сайта.

Для этого добавьте в контент поста блок макета Divi.

Затем нажмите «Создать новый макет».

Это откроет редактор блока макета, который, как обычно, является Divi Builder. Задайте разделу по умолчанию строку из одного столбца.

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

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

Копировать фон из руководства по стилю

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

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

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

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

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

Добавьте заголовок H3 для CTA, вставив в тело следующий HTML-код:

<h3>Learn How One Client Increased Revenue by 500%</h3>

Откройте раскрывающийся список "Глобальные подарки" и выберите предустановку для заголовка H3 (WALP - H3 - 1).

Обновить дизайн

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

Добавить кнопку с глобальной предустановкой

Под текстовым модулем добавьте новую кнопку.

Затем обновите текст кнопки и выберите один из глобальных предустановленных дизайнов кнопок. В этом примере давайте воспользуемся «WALP - Button 3».

Сохранить изменения

После этого нажмите «Сохранить и выйти».

Теперь вы можете увидеть элемент, отображаемый в редакторе блоков WordPress.

Дизайн №2: Создание цитаты для блога с помощью глобальных предустановок и блока макета Divi

Для этого следующего элемента дизайна мы добавим цитату в сообщение в блоге.

Добавить блок макета Divi

Для начала добавьте блок макета Divi туда, где вы хотите, чтобы цитата отображалась.

Затем нажмите «Создать новый макет».

Копирование и вставка фона из руководства по стилю

Скопируйте темно-синий фон из руководства по стилю.

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

Добавить ряд

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

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

Затем добавьте в столбец модуль отзывов. Затем выберите глобальную предустановку «WALP - Testimonial 2».

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

Обновить дизайн

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

• Цвет значка цитаты:
• Толщина основного шрифта: Light
• Стиль основного шрифта: курсив
• Выравнивание основного текста: по левому краю
• Цвет основного текста: #ffffff
• Шрифт автора: Ubuntu
• Размер текста автора: 16px

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

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

Чтобы создать новый, нажмите кнопку «Создать новый пресет из текущих стилей». Затем присвойте новому пресету имя («цитата из блога») и сохраните его. Теперь глобальная предустановка готова к использованию в будущем.

Сохраните макет, и вы увидите его в содержимом публикации.

Дизайн №1: Добавление пятен в сообщение в блоге с помощью глобальных предустановок и блока макета Divi

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

Добавить новый блок макета Divi

Добавьте еще один блок макета Divi и нажмите кнопку «Создать новый макет».

В редакторе макета добавьте в макет строку из двух столбцов.

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

В левом столбце добавьте модуль аннотации.

Добавьте в аннотацию новый значок. Затем откройте раскрывающийся список предустановок и выберите предустановку аннотации «WALP - Blurb 4».

Добавить второе объявление

Затем скопируйте рекламное объявление и вставьте его в столбец 2 и обновите изображение.

Сохраните макет, и вы увидите его в содержимом публикации.

Конечный результат

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

Многоразовые блоки с глобальными предустановками

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

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

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!