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

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

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

Если вы еще не создали веб-сайт или блог на WordPress, мы приглашаем вас проконсультироваться Как установить блог WordPress за 7 шагов далее, Как найти, установить и активировать WordPress тему на своем блоге

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

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

Добавить контент в несколько столбцов wordpress e1565264744355

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

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

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

Затем вы должны выбрать блок Колонны «Находится на вкладке« Элементы макета ».

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

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

Столбцы в wordpress gutenbeg

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

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

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

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

Перейти к следующему столбцу WordPressДобавление мультимедиа и другого контента в ваши колонки

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

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

Добавить изображение в столбец

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

Чтобы загрузить - загрузить - ваши медиа, ознакомьтесь с нашей статьей на Как загрузить ваш массовый медиа на WordPress

Блок изображения столбца Гутенберга

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

Изображение добавить столбец Гутенберга

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

Wordpress блочный текстовый носитель

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

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

Начните с установки и активации плагина Легкие Столбцы Решетки

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

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

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

Идите дальше, открывая для себя Как создать полную ширину страницы на WordPress

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

Определите процент столбцов

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

Вариант ширины столбца

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

Содержимое столбца divi

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

Узнайте в этом уроке Как установить и настроить плагин WP Super Cache улучшить производительность вашего блога.

В классическом редакторе wordpress добавлен столбец

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

Добавьте еще один столбец в классическом редакторе wordpress

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

Колонка добавлена ​​демо WordPress

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

1. TheGem

Здесь очень много Темы WordPress который может претендовать на макет OnePage, но ни один из них не может предложить столько вариантов и функций, сколько есть в шаблоне TheGem WordPress. 

Многоцелевые темы WordPress thegem создают веб-сайт

Все элементы дизайна, которые вы ассоциируете с хорошим веб-сайтом OnePage, присутствуют в этом WordPress тема : полноэкранный слайдер (который можно создать с помощью плагина Revolution Slider, поставляемого вместе с WordPress тема), выбор из шести стилей заголовков и возможность создавать разделы во всю ширину с помощью плагина Visual Composer, входящего в комплект.

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

скачатьДемонстрация | веб-хостинг

2. Стокгольм

Стокгольм — это тема WordPress, разработанная, чтобы помочь вам создать веб-сайт строительной компании, гражданского строительства или любой компании, связанной с ремонтом зданий. Этот Шаблон WordPress предназначен для профессионалов, которые заботятся о качестве и деталях.

стокгольмская тема-WordPress-многоцелевой-пассив создать сайт-интернет

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

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

скачатьДемонстрация | веб-хостинг

3. Юпитер

Jupiter - еще одна очень популярная тема WordPress. В нем представлены демоверсии 25, которые охватывают 6 из наших категорий - агентства, креатив, образование, продукты питания, здравоохранение и электронная коммерция - и многое другое будет добавлено в будущих обновлениях. Большинство его макетов имеют минималистичный дизайн, с приятной типографикой.

Юпитер-тема-WordPress-многоцелевой-пассив создать сайт-интернет

Одним из главных преимуществ Jupiter является его Creative Header Customizer, который позволяет вам быстро и легко настроить дизайн заголовков вашего сайта. Visual Composer, ползунки 3 (Layer, Revolution и iCarousel), новые шорткоды 10, более значков 1800 и пользовательские типы записей 10 включены в комплект поставки.

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

скачатьДемонстрация | веб-хостинг

Другие рекомендуемые ресурсы

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

Заключение

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

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

...