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

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

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

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

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

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

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

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

Содержимое

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

Стиль

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

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

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

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

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

      1. Здравствуйте! А как сделать, когда нажимаешь кнопку чтобы можно было информацию увидеть. Просто не знаю какую ссылку добавить

  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
          Тогда откроется почтовая программа для отправки письма на указанный почтовый адрес.

  8. Добрый день!
    Подскажите, как сделать так, что бы по этой кнопке добавлялся товар в корзину?Такая возможность есть в версии elementor pro. А как сделать в бесплатной?

    1. День добрый. Попробуйте создать стандартную ссылку на магазин, но при этом добавить в конце /?add-to-cart=55
      где 55 это id товара
      При переходе по данной ссылке, должно произойти добавление в корзину.

  9. Добрый день !
    Подскажите пожалуйста как в одну секцию вставить текст и кнопку. Чтобы фон у них был идентичным?

  10. Добрый день, я умею делать pop up при нажатии на кнопку с помощью css id, но как мне сделать чтобы тот же pop up открывался при нажатии на кнопку в price table, потому что там уже отдельно css id не прописать? Elementor pro

    1. День добрый. А зачем прописывать на кнопку?? У кнопки есть класс elementor-price-table__button
      у виджета возможность задать отдельный класс или id виджету. Вот эти возможности и используйте.

  11. Здравствуйте! На кнопке кликабелен только текст. Как сделать кликабельной всю кнопку?

    1. Здравствуйте. На кнопке кликабелен не только текст, но и сама кнопка. Конечно, если у вас кнопка не состоит из фона блока. Тогда да, создается иллюзия, что общий фон это фон кнопки.

      1. Спасибо, поняла в чем косяк! У кнопки заливка-градиент, который можно сделать только через Фон…

        1. для заливки как градиент, нужно растягивать кнопку во всю ширину через стили, типа

          selector #butt { width: 100%; }

          где butt это ид кнопки

  12. Здравствуйте! Подскажите, пожалуйста, можно ли сделать так, чтобы в портфолио отражались не записи, а рубрики. Заранее благодарю за ответ.

    1. Здравствуйте. А как вопрос относится к виджету кнопка 🙂 Нет, нельзя. Для рубрик есть виджет Рубрики в группе вижетов WordPress

  13. как сделать кнопку «Назад страницы» не указывая все время ссылку? что бы просто шел назад на одну страницу.

    1. Стандартными средствами никак.
      Можно только только через js, например добавить такой код

      $('#button1').on('click', function() {
      history.back();
      });

  14. Здравствуйте! Столкнулся с проблемой добавления кнопки. Задаю цвет кнопки зеленый, а цвет текста — белый. Но если цвет кнопки получается изменить, то цвет текста остается черным

    1. Здравствуйте. Проблема не в конструкторе, а в вашей теме. У вас тема не стандартная? Возможно стили темы заданы так, что они переписывают все подряд и даже стили конструктора.
      Как вариант для теста, попробуйте на вкладке Расширенные виджета кнопки, в поле пользовательских стилей добавить код стилей цвета текста кнопки.
      selector .elementor-button-text { color:#fff !important; }

      1. Привет! Да, тема нестандартная. С добавлением Вашего кода проблема решилась, но не полностью. Теперь получается я задал нужные цвета когда кнопка неактивна. Но теперь при наведении на нее цвет изменяется на нужный, сам текст кнопки белый и изменить его нельзя, а цвет значка, добавленного на кнопку, черный

        1. по аналогии добавьте стили для активного состояния.
          типа selector .elementor-button-text:hover { color:#000 !important; }
          итд

  15. Значек, который добавлен на кнопку все равно остается черным, а текст становится нужного цвета, только если навести именно на него, если в другое место на кнопку — текст не видно. Нельзя так сделать, что бы просто при наведении именно на саму кнопку, не обязательно на текст, чтобы она была нужного цвета и значок такого же цвета?

    1. Можно все, но нужно написать код css. Я вам подсказываю вслепую. Откройте учебник по css и пишите стили какие угодно (для значков, текста, состояний и прочее).

  16. Подскажите плз, при добавлении блоков Elementor исчезает верхнее меню. К примеру в записи пару кнопок добавил — меню не отображается, в записях где кнопок нет — оно есть. Как быть, куда копать? Та же история была на главной — футер добавил и меню исчезло, потом убрал — все вернулось на место

    1. Нужно смотреть. У меня такого не было. А если было, разработчики решают проблему. Напишите им пример того, как не работает модуль меню в купленной версии ПРО.

  17. Добрый день! подскажите, сделал кнопку, при нажатии открывается фото. НО фото маленькое. А мышкой не дает увеличивать. Как увеличить размер открывающегося фото?
    или сделать так, чтобы увеличивать можно было мышкой?

    1. Здравствуйте. Как сделали? Покажите пример. Фото должно быть большого размера, чтобы отображалось так же.

      1. а как можно скрин прислать? сделал просто кнопку, и в нее добавил ссылку на картинку. Саму картинку сделал большой.

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

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

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

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