Як зробити колонки в WordPress без плагіна

Організація контенту в колонки - це простіше простого завдяки блоку "Колонки WordPress". Цей блок належить до основних блоків, які можна використовувати в кожній темі WP. Блок "Колонки" може мати до 6 колонок. Таким чином, ви можете мати 6 різних вмістів поруч. Сьогодні ми...

Сьогодні ми покажемо вам, як зробити колонки в WordPress без плагіна - за допомогою блоку Columns. Ми також пропонуємо вам короткий огляд найновіші функції з версії WP 5.3 оновлення.

У цьому посібнику ви знайдете інформацію про:

• Для чого потрібні колонки
• Як працювали колонки в старому редакторі
• Як зробити колонки в WordPress без плагіна (в редакторі блоків)
• Базові налаштування блоку "Колонки
• Як працювати з блоком колонок WordPress
• Як редагувати вкладені блоки
• Переваги колонного блоку

Для чого потрібні колонки

Колонки на сайті можуть мати кілька застосувань. Перш за все, вони можуть зробити контент добре організованим, більш читабельним і зручним для браузера. Організовуючи контент у колонки, ви можете виділити важливу інформацію або параметри.

Наприклад, ви можете використовувати багатоколонковий макет, щоб представити свої послуги. Додайте туди ілюстративне зображення, опис або кнопку. Звичайно, ви можете зробити зображення клікабельним.

Подібно до послуг, ви можете використовувати колонки в WordPress для показу продуктів або категорій продуктів. Це ідеальний варіант, якщо у вас простий бізнес-сайт.

У публікаціях блогу ви можете використовувати колонки для розділення контенту. Ви можете розміщувати текст, маркери або зображення поруч.

Як працювали колонки в старому редакторі

До WordPress 5+, якщо ви хотіли створити багатоколонковий контент, вам доводилося використовувати таблиці. Це було набагато складніше, ніж у найновішому редакторі. Крім того, зазвичай виникали проблеми зі стилями та відображенням таблиць на мобільних пристроях. Як це працювало раніше?

У вас було кілька варіантів того, як створити колонки на сайті WordPress:

1. Вставте HTML-код вручну в текстовий редактор

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Цей підхід в основному використовувався розробниками, які могли швидко створити таблицю або стовпець відповідно до своїх вимог. Недоліком було те, що не всі теми WordPress могли добре працювати зі стовпчиками. Таблиці зазвичай не були досконалими, і пересічний користувач не міг легко вирішити всі можливі проблеми.

2. Дозвіл таблиць у редакторі WordPress

Оскільки WordPress використовує редактор TinyMCE, стало можливим додати функції для редагування таблиць. Якщо вам цікаво дізнатися більше, ви можете знайти всі деталі на цьому форумі. Якщо ви зробите те саме для наших тем AIT, таблиці працюватимуть коректно.

3. Використання елемента Columns у темах AIT

Якщо ви використовуєте одну з наших старих тем WordPress, ви напевно знаєте наш елемент "Колонки". Цей елемент можна використовувати для додавання колонок всередині сторінок. Це елемент, який можна впорядкувати, тобто ви можете розмістити його в будь-якому місці, де вам потрібно. Перевагою є його варіативність всередині сторінок.

4. Завантажити сторонній плагін для керування таблицями

Іншим рішенням, як зробити колонки в публікаціях і сторінках WordPress, було завантажити один з доступних плагінів для створення таблиць. Ці плагіни дозволяють додавати колонки/таблиці за допомогою декількох кліків без будь-якого кодування. Цим також можуть скористатися менш досвідчені користувачі.

Як зробити колонки в WordPress без плагіна (в редакторі блоків)

Завдяки новому редактору блоків створювати колонки стало надзвичайно просто. Якщо ви все ще використовуєте стару версію WordPress, зараз саме час оновитися до найновішої версії. Ви зможете додавати та керувати колонками просто, в декілька кліків, використовуючи блок Колонки.

Цей блок є бажаною зміною для всіх, хто хоче працювати з багатоколонковим контентом, презентувати продукти або вести блог, але не має досвіду програмування.

