Размеры

Поле "Размеры" добавляет элемент управления интервалом в четыре коробки (вверху, справа, внизу и слева, со значком ссылки и меню единиц) Elementor к пользовательскому виджету, созданному с помощью главных аддонов Виджет Строитель. Используйте его всякий раз, когда заполнение, поле, ширина границы или радиус угла должны быть установлены на панели Elementor, а не зафиксированы в вашем CSS.

Размеры - это поле Pro. бесплатный плагин включает ограниченный конструктор виджетов, и полный набор полей поставляется с Мастер Аддоны Про.

Что делает поле Размеры #

• Он показывает четыре числовых поля на панели Элементор. с включенным значком ссылки, ввод в одном поле заполняет все четыре.
• Единичное меню позволяет редакторам переключаться между разрешенными вами единицами, такими как px, em и %.
• Вы можете скрыть стороны, которые вам не нужны. Поле заполнения кнопок может отображаться только справа и слева.
• Elementor записывает для вас CSS через строки CSS Selectors поля, включая отдельные значения для каждого устройства, когда включено адаптивное управление.

Если вы еще не создали виджет, прочтите Обзор виджета-строителя первый.

Прежде чем начать #

• WordPress с установленным и активным элементом Elementor.
• Мастер-аддоны для Elementor и Master Addons Pro, оба активные. The руководство установки настройка обложек.
• Виджет, открытый в Widget Builder Пример в этом руководстве - виджет “Pricing Card” с a price-card коробка и а price-btn кнопка и три поля размеров: заполнение карты, радиус карты и набивка кнопки.

Как добавить поле Размеры #

1. Перейти к Мастер-аддоны > Виджет-строитель и откройте виджет.
2. Нажмите « Стиль вкладка и добавить раздел, например “Card Spacing”.
3. Тип dimensions в поле поиска слева.
4. Драг Размеры в раздел Его настройки открываются в левой боковой панели.

Объяснены параметры поля размеров #

Вот поле "Набивка карты":

• Этикетка является ли текст над полями в Elementor, например “Card Padding”.
• Имя является уникальным идентификатором поля. Буквы, цифры и подчеркивания только.
• Описание появляется под контролем в Elementor.
• Разрешенные размеры имеет четыре кнопки со стрелками сверху, справа, снизу и слева. нажмите стрелку, чтобы выключить эту сторону. В Элементоре сторона, которая выключена, отображается как серая коробка, которую невозможно отредактировать.
• Тип свойства предлагает Пользовательские, Маржа, Набивка, Ширина границы и Радиус границы. Выберите один и строитель заполняет в строке CSS Селекторы для этого свойства (подробнее об этом ниже).Ширина границы также добавляет border-style: solid.
• Размер Единицы списки единиц, которые могут выбрать редакторы Новое поле позволяет px, %, em, rem, vh и vw. Удалите те, которые не имеют смысла для вашего дизайна.
• Значение по умолчанию имеет четыре поля для стартового верхнего, правого, нижнего и левого значений.

Полю "Набивка кнопки" нужно только влево и вправо, поэтому стрелки вверху и внизу выключены:

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

Подключите поле с помощью CSS Selectors #

Каждый Селекторы CSS ряд имеет Селектор CSS (какой элемент стиля) и Свойства CSS (правило для записи). когда вы выбираете Padding в качестве типа свойства, строка начинается так:

CSS Selector:   {{WRAPPER}}
CSS Properties: padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};

{{WRAPPER}} сам по себе означает весь виджет. измените его на нужный элемент, например .price-card. Ты можешь уйти {{WRAPPER}} вышел, потому что конструктор добавляет его перед селектором, чтобы правило оставалось внутри этого виджета.

В свойствах CSS, {{TOP}}, {{RIGHT}}, {{BOTTOM}} и {{LEFT}} заменяются цифрами из четырех коробок, и {{UNIT}} с выбранным блоком. с установленным на Пользовательский тип свойства, вы пишете правило самостоятельно. поле Набивка кнопки использует только две стороны:

CSS Selector:   .price-btn
CSS Properties: padding-right: {{RIGHT}}{{UNIT}}; padding-left: {{LEFT}}{{UNIT}};

Нажмите Добавить элемент чтобы применить то же значение к другому элементу со второй строкой.

Две вещи, которые нужно знать. Сингл Селектор поле рядом с нижней частью общих настроек ничего не делает для поля Размеры, поэтому всегда используйте строки Селекторы CSS. и выбор типа свойства заполняет поле Свойства CSS для вас, поэтому выберите его первым и проверьте строки еще раз, если вы переключите его позже.

Вместо этого используйте значения в своем шаблоне #

Вы также можете распечатать значения непосредственно на вкладке HTML или CSS. Поле держится top, right, bottom, left и unit, поэтому напишите каждую сторону, за которой следует единица измерения:

.price-card {
  padding: {{ card_padding.top }}{{ card_padding.unit }} {{ card_padding.right }}{{ card_padding.unit }} {{ card_padding.bottom }}{{ card_padding.unit }} {{ card_padding.left }}{{ card_padding.unit }};
}

Голый {{ card_padding }} ничего не печатает Для большинства виджетов строки CSS Selectors являются лучшим выбором, так как Elementor пишет отдельное правило для каждого устройства, когда включено Responsive Control.

Нажмите Сохранить настройки когда закончишь.

Используйте управление размерами в Elementor #

Добавьте виджет на страницу, или перезагрузите редактор, если страница уже была открыта Выберите виджет и откройте Стиль вкладка. В каждом поле "Размеры" показаны четыре поля с надписями "Сверху", "Вправо", "Снизу" и "Влево", значок ссылки и меню "Единица" в правом верхнем углу. Накладка кнопки показывает "Сверху" и "Снизу" серым цветом.

Введите номер и сразу обновляет карту. щелкните значок ссылки, чтобы отвязать стороны и придать каждой свою ценность, как это делает заполнение карты здесь с 64 сверху и снизу и 56 по бокам. Используйте меню единиц, чтобы переключаться между разрешенными единицами.

Обычные случаи использования #

• Внутренняя подкладка для карт, коробок и баннеров.
• Поля между частями виджета, например пространство под заголовком.
• Радиус угла на картах, изображениях и кнопках с использованием типа свойства Border Radius.
• Набивка левой и правой кнопки, с выключенными верхней и нижней сторонами.
• Ширина границы на каждую сторону с использованием типа свойства Border Width.

Советы по работе с полем Размеры #

• Всегда меняйте селектор CSS с {{WRAPPER}} к вашему элементу. как бы то ни было, интервал относится ко всей обертке виджета.
• Обрежьте единицы размера на те, которые вы хотите использовать редакторам. px и em покрывают большую часть интервалов.
• Выключите стороны, которые не применяются. это останавливает редакторов от установки значений, которые не имеют никакого эффекта.
• Установите значение по умолчанию, соответствующее вашему дизайну, чтобы виджет выглядел правильно, как только он будет добавлен.
• Будьте осторожны с % для заполнения и маржи Браузеры рассчитывают процентное заполнение от ширины элемента, даже для верхней и нижней.
• Для одного значения, такого как размер пробела или значка, Поле слайдера проще.

Часто задаваемые вопросы #

Завершая #

Выберите тип свойства, укажите строку CSS Selectors на свой элемент, обрежьте блоки и стороны и установите разумный дефолт. Затем редакторы получают тот же контроль интервала, который они знают из собственных виджетов Elementor. остальную часть стиля коробки см Граница и Фон поля и проверка ценообразование за то, что включает каждый план.