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

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

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

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

Sneak Peek

Скачайте БЕСПЛАТНО многоразовые блоки макетов изображений

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

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

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

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

СКАЧАТЬ

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

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

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

Перейдите к редактированию сообщения с помощью редактора по умолчанию (Gutenberg). Откройте меню «Дополнительные инструменты и параметры» в правом верхнем углу страницы и выберите «Управление всеми повторно используемыми блоками».

Затем нажмите кнопку «Импорт из JSON». Выберите один из файлов JSON в папке загрузки и нажмите кнопку импорта.

Повторите этот процесс, чтобы импортировать все три файла JSON.

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

Вот и все!

Давайте перейдем к руководству, не так ли?

Что нам нужно для начала

Для начала нам потребуется сделать следующее:

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

После этого мы готовы приступить к работе.

Часть 1: Создание полноразмерного изображения с многоразовым блоком макета Divi с подписью

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

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

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

Разработка макета изображения Divi

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

Модуль изображения

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

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

• Открыть в лайтбоксе: ДА

Это позволит нашему изображению отображаться в лайтбоксе при нажатии.

• Наложение изображений: ВКЛ.
• Цвет значка наложения: #ffffff
• Цвет наложения при наведении: rgba (120,47,130,0,57)

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

• Использовать нестандартную ширину желоба: ДА
• Ширина желоба: 1
• Ширина: 90%
• Максимальная ширина: 90%
• Набивка: 5% верх, 5% низ

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

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

• Цвет градиентного фона слева: # 782f82
• Цвет градиентного фона справа: # fe756b
• Направление градиента: 90 градусов

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

• Ширина: 110%
• Максимальная ширина: 100%
• Маржа: -5% осталось
• Padding: 0px сверху, 0px снизу

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

• Box Shadow: см. Снимок экрана
• Положение тени коробки по горизонтали: 5vw
• Позиция тени коробки по вертикали: 5vw
• Цвет тени: rgba (255,255,255,0.7)

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

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

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

• Шрифт текста: Монтсеррат
• Толщина шрифта текста: полужирный
• Цвет текста текста: #ffffff
• Ширина: 80%
• Выравнивание модуля: правое
• Маржа: максимум 5%

Когда закончите, обязательно сохраните макет с помощью Ctrl + S или откройте панель настроек внизу и нажмите «Сохранить и выйти».

Добавление макета изображения в блоки многократного использования

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

Дайте многоразовому блоку имя и нажмите «Сохранить».

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

Не забудьте обновить / сохранить сообщение, чтобы сохранить изменения.

Часть 2: Создание левого изображения с многоразовым блоком макета Divi с подписью

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

Преобразование многоразового блока в обычный блок

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

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

Обновить макет

Когда блок станет обычным, нажмите кнопку «Изменить макет» над блоком.

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

• Ширина: авто
• Максимальная ширина: 500 пикселей

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

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

• Добавление класса CSS: alignleft

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

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

Дайте многоразовому блоку имя (например, «Левое изображение с подписью») и нажмите «Сохранить».

Теперь блок макета Left Image with Caption был добавлен в список повторно используемых блоков для облегчения доступа.

Часть 3: Создание «правильного изображения с подписью» многоразового блока макета Divi

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

Преобразование многоразового блока в обычный блок

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

Обновить макет

Как только блок станет обычным блоком макета, щелкните, чтобы отредактировать макет.

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

Сохраните и выйдите из редактора макета.

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

• Дополнительный класс CSS: alignright

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

И дайте многоразовому блоку имя (например, «Правое изображение с подписью») и сохраните его.

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

Часть 4: Использование многоразовых блоков макета изображения в сообщении.

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

Вот как это сделать.

Шаг 1. Добавьте многоразовый блок макета

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

Шаг 2: преобразовать его в обычный блок

Откройте меню «Дополнительные параметры» и выберите «Преобразовать в обычный блок».

Шаг 3. Отредактируйте блок макета, добавив новое изображение и подпись

Как только блок станет обычным, нажмите, чтобы отредактировать макет.

Обновите макет изображением по вашему выбору.

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

Шаг 4: Сохраните блок макета

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

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

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

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

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

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

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

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