Виділіть свої послуги за допомогою блоку "Сервіс" - Користувацький блок AitThemes

Виділіть свої послуги за допомогою блоку "Сервіс" - Користувацький блок AitThemes

Блок "Послуги" - це наш перший блок, який ми випустили в нашому плагіні Citadela Pro. Завдяки цьому блоку ви можете ідеально представити свої послуги або особливості продукту, ключові моменти, бачення або обсяг робіт. Додавши блок "Послуги" на сторінку або пост WordPress, ви можете виділити певний елемент, додати іконку, опис і заклик до дії. Ви самі вирішуєте, чи хочете ви привернути увагу відвідувачів до однієї конкретної послуги, чи до кількох послуг за допомогою декількох блоків послуг. Але давайте почнемо з самого початку.

У цій статті ми пояснимо:

Основна мета блоку "Сервіс" - показати послуги у привабливому вигляді

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

  • Структуруйте контент
  • Оновіть його за допомогою іконок
  • Окремі сервіси з графікою та інтервалами

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

 Виділіть послуги за допомогою блоку "Послуги
Контент виглядає набагато краще, якщо в ньому є сервісні блоки для представлення послуг або продуктів компанії

Покращена навігація по сайту

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

Якщо ви додасте URL-адресу до своєї послуги, її можна використовувати як навігаційний блок із закликом до дії (CTA). Це змусить клієнтів натиснути на нього, щоб дізнатися більше або замовити послугу.

Сервісний блок для представлення функцій

Сервісний блок також може бути використаний, щоб підкреслити особливості продукту або послуги, які ви пропонуєте. Це означає, що кожен окремий блок послуг буде представляти одну певну особливість. Таке графічне зображення може підкреслити ключові якості даного продукту. Пам'ятаючи про те, що відвідувачі не хочуть читати багато тексту.

Сервісний блок використовується як блок функцій
Використовуйте блок "Сервіс" як поле "Особливості", щоб підкреслити особливості продукту

Де можна використовувати Service block

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

Блоки послуг можна використовувати на спеціальній сторінці послуг, яка, як і головна сторінка, має високу відвідуваність. Ви можете представити всі послуги, які ви пропонуєте, в одному місці.

Про те, як створити сторінку "Послуги", ми поговоримо пізніше.

Сумісність з темами WordPress

Головною перевагою блоку "Сервіс" є те, що він доступний для всіх тем WordPress, які підтримують редактор блоків WordPress (Gutenberg). Це означає, що ви можете використовувати його в нашій темі або в будь-якій сторонній темі, наприклад, Avada або Divi. Єдине, що вам потрібно - це встановити плагін Citadela Pro.

Як додати блок "Сервіс" на свій сайт

Як ми вже згадували, щоб додати блок "Сервіс" до редактора, вам потрібен плагін Citadela Blocks. Після активації плагіна блок буде автоматично додано до редактора WordPress.

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

Додайте блок "Сервіс" до редактора WordPress, натиснувши на "+"
Додавання сервісного поля, натиснувши на "+"

Другий варіант додавання блоку "Сервіс" - використовувати "/" і написати слово "сервіс".

Вставте сервісний блок зі скісною рискою "/"
Вставте сервісний блок за допомогою косої риски "/"

Готово. Так виглядає блок "Сервіс" з доступними опціями.

Створено сервісний блок
Так виглядає блок "Сервіс

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

Перш за все, ви можете вибрати макет сервісу, який найкраще підійде до дизайну вашого сайту. За замовчуванням встановлено макет Box, в якому іконка, заголовок та опис розміщуються по центру. Ви можете змінити його на макет "Список" у верхній панелі інструментів. Іконка буде переміщена поруч із заголовком і все буде вирівняно по лівому краю.

Зміна макета поля на макет списку
Налаштуйте макет для вашого блоку послуг в один клік

Усередині блоку "Сервіс" є заповнювач, який також працює як підказка. Ви точно знатимете, що писати в цьому окремому полі. Заголовок зазвичай означає назву послуги або функції. Текст під ним зазвичай описує послугу докладніше або пояснює, чому клієнт повинен її замовити.

Текст можна відформатувати як зазвичай, ви можете виділити його напівжирним, курсивом або додати посилання.

Налаштування блоків за допомогою інспектора

Розширені налаштування в Інспекторі дозволяють вам змінювати сервісні блоки відповідно до ваших потреб. Ви можете змінювати:

1. Кольори блоків

  • Колір фону
  • Колір заголовка
  • Колір тексту
Зміна кольору сервісного блоку
Налаштуйте свій блок, змінивши його колір

2. Іконка або зображення в сервісному блоці

Сервісний блок за замовчуванням відображає іконки. Ви можете вибрати іншу іконку з піктограми, використовуючи рядок пошуку. Ви також можете змінити колір іконки. Замість іконки ви також можете використовувати будь-яке зображення. Його можна налаштувати під розмір іконки або під ширину сервісного блоку.

Параметри піктограм та зображень в Інспекторі службових блоків
Виберіть, що ви хочете відобразити всередині блоку - іконку чи зображення?

Якщо ви не бажаєте показувати іконку або зображення в службовому вікні, ви можете повністю вимкнути цю функцію (Показувати іконку або зображення -> Ні).

3. Посилання

Щоб перенаправити відвідувачів на іншу сторінку, ви можете додати посилання в сервісне поле. Правильно підібраний заклик до дії збільшує кількість кліків і конверсію. Ви можете просто написати "Читати далі" і вставити URL-адресу. Ви також можете відкрити це посилання в новій вкладці браузера.

Вставити посилання на URL-адресу до блоку "Сервіс
Вставте URL для створення повідомлення із закликом до дії

4. Кастомний клас CSS

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

Як створити сторінку "Послуги" з декількома послугами

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

Як додати сторінку Сервіс в редакторі блоків WordPress за допомогою блоку Сервіс?

  • Перше, що вам потрібно додати Блок колонок
  • Задайте кількість колонок. Якщо ви хочете представити 3 послуги, вам потрібно 3 колонки
  • Після цього додайте по одному блоку Service в кожну колонку
Сторінка послуг, створена кількома блоками послуг
3 Сервісні блоки, вкладені в блок Стовпці

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

Ви вже спробували наш блок "Сервіс"? Як він вам? Ми з нетерпінням чекаємо на ваші перші реакції в коментарях нижче.

3 думає про "Highlight your services using Service block – AitThemes Custom block"

  1. Це чудово. Це окреме завантаження, як і Citadela Blocks у розділі Плагіни?

    1. Привіт, Скотті,

      дякую, що запитав.
      Service Block постачається з наступним плагіном: https://www.ait-themes.club/wordpress-plugins/citadela-blocks

      З найкращими побажаннями!
      Златко
      Команда АІТ

Коментарі закриті.