Создание колонок на сайте WordPress Супер плагин

Прибамбасы для сайта

Здравствуйте!

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

 

Примеры колонок из текста:

 

Пример №1

две колонки

 

Пример №2

три колонки

 

Пример №3

колонки

 

Пример №4

пример колонок

 

Сразу скажу что создавать можно будет не ограниченное число колонок, то есть всё зависит от ширины вашего сайта, сколько вмещается столько и добавляйте. А теперь я покажу вам как создаются колонки. Создавать на сайте колонки мы будем с помощью плагина – Shortcodes Ultimate, данный плагин очень интересный, он позволит вам создавать не только колонки, но и множество других функций и веб-элементов для вашего сайта, всем рекомендую данный плагин ! О данном плагине я уже рассказывал, можете почитать – Здесь.

Установить данный плагин вы сможете прямо из своей админ-панели wordpress, для этого перейдите по вкладке: ПлагиныДобавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте данный плагин.

 

шорткоды плагин

 

 

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

 

вставить шорткод

 

 

В открывшемся окне, в меню функций, для создания колонок у вас будет две вкладки – Колонки и Колонка.

 

колонка и колонки

 

 

Начнём с вкладкиКолонка, здесь вы сможете создавать одиночные колонки.

 

настройки колонка

 

Настройки:

Размер, здесь вам нужно выбрать размер колонки из 12 вариантов. Смотрите, к примеру если вы хотите сделать колонку на половину вашей страницы, тогда выбирайте 1/2.

По центру, можно выровнять колонку по центру.

Класс, данное поле можно оставить пустым, здесь можно задать свой стиль для колонок, но это не обязательно.

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

В конце жмём на кнопку – Вставить шорткод.

Как я уже говорил, в содержимое колонки вы можете вставлять всё что угодно, простой текст, фото, видео, шорткоды и т.д. Кстати в примерах, которые я вам показывал, видео и фото я вставлял с помощью шорткодов.

 

вставить содержимое

 

 

Теперь разберём вкладкуКолонки, здесь вы сможете создавать несколько колонок. Если вы хотите создать две колонки на вашем сайте на всю страницу, то просто вставьте два шорткода колонок 1/2 в поле Содержимое. (смотри скриншот)

 

настройки колонки

 

Смотрите, к примеру вы хотите создать на своём сайте три равноценных колонки, тогда это будет выглядеть так:

 

САМСАЙ колонки

 

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

 

Примеры готовых колонок можно посмотреть перейдя по вкладке: ШорткодыПримеры.

 

вкладка примеры

 

В разделе основные примеры, нажмите на вкладку – Использование колонок.

 

примеры

 

В примерах вы сможете копировать готовые шорткоды колонок и вставлять в них своё содержимое.

 

Итак, на этом у меня всё, я рассказал вам как можно с помощью простых шорткодов создавать на сайте колонки, уверен данная информация будет для вас полезной, до новых встреч!

У вас остались вопросы ? Вам что-то не понятно? тогда обязательно напишите мне в Обратную связь, либо оставьте комментарий к данной записи. Я всем отвечу!

 

Остались вопросы? Напиши комментарий! Удачи!

 

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

