Найкращі оригінальні блоки WordPress [Короткий огляд]

Пропонуємо вам посібник з використання редактора Gutenberg WordPress та блоків. Будь ласка, прочитайте новини про зміни в блоках, які відбудуться в наступній версії 5.4. Ми відібрали всі найпоширеніші блоки, які обов'язково повинні використовуватися на будь-якому сайті. Після релізу ми опублікуємо більш детальну інформацію про всі функції.

Коли WordPress анонсував новий редактор Gutenberg у 2018 році, ми були в захваті від нього. Тепер, через кілька років, ми бачимо величезне покращення. Редактор Gutenberg WordPress - це чудовий інструмент для створення веб-сайту.

Всі ці стандартні блоки WordPress для редактора Gutenberg повністю функціональні в нашому останньому проекті Безкоштовно Citadela Тема WordPress. Ви можете використовувати його на будь-якому сайті, будь ласка створити обліковий запис і завантажити його безкоштовно.

З Плагіни AitThemes Citadelaви можете створювати конкретний контент для презентації компанії, бізнесу, блогу чи некомерційного веб-сайту. Або навіть розпочати новий онлайн-бізнес. Швидкість роботи веб-сайту та простота його редагування є найважливішими факторами.

Що таке блок?

Блоки Gutenberg WordPress - це будівельні одиниці сайту. Кожен з них має своє особливе місце і призначення. Дуже важливо використовувати правильний блок WordPress для певного типу контенту.

Але як знайти найбільш підходящий блок, який відповідає вашому задуму?

Щоб допомогти вам краще розібратися в блоках WordPress, ми підготували огляд найпопулярніших з них.

Блоки текстового вмісту

Існує декілька блоків, за допомогою яких ви можете вставляти текстовий контент на свій сайт. Ви можете використовувати кілька блоків. Починаючи з WordPress 5.4 з'явилося нове налаштування, ви можете змінювати колір тексту.

• Абзац
• Заголовок
• Цитата
• Список
• Витягнути цитату
• Таблиця
• Вірш
• Попередньо відформатовано

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

Кнопковий блок

Створення привабливої кнопки заклику до дії в WordPress стало надзвичайно простим завдяки блоку Button. Вам не потрібно вводити кастомний CSS або розуміти HTML. Ви можете - але не зобов'язані - ввести шістнадцятковий код вашого улюбленого кольору, щоб кнопка виглядала красиво і привертала увагу.

Де використовувати Button block?

Коли відвідувач потрапляє на ваш сайт, ви хочете заохотити його до дії. Саме для цього призначені кнопки заклику до дії.

Загалом, є 3 місця, де варто використовувати блок кнопок WordPress:

• Головна сторінка - для завершення дії, яка приведе до досягнення вашої мети, наприклад, підписатися на розсилку новин, знайти спеціальну пропозицію або зареєструватися на безкоштовну пробну версію.
• Сторінка продукту - в залежності від того, як ваша сторінка продукту є лідом, на ній може бути 1 кнопка CTA (КУПИТИ) або більше кнопок, наприклад, детальна інформація про продукт, купити, додати до списку бажань і т.д.
• Блог - кнопки заклику до дії можуть посилатися на іншу корисну статтю або покупку вашого продукту/послуги.

Налаштування блоку кнопок

В Інспекторі, з правого боку, ви можете легко керувати налаштуваннями вашої кнопки:

• Стиль
• Колір фону
• Колір шрифту
• Кордон

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

Новини, що з'являться в наступній версії WordPress 5.4 (реліз 31 березня 2020 року)

Кнопковий блок буде замінено на новий Buttons блок.
З нової назви можна припустити, що ви зможете створювати більше кнопок поруч одна з одною в одному блоці-контейнері. Часто виникає потреба створити дві кнопки заклику до дії одночасно, наприклад: "Купити зараз" і "Читати далі". Крім того, з'являться нові налаштування стилів і кольорів. Виберіть стиль "Заливка" або "Контур", а потім колір фону. Ви можете вибрати суцільний або градієнтний фон. Деякі пресети будуть доступні як відправна точка для більш легкого налаштування. Хороша новина полягає в тому, що всі існуючі блоки кнопок будуть працювати і їх не потрібно буде мігрувати.

Блок колонок

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

Працювати з блоком Стовпці дуже просто:

• Не потрібно встановлювати додаткові плагіни.
• Кодування не потрібне.
• Все, що вам потрібно - трохи розуму для акуратного дизайну.

У порівнянні з попередніми труднощами, через які вам довелося пройти до випуску редактора блоків WordPress, користуватися блоком Columns WordPress надзвичайно просто.

Як користуватися блоком Стовпці?

Як зазначено вище, є 2 способи використання блоку Стовпці:

• Організувати потік ваших текстів (у блозі або на звичайній сторінці).
• Розташувати інші блоки в колонки.

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

Однак, коли ви використовуєте блок "Колонки" для вкладання інших блоків, наприклад, зображень, текстів і кнопок, ви змінюєте весь макет обраної вами сторінки і створюєте новий дизайн.

Налаштування блоку стовпців