Давайте подивимося, як додати блок Колонки і як створювати колонки в WordPress без плагіна:

• Перший варіант - натиснути на "+" у верхній панелі і вибрати блок Стовпці з доступних блоків.
• Другий варіант - натиснути на "+" в будь-якому місці редактора.

Попередньо визначені макети блоку колонок WordPress (НОВИНКА з WP 5.3)

Остання версія принесла величезні покращення в налаштуваннях стовпців. Перш за все, з'явилися стилі макетів за замовчуванням. Що це означає?

Користувачі можуть вибрати макет і стиль вирівнювання в процесі додавання нового блоку до області контенту. Попередньо визначені макети можуть бути дуже корисними - особливо для тих користувачів, які не мають просунутих навичок роботи з WordPress. Ця функція відображає те, як ми уявляємо собі створення колонок у WordPress (без плагінів чи інших доповнень).

 

Якщо ви не хочете обирати попередньо визначений макет у блоці "Колонки WordPress", просто пропустіть його. Після пропуску цього кроку контент буде розділено на 2 однакові частини/дві окремі колонки, які можна редагувати.

Колонки Блокування основних налаштувань

Сам по собі блок колонок WordPress не має багато опцій. Чому це так, ми пояснимо пізніше. У верхній панелі ви можете змінити вирівнювання на широке або по всій ширині. Ви можете змінити це вирівнювання, якщо воно підтримується вашою активною темою.

Найважливішим параметром блоку Стовпці є кількість стовпців у бічній панелі інспектора з правого боку. За замовчуванням є 2 колонки, але ви можете збільшити цю кількість до 6. Ви можете змінити її за допомогою миші або ввести число. Як це виглядає, ви побачите одразу після збільшення або зменшення кількості колонок. Блок змінюється динамічно в залежності від повзунка.

Це дуже практично, тому що ви можете змінювати кількість колонок буквально за лічені секунди без будь-яких складних змін у налаштуваннях або кодуванні.

Подібно до інших блоків у редакторі WordPress, ви можете вставити кастомний CSS клас і до блоку Columns.

Блочний апендер для більш зручної роботи з блоками

Блок Columns особливий тим, що з його допомогою можна створювати декілька блоків. До виходу нової версії було досить складно працювати з окремими блоками. Коли ви хотіли додати якийсь блок, ви не знали, куди саме натиснути. Завдяки апендеру блоків (і його диференціації за кольором фону) стало простіше вставляти вміст у відповідну колонку.

Як працювати з блоком колонок WordPress

Принадність блоку Columns полягає в тому, що кожна колонка може бути вкладена в інші блоки. Це може бути абзац, блок зображень або блок кнопок. Максимальна кількість колонок - 6, тому ви можете створювати багатоколоночний контент, як вам потрібно. Як згадувалося раніше, щоб представити товари, ви можете додати зображення товару, назву, ціну і кнопку поруч.

Ви також можете використовувати кілька блоків колонок, розташованих один під одним, щоб створити сітку. Ви можете використовувати її для презентації своїх послуг або просування важливих функцій.

Редагування вкладених блоків

Як ми вже згадували, ви можете вкладати інші блоки всередину колонок. Кожен вкладений блок має всі свої налаштування. Це означає, що якщо ви додасте блок Image у колонку, ви зможете редагувати його так само, як і окремий блок Блок зображень.

Висновок: Переваги колонних блоків

Випуск редактора блоків WordPress і можливість використання колонок на сторінках і в постах значно спростили роботу користувачів з контентом. Завдяки блоку колонок WordPress більше не потрібно використовувати сторонні рішення або писати HTML-код. Додавання або видалення колонок можливе за допомогою декількох кліків. Все дуже інтуїтивно зрозуміло і швидко, навіть для менш технічних користувачів.

Ваш контент у багатоколонковому макеті буде гарно вирівняний по сітці. Він також одразу добре виглядатиме в адаптивній версії.

Ми наполегливо працювали над новою темою для WordPress Citadela, спеціально розробленою для редактора блоків WordPress. Дізнайтеся більше про тему Citadela та доступні пакети макетів.