Вы собрали отличный макет, блоки стоят ровно, цвета подобраны по брендбуку. Но сайту словно чего-то не хватает. Он выглядит статичным и подозрительно похожим на тысячи других шаблонных страниц в интернете. Знакомо?
Многие новички сразу бегут скачивать массивные аддоны с анимациями, которые в итоге убивают скорость загрузки. Профессионалы поступают иначе: они используют кастомный CSS.
В этой статье мы разберем 10 стильных и легковесных CSS-решений, которые преобразят ваш проект на Elementor за пару минут.
Куда вставлять кастомный CSS код?
Если вы счастливый обладатель платной версии конструктора, вставить код проще простого. Выделите нужный виджет, перейдите во вкладку «Расширенные» (Advanced) и найдите раздел Пользовательский CSS.
Используйте селектор selector перед классом, чтобы применить стили только к текущему элементу. Если вы сомневаетесь, стоит ли покупать премиум-версию ради этой и других функций, обязательно прочитайте наш подробный разбор: «Elementor Pro: когда он действительно нужен, а когда — нет».
Если у вас бесплатный Elementor, добавляйте код через консоль WordPress: Внешний вид → Настроить → Дополнительные стили, предварительно присвоив виджету уникальный CSS-класс.
Топ-10 полезных CSS эффектов
Ниже представлены готовые фрагменты кода. Просто скопируйте их и адаптируйте цвета под свой дизайн.
1. Эффект матового стекла (Glassmorphism)
Тренд последних лет. Отлично подходит для виджетов поверх ярких фоновых изображений или видео. Делает фон блока полупрозрачным и слегка размытым.
CSS
selector {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 15px;
}
2. Градиентный текст
Стандартный функционал конструктора иногда ограничивает настройки типографики. Этот код сделает любой заголовок стильным и современным.
CSS
selector h2 {
background: linear-gradient(90deg, #ff8a00, #e52e71);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
3. Неоновое свечение кнопки при наведении
Привлеките внимание к целевому действию. Кнопка начнет слегка светиться и менять оттенок тени, когда пользователь наведет на нее курсор.
CSS
selector .elementor-button:hover {
box-shadow: 0 0 15px rgba(0, 255, 255, 0.6), 0 0 30px rgba(0, 255, 255, 0.4);
transition: all 0.3s ease-in-out;
}
4. Плавное увеличение картинки (Zoom)
Классический прием для карточек товаров или постов блога. Изображение плавно масштабируется внутри контейнера, не ломая верстку страницы.
CSS
selector img {
transition: transform 0.4s ease;
}
selector img:hover {
transform: scale(1.08);
}
5. Анимация левитации (Floating Effect)
Идеально для 3D-иконок, мокапов смартфонов или иллюстраций. Элемент будет бесконечно и плавно покачиваться вверх-вниз.
CSS
selector {
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
6. Черно-белый фильтр для логотипов партнеров
Часто логотипы клиентов пестрят разными цветами, разрушая гармонию сайта. Этот код делает их серыми, а при наведении возвращает оригинальный цвет.
CSS
selector img {
filter: grayscale(100%);
opacity: 0.6;
transition: 0.3s ease;
}
selector img:hover {
filter: grayscale(0%);
opacity: 1;
}
7. Подчеркивание текста маркером
Интересный способ выделить главную мысль в абзаце. Эффект имитирует выделение текста ярким текстовыделителем.
CSS
selector .highlight {
background: linear-gradient(180deg, rgba(255,255,255,0) 60%, #ffd700 60%);
display: inline;
}
8. Кастомный скроллбар (Полоса прокрутки)
Стандартная серая полоса прокрутки браузера портит внешний вид? Замените ее на стильную и тонкую, подходящую под цвета вашего бренда. (Добавлять в глобальные стили темы).
CSS
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
9. Вращение иконки на 360 градусов
Привлекает внимание к информационным блокам (Feature boxes). Иконка делает полный оборот при наведении мыши.
CSS
selector .elementor-icon {
transition: transform 0.5s ease;
}
selector:hover .elementor-icon {
transform: rotate(360deg);
}
10. Заливка кнопки сбоку (Sweep-to-Right)
Анимация, при которой цвет фона кнопки плавно «заливается» слева направо при наведении. Выглядит очень динамично и профессионально.
CSS
selector .elementor-button {
background: linear-gradient(to right, #0052D4 50%, #4364F7 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all 0.4s ease-out;
}
selector .elementor-button:hover {
background-position: left bottom;
}
Влияние CSS на оптимизацию и SEO
Главное преимущество чистого CSS перед плагинами — минимальный вес. Код из пары строк загружается за миллисекунды и никак не блокирует отрисовку страницы.
Помните, что поисковые системы любят быстрые и опрятные сайты с хорошим поведенческим фактором (когда пользователи задерживаются, чтобы рассмотреть анимацию). О том, как еще можно улучшить позиции ресурса за счет технических настроек, читайте в нашей подробной инструкции: «Больше, чем просто Yoast SEO: Как реально прокачать сайт на WordPress для поиска».
Key Takeaways (Краткое резюме)
- Не нагружайте сайт лишними плагинами ради простых визуальных фишек — используйте CSS.
- В Elementor Pro код добавляется прямо в виджет через вкладку
Расширенныес использованием тегаselector. - Эффекты Glassmorphism, градиенты и левитация делают UI современным и задерживают внимание пользователя.
- Кастомный код практически ничего не весит и положительно сказывается на SEO и скорости загрузки.
А какие CSS-трюки чаще всего используете вы в своих проектах? Поделитесь любимыми сниппетами в комментариях!
