Блок макета Divi по-прежнему остается полезным дополнением к теме Divi, позволяя добавлять любой макет Divi в запись блога в редакторе Gutenberg. Мы даже можем преобразовать блок макета Divi в многоразовый блок в Gutenberg, как и любой другой блок WordPress. Это открывает возможности для оптимизации некоторых полезных шаблонов макета Divi в рамках обычного рабочего процесса написания записей в Gutenberg.
В этом уроке мы покажем, как создать многоразовый блок макета Divi для записей блога Gutenberg. Для иллюстрации мы создадим разделитель разделов для нашего примера многоразового блока макета Divi для этой записи. Однако мы можем легко применить этот же метод для создания многоразового блока макета Divi практически для чего угодно, используя Divi Builder.
Давайте начнем.
Создание блока макета Divi для записи в блоге Gutenberg
Создать или редактировать запись в блоге
Для начала нам нужно создать запись в блоге или отредактировать существующую. В этом примере добавим в заголовок и текст записи содержимое-заполнитель, используя несколько блоков заголовков и абзацев. Затем добавим выбранное изображение и выберем «Без боковой панели» в настройках страницы Divi.
Добавить блок макета Divi онлайн
После того, как мы создадим большую часть публикации, нам останется лишь добавить новый блок макета Divi в любом нужном месте в области контента публикации.
Чтобы добавить его, наведите курсор мыши на область, куда вы хотите добавить адрес электронной почты для подписки. Затем нажмите на синий значок плюса, чтобы добавить новый блок. В списке контекстных блоков выберите блок «Макет Divi».
Создайте новый макет в блоке Divi.
После выбора блока макета Divi у нас появится возможность «Создать новый макет» или «Загрузить из библиотеки». Поскольку в нашем примере нам нужно создать новый разделитель, выберите вариант «Создать новый макет».
Создание макета с помощью блочного редактора макетов Divi.
После выбора кнопки «Создать новый макет» мы можем разработать макет Divi в редакторе блоков макета.
В этом примере мы создадим пользовательский разделитель, используя разделители разделов Divi и градиентный фон. Это явно элемент дизайна, который можно превратить в многоразовый блок макета для удобного добавления разделителей разделов в публикацию Gutenberg.
Чтобы создать дизайн разделителя разделов, откройте настройки раздела и обновите следующее:
- Цвет левого градиента: # ddd6f3
- Цвет градиента фона справа: # faaca8
- Направление градиента: 90 градусов
- Начальная позиция: 30%
- Стиль верхнего разделителя: см. скриншот
- Цвет верхнего разделителя: #ffffff
- Высота верхнего делителя: 50 пикселей
- Стиль нижней перегородки: см. скриншот
- Цвет нижнего разделителя: #ffffff
- Высота нижнего разделителя: 50 пикселей
- Наклон нижнего делителя: горизонтальный
- Высота: 100px
- Обивка: 0px высокий, 0px низкий
После завершения разработки дизайна обязательно сохраните блок макета Divi.
Теперь разделитель разделов Divi Layout Block будет отображаться в редакторе записей WordPress.
Учтите, что расстояние сверху и снизу блока макета Divi может казаться больше в административной панели, чем на лицевой.
Теперь мы готовы преобразовать этот блок макета Divi в многоразовый блок макета, чтобы упростить добавление этого же разделителя разделов в будущих статьях.
Но прежде чем это сделать, полезно будет узнать, что такое многоразовый блок в WordPress.
Что такое многоразовый блок компоновки?
В стандартном блочном редакторе WordPress (Gutenberg) многоразовый блок макета очень похож на глобальный элемент в Divi. Блок можно использовать несколько раз, но его содержимое и внешний вид остаются неизменными для всех экземпляров. При редактировании многоразового блока макета изменения применяются ко всем экземплярам блока на сайте. После того, как блок макета становится многоразовым в WordPress, он будет доступен в списке блоков при создании записи. Это очень удобно для добавления одного и того же блока макета несколько раз в разные записи блога.
Преобразуйте блок макета Divi в блок макета многократного использования
Чтобы сделать наш блок макета Divi многоразовым, наведите курсор на блок макета и откройте меню настроек, щелкнув значок с тремя точками. Затем в списке выберите опцию «Добавить в многоразовые блоки».
Затем дайте имя многократно используемому блоку и нажмите кнопку «Сохранить», чтобы сохранить блок как повторно используемый блок.
Теперь, когда мы добавляем новый блок в запись блога, мы можем найти наш новый многоразовый блок макета в списке (под переключателем категории многоразовых блоков). Просто щелкните по многоразовому блоку макета, и он будет добавлен в запись.
Теперь, если мы посмотрим на пост вживую, мы увидим два экземпляра одного и того же точного разделителя разделов.
После того как мы несколько раз использовали многоразовый блок в публикации или на сайте, мы можем отредактировать один из экземпляров этого блока, и эти изменения будут применены ко всем экземплярам блока на всем сайте.
Чтобы изменить повторно используемый блок макета, наведите курсор на блок и нажмите кнопку «Изменить» в правом верхнем углу блока.
Далее выберите (щелкните) по нужному макету в многоразовом блоке и нажмите значок редактирования в появившемся верхнем меню. В качестве альтернативы вы можете щелкнуть ссылку «Редактировать макет» на вкладке «Блок» в правой боковой панели.
Затем измените макет по желанию. В этом примере мы можем изменить цвета, используемые для градиентного фона.
После сохранения макета не забудьте нажать кнопку «Сохранить» в правом верхнем углу блока многоразового макета. Затем обновите сообщение и просмотрите изменения на действующем сайте.
Вы заметите, что изменения дизайна обновляются для всех экземпляров макета многократного использования.
Совет: используйте многоразовый блок макета в качестве шаблона.
Иногда нам нужно использовать модифицированную версию многоразового блока макета в нашей публикации. Это позволяет добавить многоразовый блок макета в публикацию в качестве исходного шаблона, чтобы мы могли настроить блок макета для конкретного случая, не затрагивая многоразовый блок, используемый на всем сайте.
Чтобы использовать многоразовый блок макета в качестве шаблона, сначала добавьте этот многоразовый блок в запись.
Далее откройте меню блокировки и выберите опцию «преобразовать в обычную блокировку».
Теперь мы можем изменять компоновку конкретного элемента дизайна для этого экземпляра, не затрагивая другие многократно используемые блоки.
Заключительные мысли
Создание многоразовых блоков макета Divi может быть полезным, особенно для таких элементов дизайна Divi, как разделитель разделов. Это позволяет нам использовать разделитель несколько раз в наших публикациях. Это не только упрощает процесс написания статей, но и дает нам возможность гораздо проще обновлять дизайн блока на всем сайте. В этой статье мы показали, как добавить разделитель разделов в качестве многоразового блока, но этот же метод можно использовать для создания бесконечно многоразовых блоков макета Divi по множеству других причин.