Як змінювати розмір шрифтів у WordPress? Основні способи
Часто, щоб текст на сайті читався краще, потрібно змінити розмір шрифту WordPress. Зробити це можна за допомогою плагіну або додавши кілька рядків коду файл CSS. Є і третій спосіб змінити розмір шрифту за допомогою редактора Gutenberg.
Дотримуйтесь інструкцій, щоб зробити все просто і швидко.
Спосіб 1. Змінюємо розмір шрифту за допомогою плагіна Advanced Editor Tools
Advanced Editor Tools — повністю безкоштовний компонент, який дозволяє повернути у редакторі класичну панель інструментів.
Знайти плагін можна в офіційному репозиторії WordPress. Після стандартної установки та активації перейдіть до налаштувань плагіна.
Плагін запропонує вам перейти між редактором блоків Gutenberg і класичним редактором TinyMCE. Виберіть другий варіант та збережіть зміни.
Переконайтеся, що ви поставили позначку у чек-боксі
Подальші дії. Якщо ви вибрали класичний редактор як єдиний варіант.
Перейдіть до розділу Записи - Додати новий або перейдіть до редагування одного з існуючих записів. Якщо ви вибрали тільки класичний варіант, побачите приблизно наступне.
Далі все дуже просто. Додайте текст, виберіть фрагмент, розмір якого потрібно змінити, та вкажіть на який його розмір поміняти.
Результат буде ось таким.
Спосіб 2. Зміна розмірів за допомогою CSS
Перший спосіб простіший. Але не підійде, якщо ви використовуєте Elementor або інший аналогічний конструктор сторінок. Змінити розмір шрифту за допомогою CSS трохи складніше, але універсальне рішення, яке вважається класичним.
Цей варіант складніший, але якщо ви ніколи не працювали з CSS. Інструкція від Host4Biz допоможе зробити все швидко та правильно.
Додати код у CSS можна за допомогою редактора або налаштування (customizer). Як це робиться. Перевага роботи з CSS в тому, що можна змінювати розмір шрифту в будь-якому елементі сайту без плагінів і незалежно від інших частин сторінки.
Розберемо, як це робиться:
У консолі вибираємо пункт меню Зовнішній вигляд – Налаштувати.
Потім у меню вибираємо Додаткові стилі.
Наступним кроком додаємо потрібний код у полі праворуч.
Тепер розберемося, який код додавати.
1. Щоб змінити весь шрифт, вставляйте:
body {
font-size: 1.25rem;
}
Значення 1,25 можна замінити іншою цифрою.
2. Щоб змінити шрифт у абзацах:
p {
font-size: 25px;
}
3. Для зміни шрифту в частині заголовків
h2 {
font-size: 2.5em;
}
Команда буде застосовуватися лише до заголовків h2.
4. Змінити розмір шрифту у бічному меню
.sidebar li {
font-size: 12px;
}
5. Щоб збільшити або зменшити розмір тексту у футері
.footer {
font-size: 150%;
}
6. Зміна розміру шрифту для певних розмірів екрану
html {
font-size: 18px;
}
@media (min-width: 900px) {
html {
font-size: 20px;
}
}
У CSS-стилях можна використовувати кілька одиниць виміру:
- Ем (em) — 1em відповідає розміру шрифту на сторінці, тобто якщо розмір шрифту 12pt, 1em = 12pt.
- Пікселі — це одна точка на екрані комп'ютера або мобільного пристрою.
- Пункти — цю одиницю запозичували з паперових видань. Один пункт відповідає 1/72 дюйми.
- Відсотки — ця величина за замовчуванням дорівнює 100%, при збільшенні або зменшенні змінюватиметься.
Спосіб 3. Зміна розміру шрифту за допомогою редактора Gutenberg
Gutenberg став стандартним редактором WordPress. Він пропонує можливості для зміни шрифту ще з версії 5.3, де Gutenberg був одним з плагінів.
У Gutenberg текст додається за допомогою одного з блоків редактора. Щоб змінити розмір шрифту, просто перейдіть до тексту та виберіть потрібний розмір у правому меню.
Як бачите, все дуже просто та швидко.
Підсумки
Шрифт, що легко читається, може серйозно вплинути на поведінкові фактори і показник конверсії сайту. WordPress дає багато можливостей для переформатування тексту, у тому числі зміни шрифту.
Збільшити або зменшити шрифт можна за допомогою плагінів, редактора Gutenberg або редагування файлів CSS.
Розвивайте свій бізнес онлайн разом із Host4Biz та читайте наш блог.
