Плавна типографіка в Elementor через CSS-функцію clamp()

Що таке clamp() і як вона працює

Синтаксис функції має вигляд clamp(мінімум, гнучке значення, максимум). Браузер використовує середнє значення як основу для масштабування, але не виходить за встановлені нижню та верхню межі.

Наприклад, у записі clamp(2rem, 4vw, 4.5rem) 2rem — мінімальний розмір шрифту, 4vw — значення, що залежить від ширини viewport, а 4.5rem — максимальний розмір. На вузькому екрані текст не стане меншим за 2rem, а на широкому — не збільшиться понад 4.5rem.

Одиниця vw дорівнює одному відсотку ширини viewport. Тому значення 4vw змінюється при зміні ширини вікна, на відміну від фіксованих px або rem.

• мінімум захищає від надто дрібного тексту на мобільних пристроях;
• гнучке значення забезпечує плавне масштабування;
• максимум не дозволяє заголовку ставати непропорційно великим на великих моніторах.

font-size: clamp(2rem, 4vw, 4.5rem);

Як додати плавний розмір заголовка в Elementor

Спочатку відкрийте віджет заголовка і додайте йому CSS-клас, наприклад fluid-title. Клас потрібно вказувати без крапки — крапка використовується лише в CSS-селекторі.

Далі додайте правило у Custom CSS, якщо така можливість доступна у вашій конфігурації Elementor, або вставте його в додаткові CSS-стилі теми. Конкретне розташування поля може залежати від редактора, тарифу та налаштувань сайту.

Селектор нижче враховує стандартну внутрішню структуру віджета Heading: клас знаходиться на обгортці, а текст заголовка — всередині елемента з класом elementor-heading-title.

• відкрийте потрібний віджет Heading;
• у налаштуваннях віджета додайте клас fluid-title;
• додайте CSS-правило;
• збережіть зміни та перевірте результат на різній ширині екрана.

.fluid-title .elementor-heading-title {
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: 1.05;
}

Якщо стиль не застосувався

Перевірте, чи клас додано саме до потрібного віджета, а не до іншої секції. Також переконайтеся, що CSS завантажується на сторінці та не перекривається стилем із більшою специфічністю.

Якщо клас додано безпосередньо до елемента заголовка, селектор може бути іншим. У такому випадку можна використати простіше правило .fluid-title { font-size: ... }, але спершу перевірте HTML у браузерних інструментах розробника.

Підбір значень для різних типів тексту

Готове значення clamp() не є універсальним. Для нього важливі шрифт, довжина заголовка, ширина контейнера та призначення блоку. Hero-заголовок може бути великим, а заголовок картки або секції — значно стриманішим.

Для основного заголовка сторінки можна почати з діапазону 2–4.5rem. Для заголовків другого рівня доречний менший діапазон, наприклад 1.5–3rem. Це лише стартові значення: остаточний результат потрібно оцінювати в реальному макеті.

• для коротких заголовків допустимий більший максимальний розмір;
• для довгих заголовків краще зменшити максимум, щоб уникнути зайвих переносів;
• для мобільних пристроїв мінімум має залишатися комфортним для читання;
• line-height варто перевіряти окремо — однакове значення не підходить усім гарнітурам.

.section-title .elementor-heading-title {
  font-size: clamp(1.5rem, 3vw, 3rem);
  line-height: 1.15;
}

.hero-title .elementor-heading-title {
  font-size: clamp(2rem, 5vw, 5.5rem);
  line-height: 1;
}

Плавні відступи через clamp()

Ту саму функцію можна використовувати не лише для тексту, а й для padding та margin. Це допомагає зменшити різкі зміни висоти секцій між breakpoint-ами.

Властивість padding-block задає верхній і нижній внутрішні відступи одночасно. Якщо потрібна підтримка або зрозуміліша поведінка в конкретному проєкті, ці значення можна записати окремо через padding-top і padding-bottom.

• padding-block відповідає за вертикальні відступи;
• padding-inline можна використати для горизонтальних відступів;
• не варто застосовувати надто великі максимальні значення до кожної секції — сторінка може стати надмірно розтягнутою.

.fluid-section {
  padding-block: clamp(3rem, 8vw, 9rem);
}

.fluid-section {
  padding-inline: clamp(1rem, 4vw, 4rem);
}

Як перевірити результат на різних екранах

Після додавання CSS не обмежуйтеся перевіркою у трьох режимах Elementor. Зменшуйте та збільшуйте ширину браузера поступово, адже проблема часто проявляється саме між стандартними breakpoint-ами.

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

• перевірте вузький смартфон і ширший мобільний екран;
• переконайтеся, що заголовок не виходить за межі контейнера;
• перевірте планшет у портретній та альбомній орієнтації;
• перегляньте сторінку на широкому моніторі;
• перевірте довгі заголовки, великі коефіцієнти масштабування браузера та локалізовані тексти.

Типові помилки під час використання clamp()

Найпоширеніша помилка — надто великий діапазон між мінімумом і максимумом. У такому випадку заголовок може виглядати ефектно на одному екрані, але створювати зайві переноси на іншому.

Ще одна проблема — використання лише vw без обмежень. Такий текст може стати непрочитним на маленькому екрані або надмірно великим на широкому. Саме тому clamp() майже завжди має містити обидві межі.

Також не варто бездумно замінювати всі responsive-налаштування. Для окремих компонентів breakpoint-правила все ще потрібні, наприклад коли на мобільному змінюється не лише розмір, а й структура блоку.

• не плутайте клас fluid-title з HTML-тегом заголовка;
• не додавайте одиниці вимірювання до всього виразу clamp() — вони потрібні кожному значенню окремо;
• не використовуйте однаковий clamp() для всіх рівнів заголовків;
• переконайтеся, що line-height не створює накладання рядків;
• після змін очистіть кеш CSS, якщо сайт або плагін кешування показує старі стилі.