Поле "Шрифты" добавляет раскрывающееся описание семейства шрифтов к пользовательскому виджету, который вы создаете с помощью главных аддонов Виджет Строитель.Редакторы выбирают системный шрифт или шрифт Google в Elementor, и виджет применяет его к выбранному вами элементу. Он меняет только шрифт. Размер, вес и высота строки остаются в вашем CSS.
Шрифт - одно из полей, которые вы можете использовать в конструкторе виджетов бесплатной версии. бесплатный плагин включает ограниченный конструктор виджетов, а полный набор полей поставляется с Мастер Аддоны Про.
Что делает поле Шрифт #
- Добавляет на панель виджета в Elementor раскрывающийся список с возможностью поиска. в списке есть Дефолт вариант, а Система группа (Ариал, Тахома и так далее) и а Гугл группа.
- Сохраняет фамилию, например, в виде текста
Playfair Display. - Пишет а
font-familyправило для элементов, под которыми вы перечислите Селекторы CSS. Когда выбор представляет собой шрифт Google, Elementor загружает для вас этот шрифт на страницу. - Также дает вам токен, как
{{ quote_font }}, на котором напечатана фамилия.
Новое для строителя? Прочитать Обзор виджета-строителя сначала вернитесь с открытым виджетом.
Прежде чем начать #
- WordPress с установленным и активным элементом Elementor.
- Установлены и активны главные дополнения для Elementor.The руководство установки настройка обложек.
- Виджет, открытый в Widget Builder Пример в этом руководстве - виджет “Pull Quote”: названная Textarea
quote_textтекстовое поле с именемquote_authorи поле шрифта с именемquote_fontэто устанавливает шрифт цитаты.
Как добавить поле Шрифт #
- Перейти к Мастер-аддоны > Виджет-строитель и откройте виджет.
- Нажмите « Стиль вкладка и добавление раздела, например “Quote Style”.
- Тип
fontв поле поиска слева. - Драг Шрифт в раздел Нажмите на карандаш на поле, чтобы открыть его настройки.
Стиль - это то место, где редакторы ожидают найти параметры шрифта, но это поле также работает в разделе "Контент" или "Дополнительно".
Объяснены параметры поля шрифта #
- Этикетка: текст над раскрывающимся в Elementor, например “Quote Font”.
- Имя: уникальный идентификатор поля и название его токена Используйте только буквы, цифры и подчеркивания, например
quote_font. - Описание: подсказка, показанная под раскрывающимся в Elementor.
- Значение по умолчанию: семейство начинается новая копия виджета Введите имя точно так, как оно появляется в списке Элементора, например
Playfair Display.
В разделе "Общие настройки" вы найдете Показать метку, Блок этикеток, Сепаратор и Условия, которые работают так же, как и на других полях. настройка, которая заставляет это поле работать Селекторы CSS.
Примените шрифт с помощью CSS Selectors #
Прокрутить вниз до Селекторы CSS и нажмите Добавить элемент. В каждой строке есть два поля:
- Селектор CSS: элемент, который получает шрифт. Для pull цитата это
.pq-quote. Не нужно печатать{{WRAPPER}}, потому что строитель добавляет его для вас и сохраняет правило внутри этого виджета. - Свойства CSS: правило писать.
{{VALUE}}заменяется выбранной семьей.
font-family: "{{VALUE}}", Georgia, serif;
Новая строка заполняется текстом примера, .text-1, .text-2 и color: {{VALUE}};. Замените оба. Если вы уйдете color в поле свойства имя шрифта попадает в качестве значения цвета и шрифт не меняется.
Цитаты вокруг {{VALUE}} сохраняйте имена с пробелами, как Playfair Display, работая. Georgia, serif является запасным, пока шрифт загружается. чтобы стилизовать больше элементов, нажмите "Добавить элемент" еще раз и добавьте еще одну строку.
Покиньте равнину Селектор коробка внизу пустая. В наших тестах это писало color: Lora; для этого поля, которое не задает шрифт.
Нажмите Сохранить настройки когда закончишь.
Почему бы не поместить токен на панель CSS? #
Там жетон работает. font-family: "{{ quote_font }}", Georgia, serif; печатает правильное имя Проблема в загрузке В наших тестах шрифт Google, используемый только через токен, не был загружен на входной стороне, поэтому посетители увидели резервный шрифт. строка CSS Selectors дает Elementor информацию, необходимую для загрузки шрифта, и тот же выбор прошел правильно.
Сохраните токен для мест, где вам нужно имя в виде текста, например класса или метки в HTML.
Используйте элемент управления шрифтом в Elementor #
Добавьте виджет на страницу, или перезагрузите редактор, если страница уже была открыта Выберите виджет и откройте Стиль вкладка Нажмите раскрывающийся список под меткой и начните вводить, чтобы отфильтровать список. Каждое имя семьи нарисовано в собственном шрифте, что упрощает выбор.
Выберите семью и обновления превью На опубликованной странице Elementor загружает шрифт Google вместе со стилями виджета.
Выбираем Дефолт очищает выбор Затем виджет возвращается к любому шрифту, который ваша панель CSS или набор тем для этого элемента, поэтому дайте элементу разумный шрифт на панели CSS.
Обычные случаи использования #
- Притягивайте цитаты и отзывы, где только текст цитаты меняет шрифт.
- Отображение заголовков в виджетах героев или баннеров, при этом текст тела остается в покое.
- Ценовые номера, значки или этикетки, на которых используется шрифт отображения бренда.
- Клиентские сайты, на которых редакторам следует выбирать шрифт, но не прикасаться к размерам и интервалам.
Советы по работе с полем Шрифт #
- Используйте для стилизации селекторы CSS, а не токен. Именно это заставляет Google Fonts загружаться.
- Всегда добавляйте резервный стек после
{{VALUE}}, напримерGeorgia, serifилиArial, sans-serif. - Поместите размер и вес на панель CSS. Поле Шрифт устанавливает только семейство.
- Также нужны элементы управления размером, весом и расстоянием? The Типографское поле это поле Pro, которое объединяет их все.
- Каждый шрифт Google добавляет загрузку. Две-три семьи на странице - разумный предел.
Часто задаваемые вопросы #
Доступно ли поле Шрифт в бесплатной версии?
Да. шрифт - одно из полей, которые вы можете использовать в конструкторе виджетов бесплатной версии. полный набор полей конструктора виджетов поставляется с Master Addons Pro.
Почему мой шрифт Google не отображается на странице в реальном времени?
Проверьте, как применяется шрифт Если вы распечатываете только токен на панели CSS, файл шрифта не загружен Добавить строку CSS Selectors с font-family: "{{VALUE}}" итак, Элементор загружает его.
Почему выбор шрифта ничего не изменил?
В строке CSS Selectors, вероятно, все еще есть этот пример color: {{VALUE}}; свойство, или селектор не соответствует вашему HTML Измените свойство на font-family и проверьте имя класса.
Нужно ли добавлять {{WRAPPER}} в селектор?
Нет. - добавляет строитель {{WRAPPER}} перед селектором шрифт применяется только внутри этого виджета.
Чем отличается шрифт от типографики?
Шрифт устанавливает только семейство. типографика - это поле Pro, которое добавляет размер, вес, высоту строки, расстояние между буквами и многое другое в одном элементе управления.
Завершая #
Добавьте поле "Шрифт" в раздел "Стиль", установите семейство по умолчанию и добавьте строку "Выборщики CSS", которая указывает font-family: "{{VALUE}}" в вашем элементе. редакторы получают список шрифтов с возможностью поиска в Elementor, а шрифты Google загружаются на страницу без дополнительного кода. Полный стиль текста см Типографское полеи проверьте ценообразование за то, что включает каждый план.
