Elementor — адаптация
Elementor Fluid Adaptive Mixin это универсальный LESS-миксин, который позволяет создавать плавную адаптивную верстку без необходимости писать десятки медиазапросов. Он автоматически рассчитывает значения CSS-свойств между двумя брейкпоинтами и делает интерфейс полностью резиновым, предсказуемым и удобным для любых экранов.
Зачем нужен этот миксин
Классический подход к адаптивной верстке строится на фиксированных брейкпоинтах и медиазапросах. Это приводит к нескольким проблемам:
нужно писать много медиазапросов для каждого блока и свойства;
сложно поддерживать и изменять дизайн;
между брейкпоинтами происходят резкие скачки размеров;
трудно сохранить pixel-perfect верстку.
Elementor Fluid Adaptive Mixin решает эти проблемы:
значения CSS-свойств плавно масштабируются между минимальным и максимальным экраном;
интерфейс ведет себя естественно на любых устройствах;
код становится проще и чище;
верстка становится стабильной и легко поддерживаемой.
Как работает миксин
Миксин использует формулу интерполяции:
значение = min + (max − min) × ((ширина экрана − minScreen) / (maxScreen − minScreen))
Что это значит на практике:
если ширина экрана меньше
minScreen, свойство принимает минимальное значениеmin;если ширина экрана больше
maxScreen, свойство принимает максимальное значениеmax;между
minScreenиmaxScreenзначение свойства плавно изменяется на каждом пикселе.
Для реализации используется CSS-функция clamp(min, fluid, max) вместе с calc(), чтобы динамически вычислять текущее значение.
Какие свойства можно адаптировать
Миксин работает с любыми числовыми CSS-свойствами. Например:
font-size (размер текста)
padding / margin (внутренние и внешние отступы)
gap (расстояние между колонками или элементами)
border-radius (скругление углов)
width / height (ширина и высота элементов)
любые другие числовые свойства, которые требуют адаптивности
Установка и подключение
Скопируйте файл
elementor-fluid-adaptive-mixin.cssв вашу тему или дочернюю тему WordPress в папку с кастомным CSS.Подключите его через
functions.phpвашей темы:
function enqueue_fluid_mixin() {
wp_enqueue_style('fluid-mixin', get_stylesheet_directory_uri() . '/elementor-fluid-adaptive-mixin.css');
}
add_action('wp_enqueue_scripts', 'enqueue_fluid_mixin');
Если вы используете плагин для кастомного CSS, просто скопируйте содержимое файла и вставьте его в редактор плагина.
Настройка переменных для блока
Для каждого блока используются CSS-переменные:
--fluid-min— минимальное значение свойства (например, font-size, padding)--fluid-max— максимальное значение свойства--fluid-min-screen— минимальный размер экрана (по умолчанию 320px)--fluid-max-screen— максимальный размер экрана (по умолчанию 1920px)
Пример для заголовка с размером текста от 18 до 48px при экранах от 768 до 1440px:
selector {
--fluid-min:18;
--fluid-max:48;
--fluid-min-screen:768;
--fluid-max-screen:1440;
}
Применение классов
В CSS есть универсальные классы для разных свойств:
.fluid— font-size.fluid-padding— padding.fluid-margin— margin.fluid-gap— gap.fluid-radius— border-radius
Можно комбинировать несколько классов, например class="fluid fluid-padding fluid-gap".
Применение в Elementor
Откройте нужный блок или виджет в Elementor.
Перейдите в Advanced → Custom CSS (только в Elementor Pro).
Вставьте CSS с выбранным классом и переменными. Примеры:
Заголовок:
selector {
class: fluid;
--fluid-min:18;
--fluid-max:48;
--fluid-min-screen:768;
--fluid-max-screen:1440;
}
Блок с padding:
selector {
class: fluid-padding;
--fluid-min:20;
--fluid-max:80;
--fluid-min-screen:768;
--fluid-max-screen:1440;
}
Колонки с gap:
selector {
class: fluid-gap;
--fluid-min:10;
--fluid-max:40;
--fluid-min-screen:768;
--fluid-max-screen:1440;
}
Блок с border-radius:
selector {
class: fluid-radius;
--fluid-min:6;
--fluid-max:40;
--fluid-min-screen:768;
--fluid-max-screen:1440;
}
Пример итоговой настройки блока
selector {
class: fluid fluid-padding;
--fluid-min:16;
--fluid-max:36;
--fluid-min-screen:768;
--fluid-max-screen:1440;
}
На экранах 768px размер текста и padding будут 16px
На экранах 1440px размер текста и padding будут 36px
Между 768px и 1440px размеры будут плавно изменяться
Советы по использованию
Меняйте только переменные
--fluid-minи--fluid-maxдля каждого блока.Минимальный и максимальный брейкпоинты можно подстраивать под макет.
Используйте для любых числовых свойств: font-size, padding, margin, gap, border-radius, width, height.
Для заголовков лучше использовать
.fluid, для блоков контейнеров —.fluid-paddingили.fluid-margin.
👨💻 Автор: Сергей Солошенко (RuCoder)
🛠 WordPress / Full Stack
📬 support@рукодер.рф
📲 Telegram: @RussCoder
Если нужна кастомизация под проект или установка под ключ — пишите в личные сообщения.
