Categories: Плагины

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

^

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

^

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

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

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

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

^

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

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

^

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

^

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

^

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

^

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

^

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

^

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

 

writer

Recent Posts

Плагин Delete Me для WordPress помогает владельцам веб-сайтов предоставить право на забвение GDPR

Поскольку до крайнего срока соблюдения GDPR ЕС осталось всего 178 дней , многие владельцы сайтов…

2 года ago

Команда Gutenberg наращивает юзабилити-тестирование в WordCamp US

Команда Gutenberg создаст станцию ​​тестирования удобства использования в WordCamp US, где посетители смогут принять участие…

2 года ago

Плагин распространителя теперь в бета-версии: новое решение для синдикации контента WordPress от 10up

Сегодня компания 10up опубликовала предварительную версию своего плагина Distributor , нового решения для синдикации контента…

2 года ago

Gutenberg 1.8 добавляет большую расширяемость для разработчиков плагинов

На этой неделе был выпущен Gutenberg 1.8 с несколькими заметными улучшениями, которые предоставят разработчикам плагинов…

2 года ago

Gutenberg 15.5 представляет экспериментальную поддержку разметки сетки

На этой неделе был выпущен Gutenberg 15.5 с новыми функциями и улучшениями возможностей полнофункционального редактирования…

2 года ago

DesktopServer 3.8.4 включает подарок сообществу

DesktopServer выпустил версию 3.8.4 своего программного обеспечения для локальной разработки. Эта версия включает в себя…

2 года ago