Укажите свой Email, если хотите получить ответ на почту!

  1. Алексей

    Вопрос?Можно ли в плагине Shortcodes Ultimate,когда сделать колонки,привязать их к определённой рубрике?Если можно,то как это сделать?

    Ответить
    1. Илья Журавлёв автор

      Если колонки находятся в записи, то конечно можно привязать запись к определённой рубрике…

      Ответить
  2. Алексей

    Как это сделать?

    Ответить
    1. Илья Журавлёв автор

      Очень просто, создаёшь рубрику и прикрепляешь её к записи…

      Ответить
  3. Алексей

    Как вывести колонки с помощью Shortcodes на главной странице,по середине сайта а ( не по бокам ) из определённой рубрики.По шагово.

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

    Ответить
    1. Илья Журавлёв автор

      Вставляешь шорткод колонок на главную страницу, в колонки вставляешь любое содержание. В плагине Shortodes Ultimate есть ещё такая функция “Записи”, вот с помощью данной функции можешь вставлять в колонки любые записи из любых рубрик, в параметрах всё это настраивается. Тебе нужно создать шорткод из функции “Записи” где будут записи из определённой рубрике и вставить этот шорткод в содержание колонки. То есть, шорткод “Записи” вставляешь в шорткод “Колонки”, всё очень просто…

      Ответить
  4. Алексей

    Спасибо,буду пробовать!!!

    Ответить
  5. Саша

    Здравствуйте, а можно ли как то сделать вывод анонсов на главной в две колонки, тема поддерживает только одну.

    Ответить
    1. Илья Журавлёв автор

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

      Ответить
  6. Любовь

    Привет!
    Этот плагин да, Илья?
    Спасибо!)

    Ответить
  7. Любовь

    Я пока ничего не пойму… В замен фразы “содержимое колонки” надо вставить текст? Любого размера?
    И он весь будет отображаться или часть?
    Даже не знаю… сейчас попробую

    Ответить
  8. Любовь

    Ну, да. Так и получилось)
    Удалила фразу, взамен вставила весь нужный текст… И ерунда) он весь отображается, только вытянулся горизонтально… а длины колонки все разные, так как текст разной длины… А почему на примерах в верху так аккуратно? почему только часть текста? А?)))
    Как дальше настраивать?
    Спасибо!

    Ответить
  9. Любовь

    Ок.
    Вот конкретно: 1/3 + 1/3 + 1/3
    Вот подсказка, готовый код:
    1/3 + 1/3 + 1/3

    [su_row]
    [su_column size="1/3"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
    [su_column size="1/3"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
    [su_column size="1/3"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
    [/su_row]

    Как, что и куда вставлять? Илья, объясни пожалуйста, чайнику)))
    Спасибо!

    Ответить
  10. Любовь

    код испарился) точнее преобразился)))

    Ответить
  11. Любовь

    Объясняю мой вопрос: весь вставленный текст разбился на три колонки, и вытянулся на всю страницу. А мне надо что бы видно было только часть, ну, несколько предложений. Настроек никаких найти не могу, ничего не вижу.
    Жду подсказки, Илья.
    Спасибо!)

    Ответить
    1. Илья Журавлёв автор

      Скрой текст с помощью тега “Читать далее”

      Ответить
  12. Любовь

    Я разобралась, кажется))) в другой теме у тебя написано надо не колоки, а записи мне… так?)))
    Думаю, да.
    Терпение и время, и на твоём сайте все ответы можно найти.
    Спасибо!
    А в колонках нельзя чтобы только часть текста видна была?

    А записи, это как у на твоём сайте оформлено получится?
    Спасибо

    Ответить
  13. Любовь

    Доброе утро!
    Скрой текст с помощью тега «Читать далее»
    Это как ?
    )
    Спасибо

    Ответить
    1. Илья Журавлёв автор

      Привет, в визуальном редакторе есть специальная кнопка для этого:

      Ответить
  14. Любовь

    Сейчас смотрю и разбираюсь с шоркодами. Наверное надо использовать ” развернуть”

    Ответить
  15. Любовь

    А этот тег где вставить? Спасибо за терпеливое объяснение)

    Ответить
  16. Любовь

    Этот тег вставить в конце текста перед закрытием шорткода, да?
    Я никогда не пользовалась, пока не понимаю)
    Спасибо

    Ответить
    1. Илья Журавлёв автор

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

      Ответить
  17. Любовь

    Спасибо, пробую!
    Для кого то -естественно, для кого то -тёмный лес ;)

    Ответить
  18. Любовь

    А то, я уже только что попробовала этот шорткод “развернуть” . Он мне не подходит, так структура нарушается текста- только всё в куче)))

    Ответить
  19. Любовь

    Совершенно не получается разобраться в шорткодах, для меня очень трудно. Сейчас попробую плагин Advanced Spoiler

    Ответить
    1. Илья Журавлёв автор

      Плагин Shortcodes Ultimate очень крутой, когда разберёшься в нём сама поймешь это ! В нём более 40 функций. Самый крутой плагин на WordPress !

      Ответить
  20. Любовь

    Да, это именно тот плагин который искала). Отлично работает!

    Ответить
  21. Sergei Pro

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

    Ответить
    1. Илья Журавлёв автор
      Ответить
      1. Sergei Pro

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

      2. Илья Журавлёв автор

        Почему в ручную ? Шорткод ставите и всё готово ! Записи будут автоматически выводится после публикации ! Зачем вам этот код ? Я вам дал готовые инструменты ! Разберитесь просто как работает и всё. Там можно настроить автоматический вывод записей из любой категории, метки, ключа, автора и т.д.

      3. Sergei Pro

        какой шоткод из представленных лучше использовать?

      4. Илья Журавлёв автор

        Стили у всех разные, какой вам больше нравится, тот и используйте. Я бы отметил плагины – Content Views и Post Grid.

  22. Art

    Илья привет!
    Подскажи, пожалуйста, а ты каким-то плагином пользовался при создании главной страницы, или это все в css ты сделал? Кстати, твоя главная страница очень красивая и удобная!
    Молодец!

    Ответить
    1. Илья Журавлёв автор

      Привет. Спасибо. В две колонки выводил записи с помощью плагина – Shortcodes Ultimate. Значки выводит плагин – WP Emoji One. Всё остальное делается вручную в визуальном редакторе WordPress. Всё очень просто здесь, на самом деле.

      Ответить
    2. Илья Журавлёв автор

      Ещё кое-что забыл. Некоторые стили, поиска, логотипа, делал с помощью плагина – SiteOrigin CSS и Simple Custom CSS.

      Ответить
  23. Ирина

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

    Ответить
    1. Илья Журавлёв автор

      Здравствуйте. Проще найти такую тему готовую. А если вы хотите свою тему изменить, вам надо к разработчику обратиться. Просто так всё это не сделаешь. На страницах вы никак не сделаете боковой сайдбар, если в теме по умолчанию его нет. Можно разбить контент на две или три колонки, с помощью кода. Можно даже указать размер столбцов. Сайдбар можно вывести в любом месте с помощью плагина WordPress Widgets On Pages.

      Ответить
  24. Анатолий

    Как менять расстояние между колонками?

    Ответить
    1. Илья Журавлёв автор

      Вам поможет плагин SiteOrigin CSS.

      Ответить
      1. Анатолий

        то-есть этот плагин (Shortcodes Ultimate), который создает колонки не предполагает изменения расстояния между колонками?

      2. Илья Журавлёв автор

        В настройках Shortcodes Ultimate можно свои стили добавить. Но, генерить их проще с помощью SiteOrigin CSS.

      3. Анатолий

        попробовал менять что-то этим плагином, он конечно меняет многие параметры (позиционирование и т п.), но вот конкретно расстояние между колонками не получается изменить, я могу изменить расположение картинки или текста в колонке, но вот чтобы саму колонку редактировать…
        может дополните данный текст про создание колонок примерами как менять их параметры?

      4. Илья Журавлёв автор

        Каким образом вы пытались изменить расстояние?

  25. Анатолий

    с помощью SiteOrigin CSS.
    к примеру, шотрткат колонка 1/2, между ними есть фиксированое расстояние, которое хотелось бы менять, в самом плагине нет такой функции (или есть?), при помощи плагина SiteOrigin кликаю мышкой на колонку которую хочу редактировать, но он позволяет менять только позиционирование всей колонки или того что находится в колонке, но не расстояние между ними.
    попробуйте изменить, если у Вас получится, поделитесь секретом для всех.

    Ответить
    1. Илья Журавлёв автор

      Вам нужно увеличить отступ (Margin) в самой колонке.

      Ответить
    2. Илья Журавлёв автор

      Либо набивку (Padding).

      Ответить
      1. Анатолий

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

      2. Илья Журавлёв автор

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

      3. Анатолий

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

      4. Илья Журавлёв автор

        Не пойму, чем вас не устраивает расстояние между колонками?

      5. Анатолий

        что значит чем меня не устраивает? там фиксированое расстояние (не знаю точно какое) для примера пусть будет 10 пикселей, а мне нужно 20 или 5 или вообще 0, странно что такой простой и востребованной фишки не предусмотрено по умолчанию.

      6. Илья Журавлёв автор

        Я имел ввиду, стоит ли париться по этому поводу, 5, 10, 15…Разница не большая. Я попробую сделать.

  26. Эльман

    Привет, Илья) в мобильной версии сайта (тема hestia) товары выводятся в одну колонку, как сделать чтобы они выводились в 2 колонки? Причем все устраивает, устанавливал wptouch и остальные подобные плагины, все не то…В теме LSX например выводятся товары в 2 колонки, но не могу тему под себя подстроить, что посоветуешь?

    Ответить
    1. Илья Журавлёв автор

      Привет. Можно конечно перешить тему, но это надо к спецу обращаться. Проще подобрать готовую тему, где есть такая опция по умолчанию. В LSX что конкретно не получается под себя подстроить?

      Ответить
  27. Азиля

    Насчет содержимого: чем можно наполнять колонки. По середине идут статьи, а по бокам?

    Ответить
    1. Илья Журавлёв автор

      В колонки можно ставить любой контент, фото, видео, текст, HTML код. По бокам чего?

      Ответить