Как сделать колонки в WordPress без плагина

Организация контента в столбцы очень проста благодаря блоку WordPress Columns. Этот блок относится к основным блокам, которые можно использовать в каждой теме WP. Блок столбцов может иметь до 6 столбцов. Таким образом, вы можете иметь 6 различных материалов рядом друг с другом.

Сегодня мы покажем вам, как сделать колонки в WordPress без плагина — с помощью блока Columns. Мы также предлагаем вам краткое изложение новейшие функции из версии WP 5.3 обновлять.

В этом уроке вы найдете информацию о:

• Каково назначение столбцов
• Как столбцы работали в старом редакторе
• Как сделать колонки в WordPress без плагина (в блочном редакторе)
• Настройки блока «Основные столбцы»
• Как работать с блоком столбцов WordPress
• Как редактировать вложенные блоки
• Преимущества колонного блока

Каково назначение столбцов

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

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

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

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

Как столбцы работали в старом редакторе

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

У вас было несколько вариантов создания столбцов на веб-сайте WordPress:

1. Вручную вставьте HTML-код в текстовый редактор

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

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

2. Разрешение таблиц в редакторе WordPress

Поскольку WordPress использовал редактор TinyMCE, можно было разрешить функциям редактировать таблицы. Если вам интересно узнать больше, вы можете найти все подробности в этом форуме. Если вы сделаете то же самое для наших тем AIT, таблицы будут работать правильно.

3. Использование элемента Columns в темах AIT

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

4. Загрузите сторонний плагин для управления таблицами.

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

Как сделать колонки в WordPress без плагина (в блочном редакторе)

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

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

Давайте посмотрим, как добавить блок Columns и как создать столбцы в WordPress без плагина:

• Первый вариант — нажать «+» на верхней панели и выбрать блок столбцов из доступных блоков.
• Второй вариант — нажать «+» в любом месте редактора.

Предопределенные макеты блока столбцов WordPress (НОВОЕ из WP 5.3)

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

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

 

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

Базовые настройки блока столбцов

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

Самая важная настройка блока «Столбцы» — это количество столбцов на боковой панели инспектора с правой стороны. По умолчанию есть 2 столбца, но вы можете увеличить это число до 6. Вы можете изменить это с помощью мыши или ввести число. Как это выглядит вы увидите сразу после увеличения или уменьшения столбцов. Блок меняется динамически в зависимости от ползунка.

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

Как и в других блоках в редакторе WordPress, вы можете вставить пользовательский класс CSS также в блок столбцов.

Блочное приложение для более плавной работы с блоками

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

Как работать с блоком столбцов WordPress

Красота блока Columns заключается в том, что каждый столбец может вкладываться в другие блоки. Это может быть абзац, блок изображения или блок кнопок. Максимальное количество столбцов — 6, поэтому вы можете создавать многоколоночный контент по своему усмотрению. Как упоминалось ранее, для представления продуктов вы можете добавить изображение продукта, название, цену и кнопку рядом.

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

Редактирование вложенных блоков

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

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

Выпуск редактора блоков WordPress и возможность использования колонок на страницах и в постах значительно упростили работу пользователей с контентом. Благодаря блоку WordPress Columns больше не нужно использовать сторонние решения или писать HTML-код. Добавление или удаление столбцов возможно с помощью нескольких кликов. Все очень интуитивно понятно и быстро даже для менее технических пользователей.

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

Мы усердно работали над новой темой WordPress Citadela, специально разработанной для редактора блоков WordPress. Узнайте больше о теме Citadela и доступных пакетах макетов.