Как добавить несколько столбцов в WordPress (2 метода)

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

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

Вы также можете создать этот макет с помощью классического редактора и плагина компоновщика страниц.

В этом уроке мы рассмотрим, как добавить несколько столбцов в WordPress.

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

Зачем использовать многоколоночный макет

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

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

Колонки — особенно универсальный формат. Если вы хотите экономно использовать свое пространство, это простой способ сегментировать текст.

Вы также можете использовать столбцы для объединения различных виджетов, как показано в теме BuddyBoss:

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

Как добавить несколько столбцов в WordPress (2 простых метода)

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

К счастью, теперь есть два простых способа добавить столбцы в WordPress — HTML не требуется.

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

Теперь давайте посмотрим на два метода.

Метод первый: используйте встроенную функциональность редактора блоков

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

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

Чтобы начать, введите «столбцы» в поле поиска редактора блоков, которое можно открыть, нажав кнопку +. Кроме того, вы можете просто щелкнуть по экрану и начать вводить «/ столбцы» , чтобы вызвать ту же опцию.

Это вызовет окно, в котором вы можете выбрать расположение столбцов:

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

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

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

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

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

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

Как только вы освоитесь с основами, с колонками будет больше возможностей для изучения.

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

Способ второй: используйте классический редактор и конструктор страниц от SiteOrigin.

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

Поскольку я большой поклонник плагина Page Builder от SiteOrigin, я буду использовать его для создания многоколоночного макета в классическом редакторе:

Page Builder — это надежный бесплатный вариант, который использует интуитивно понятный интерфейс перетаскивания и имеет более 1 миллиона активных установок.

После того, как вы установили и активировали плагин на своем сайте, перейдите на страницу его настроек, щелкнув меню « Настройки»> «Конструктор страниц» на левой боковой панели.

Здесь выберите вкладку « Общие » и установите флажок « Использовать классический редактор для новых сообщений »:

Обратите внимание, что для работы этой опции на вашем сайте также должен быть установлен и активирован плагин Classic Editor.

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

Здесь нажмите кнопку « Добавить строку» , которая создаст новую строку, в которую вы можете добавить свои столбцы:

Это откроет интерфейс, в котором вы можете настроить некоторые начальные настройки, включая количество, соотношение и направление ваших столбцов:

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

Подобно редактору блоков, плагин Page Builder от SiteOrigin позволяет вставлять различные виджеты в структуру столбцов.

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

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

Бэкенд вашего поста теперь должен выглядеть примерно так:

Завершите свои изменения.

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

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

Вывод

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

В этом уроке мы рассмотрели два пошаговых метода добавления нескольких столбцов в WordPress:

1. Использование встроенного блока Columns редактора блоков
2. Установка плагина, такого как Page Builder, для использования его с классическим редактором.

Какой ваш любимый способ добавления столбцов в WordPress? Дайте нам знать в комментариях ниже!