The Типографское поле дает пользовательскому виджету точно такую же панель типографики, которую используют основные виджеты Elementor: семейство шрифтов с Google Fonts, размер, вес, трансформация, стиль, украшение, высота строки, расстояние между буквами и интервал между словами, все они реагируют на каждое устройство. Внутри главных аддонов Виджет Строитель, вы добавляете поле один раз, указываете его на селектор CSS, и любой, кто редактирует виджет в Elementor, может изменить стиль текста, не касаясь кода.
Как и любой элемент управления Widget Builder, Typography поддерживает Условия, так что вы можете держать его скрытым до тех пор, пока не будет включен пользовательский переключатель стиля. Вывод токена по строителю проходит через Механизм шаблонов Twig-синтаксиса; оба руководства охватывают детали и ограничения.
В отличие от текстовых или цветовых полей, поле "Типография" не использует короткий код в вашем CSS. Вы указываете полю, каким селектором оно управляет, и Elementor самостоятельно записывает стили типографики в этот селектор. Одно поле, один селектор, сделано.
Что делает область типографики #
Поле "Типография" отображает управление группой типографики Elementor на панели параметров вашего виджета. когда кто-то выбирает виджет и нажимает значок карандаша рядом с меткой поля, открывается поповер с полным набором элементов управления текстом:
- Семейство шрифтов: раскрывающийся список с возможностью поиска с системными шрифтами, шрифтами Google и любыми пользовательскими шрифтами, зарегистрированными на сайте.
- Размер шрифта: ползунок и ввод с блоками px, em, rem и vw, реагирующими на каждое устройство.
- Вес шрифта: от 100 до 900 плюс нормальный и жирный шрифт.
- Преобразование, стиль и украшение: верхний и нижний регистр, курсив и наклон, подчеркивание и сквозное строчное.
- Высота строки, расстояние между буквами и расстояние между словами: каждый со своим собственным отзывчивым входом.
Значок глобуса тоже есть, поэтому виджет может следить за сайтом Глобальные шрифты предустановки вместо разового стиля. это следует той же схеме, что и другие поля Widget Builder: опустите поле, назовите его, подключите его. Единственное отличие состоит в том, как он соединяется, через селектор вместо короткого кода. если вы новичок в создании виджетов, начните с Обзор виджета-строителя первый.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Пользовательский виджет, открытый в редакторе Widget Builder Наш пример - виджет героя ресторана с
<h1 class="bfh-title">заголовок и а<p class="bfh-lede">вступительный абзац в HTML.
Как добавить поле Типографика #
В редакторе Widget Builder прокрутите панель полей слева, пока не найдете Типографика поле, указанное вместе с другими полями групп стилей.
Перетащите поле "Типография" в раздел под Содержание, Стильили Продвинутый вкладка. Стиль - естественный дом для него, хотя он работает где угодно. Как только он приземлится, варианты поля откроются слева.
Объяснены варианты поля типографики #
Выберите поле "Типография", чтобы открыть настройки.
- Этикетка: текст, показанный рядом с элементом управления в Elementor, “Typography” по умолчанию С несколькими полями типографики в одном виджете, использовать имена, как “Title Typography” и “Button Typography”.
- Имя: уникальный идентификатор поля Он должен содержать только буквы, цифры и подчеркивания, например
title_typography. - Описание: дополнительный вспомогательный текст показан под элементом управления.
- Селектор: селектор CSS стили типографики применяются к. Это единственная настройка, которая заставляет поле работать, рассмотренная в следующем разделе.
- Значение по умолчанию: опционально свяжите поле с одним из предустановок Global Fonts от Elementor (Глобальные шрифты) с Primary, Secondary, Text или Accent. затем виджет начинается с этого примененного предустановки, а затем следует за ним, если глобальные шрифты сайта изменяются.
- Показать метку и Сепаратор: стандартный дисплей переключается, а также условия, расположенные ниже для отображения поля только тогда, когда другой элемент управления имеет определенное значение.
Направьте поле на селектор #
Вот та часть, которая сбивает людей с толку, если они привыкли к другим полям: в области типографики нет {{shortcode}} для вашего CSS. Значение типографики - это целый набор свойств, а не одно значение, поэтому оно не может быть напечатано в одном объявлении CSS. Вместо этого вы заполняете Селектор опция и Элементор генерируют стили для вас.
Для вступительного абзаца героя селектором является
{{WRAPPER}} .bfh-lede
{{WRAPPER}}расшифровывается как собственный контейнер виджета, поэтому стили только когда-либо попадают в этот виджет и никогда не просачиваются на остальную страницу Всегда запускайте селектор с него..bfh-ledeявляется ли элемент внутри вашего виджета HTML, который должен стилизовать элемент управления.- Чтобы управлять несколькими элементами с одним управлением, разделите селекторы с запятыми и дайте каждому свое
{{WRAPPER}}:{{WRAPPER}} .bfh-title, {{WRAPPER}} .bfh-lede.
Если оставить Селектор пустым, поле возвращается ко всему контейнеру виджета, который стилизует каждый фрагмент текста в виджете сразу. обычно это больше, чем вы хотите. Установите селектор, затем нажмите Сохранить настройки.
Ваш стильный лист на вкладке CSS продолжает работать как стартовый вид виджета. Что угодно font-family или font-size вы написали там, остается на месте, пока пользователь не выберет что-то в панели, значения элемента управления затем переопределяют его.
Используйте элемент управления типографикой в Elementor #
Добавьте свой пользовательский виджет на страницу в Elementor или перезагрузите редактор, если страница уже была открыта. выберите виджет, и элемент управления типографикой появится на его панели с установленной меткой, значком глобуса для глобальных шрифтов и значком карандаша для пользовательских значений.
Выберите семейство и размер шрифтов #
Нажмите значок карандаша, чтобы открыть поповер типографики. The Семья выпадающий поиск системных шрифтов и полной библиотеки Google Fonts по мере ввода. Ниже, Размер принимает значение в px, em, rem или vw, и значок устройства позволяет установить другой размер для каждой точки останова — заголовок рабочего стола 96px может упасть до 48px на телефонах с того же элемента управления.
Установите вес, расстояние и все остальное #
Тот же поповер держится Вес, Преобразовать, Стиль, Украшение, Высота линии, Промежуток букви Интервал слов. Каждое изменение попадает в предварительный просмотр, поэтому вы можете наблюдать, как заголовок подтягивается, когда вы опускаете интервал между буквами. Если кажется, что ничего не меняется, проверьте, действительно ли ваш селектор соответствует элементу в виджете HTML; опечатка в имени класса бесшумно не работает.
Или следите за Global Fonts сайта #
Нажмите на значок глобуса вместо этого и выберите Первичный, Вторичный, Текст, или Акцент Текст виджета теперь следует за тем глобальным предустановленным, и когда редизайн меняет местами шрифты сайта, этот виджет следует, никто не касаясь его Если вы устанавливаете Значение по умолчанию на поле, эта ссылка уже активна, когда виджет впервые падает на странице.
В нашем примере заголовок меняется на лицевую сторону сценария с разрешением 98px, выбранным прямо из списка шрифтов Google, а предварительный просмотр перерисовывает момент загрузки шрифта.
Обычные случаи использования #
- Заголовки в виджетах героев и баннеров где каждый сайт хочет свой собственный шрифт дисплея.
- Кнопки это необходимо для соответствия существующей типографике кнопок сайта.
- Названия карт и отрывки с отдельными полями для каждого, поэтому заголовки и основной текст масштабируются независимо.
- Виджеты отзывов и цитат где цитата имеет курсивную засечку, а атрибуция остается в основном шрифте.
- Виджеты, обращенные к клиенту где редакторам следует свободно перестилать текст, даже не открывая CSS.
Советы по работе с полем Типографика #
- Опция "Выбор" - это все соединение. Не существует короткого кода типографики, который можно было бы вставить в CSS ♪ установить селектор и позволить Элементу записывать стили.
- Всегда запускайте селектор с
{{WRAPPER}}. Без него стили применимы к каждому совпадению на странице, а не только к вашему виджету. В списке, разделенном запятыми, каждая часть нуждается в своем{{WRAPPER}}. - Сохраняйте свои базовые стили на вкладке CSS. Это то, как выглядит виджет на свежем падении; элемент управления переопределяет только то, что на самом деле меняет пользователь.
- Одно поле на роль текста. Поле заголовка, поле тела и поле кнопки дают редакторам чистый контроль. Одно поле, направленное на весь виджет, выравнивает все в одном стиле.
- Используйте глобальные шрифты по умолчанию для клиентских сайтов. Привязка поля к Первичному или Вторичному поддерживает пользовательские виджеты в ногу с системой проектирования сайта с первого дня.
Часто задаваемые вопросы #
Что такое область типографики в Master Addons Widget Builder?
Поле "Типография" добавляет полный контроль типографской группы Elementor к пользовательскому виджету: семейство шрифтов с шрифтами Google, отзывчивый размер, вес, преобразование, стиль, оформление, высота строки, интервал между буквами и интервал между словами. Вы указываете на селектор CSS, и Elementor применяет выбранные стили к этому селектору.
Где находится шорткод типографики для вкладки CSS?
Нет. типографика - это группа из множества свойств CSS, поэтому она не может печатать через единое целое {{token}} как это делает текст или цветовое поле Опция Выбиратель поля заменяет шорткод: установите его на что-то вроде {{WRAPPER}} .my-title и стили созданы для вас.
Что значит {{WRAPPER}} в селекторе?
Является заполнителем для собственного элемента контейнера виджета Запуск селектора с {{WRAPPER}} распространяет типографику только на этот виджет. оставьте это, и селектор совпадает повсюду на странице, что может случайно изменить стиль других виджетов.
Может ли одно поле типографики стилизовать более одного элемента?
Да. Отделите селекторы запятыми и начните каждый с {{WRAPPER}}, например {{WRAPPER}} .card-title, {{WRAPPER}} .card-link. Оба элемента затем следуют одному и тому же управлению.
Почему мой элемент управления типографикой стилизует весь виджет?
Опция Selector пуста, поэтому поле вернулось к внешнему контейнеру виджета Заполните селектор, нацеленный именно на нужный элемент, сохраните и перезагрузите редактор Elementor.
Имеют ли значение стили шрифтов, которые я написал на вкладке CSS?
Да. они являются видом виджета по умолчанию и показывать, пока кто-то не меняет управление в Элементоре. Пользователь выбирает из панели типографики затем принимает приоритет над значениями таблицы стилей.
Завершая #
Поле Widget Builder Typography передает редакторам уже известную им панель из собственных виджетов Elementor, с Google Fonts, адаптивными размерами и глобальными предустановками, на любом элементе вашего пользовательского виджета. назовите поле, установите значение Selector {{WRAPPER}} плюс класс вашего элемента, и каждое решение шрифта выходит из вашей таблицы стилей и попадает в панель. Соедините его с Пограничное поле и Текстовое поле чтобы построить панель виджетов, которая охватывает содержание и стиль в одном месте.Исследуйте остальную часть Виджеты и расширения Master Addgetsи посмотрите страница ценообразования за то, что включает каждый план.
