Пропустить

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

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

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

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

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

1. TheGem

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

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

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

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

2. Стокгольм

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

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

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

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

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

3. Юпитер

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

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [FREE]

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

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

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

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

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

Вывод

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

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

...

Эта статья содержит комментарии 18
  1. Привет, у меня есть этот плагин ... но это не работает, это происходит:

    Я создаю два столбца, один меньше для фотографии, другой больше для текста, тогда текст - это только строки 2, а не на всей высоте столбца, после сохранения текста JUMP под фотографией, а не остановись, узнай, что исчезает колонна ... ..
    Что я делаю? почему это происходит, есть ли еще один plg-in лучше и проще, чем здесь?
    Спасибо, я был бы благодарен за помощь!

    1. Привет, Ирина,

      Попробуйте активировать тему WordPress по умолчанию, если все работает нормально, значит, проблема связана с текущей темой WordPress.

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

  2. Все, что я могу сказать, это Гениали.
    она работает очень хорошо, и ч отвечает на все мои ожидания.
    благодаря nombreu (BCP)

      1. Я копирую текст и пытаюсь вставить CRTL + V без успеха. Контекстное меню правой кнопки мыши не предлагается вставлять.
        Я не нашел другого решения, кроме повторного ввода ...

        1. Извините за поздний ответ.
          Можете ли вы убедиться, что щелкнув правой кнопкой мыши на другом элементе страницы, появится контекстное меню? Если это так, то, вероятно, проблема JavaScript возникает на вашем хостинге.
          Если вы находитесь в Google Chrome, перейдите на страницу, где у вас возникли проблемы, затем нажмите «F12» (окно откроется или будет прикреплено к странице) и выберите вкладку «Консоль» , Сделайте снимок экрана на этой вкладке, и я скажу вам, есть ли проблема.

          1. Привет,
            Merci влить Votre réponse.
            Мой сайт размещен Free, возможно, что есть проблема с javascript.
            Можете ли вы рассказать мне, как передавать снимок экрана, который я сделал?
            сердечно

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

          3. Когда я установил версию Freeze для Free, я думаю, что проблема исходит оттуда.
            Я попытаюсь установить другую версию ...

      2. Я скопировал текст и попытался вставить его в столбец в плагине. Невозможно, ни с помощью сочетания клавиш CTRL + V, ни в контекстном меню правого щелчка, который не предлагает эту функцию.
        Есть ли какая-то альтернатива перепечатывать все?

  3. У меня есть только одно слово, чтобы сказать Awesome! Я установил его, и после двух трех исправлений мне удалось сделать столбцы, спасибо!

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

    1. Bonsoir,

      Пробовали ли вы использовать тему Wordpress по умолчанию, чтобы узнать, сохраняется ли проблема?

    2. Привет,

      Мы не можем помочь вам, если вы не даете подробную информацию о том, как вы делаете, чтобы иметь белый квадрат.

      Товары.

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

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
10 акции
доля8
чирикать1
Регистрация1