Все для начинающих интернет-предпринимателей

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

gutenberg

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

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

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

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

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

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

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

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

wordpress-1

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

wordpress-2

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

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

wordpress-3

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

wordpress-4

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

wordpress-5

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

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

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

wordpress-6

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

wordpress-7

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

wordpress-8

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

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

wordpress-9

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

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

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

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

wordpress-10

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

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

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

wordpress-11

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

wordpress-12

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

wordpress-13

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

wordpress-14

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

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

wordpress-15

wordpress-16

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

wordpress-17

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

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

Понравился материал? Поделитесь с друзьями!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *