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

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

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

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

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

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

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

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

Содержимое

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

Стиль

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

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

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

  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 товара
      При переходе по данной ссылке, должно произойти добавление в корзину.

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

  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. У вас срабатывает лайтбокс. Отключите его в настройках элементора.
              Или делайте пропорциональное изображение, а не вытянутое в высоту.
              Или расположите изображение на отдельной странице и ставьте ссылку именно на страницу.

  18. Здравствуйте. Если растянуть кнопку по ширине, то кнопка растянется по всей колонке, а текст кнопки встает посередине. Можно ли сделать, чтобы текст стоял сбоку, а кнопка была кликабельна по всей ширине колонки? Как здесь http://www.vesta-med.ru/services/priem_specialistov/
    Спасибо.

    1. Здравствуйте. Да, можно. Для этого на вкладке Расширенные, в поле Пользовательские CSS добавить стиль
      selector .elementor-button { text-align: left; }

  19. Добрый день! Создала копки с алфавитом. Поместила запись на букву «А»-при клике на кнопку открывается нормально. Также сделала на «Б», ссылка соответствующая. Но при клике на кнопку открывается страница сайта с надписью, Ой, а такой страницы нету! Хотя страница опубликована, не через кнопку открывается нормально.

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

  20. Добрый день! Elementor PRO, тема Astra.
    Добавила кнопку с popup. Работает только в 1 клик. То есть, если нажать на кнопку → закрыть Попап → вновь нажать на кнопку = не открывается Попап.
    Открыть заново Попап можно, перезагрузив страницу.
    В чем причина? Как починить?
    Заранее спасибо!

    1. Здравствуйте. Вам необходимо написать в поддержку Elementor для решения данной проблемы.

  21. Добрый день!
    Установила Ваш плагин.
    На холсте добавила секции, но виджеты в них перетащить не могу…. В чем может быть проблема?

    1. День добрый. Именно виджет Кнопка (данная статья про данный виджет) или любой? Если любой, то попробуйте через другой браузер или предварительно нажать CTRL+F5 для обновления кеша браузера. Так же, посмотрите, последняя версия вордпресс у вас или совсем старая? Шаблон стандартный или какой то (или гдето) скаченный? Перед установкой никаких ошибок небыло? Требованиям установки соответствует? https://blog.web5x.ru/sistemnie-trebovaniya-elementor/

    1. Конечно. На вкладке Стиль, скругление улов ставим в 50 и отступ например тоже 50.

  22. Добрый день!
    Есть кнопка, стиль при наведении отличается от обычного, после нажатия на нее, она остается такой же как при наведении. Как можно это исправить?

    1. День добрый. Лучше конечно глянуть на ту самую кнопку. Гадать очень сложно.
      Если тема по умолчанию то проблем быть вообще не должно. Если тема не стандартная, то возможно какой то лишний стиль, который нужно изучить и устранить.

    1. На вкладке Расширенные у виджета, вы можете добавить кнопке свои стили. Вам нужно изменить поведение псевдокласса focus, например так
      selector .elementor-button:focus {
      color: #000 !important;
      background-color: #ddd !important;
      }

  23. Добрый день! Как настроить переброс по кнопке в нижнюю часть той же страницы? Надо ввести адрес элемента, а где его найти?

    1. Адрес элемента это текущий адрес страницы + его id. которое можно задать в нужном виджете (или секции ) на вкладке Расширенные >> поле CSS ID . Для этих целей удобно пользоваться виджетом Якорь меню https://blog.web5x.ru/yakor-menu-widget-elementor/

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

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

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