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

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

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

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

Создание блока макета Divi для сообщения в блоге Гутенберга

Создать или отредактировать сообщение в блоге

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

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

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

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

Создайте новый макет в блоке макета Divi

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

Создание макета с помощью редактора блоков макета Divi

После того, как мы нажмем кнопку «Создать новый макет», мы сможем разработать макет Divi в редакторе блоков макета.

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

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

• Цвет градиентного фона слева: # ddd6f3
• Цвет градиентного фона справа: # faaca8
• Направление градиента: 90 градусов
• Стартовая позиция: 30%

• Стиль верхнего делителя: см. Снимок экрана
• Цвет верхнего разделителя: #ffffff
• Высота верхнего разделителя: 50 пикселей

• Стиль нижнего разделителя: см. Снимок экрана
• Цвет нижнего разделителя: #ffffff
• Высота нижнего разделителя: 50 пикселей
• Переворот нижнего разделителя: горизонтальный

• Высота: 100 пикселей
• Padding: 0px сверху, 0px снизу

Как только дизайн будет завершен, обязательно сохраните блок макета Divi.

Теперь разделитель раздела Divi Layout Block появится внутри редактора сообщений WordPress.

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

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

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

Что такое многоразовый блок макета

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

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

Чтобы сделать наш Divi Layout Block многоразовым блоком, наведите указатель мыши на блок макета и откройте меню настроек, щелкнув значок с тремя точками. Затем из списка выберите опцию «Добавить в повторно используемые блоки».

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

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

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

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

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

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

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

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

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

Совет: использование многоразового блока макета в качестве шаблона

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

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

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

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

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

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

Можете ли вы найти полезные способы включения многоразовых блоков Divi Layout Blocks в свои собственные сообщения в блоге?

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

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