Бажаєте додати трохи візуального порядку та узгодженості на сайт WordPress? Групи кнопок можуть бути ефективним способом досягнення обох цілей.
Поєднавши кілька кнопок разом, ви можете створити елемент дизайну, який підвищить зручність використання та естетику, надаючи користувачам чіткі можливості навігації, сортування, фільтрації та виконання дій.
Щоб швидко та легко додати кілька кнопок в один рядок у WordPress, можна використовувати Visual Composer. У цьому посібнику ви дізнаєтесь, як це зробити за кілька простих кроків.
Створення групи кнопок у Visual Composer
Для цього посібника потрібна преміум-версія Visual Composer Website Builder. Тому переконайтеся, що у вас встановлений та активований Візуальний Композитор на веб-сайті WordPress.
Спочатку потрібно вибрати будь-яку сторінку або пост, де ви бажаєте розмістити групу кнопок. Або, якщо ви створюєте новий пост, натисніть кнопку «Додати новий за допомогою Visual Composer» на панелі керування WordPress. Як тільки ви опинитеся в редакторі, виконайте наведені нижче інструкції.
- Додайте елемент "Група кнопок". Натисніть кнопку «Додати вміст» або «Visual Composer Hub» на лівій бічній панелі. Виберіть «Групу кнопок» зі списку доступних елементів та перетягніть її до свого рядка.
- Видаліть зайву виділену кнопку. Елемент включає дві кнопки з різним стилем - виберіть заповнену кнопку і видаліть іншу.
- Клонуйте кнопку. Для цього наведіть вказівник миші на елемент і натискайте «Клонувати основну кнопку», доки у вас не з'являться 2 окремі кнопки в елементі групи кнопок.
- Налаштуйте текст кожної кнопки. Наведіть вказівник миші на першу кнопку, натисніть «Змінити» та змініть текст. Повторіть кожну кнопку. Наприклад, ми змінюємо текст на «Увійти» та «Зареєструватися».
- Забираємо зазор між кнопками. Відкрийте вікно редагування елемента «Група кнопок» та змініть зазор між елементами на 0. За замовчуванням він дорівнює 20 пікселям.
- Додайте межу між кнопками. Натисніть «Редагувати» на будь-якій кнопці і додайте кордон до 1 пікселя (для лівої — правий кордон або навпаки) до «Параметри дизайну». Ці лінії допомагають візуально відокремити їх одна від одної.
- Змініть колір кордону на бажаний відтінок. У тому ж місці, де ми налаштували кордон, потрібно змінити колір кордону на світліший або темніший відтінок, ніж сама кнопка. Це допоможе досягти контрасту.
- Змініть форму групи кнопок. Щоб надати нашій групі кнопок круглу форму, потрібно натиснути «Редагувати» для кожної кнопки і додати радіус кожного зовнішнього кута (для лівої кнопки радіуси лівої сторони і навпаки). У нашому випадку – 50px для досягнення повністю закругленої форми.
- Налаштуйте розмір кнопки. Для цього натисніть «Змінити» для кожної кнопки і використовуйте параметри розміру (це також вплине на розмір шрифту тексту кнопки), або використовуйте відступи в параметрах дизайну.
- Додайте функціональність вашим кнопкам. Натисніть «Змінити» для кожної кнопки групи і за допомогою селектора посилань додайте цільову URL, відобразіть динамічний вміст або викличте спливаюче вікно — вибір за вами.
З цього моменту можна налаштувати групи кнопок на свій розсуд.: змінити стиль, відрегулювавши кольори, межі та розмір, а також додати анімацію для кожної кнопки або всієї групи кнопок. Ви можете використовувати диспетчер шрифтів для налаштування шрифтів кнопок незалежно від теми, що використовується. І, як тільки внесено всі необхідні зміни, збережіть та опублікуйте свої зміни.
Читайте також:
Конструктори сайтів на WordPress: 15 найкращих плагінів 2023 року
Усі кнопки не повинні виглядати однаково
Насамкінець, групи кнопок, що настроюються, це простий, але ефективний спосіб додати візуальний стиль і узгодженість на ваш веб-сайт WordPress. Використовуючи Візуальний Композитор (преміум-версією) можна легко створювати групи кнопок, що настроюються, які виглядають чудово, підвищують зручність використання і надають користувачам чіткі варіанти для виконання бажаної дії.
Дотримуючись кроків, описаних у цьому посібнику, ви зможете за кілька кліків створити приголомшливі групи кнопок, що відповідають вашому бренду та дизайну веб-сайту. Так навіщо задовольнятися стандартними нудними кнопками, коли можна створювати групи кнопок, що виділяються.
Коментарі до запису: 0