14 полезных фрагментов CSS для Elementor
Опубликовано: 2022-12-13Встроенных параметров стиля, предлагаемых Elementor, более чем достаточно для создания профессиональных страниц. Если есть определенный стиль, который вы хотите применить, но он недоступен в Elementor, вы можете добиться его с помощью пользовательского CSS.
Самый простой экземпляр. Elementor не предлагает встроенных параметров стиля, чтобы изменить внешний вид ссылки «Читать далее» на кнопку, которая используется многими веб-сайтами. Для этого вам нужно добавить фрагмент CSS, который превращает ссылку «Подробнее» в кнопку. Чтобы добавить собственный CSS, вы можете перейти на вкладку «Дополнительно» на панели настроек. Вы можете добавить код CSS в доступное поле в блоке Custom CSS .
Вы можете добавить собственный CSS ко всем типам элементов Elementor. Из раздела, столбца, в виджет.
В Elementor каждый виджет и его вспомогательные элементы (например, заголовок сообщения, метаданные сообщения и избранное изображение в виджете сообщений) имеют селектор класса (см. список селекторов виджетов Elementor). Чтобы настроить таргетинг на определенный виджет или элементы виджета, вы можете начать с ввода selector , а затем имени класса (например .elementor-post__read-more ). Затем вы можете добавить пользовательский стиль между фигурными скобками. Пример:
селектор .elementor-post__read-more{
отступы: 0,4 эм 0,8 эм;
фон: #33ff41;
переход: все .5с;
радиус границы: 5px;
} Приведенный выше фрагмент кода превратит ссылку «Подробнее» в кнопку. Во-первых, он нацелен на элемент «подробнее» ( selector .elementor-post__read-more ). Затем он добавляет пользовательский стиль к элементу «Читать больше» через содержимое в фигурных скобках (вы можете найти элемент «Читать больше» в виджетах «Сообщения» и «Архив»). В CSS содержимое, заключенное в фигурные скобки, называется объявлением.
Недавно мы работали над некоторыми проектами, которые требовали от нас добавления фрагментов CSS к некоторым виджетам, и мы поделимся ими с вами в этом посте. Мы будем регулярно обновлять этот пост каждый раз, когда получаем новые фрагменты CSS.
Бесплатные фрагменты CSS для Elementor
1. Превращение ссылки «Подробнее» в кнопку
Код:
селектор .elementor-post__read-more {
отступы: 0,3 эм 0,8 эм;
цвет: #ffffff!важно;
граница: сплошная 1px #01B37E;
высота строки: 2em;
фон: #01B37E;
переход: все .5с;
радиус границы: 15px;
вес шрифта: 500;
}
/* при наведении */
селектор .elementor-post__read-more:hover{
отступы: 0,3 эм 0,8 эм;
цвет: #01B37E!важно;
граница: сплошная 1px #01B37E;
высота строки: 2em;
фон: #ffffff;
переход: все .5с;
радиус границы: 15px;
вес шрифта: 500;
}Вы можете использовать приведенный выше код в виджете «Сообщения» и виджете «Архивировать сообщения», которые имеют элемент «Читать больше».
2. Добавление расширенного стиля к нумерованной нумерации страниц
Код:
/*нормальное состояние*/
селектор .elementor-pagination{
поле сверху: 50 пикселей;
}
селектор .page-numbers{
отступ: 10px 15px;
цвет:#FFFFFF!важно;
фон: #0161cd;
переход: все .5с;
радиус границы: 20px;
}
/* состояние наведения */
селектор .page-numbers:hover{
отступ: 10px 15px;
цвет:#384958!важно;
фон: #edf2f7;
переход: все .5с;
радиус границы: 20px;
}
/* активное состояние */
селектор .page-numbers.current{
отступ: 10px 15px;
цвет:#384958!важно;
фон: #f0f3f6;
переход: все .5с;
радиус границы: 20px;
}Вы можете использовать приведенный выше код в виджете «Сообщения» и виджете «Архив сообщений», которые имеют элемент разбиения на страницы. Вы можете прочитать нашу предыдущую статью, чтобы узнать, как добавить нумерацию страниц в Elementor.
3. Добавление эффекта наведения к отдельным элементам поста
Код:
селектор .elementor-post:hover{
переход: все .50 с облегчением входа-выхода;
преобразование: масштаб (1,01);
курсор: указатель;
z-индекс: 1;
}Вы также можете использовать приведенный выше код в виджете «Сообщения» и виджете «Архивировать сообщения». Прочтите нашу предыдущую статью, чтобы узнать больше о том, как добавить эффект наведения к отдельным элементам сообщений блога в Elementor.
4. Добавление эффекта наведения к миниатюре публикации/избранному изображению
Код:
селектор .elementor-post__thumbnail:hover{
переход: все .50 с облегчением входа-выхода;
преобразование: масштаб (1,05);
курсор: указатель;
z-индекс: 1;
}Вы можете использовать приведенный выше код в виджете «Сообщения» и виджете «Архивировать сообщения». Убедитесь, что изображение отображается в настройках основного поста.
5. Добавление эффекта наведения к заголовку сообщения
Код:
селектор .elementor-post__title{
дисплей: встроенный;
}
селектор .elementor-post__title: hover{
текстовое оформление: нет;
box-shadow: вставка 0 -.5em 0 #F8C273;
цвет: наследовать;
дисплей: встроенный;
}
Вы также можете использовать приведенный выше код в виджете сообщений и архивных сообщениях, которые имеют элемент заголовка сообщения.
6. Добавление эффектов наведения к ссылкам
Код:
селектор .elementor-widget-theme-post-content a:hover{
текстовое оформление: нет;
box-shadow: вставка 0 -.5em 0 #FD63FD;
цвет: #B017B0;
}Вы можете использовать вышеуказанное в виджете «Контент публикации» при создании собственного шаблона отдельной публикации с помощью Elementor Theme Builder. Прочтите этот пост, чтобы узнать больше.
7. Настройка радиуса границы аватара в виджете информации о публикации
Код:
селектор .elementor-аватар {
граница: 2px сплошная #FFFFFF;
радиус границы: 10px;
}Вы можете использовать этот код в виджете Post Info. Чтобы использовать его, обязательно включите аватар в настройках метаданных. Прочтите здесь, чтобы узнать больше.
8. Создание индикатора прогресса градиента
Код:
селектор .elementor-прогресс-бар
{
фон: радиальный градиент (круг, rgba (7,149,238,1) 16%, rgba (37,252,255,1) 70%);
}Вы можете использовать приведенный выше код для создания градиентного индикатора выполнения с помощью виджета Progress Bar. Прочтите здесь, чтобы узнать больше. Для получения дополнительных вариантов градиента вы можете обратиться к следующим сообщениям:
- 70+ продвинутых градиентных фонов для Elementor
- 18 3-цветных градиентных фона для Elementor
- 17 пастельных градиентных фонов для Elementor
9. Создание градиентного текста
Код:
селектор .elementor-текстовый редактор {
фоновое изображение: линейный градиент (влево, #feac5e, #c779d0,#4bc0c8);
-webkit-background-clip: текст;
отображение: встроенный блок;
-webkit-text-fill-color: #00000000;
}Вы можете использовать приведенный выше код в виджете «Текстовый редактор». Чтобы создать градиентный текст в других виджетах (например, в заголовке), вы можете просто заменить селектор. Прочтите этот пост, чтобы узнать больше.
10. Прокрутка изображения при наведении
Код:
селектор {
-webkit-transition: легкость входа-выхода 4s !важно;
переход: легкость-в-выход 4s !важно;
}
селектор: наведите {
background-position: по центру снизу !важно;
}Вы можете использовать приведенный выше код для автоматической прокрутки изображения при наведении. Полезно для отображения длинного снимка экрана, например снимка экрана целевой страницы, домашней страницы, страницы блога и т. д. Прочтите этот пост, чтобы узнать больше.
11. Изменение заголовка при прокрутке вниз
Код:
.заголовок-2 {
преобразование: перевод (-80px);
-moz-переход: все .3s легко!важно;
-webkit-transition: все .3 легко!важно;
переход: все .3s легко!важно;
}
.elementor-sticky--effects.header-2 {
высота: авто!важно;
преобразование: перевод (0px);
}
.elementor-sticky--effects.header-1 {
отображение: нет!важно;
}Хотите создать заголовок, который автоматически меняется при прокрутке вниз? Если да, вы можете использовать приведенный выше код. Вы можете прочитать этот пост, чтобы узнать больше.
12. Уменьшение заголовка при прокрутке вниз
Код:
header.sticky-заголовок {
--header-height: 90px;
--непрозрачность: 0,90;
--уменьшить меня: 0,80;
--sticky-background-color: #0e41e5;
--переход: .3s облегчение входа-выхода;
переход: background-color var(--transition),
фоновое изображение var(--transition),
фоновый фильтр var(--transition),
непрозрачность вар(--переход);
}
header.sticky-header.elementor-sticky -- эффекты {
background-color: var(--sticky-background-color) !важно;
фоновое изображение: нет !важно;
непрозрачность: var(--opacity) !важно;
-webkit-фоновый фильтр: размытие (10 пикселей);
фоновый фильтр: размытие (10 пикселей);
}
header.sticky-header > .elementor-container {
переход: минимальная высота var(--transition);
}
header.sticky-header.elementor-sticky -- эффекты > .elementor-container {
min-height: calc(var(--header-height) * var(--shrink-me))!важно;
высота: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
переход: заполнение var(--transition);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
padding-bottom: 10px!важно;
padding-top: 10px!важно;
}
header.sticky-header > .elementor-container .logo img {
переход: max-width var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
max-width: calc(100% * var(--shrink-me));
}Вы можете использовать описанное выше, чтобы создать поведение заголовка, при котором он автоматически сжимается при прокрутке вниз и возвращается к исходному размеру при прокрутке вверх. Вы можете прочитать этот пост, чтобы узнать больше.
13. Добавление фонового изображения к тексту заголовка
Код:
селектор .elementor-heading-title
{
фон: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") зеленый повтор 30% 70% ;
-webkit-фоновый клип: текст;
-webkit-text-fill-color: прозрачный;
}Вы можете использовать приведенный выше код, чтобы добавить фоновое изображение в виджет «Заголовок». Просто замените URL-адрес изображения, чтобы использовать собственное изображение. Прочтите этот пост, чтобы узнать больше.
Нижняя линия
В Elementor уже есть множество встроенных опций для оформления каждого элемента. Будь то раздел, столбец или виджет. Если их вам недостаточно, вы можете применить свой собственный стиль с помощью фрагментов CSS — при условии, что у вас есть знания CSS. Возможность добавлять собственный CSS доступна только в Elementor Pro, поэтому убедитесь, что Elementor Pro установлен и активирован на вашем веб-сайте WordPress, прежде чем добавлять собственный CSS ( читайте: Elementor Free vs Pro).
Вы можете использовать фрагменты CSS, которые мы предоставили выше, если у вас есть такие же случаи для ваших проектов.