Размеры

The Поле размеров дает пользовательскому виджету знакомый четырехвходовой элемент управления интервалом с вкладки Elementor Advanced: верхнее, правое, нижнее и левое значения со значком ссылки, который сохраняет их синхронизацию Внутри главных аддонов Виджет Строитель, это поле, к которому вы обращаетесь всякий раз, когда заполнение, поле или радиус границы по углам должны быть редактируемыми с панели, а не жестко закодированными в вашей таблице стилей.

Как и любой элемент управления Widget Builder, Dimensions поддерживает Условия, так что вы можете раскрыть параметры интервала только когда они применяются. вывод токена по строителю проходит через Механизм шаблонов Twig-синтаксиса; оба руководства охватывают детали и ограничения.

Сохраняемое им значение несет все четыре стороны плюс единицу, и ваша панель CSS печатает каждую часть по имени. Получение этого права написания - это весь трюк, и есть одно поведение, специфичное для этого поля, которое стоит знать, прежде чем вы его подключите: простое поле селектора строителя ничего не делает для управления измерениями.

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

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

Если вы раньше не создавали виджет, Обзор виджета-строителя охватывает основы; начните там.

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

• WordPress с Элементор установлен и активен.
• Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
• Пользовательский виджет, открытый в редакторе Widget Builder Наш пример - виджет ценовой карты, чей .price-card box должен позволять редакторам устанавливать внутреннюю подкладку.

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

Откройте панель полей слева от редактора Widget Builder и найдите Размеры поле, указанное вместе с другими полями значений CSS, такими как Slider.

Перетащите его в раздел под Стиль таб, обычный дом для контроля интервалов. как только он приземлится, варианты поля откроются слева.

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

• Этикетка: текст рядом с элементом управления в Elementor, например “Card Padding”.
• Имя: например, уникальный идентификатор, к которому относится ваш CSS, буквы, цифры и подчеркивания pad.
• По умолчанию: начальное значение, удерживающее верхнюю, правую, нижнюю, левую, единицу измерения и то, начинают ли стороны соединяться.
• Размер единиц: блоки, между которыми пользователь может переключаться, например px, % и em.
• Допустимые размеры: какие входы появляются. “All” показывает четыре стороны; “horizontal” показывает только влево и вправо; “vertical” показывает только сверху и снизу; пользовательский список выбирает определенные стороны.
• Отзывчивый: добавляет значок устройства, чтобы рабочий стол, планшет и мобильный телефон сохраняли отдельные значения.
• Описание, отображение метки, разделителя и условий здесь работают так же, как и в любом другом поле.

Подключите значение "Размеры" к CSS #

Хранимое значение представляет собой массив с ключами top, right, bottom, left, unitи isLinked. На панели CSS укажите все четыре стороны и повторите единицу после каждой:

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

При 24 на каждой стороне и выбранном px правило отображается как padding: 24px 24px 24px 24px;. Отсоедините стороны панели, и каждый токен будет иметь свой номер. Тот же шаблон охватывает margin и, бок о бок за угол, border-radius. Одна причуда CSS, которую стоит запомнить, если вы предлагаете % как единицу: процентное заполнение разрешается против ширины элемента, даже сверху и снизу, и редакторы этого не будут ожидать.

Осторожно: поле Selector конструктора не выдает свойства CSS по умолчанию для элемента управления Dimensions, поэтому его заполнение ничего не дает. Запишите стороны на панели CSS, как указано выше, или определите полные записи селекторов, содержащие полное свойство; опция простого селектора не является ярлыком для этого поля.

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

Бросьте свой собственный виджет на страницу в Elementor или перезагрузите редактор, если страница уже была открыта; новые элементы управления никогда не отображаются на вкладке устаревшего редактора. Элемент управления отображается с четырьмя входами, переключателем устройств и значком ссылки в его углу.

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

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

• Карта и коробка заполнения, единственный наиболее распространенный элемент управления интервалом в пользовательских виджетах.
• Поля раздела и обертки таким образом, редакторы могут настраивать вертикальный ритм между блоками.
• Радиус границы по углам, используя четыре значения в качестве углов вместо сторон.
• Набивка пуговиц, часто с разрешенными размерами, ограниченными горизонтальными.
• Смещения медиа, подталкивая изображение или значок со значениями полей.

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

• Расскажите каждую сторону и единицу. Соединение панели CSS состоит из четырех токенов плюс четырех токенов; голый {{ pad }} печатает ничего полезного.
• Пропустите простое поле "Выбор". Он не излучает никаких свойств для Dimensions.CSS панель, или полный селектор запись, является рабочим маршрутом.
• Ограничьте стороны, когда недвижимость требует этого. Управление только по горизонтали сохраняет честность поля набивки кнопок.
• Установите связанный по умолчанию. Начало с равных связанных сторон дает редакторам разумную базовую линию и один вклад для размышления.
• Сохраняйте базовый интервал в таблице стилей. Виджет должен выглядеть прямо при первой же падении; затем управление корректируется оттуда.
• Включите "Ответственно" для заполнения и запаса. Расстояние между рабочими столами редко выдерживает контакт с экраном телефона.

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

Завершая #

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