Шрифт

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

Поле Шрифт поддерживает Условияудобно раскрывать его только тогда, когда включен переключатель “custom typography”, и его значение печатается через Механизм шаблонов Twig-синтаксиса в ваш CSS. Оба руководства охватывают настройку и ограничения.

В отличие от Типографское поле, который работает через селектор и не имеет токена шаблона, поле Шрифт ЯВЛЯЕТСЯ полем токена Вы пишете font-family управляйте собой на панели CSS и распечатайте в ней значение поля. эта разница решает, какое из двух полей нужно данному виджету.

Что делает поле Шрифт #

• Отдает раскрывающееся семейство шрифтов на панели Elementor виджета, перечисляя системные шрифты и Google Fonts.
• Хранит выбранное семейство, например, в виде простой струны Lora или Georgia.
• Печатает эту строку {{ your_field_name }}обычно внутри а font-family правило на панели CSS.
• Контролирует ровно одно свойство. размер, вес, расстояние, а остальное остается в вашей таблице стилей или в отдельных элементах управления.
• Принимает фамилию по умолчанию, поэтому виджет поставляется с преднамеренным шрифтом.

Виджет еще не построили? Обзор виджета-строителя это место, где можно начать перед документами на уровне поля.

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

• WordPress с Элементор установлен и активен.
• Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
• Пользовательский виджет, открытый в редакторе Widget Builder Наш пример - виджет с pull-quote и полем Шрифт с именем quote_font это меняет только шрифт текста цитаты.

Как добавить поле Шрифт #

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

Объяснены параметры поля шрифта #

Список опций короткий, что является точкой поля:

• Этикетка: текст, показанный рядом с раскрывающимся в Elementor, например “Quote Font”.
• Имя: уникальный идентификатор, на который ссылаются ваши шаблоны Буквы, цифры и подчеркивания только, например quote_font.
• По умолчанию: например, строка имени семьи, с которой начинается виджет Georgia. Выберите что-нибудь, что хорошо отображается, прежде чем кто-нибудь коснется элемента управления.

Подключите поле "Шрифт" на панели CSS #

Поле "Шрифт" - это поле токена, а панель CSS - это место, где принадлежит его токен. Распечатайте значение внутри a font-family управляйте и всегда следуйте ему с помощью резервного стека:

/* CSS panel */
.pq-quote {
  font-family: {{ quote_font }}, Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.4;
}

Токен переходит к выбранной фамилии, поэтому становится приведенное выше правило font-family: Lora, Georgia, serif; когда редактор выбирает Лору. Размер и высота строки остаются вашими; элемент управления меняет только шрифт.

Токен также работает на панели HTML, например, в условном условии, которое переключает класс, когда конкретное семейство активно, но CSS является для него практичным домом.

Осторожно: выбор шрифта Google в этом раскрывающемся списке не загружает файл шрифта. в отличие от управления группой "Типография", поле "Шрифт" не автоматически ставит в очередь шрифты Google, поэтому выбранный веб-шрифт отображается в качестве запасного варианта, если сайт не загружает его каким-либо другим способом. Либо виджет загружает сам шрифт, работает небольшой инжектор JS-панели, который добавляет ссылку на таблицу стилей шрифтов Google, либо ограничивает ожидания стеками шрифтов, которые уже есть на сайте. Этот резервный стек после токена не является дополнительным украшением; это то, что посетители видят всякий раз, когда семейство не загружено.

Минимальный загрузчик в панели JS выглядит так

// JS panel
var fam = "{{ quote_font }}";
if (fam && !document.getElementById("pq-font")) {
  var l = document.createElement("link");
  l.id = "pq-font";
  l.rel = "stylesheet";
  l.href = "https://fonts.googleapis.com/css2?family=" +
           encodeURIComponent(fam) + "&display=swap";
  document.head.appendChild(l);
}

Одна тонкость в этом загрузчике: getElementById защитите клавиши на фиксированном идентификаторе, поэтому, если один и тот же виджет появляется дважды на странице с двумя разными семействами, загружается только шрифт первого экземпляра. второй молча падает назад. если несколько экземпляров на странице являются реалистичным сценарием для вашего виджета, вместо этого создайте идентификатор из фамилии.

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

Добавьте свой пользовательский виджет на страницу в Elementor, или перезагрузите редактор, если страница уже была открыта Поле Шрифт отображается как раскрывающееся под вашей меткой; откройте его, и семейный список можно искать по мере ввода.

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

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

• Виджеты цитат и отзывов где только текст цитаты меняет шрифт.
• Декоративные заголовки в виджетах героев и баннеров текст тела остается нетронутым.
• Монограмма, капсюль и элементы этикетки у них есть одно лицо дисплея.
• Виджеты, которые предоставляют единый выбор бренда не открывая клиентам полную типографскую панель.
• Условное переключение классов, сравнивая значение на панели HTML, когда одной семье нужны дополнительные правила интервала между буквами.

Советы по работе с полем Шрифт #

• Всегда пишите резервный стек. font-family: {{ quote_font }}, Georgia, serif; сохраняет виджет читаемым, когда выбранный шрифт не загружен.
• Помните, что автоочереди нет. Для выбранных здесь шрифтов Google нужен загрузчик в виджете или сайт, который уже их загружает; это один острый край поля.
• Досягайтесь на типографику, когда вам нужно больше. Размер, вес, расстояние, адаптивные значения и автоматическая загрузка шрифтов относятся к Типографское поле. Шрифт предназначен только для семейного случая.
• Установите настоящий Дефолт. Явная стартовая семья бьется, наследуя все, в чем каскадно каскадирует тема.
• Сохраните токен в CSS. Одно правило на панели CSS легче поддерживать, чем встроенные атрибуты стиля, разбросанные по HTML.
• Не ждите здесь ярлыка "Выбор". Естественная проводка для этого поля - это собственный жетон font-family правило, когда вы также контролируете запасные части.

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

Завершая #

Поле "Шрифт конструктора виджетов" выполняет одну работу с очень небольшой поверхностью: раскрывающийся семейный файл на панели, строковый токен на вашей панели font-family правило, и полный контроль над запасными частями, оставленными в ваших руках. загрузите шрифт, когда вы предлагаете семейства Google, и поднимитесь к Типографское поле когда виджету нужна полная панель текстового стиля Исследуйте остальную часть Виджеты и расширения Master Addgetsи посмотрите страница ценообразования за то, что включает каждый план.