Больше результатов...

Generic selectors
Только точные совпадения
Искать в заголовках
Искать в контенте
Post Type Selectors
Filter by Categories
FAQ
Hostenko
Вдохновение
Видеоуроки
Новости
Плагины
Темы
Уроки
Хаки

Хотите добавить немного визуального порядка и согласованности на сайт WordPress? Группы кнопок могут быть эффективным способом достижения обеих целей.

Кнопки в wordpress

inet.ws - Powerful VPS Hosting in the USA, Canada, UK and DE!

Объединив несколько кнопок вместе, вы можете создать элемент дизайна, который повысит удобство использования и эстетику, предоставляя пользователям четкие возможности навигации, сортировки, фильтрации и выполнения действий.

Чтобы быстро и легко добавить несколько кнопок в одну строку в WordPress можно использовать Visual Composer. В этом руководстве вы узнаете, как это сделать за несколько простых шагов.

Создание группы кнопок в Visual Composer

Для этого руководства требуется премиум-версия Visual Composer Website Builder. Поэтому убедитесь, что у вас установлен и активирован Visual Composer на веб-сайте WordPress.

Как начать использовать Visual Composer Website Builder

Сначала нужно выбрать любую страницу или пост, где вы хотите разместить группу кнопок. Или, если вы создаете новый пост, нажмите «Добавить новый с помощью Visual Composer» на панели управления WordPress. Как только вы окажетесь в редакторе, следуйте приведенным ниже инструкциям.

  1. Добавьте элемент «Группа кнопок». Нажмите «Добавить содержимое» или «Visual Composer Hub» на левой боковой панели. Выберите «Группу кнопок» из списка доступных элементов и перетащите ее в свою строку.
  2. Удалите лишнюю выделенную кнопку. Элемент  включает в себя две кнопки с разным стилем — выберите заполненную кнопку и удалите другую.
  3. Клонируйте кнопку. Для этого наведите указатель мыши на элемент и нажимайте «Клонировать основную кнопку», пока у вас не появятся 2 отдельные кнопки в элементе группы кнопок.
  4. Настройте текст для каждой кнопки. Наведите указатель мыши на первую кнопку, нажмите «Изменить» и измените текст. Повторите для каждой кнопки. Например, мы меняем текст на «Войти» и «Зарегистрироваться».
  5. Убираем зазор между кнопками. Откройте окно редактирования элемента «Группа кнопок» и измените зазор между элементами на 0. По умолчанию он равен 20 пикселей.
  6. Добавьте границу между кнопками. Нажмите «Редактировать» на любой кнопке и добавьте границу в 1 пиксель (для левой — правую границу или наоборот) в «Параметры дизайна». Эти линии помогают визуально отделить их друг от друга.
  7. Измените цвет границы на желаемый оттенок. В том же месте, где мы настроили границу, нужно изменить цвет границы на более светлый или темный оттенок, чем сама кнопка. Это поможет добиться контраста.
  8. Измените форму группы кнопок. Чтобы придать нашей группе кнопок круглую форму, нужно нажать «Редактировать» для каждой кнопки и добавить радиус для каждого внешнего угла (для левой кнопки радиусы левой стороны и наоборот). В нашем случае - 50px для достижения полностью закругленной формы.
  9. Отрегулируйте размер кнопки. Для этого нажмите «Изменить» для каждой кнопки и используйте либо параметры размера (это также повлияет на размер шрифта текста кнопки), либо используйте отступы в параметрах дизайна.
  10. Добавьте функциональности вашим кнопкам. Нажмите «Изменить» для каждой кнопки в группе и с помощью селектора ссылок добавьте целевой URL, отобразите динамическое содержимое или вызовите всплывающее окно — выбор за вами.

две кнопки рядом

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

Читайте также:

Конструкторы сайтов на WordPress: 15 лучших плагинов 2023 года

Все кнопки не должны выглядеть одинаково

В заключение, настраиваемые группы кнопок — это простой, но эффективный способ добавить визуальный стиль и согласованность на ваш веб-сайт WordPress. Используя Visual Composer (премиум-версией) можно легко создавать настраиваемые группы кнопок, которые выглядят великолепно, повышают удобство использования и предоставляют пользователям четкие варианты для выполнения желаемого действия.

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

inet.ws - Powerful VPS Hosting in the USA, Canada, UK and DE!
Алексей Шевченко
редактор wpcafe
Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующийся на создании сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Комментарии к записи: 0

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