The Пограничное поле дает пользовательскому виджету полный набор пограничного контроля в одной капле: раскрывающийся тип границы, входные данные для каждой стороны ширины границы и средство выбора цвета границы. Внутри главных аддонов Виджет Строитель, вы добавляете поле один раз, помещаете его шорткод в ваш CSS, и любой, кто редактирует виджет в Elementor, может изменить стиль границы, не касаясь кода.
Пограничный контроль поддерживает Условия как и каждое поле, оно может оставаться скрытым до тех пор, пока не будет включен переключатель границ и вывод токенов через конструктор не будет отображен Механизм шаблонов Twig-синтаксиса. Оба руководства охватывают детали.
Поле отображается прямо на CSS border стенография. Какой бы тип, ширину и цвет ни выбрал пользователь в отпечатках панели в вашей таблице стилей, куда бы вы ни поместили токен.
Что делает Пограничное поле #
Поле Border отображает знакомый элемент управления пограничной группой Elementor на панели параметров вашего виджета. выберите виджет и отобразите три связанных элемента управления:
- Тип границы: раскрывающийся список с по умолчанию, "Нет", "Солидно", "Двойной", "Пунктир", "Прямой" и "Грув".
- Ширина границы: Входы "Вверх", "Вправо", "Вниз" и "Лево" с переключателем ссылок для установки всех четырех одновременно, а также значок устройства для адаптивных значений.
- Цвет границы: сборщик цветов с доступом к вашим глобальным цветам.
Элементы управления шириной и цветом остаются скрытыми до тех пор, пока пользователь не выберет тип границы, отличный от типа по умолчанию или "Нет", который сохраняет панель чистой, когда граница не используется. Это тот же шаблон, что и у пользователя Текстовое поле и другие поля Widget Builder: опустите поле, назовите его, используйте токен. Если вы новичок в создании виджетов, начните с Обзор виджета-строителя первый.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Пользовательский виджет, открытый в редакторе Widget Builder Наш пример - виджет заголовка с
<h2 class="border-title">в своем HTML.
Как добавить поле Граница #
В редакторе Widget Builder прокрутите панель полей слева, пока не найдете Граница поле. Он находится в нижней части списка, между фоном и текстовой тенью.
Перетащите поле "Граница" в раздел под Содержание, Стильили Продвинутый вкладка. Стиль - естественный дом для него, хотя он работает где угодно. Как только он приземлится, параметры поля откроются слева, и его короткий код появится в Документация боковая панель рядом с редактором кода.
Объяснены варианты пограничного поля #
Выберите поле Граница, чтобы открыть его настройки. Они следуют той же раскладке, что и любое другое поле Виджет Строитель.
- Этикетка: текст, показанный над элементом управления в Elementor, “Border” по умолчанию.
- Имя: уникальный идентификатор поля. Он должен содержать только буквы, цифры и подчеркивания. Имя поля
borderдает вам{{border}}шорткод. - Описание: дополнительный вспомогательный текст показан под элементом управления.
- Значение по умолчанию: граница, с которой начинается виджет, например, записанная как сокращение CSS
1px solid #333. Оставьте его пустым, и виджет будет поставляться без границ, пока пользователь не установит его. - Показать метку и Блок этикеток: стандартные переключатели этикеток, а также обычные элементы управления "Разделитель и условия" снизу.
Подключите поле к вашей CSS #
Токен поля Border принадлежит вашей таблице стилей, а не HTML. Откройте CSS вставьте и используйте его как значение border собственность на любом селекторе должна нести границу С нашим примером заголовка:
- Правило гласит
border: {{border}};внутри.border-titleселектор. - Во время рендеринга токен расширяется до полной стенографии, выбранной пользователем, например
5px solid #e02b20.
Нажмите Сохранить настройки когда правило на месте. вы можете опустить один и тот же токен на любой селектор в виджете, так что один Пограничный контроль может очертить карту, ее изображение или и то, и другое.
Используйте пограничный контроль в Элементоре #
Добавьте свой пользовательский виджет на страницу в Elementor, или перезагрузите редактор, если страница уже была открыта Выберите виджет и пограничный контроль появится на его панели с меткой, которую вы установили.
Выберите тип границы #
The Тип границы раскрывающиеся списки По умолчанию, Нет, Твердый, Двойной, Пунктирный, Пунктирный, Пунктирный, и Groove.Выберите любой тип, кроме По умолчанию или Нет и еще два элемента управления появляются под ним: Ширина границы и Цвет границы. предварительный просмотр обновляется, как только вы выбираете, поэтому выбор Пунктирный рисует пунктирный контур вокруг виджета сразу.
Установите ширину границы #
The Ширина границы управление принимает отдельные значения Верх, Правый, Нижний, и Левый. держите значок ссылки на, чтобы изменить все четыре стороны вместе, или отсоединить его для неровных границ, как толстый верх и низ с тонкими сторонами. значок устройства рядом с меткой позволяет установить различные ширины для каждой точки останова.
Выберите цвет границы #
The Цвет границы управление открывает выбор цвета Elementor. используйте значок глобуса, чтобы извлечь из ваших глобальных цветов, или выберите пользовательское значение с помощью выбора и шестнадцатеричного ввода, RGBA или HSLA.
Каждое изменение попадает в предварительный просмотр. В нашем примере заголовок имеет сплошную красную границу: 5 пикселей сверху и снизу и 3 пикселя по бокам.
Обычные случаи использования #
- Контуры карт и коробок где каждому участку нужен свой вес и цвет границы.
- Выделенные заголовки как и заголовок в рамке в этом примере.
- Каркасы изображений на виджетах команды, портфолио или продукта.
- Стили кнопок если для варианта схемы требуется редактируемая пользователем граница.
- Вызов и поля объявлений это переключение между сплошным и пунктирным стилями.
Советы по работе с полем Border #
- Поместите токен в CSS, а не в HTML. Короткий код расширяется до значения CSS, поэтому он имеет смысл только как значение свойства, например
border: {{border}};. - Установите значение по умолчанию в сокращенной форме. Что-то вроде
1px solid #333делает вид виджета законченным до того, как кто-то откроет панель. - Соедините его с бордером-радиусом. Поле охватывает тип, ширину и цвет. Добавьте поле "Размеры" или фиксированное
border-radiusправило для закругленных углов. - Помните: "Нет" - это реальный выбор. Пользователи могут отключить границу от панели, поэтому не полагайтесь на границу, чтобы скрепить макет.
- Повторно используйте токен там, где это помогает. То же самое
{{border}}value может стилизовать несколько селекторов, и все они следуют одному элементу управления.
Часто задаваемые вопросы #
Что такое поле Border в Master Addons Widget Builder?
Поле Border добавляет элемент управления пограничной группой Elementor в пользовательский виджет: раскрывающийся список Border Type, входы для каждой стороны Border Width и средство выбора цвета Border. Его короткий код печатает полученное сокращение границы CSS в таблицу стилей вашего виджета.
Где мне разместить шорткод границы?
На вкладке CSS конструктора виджетов, как значение свойства границы, В качестве границы используется поле с именем границы: {{граница}}; на селекторе, который должен нести границу. Оно не принадлежит редактору HTML.
Какие типы границ поддерживает контроль?
Выпадающий список "Тип границы" предлагает элементы управления по умолчанию, "Нет", "Солидно", "Двойной", "Пунктир", "Прямой" и "Груз". Выбор любого типа, кроме "По умолчанию" или "Нет", показывает элементы управления шириной границы и цветом границы ниже раскрывающегося списка.
Могут ли пользователи установить разную ширину границы с каждой стороны?
Да. элемент управления шириной границы имеет отдельные входы "Вверх", "Вправо", "Вниз" и "Влево". Переключатель канала меняет все четыре вместе; отсоедините его, чтобы установить неравномерные значения, например 5 пикселей сверху и снизу с 3 пикселями по бокам.
Почему я не вижу Ширина и Цвет Границы на панели?
Эти элементы управления остаются скрытыми, пока тип границы указан по умолчанию или отсутствует. Выберите сплошной, пунктирный или любой другой видимый тип, и появятся оба элемента управления. Если весь пограничный контроль отсутствует, перезагрузите редактор Elementor, чтобы он взял сохраненный виджет.
Завершая #
Поле Widget Builder Border упаковывает раскрывающийся тип границы, реагирующую ширину каждой стороны и средство выбора цвета в одно перетаскивание. Назовите поле, установите border: {{border}}; в вашем CSS, и пограничные решения перемещаются из вашего таблицы стилей и в панель Элементор, где редакторы могут обрабатывать их. Объедините его с Текстовое поле и а Делитель чтобы построить панель виджетов, которая охватывает содержание и стиль в одном месте.Исследуйте остальную часть Виджеты и расширения Master Addgetsи посмотрите страница ценообразования за то, что включает каждый план.
