Как добавить мультиколоночный контент в посты WordPress

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

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

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

Сегодня мы покажем вам, как легко добавлять контент из нескольких колонок в ваши сообщения WordPress без написания HTML-кода.

Добавление содержимого в несколько столбцов в WordPress — простой способ

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

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

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

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

Как вы можете видеть на скриншоте выше, блок «Колонки», кажется пустой областью.

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

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

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

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

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

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

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

В этом примере мы используем три столбца, последний столбец содержит изображение.

Если вы хотите добавить только изображение и текст рядом с ним, вы можете использовать блок «Медиа и текст» вместо столбцов.

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

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

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

Сначала установите и активируйте плагин Lightweight Grid Columns. После активации вы можете создаем новый пост или открываем старый для редактирования.

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

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

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

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

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

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

Плагин сгенерировал необходимый шорткод с вашим контентом и добавил его в редактор сообщений.

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

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

Далее сохраняем свой пост и идем смотреть что вы наваяли. Вот как это выглядело на нашем тестовом сайте.

Ну вот и все, как видите ничего сложного здесь нет. А у нас на этом все. Всем пока!

С уважением Вячеслав и Валерия!