Web5X - Готовые сайты

Блог о создании сайта, конструкторе сайтов и Elementor

кнопка конструктора веб сайта

Кнопка — виджет Elementor

Кнопка это просто необходимый виджет. Последнее время все больше и больше сайтов просто не могут обойтись без кнопок это и призыв к действию, блок с товаром или услугой, ссылка на услугу итд. А в конструкторе сайта без него просто невозможно быстро сделать сайт.

После размещения виджета у вас появится возможность изменить кнопку по своему желанию т.е изменить размер, отступы, поставить иконку, поменять цвет итд. На рисунке ниже показан вид кнопки по умолчанию и несколько вариантов кнопок которые делаются настройками виджета.

кнопка в конструкторе страниц Elementor

А теперь перейдем к свойствам виджета Кнопка

Содержимое

  • Тип — выбор типа кнопки, а точнее ее цветовое оформление. Представлены 5 типов : по умолчанию, Информация ,Успех,  Предупреждение, Опасность. В зависимости от типа и меняется цвет.
  • Текст — текст на кнопке
  • Ссылка — ссылка для кнопки (доступны доп параметры при нажатии на шестиренку)
  • Выравнивание — выравнивание кнопки. Если выравнять кнопку по ширине, то она растянется во всю ширину колоки.
  • Размер — предустановленные размеры кнопки от маленького до очень большого.
  • Иконка — иконка на кнопке. Возможно выбрать отображение до или после текста. Размер иконки зависит от размера текста.

Стиль

  • Типографика — общая типографика для текста и иконки кнопки
  • Цвет текста — цвет текста для кнопки
  • Цвет фона — цвет фона кнопки
  • Тип границы — тип границы кнопки
  • Скругление углов — скругление углов у кнопки.  0 для кнопки с прямыми углами и
  • Тень объекта — добавление тени для кнопки
  • Отступ внутри — отступ внутри кнопки (отступ от текста внутри кнопки)

=======================================================================
Список всех виджетов Elementor вы можете посмотреть на странице Виджеты
=======================================================================

Кнопка — виджет Elementor: 18 комментариев

  1. Добрый день!
    Спасибо вам за ваг сайт, подскажите я все не могу разобраться, как настроить саму форму обратной связи,то есть когда на кнопку нажимаешь- структурировать строчки заполнения обратной связи???

    1. Здравствуйте. Наверно вы про этот виджет https://blog.web5x.ru/formi-widget-elementor-pro/
      Вот там у каждого элемента (поля формы) втч и конпки отправить, есть свойство «Ширина колонки». Вот это свойство и поможет вам структурировать поля и кнопки обратной связи. Укажите например 50% для поля и 50% для кнопки. В итоге будет на одной строке и поле и кнопка.

  2. Здравствуйте. Нужна помощь. Вставляю ссылку в кнопку. Она перестает работать.
    А вручную не знаю в каком файле искать эту запись.

    1. Здравствуйте. Поясните, как это перестает работать? На вновь созданной странице пробовали виджет? Элементор обновленный? Тема по умолчанию? Никаких варезных модулей и шаблонов не установлено?

  3. Здравствуйте. Задал нужный мне размер кнопки (в elementor показывает нужный мне размер), но когда захожу на сайт кнопка уменьшается. Можно ли как-то задать точный размер?

    1. Здравствуйте. Настройками точный размер указать можно в пользовательских css (вкладка виджета Расширенные, при условии версии ПРО)
      Написав такой код
      selector .elementor-button { width: 300px; }
      получите фиксированную ширину.

      А вообще странно. Лучше глянуть на сайт, чтобы понять кто виноват. Возможно тема у вас какая то хитрая, что переписывает стили элементора. Или возможно вы не обновили кеш браузера и вы видите просто старые данные. Попробуйте нажать CTRL+F5 при просмотре сайта.

  4. Подскажите, а можно из этой кнопки как-то сделать кликабельный номер телефона?

  5. Здравствуйте ! Word Press/Установила Quform форму обратной связи. Нарисовала кнопку. Не могу связать кнопку с Quform. Предполагаю, что в свойствах Кнопка нужно вставить ссылку ? только какую ? Спасибо

    1. Здравствуйте. А разве вызов формы по ссылке возможен в данном плагине?
      Саму форму вы можете вызвать и без кнопки, вставив шорткод типа [quform id=»497″ name=»hgfhg»] в виджет шоткода элементора.

      Если вам нужно вызвать именно по кнопке, то необходимо разместить форму на отдельной странице, а в виджете кнопка, просто поставить сслку на данную страницу.

      Если у вас на сайте данная форма уже выводится где то внизу, то необходимо дать секциисвой id на вкладке расширенные, а в виджете кнопка задать ссылку типа http://site.ru/stranica#mycontact где mycontact это id секции.

      1. А вообще, лучше пользоваться виджетом Форма, который есть в элементор в версии про, а не варезным quform 😉

  6. Как вставить функцию , задать цель на кнопке для яндекс метрики через функцию

    Где найти исходный файл страницы елементор?
    Как вставить код onclick=»yaCounterXXXXXX.reachGoal(‘TARGET_NAME’) в функцию кнопки? Спасибо

    1. В таких случаях обычно отвечают «Изучайте JS». Т.е это задача не элементора, а ваших знаний. Для цели, вы можете попробовать вставить js код в html виджет

      например такой

      script type="text/javascript"
      $('#mybutton').on('click', function() {
      yaCounterCOUNTER_ID.reachGoal('TARGET_NAME')
      });
      /script

      (только теги script правильно напишите. Я удалил обертку <> , чтобы в комментариях показались.)

      при это на кнопке во вкладке расширенные не забыть создать id кнопки.

      Или можете воспользоваться любым плагином wordpress который может вставить js код в подвал сайта и тоже вставить указанный код.

      Исходный файл страницы elementor? Нет, его не найти, он же в базе данных.

  7. Здравствуйте!
    Подскажите, а как из этой кнопки сделать кликабельную отправку сообщения?

    1. Здравствуйте. Почему именно к этой кнопке? И какое сообщение хотите отправлять? Например можно сделать ссылку на форму связи и там уже отправлять сообщение.
      Если используется какой то плагин обратной связи и который умеет вешать события на кнопки, то можно на нее повесить. Обычно в плагине указывается id кнопки. Этот id можете указать на вкладке расширенных настроек виджета.

      А так, для отправки сообщения лучше использовать виджет Форма https://blog.web5x.ru/formi-widget-elementor-pro/

        1. Ясно. В поле ссылки просто пишем mailto:anna@mail.ru
          Тогда откроется почтовая программа для отправки письма на указанный почтовый адрес.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Блог о создании сайта, конструкторе сайтов и Elementor.
Авторские права © 2018 . Все права защищены.
Готовые сайты на web5x.ru
Политика конфиденциальности