Как изменить типографику блоков Гутенберга в WordPress? –

Семейство шрифтов — один из важных факторов, определяющих эстетику вашего веб-сайта. Многие темы WordPress предлагают тысячи шрифтов Google, а также предоставляют возможность использовать системный стек или собственный стиль. Помимо использования семейства шрифтов для всего сайта, вам может быть интересно украсить лишь несколько текстовых элементов на вашей странице. Возможно, вы хотите изменить цвет выделения или добавить буквицу, чтобы первая буква была крупнее. В этой статье мы объясним, как изменить эти типографские настройки для блоков Гутенберга на вашем сайте WordPress.

Блоки Гутенберга

Есть два способа настроить параметры оформления отдельных блоков в WordPress:

• Использование настроек Гутенберга по умолчанию для текстовых блоков.
• С помощью блочного плагина.

Если вы все еще используете классический редактор или используете собственный тип сообщений, который не поддерживает Gutenberg (например, страницы продуктов WooCommerce), то настройки по умолчанию будут другими, как описано в конце этой статьи.

1. Настройки оформления для блоков Гутенберга

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

Абзац с пользовательской типографикой

Перейдите к сообщению или странице, где вы хотите изменить настройки оформления, и нажмите на блок абзаца. На правой боковой панели перейдите на вкладку «Блокировать», где вы можете найти параметры изменения цветов, настройки оформления и расширенный раздел.

Настройки блока абзаца в Гутенберге Изменение размера шрифта

По умолчанию редактор Gutenberg отображает таблицу для выбора размера шрифта: маленького, среднего, большого и очень большого. Многие пользователи WordPress упускают из виду это и думают, что это все доступные настройки.

Нажмите значок «Установить нестандартный размер», расположенный чуть выше параметра XL. Появится поле и ползунок для установки пользовательского размера шрифта для вашего абзаца. Вы можете изменить единицу измерения CSS на px, em или em, щелкнув единицу измерения px, отображаемую в поле.

Установка пользовательского размера шрифта. Просмотр настроек скрытой типографики.

Нажмите на три вертикальные точки (называемые «Параметры типографики»), расположенные в правом конце заголовка «Типографика». Это покажет вам все скрытые настройки для настройки внешнего вида вашего текста.

Скрытые настройки типографики для блока

Нажмите ссылку «Сбросить», расположенную рядом с «Размером шрифта», чтобы изменить размер текста на значение по умолчанию (в соответствии с вашей темой). Нажмите на все параметры в разделе «Инструменты» один за другим, чтобы включить их.

Проверьте все параметры типографики

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

Отображаются все скрытые настройки. Изменение внешнего вида шрифта.

Если вы заметили верхнюю панель инструментов блока, на ней есть варианты выделения жирным шрифтом и курсивом. Вы также можете нажать на маленькую стрелку вниз (называемую «Дополнительно») и использовать дополнительные параметры, такие как выделение, зачеркивание, надстрочный индекс, нижний индекс и т. д. Однако вы не можете установить более светлый, полужирный курсив или черный курсив на панели инструментов блока. . Просто щелкните раскрывающийся список под опцией «Внешний вид» на правой боковой панели и выберите нужный стиль шрифта.

Выберите внешний вид стиля шрифта. Настройка других параметров.

Как и внешний вид, вы можете установить следующие параметры:

• Интервал между буквами — введите число, чтобы увеличить или уменьшить расстояние между буквами в выбранном блоке абзаца. Вы можете использовать такие значения, как 0,5, 1 или 1,5, и проверять изменения в реальном времени.
• Оформление: выберите «Нет», «Подчеркивание» или «Зачеркивание».

Настройте интервал между буквами, буквицу и регистр букв

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

Примечание: После настройки абзаца вы можете в любой момент нажать ссылку «Сбросить все», чтобы удалить все настройки.

Изменение цвета текста

Есть два способа добавить цвета в блок:

• Цвета текста и фона – выберите опцию «Текст» или «Фон», отображаемую под заголовком «Цвет» на правой боковой панели. Откроется цветовая палитра, показывающая цвета вашей темы по умолчанию. Если вы не хотите использовать цвет темы, щелкните поле над цветовой палитрой, чтобы открыть палитру цветов.

Изменить цвета текста и фона

Когда вы выберете цвет, в поле отобразится предварительный просмотр и соответствующий цветовой код. Блок абзаца также мгновенно изменится на выбранный цвет текста. По умолчанию WordPress отображает шестнадцатеричный цветовой код. Нажмите раскрывающийся список Hex и при необходимости измените его на RGB или HSL. Эти параметры отобразят дополнительные ползунки для настройки цветовой комбинации.

Предварительный просмотр выбранного цвета и изменение кода

Аналогичным образом вы можете применить предпочитаемый цвет фона для абзаца. Если вы хотите удалить цвета, нажмите «Параметры цвета» (три вертикальные точки в конце заголовка «Цвет») и выберите параметр «Сбросить».

Сбросить параметры цвета и фона

Как вы можете видеть на скриншоте выше, цвет текста изменит цвет всего текста абзаца. Если вы хотите выделить только несколько слов в абзаце, выделите слова и нажмите маленькую стрелку на панели инструментов блока. Выберите опцию «Выделить», чтобы просмотреть палитру цветов. Отсюда вы можете установить цвета текста и фона, чтобы выделять только выбранные слова внутри блока абзаца.

Выделите текст и фон цветом с помощью расширенных настроек боковой панели

В разделе «Дополнительно» вы можете добавить собственные классы CSS и определить стили в разделе «Внешний вид > Настройка > Дополнительный CSS». Хотя это более технический характер, вы можете применять стили к нескольким блокам на одной странице. Узнайте больше о том, как добавить CSS на одну страницу в WordPress.

2. Использование блочных плагинов

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

Опция контейнера GenerateBlocks

Вы также можете попробовать другие плагины, такие как Spectra, которые предлагают аналогичные настройки типографского блока для заголовков (не для абзацев).

Варианты типографики спектров

3. Параметры типографики для классического редактора

Если вы все еще используете старый классический редактор или пользовательские типы сообщений, такие как WooCommerce, то возможности ограничены. Вы можете изменить цвет шрифта, сделать его жирным, курсивом и зачеркнуть текст с помощью редактора TinyMCE по умолчанию. Для получения дополнительных функций вам может потребоваться переключиться в режим «Текст» и добавить встроенные стили CSS к отдельным элементам.

Параметры оформления классического редактора TinyMCE

Заключительные слова

Хотя Гутенберг был выпущен много лет назад, многие пользователи до сих пор не знают о таких функциях, как настройки типографики блока. Я надеюсь, что эта статья помогла вам понять параметры по умолчанию и альтернативы плагинам. Теперь вы можете легко настроить внешний вид отдельных текстовых блоков, не полагаясь на таблицу стилей вашей темы.