Купить Корзина
  • Домены и сайты
  • Облако и IT-инфраструктура
  • Вход
  • Телефон в Москве

    +7 495 580-11-11
  • Бесплатный звонок по России

    8 800 555-34-78
  • Или обратитесь в наши офисы

    Региональные номера
    1. База знаний
    2. Создание сайтов
    3. Конструктор Рег.сайт
    4. Работа с модулями Рег.сайт
    5. Как добавить и настроить кнопку на Рег.сайте

    Как добавить и настроить кнопку на Рег.сайте

    В статье мы расскажем, как добавить кнопку на сайт с помощью модуля Рег.сайта и как настроить её дизайн.

    Как добавить кнопку на сайт

    • 1
      Перейдите в режим редактирования сайта.
    • 2
      Нажмите на серый плюс в строке, в которую хотите вставить кнопку.
    • 3

      Выберите модуль Кнопка:

      Список модулей в Рег.сайт

      Если вы хотите привязать всплывающее окно к этой кнопке, используйте инструкцию.

    • 4

      Введите текст (название кнопки):

      Название кнопки в Рег.сайт

    • 5

      Чтобы добавить ссылку на кнопку, выберите пункт Ссылка и введите адрес в поле «URL ссылки кнопки»:

      Назначить кнопке URL в Рег.сайт

    • 6

      В пункте «Как открывать ссылку» выберите параметр открытия ссылки:

      Параметр открытия ссылки в Рег.сайт

    • 7
      Нажмите на галочку, чтобы сохранить изменения.

    Готово, кнопка добавлена на сайт. Далее рассмотрим, как изменить её дизайн.

    Как настроить дизайн кнопки

    Рассмотрим параметры, которые можно настроить во вкладке «Дизайн».

    Выравнивание

    В строке кнопку можно выравнивать по левому и правому краям, а также по центру:

    Выравнивание кнопки в Рег.сайт

    Быстрая настройка цвета текста

    В зависимости от фона, можно выбрать тёмный или светлый цвет текста:

    Цвет текста в Рег.сайт

    Пользовательские стили

    Чтобы получить доступ к расширенным настройкам вида кнопки, активируйте чек-бокс «Использовать пользовательские стили для элемента»:

    Как включить пользовательские стили для кнопки в Рег.сайт

    Размер текста

    Чтобы изменить размер текста, отрегулируйте ползунок или введите значение вручную. Размер кнопки будет масштабироваться в соответствии с размером текста.

    Как изменить размер текста в кнопке в Рег.сайт

    Цвет текста

    Цвет текста по умолчанию соответствует основному цвету вашей темы. Чтобы изменить цвет текста, настройте его при помощи палитры. Для этого нажмите на значок пипетки и выберите нужный оттенок:

    Как изменить цвет текста кнопки в Рег.сайт

    Фон кнопки

    По умолчанию у кнопки прозрачный фон, который вы можете изменить. В качестве фона можно выбрать:

    • сплошной цвет,
    • градиент,
    • изображение.

    Как изменить фон текста кнопки в Рег.сайт

    Граница кнопки

    Параметр «Кнопка Border Width» отвечает за толщину границы кнопки. Чтобы изменить толщину, отрегулируйте ползунок или введите значение вручную.

    По умолчанию толщина границы составляет 2 пикселя. Чтобы удалить границу, установите значение 0 px.

    Цвет границы по умолчанию соответствует вашей теме. Выберите нужный цвет из палитры цветов.

    Как изменить цвет границы текста кнопки в Рег.сайт

    Закругление кнопки

    Параметр «Кнопка Border Radius» отвечает за скругление углов кнопки. Чем больше значение, тем больше скругление. Отрегулируйте ползунок или поменяйте значение вручную:

    Как изменить закругление кнопки в Рег.сайт

    Расстояние между буквами

    Чтобы изменить расстояние между буквами, используйте ползунок или введите значение вручную:

    Как изменить расстояние между буквами в Рег.сайт

    Готово, вы настроили дизайн кнопки.

    Как настроить дополнительные параметры

    Теперь рассмотрим параметры, которые можно настроить во вкладке «Дополнительно».

    Атрибуты

    При помощи атрибутов можно настроить отношение между текущей страницей и страницей по ссылке. Для этого выберите пункт Атрибуты.

    Из списка вы можете выбрать:

    • bookmark — задаёт постоянную ссылку;
    • external — ссылка с этим атрибутом будет открываться в новом окне браузера:
    • nofollow — указывает поисковым роботам не посещать страницу по этой ссылке;
    • noreferrer — скрывает информацию о том, откуда пришёл посетитель;
    • noopener — как и noreferrer, скрывает информацию о странице, с которой открыта ссылка.

    Как настроить атрибуты кнопки в Рег.сайт

    Видимость элемента на разных устройствах

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

    Для этого в блоке «Видимость» отметьте галочкой тот тип устройств, на которых вы хотите скрыть модуль, и сохраните изменения:

    Как настроить видимость кнопки для разных устройств Рег.сайт

    Теперь вы знаете, как добавить и настроить кнопку на сайте с помощью модуля Рег.сайт.

    Помогла ли вам статья?

    Спасибо за оценку. Рады помочь 😊

     👍
    Специальные предложения
    • Бесплатный хостинг для сайта
    • Дешевый хостинг
    • Бесплатный VPS-сервер
    • Дешёвые VPS
    Рассылка Рег.ру

    Лайфхаки, скидки и новости об IT

    Даю согласие на получение рекламных и информационных материалов

    Домены и сайты
    • Домены
    • Хостинг
    • Создание сайтов
    • SSL-сертификаты
    • VPS и VDS серверы
    • Whois
    • Магазин доменов
    Облако
    и IT-инфраструктура
    • Облачные серверы
    • Частное облако
    • Облачное хранилище
    • Kubernetes в облаке (K8S)
    • Облачные базы данных
    • Выделенные серверы
    Полезное
    • Стоимость услуг
    • Cпособы оплаты
    • База знаний
    • Документы
    • ЭДО
    • Партнерам
    • Сообщить о нарушении
    • РБК: новости России и мира сегодня
    • Новости компаний РФ
    • РБК Инвестиции: курсы валют
    Компания
    • О компании
    • Контакты
    • Офисы
    • Новости
    • Акции и скидки
    • Блог
    • Отзывы клиентов
    8 800 555-34-78 Бесплатный звонок по России
    +7 495 580-11-11 Телефон в Москве
    • vk
    • telegram
    • ok
    • moikrug
    • youtube
    • twitter
    • Облачная платформа Рег.ру включена в реестр российского ПО Запись №23682 от 29.08.2024
    • © ООО «РЕГ.РУ»
    • Политика конфиденциальности
      Политика обработки персональных данных
      Правила применения рекомендательных технологий
      Правила пользования
      и другие правила и политики
    • Нашли опечатку?
      Выделите и нажмите Ctrl+Enter
    • Мы используем cookie и рекомендательные технологии для персонализации сервисов и удобства пользователей. Вы можете запретить сохранение cookie в настройках своего браузера