Після вставки блоку Columns на сторінку, виберіть, скільки колонок ви хочете. Це може бути будь-яка кількість від 2 до 6 колонок. Потім ви можете почати вводити текст або додавати блоки в кожну колонку.

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

Блок обкладинки

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

Обкладинка - це один з основних блоків WordPress, який допомагає вразити відвідувачів вашого сайту. Особливо, коли він використовується правильно, або, краще сказати, коли він акуратно інтегрований у ваш веб-дизайн.

Де використовувати Cover block?

Як зазначалося вище, блок "Обкладинка" можна використовувати на будь-якій вашій сторінці. Більше того, його можна додати в будь-яке місце сторінки, на відміну від шапки сайту, яка фіксується у верхній частині сайту.

Обкладинку можна використовувати як:

• Заголовок будь-якої сторінки, включаючи домашню.
• Зображення або відео перекриті текстом, що використовується на сторінці товару.
• Роздільник вмісту в дописі блогу.

Налаштування блоку обкладинки

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

Ви можете вибрати вирівнювання блоку і, звичайно, вирівнювання тексту всередині.

Вирівнювання блоку обкладинки пропонує наступні варіанти:

• Вирівняти ліворуч
• Вирівняти по центру
• Вирівняти праворуч
• Широка ширина
• Повна ширина

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

Починаючи з WordPress 5.4, ви можете вибрати градієнтний фон замість суцільного.

Блок галереї

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

Завантажити зображення можна, вибравши файли з медіатеки, з комп'ютера або за допомогою функції drag&drop.

Де використовувати Блок галереї?

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

• Ваша домашня сторінка
• Окремі підсторінки, створені як альбоми вашої фотогалереї
• Сторінки продуктів
• Допис у блозі

Налаштування блоку галереї

Окрім різних варіантів вирівнювання самого блоку "Галерея", є кілька цікавих опцій всередині цього блоку, наприклад, такі:

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

Блок зображень

Блок зображень - це не що інше, як блок для відображення зображення на вашому сайті.

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

Коли використовувати блок зображень?

Блок зображень слід використовувати особливо тоді, коли об'єкт, відображений на зображенні, є особливо важливим для відвідувача вашого сайту, якого ви хочете зацікавити:

• Приверніть увагу відвідувача сайту за допомогою конкретного зображення.
• Відобразити зображення з підписом.
• Показуйте інфографіку, яка допоможе відвідувачам краще зрозуміти обговорюване питання.

Налаштування блоку зображень

Однією з найбільших переваг блоку "Зображення WordPress" є можливість вибору розміру зображення. Ви можете легко змінити розмір зображення, потягнувши його за кут, вибрати фіксований розмір у пікселях або визначити розмір у відсотках.

Ще однією важливою опцією є поля для введення альтернативного тексту, підписів і посилань. Я наполегливо рекомендую використовувати ці поля, оскільки вони відіграють важливу роль у SEO на сторінці.

Медіа та текстовий блок

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

Де використовувати Медіа та текстовий блок?

Хоча блок "Медіа та текст" найкраще підходить для використання в блогах, з невеликою фантазією ви можете використовувати його і в інших місцях. Наприклад, ви можете створити гарний огляд продукту або послуги, використовуючи зображення і текст поруч один з одним.

Не забудьте додати блок Button до текстової частини блоку Media & text, якщо він використовується як огляд продукту/послуги. Таким чином, ви зможете створити гарний CTA-розділ на будь-якій сторінці.

Переваги медіа та текстового блоку

• Поєднання зображення та тексту, які контекстуально відповідають одне одному.
• Уникайте неправильного розміщення зображень у блозі.
• Допомога з адаптивністю сайту (використовуйте функцію "Складати на мобільних").

Налаштування медіа та текстових блоків

Якщо ви подивитеся на налаштування блоку "Медіа та текст", то побачите чимало варіантів вирівнювання, деякі з них є унікальними, порівняно з більшістю інших блоків.

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

Вставте посилання з версії WordPress 5.4 (31.3.2020). Ви можете вибрати посилання, медіафайл або вкладення.

Табличний блок

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

Де використовувати табличний блок?

Таблиці відіграють величезну роль у наданні корисного контенту в добре організованому і прозорому вигляді. Напевно, більшість веб-сайтів використовують таблиці. Ось лише кілька прикладів використання таблиць на різних веб-сайтах:

• Порівняння даних
• Таблиці цін
• Технічні характеристики продукту
• Рецепти
• Огляд членських пакетів

Наявність блоку Table як частини безкоштовного ядра WordPress просто дивовижна.

Налаштування табличного блоку

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

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

Інші варіанти включають:

• Колір фону
• Комірки фіксованої ширини
• Заголовок
• Нижній колонтитул
• Посилання (текстовий запис у таблиці може посилатися на інші сторінки)

Який блок ви хотіли б побачити наступним?

Сподіваємося, вам сподобалося читати про нашу добірку дуже корисних блоків ядра WordPress, доступних безкоштовно для всіх. Будь ласка, дайте нам знати, про які блоки ви хотіли б прочитати далі або яких функцій, на вашу думку, все ще бракує в ядрі WordPress. Дякуємо, що прочитали!