15 апреля, 2022

Как добавить атрибут к кнопке Elementor?

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

Я думал, что добавить атрибут к кнопке не составит труда, так как по атрибутам у нас есть замечательная статья, но на практике это оказалось не очень просто. Это связано с тем, что старом добром html кнопка обозначается тегом button, который имеет свои, только свойственные ему атрибуты:

<button> Кнопка </button>

В Элементоре же при вставке виджета Кнопки на страницу в коде он имеет следующий вид:

Как добавить атрибут к кнопке Elementor

Как видите, никакого намека на html-тег button нет. Кнопка состоит из тегов <div> и ссылки <a>. То есть, добавить атрибут к кнопке Elementor, как к кнопке на чистом html никак не получится, так как тег <button> имеет свои уникальные атрибуты, недоступные для других html-тегов.

Для примера перечислим атрибуты тега <button> (информация взята отсюда)

Атрибуты

  • accesskey — Доступ к элементам формы с помощью горячих клавиш.
  • autofocus — Устанавливает, что кнопка получает фокус после загрузки страницы.
  • disabled — Блокирует доступ и изменение элемента.
  • form — Связывает между собой форму и кнопку.
  • formaction — Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку.
  • formenctype — Способ кодирования данных формы.
  • formmethod — Указывает метод пересылки данных формы.
  • formnovalidate — Отменяет проверку формы на корректность.
  • formtarget — Открывает результат отправки формы в новом окне или фрейме.
  • name — Определяет уникальное имя кнопки.
  • type — Тип кнопки — обычная, для отправки данных формы на сервер или для очистки формы.
  • value — Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Казалось бы, ситуация неразрешимая, но мы нашли выход из положения.

Добавляем кнопку на сайт

Чтобы к кнопке можно было добавить атрибут, нужно сделать кнопку на чистом html, воспользовавшись html-виджетом Elementor.

Для этого, добавим в виджет html код простейшей кнопки:

<button
> Кнопка </button>

Не забывайте, что кнопка имеет свой тип (type), который отвечает за разные функции.

К такой кнопе без проблем можно добавить любой, свойственный ей, атрибут. Заходим раздел «Расширенные => Атрибуты» в настройках html-виджета и добавляем нужный атрибут.

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

Так же, атрибут можно прописать непосредственно в html-код:

Атрибуты кнопки Elementor

На этом все! Надеюсь, что Вам поможет эта статья! Ставим лайки!

0

Интересные статьи

Эллиптические углы в Elementor

Эллиптические углы в Elementor Элементор по умолчанию не поддерживает эллиптические углы в Elementor, хотя имеется стандартная настройка скругления углов (css-свойство border-radius), которая

Читать полностью »

Announce

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.