Как добавить многоколоночный контент в WordPress (HTML не требуется)

Вы хотите добавить многоколоночный контент в свои посты WordPress? Колонки можно использовать для создания привлекательных макетов для ваших постов и...

Вы хотите добавить многоколоночный контент в свои посты WordPress? Колонки можно использовать для создания привлекательных макетов для ваших постов и страниц.

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

Одноколоночные макеты чаще используются в Интернете. Однако многоколоночные сетки по-прежнему полезны для выделения контента и облегчения его сканирования и чтения.

В этой статье мы покажем вам, как легко добавить многоколоночный контент в ваши посты WordPress без написания HTML-кода.

Если вы предпочитаете письменные инструкции, просто продолжайте читать.

Добавление многоколоночного контента в WordPress — простой способ

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

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

Далее вам нужно выбрать блок ‘Columns’, расположенный на вкладке ‘Layout Elements’.

Добавьте блок колонок в свой пост WordPress

Теперь вы увидите, как курсор мыши перескакивает на левую колонку, а в правой колонке появляется текстовое поле.

Блок колонок WordPress в WordPress добавлен в пост

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

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

Блок колонок WordPress - 2 колонки

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

Добавьте дополнительные колонки в ваши колонки

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

Добавление текста в колонки WordPress

Добавление медиа и другого контента в ваши колонки

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

Блок «Колонки» позволяет добавлять блоки внутри каждой колонки. Просто подведите курсор к колонке, и вы заметите внутри нее значок «Добавить новый блок». Вы также можете добавить блок, набрав /, а затем название блока.

Добавление нового блока в колонках WordPress

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

Блок изображений, добавленный в WordPress

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

3 колонки в посте WordPress - предварительный просмотр

Если вы хотите добавить только изображение и немного текста рядом с ним, то вы также можете использовать блок ‘Media and Text’ вместо колонок. Этот конкретный блок создан специально для показа мультимедиа, таких как изображения и видео, рядом с текстом.

Добавление медиа и текстового блока в WordPress

Добавление нескольких колонок в старом классическом редакторе WordPress

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

Сначала установите и активируйте плагин Lightweight Grid Columns. Для получения подробных инструкций, следуйте нашему пошаговому руководству о том, как установить плагин в WordPress.

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

Добавить иконку колонок Легкий плагин Grid Columns

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

Например, если вы установите процент сетки рабочего стола 50%, ваша колонка будет занимать половину строки.

Ширина сетки в процентах - легкие колонки сетки

Есть много вариантов, чтобы установить ширину колонки, от 5% до 100% в интервале 5. Вы можете выбрать один из вариантов, нажав на выпадающий список.

Параметры ширины колонок - Проценты сетки

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

Добавление содержимого в колонку - легкий плагин Grid Columns Plugin

Теперь плагин сгенерирует необходимый шорткод с вашим контентом и добавит его в редактор поста.

Добавление шорткода и контента в колонку WordPress

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

Шорткод и содержимое для 2 колонок в WordPress

После этого вы можете сохранить свой пост и просмотреть его. Вот как это выглядело на нашем тестовом сайте, использующем тему Twenty Seventeen.

Две колонки WordPress в теме Twenty Seventeen

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

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий