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

2 min


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

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

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

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

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

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

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

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

Далее вам нужно выбрать блок «Столбцы», расположенный на вкладке «Элементы макета».

Добавить блок столбцов в вашем посте WordPress

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

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

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

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

Столбцы Блок WordPress - 2 Колонки

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

Добавьте больше столбцов в ваши столбцы

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

Добавить текст в ваши столбцы WordPress

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

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

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

Добавить новый блок в столбцы WordPress

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

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

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

3 столбца в WordPress Post - Предварительный просмотр

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

Добавить медиа и текстовый блок в WordPress

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

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

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

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

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

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

Процент ширины сетки - облегченные столбцы сетки

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

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

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

Добавление контента в вашу колонку - плагин облегченной сетки

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

Шорткод и контент добавлены в столбец WordPress

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

Шорткод и контент для 2 столбцов в WordPress

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

Две колонки WordPress в двадцати семнадцатой теме

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

Если вам понравилась эта статья, подпишитесь, пожалуйста, на наш канал YouTube для видеоуроков WordPress. Вы также можете найти нас на щебет и фейсбук.


0 Comments

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