Добавление CSS-классов к элементам
Вы можете добавить вплоть до 5 значений атрибута class почти к каждому элементу на вашем сайте. С помощью CSS-классов можно осуществлять необходимые вам изменения элементов путем добавления CSS-кода.
Подсказка: вы можете добавить необходимый вам CSS-код с помощью данной инструкции. Добавление кода доступно только для сайтов с платными подписками.
Добавление CSS-классов
Вы можете добавить CSS-классы в большинство элементов на вашем сайте: кнопки, изображения, иконки, текст, меню сайта, контактные формы и т.д. Для этого выполните следующие действия:
Откройте настройки нужного элемента. Примеры открытия настроек:
Перейдите во вкладку Продвинутые и введите необходимое имя класса для элемента в поле раздела Имена CSS-классов :
Важно: каждый CSS-класс должен начинаться с перфикса «wl-» (без кавычек). Это необходимо, чтобы отличить ваши собственные классы от используемых нашей платформой.
Примечание: минимальная длина имени класса — 4 символа (вместе с префиксом «wl-«), максимальная длина — 25 символов.
Вы можете добавить больше CSS-классов к элементу с помощью кнопки Добавить класс :
Примечание: можно добавить максимум 20 CSS-классов к одному элементу.
Готово. Теперь вы можете использовать этот CSS-класс во время добавления собственного кода на ваш сайт. Пример:
Опубликуйте ваш сайт, чтобы изменения вступили в силу.
Примечание: наша служба поддержки не предоставляет помощь в создании или редактировании собственного кода. Мы можем только предоставить вам инструкцию о том, как вставить код на ваш сайт.
Обновлено на: 05/12/2023
Была ли эта статья полезна?
Как добавить css класс элементу?
А как использовать? Можете подробней код написать? Пожалуйста!
Stacy None, Смотря что нужно. Если например по клику то через addeventlistener вешаем событие и меняем класс. А вообще советую изучить этот сайт :
learn.javascript.ru
Алексей Ярков @yarkov Куратор тега JavaScript
Тогда уж
classList.add
classList.remove
Как добавлять класс css динамически?
Есть меню, все элементы которого открываются вправо вниз лесенкой.
Кроме последнего, последний элемент должен открываться вправо вверх.
я добавил:
.menu ul li:hover > .bottom-menu
Но нужно делать это динамически. Т.е. у меня все категории меню перебираются итератором each (+ например, у последнего элемента 4 уровня вложенности и класс .bottom-menu нужно добавить всем субменюшкам.) Какие есть варианты для таких случаев?
html,* < margin: 0; padding: 0; font-size: 16px; >body < background: #eee; >a < text-decoration: none; >.menu < z-index: 100; width: 230px; position: relative; display: block; background: #fff; >.menu ul < margin: 0; padding: 0; list-style: none; >.menu ul li < display: block; border-bottom: #ccc 1px solid; position: relative; /*это добавить*/ >.menu ul li a < display: block; color: #000; padding: 5px; >.menu ul li.active > a, .menu ul li a:hover < text-decoration: none; color: #fff; background: #ccc; >.menu ul li .submenu < display: none; position: absolute; width: 100%; top: 0; left: 100%; background: #ddd; >.menu ul li:hover > .submenu < display: block; >.menu ul li:hover > .bottom-menu
Как задать CSS-класс для блока или элемента?
В конструкторе есть возможность задавать стили для блоков и элементов, а также «привязывать» объекты к скриптам. Например, таким образом вы можете сделать эффект блика на кнопке, обводку текста и другие модификации.
Настройка CSS для блоков
Нужно перейти в настройки блока, добавить CSS-класс и указать его название в html-коде.
Рассмотрим подробнее, как работать с функцией, на примере добавления градиентного заголовка:
- Добавьте на страницу блок из категории «Заголовок», например title-01.
- Перейдите в настройки блока и во вкладке «Контент» кликните на раздел CSS.
- В поле Class Name задайте название класса, например text-gradient.
- Добавьте блок «HTML-код» из категории «Другое».
- Скопируйте код ниже, вставьте его в блок и опубликуйте страницу.
Готово!
.text-gradient animation: gradient 15s ease infinite;
background: linear-gradient(-45deg, rgb(238 119 82), rgb(231 60 126), rgb(35 166 213), rgb(35 213 171));
background: -moz-linear-gradient(-45deg, rgb(238 119 82), rgb(231 60 126), rgb(35 166 213), rgb(35 213 171));
background: -webkit-linear-gradient(-45deg, rgb(238 119 82), rgb(231 60 126), rgb(35 166 213), rgb(35 213 171));
background: -o-linear-gradient(-45deg, rgb(238 119 82), rgb(231 60 126), rgb(35 166 213), rgb(35 213 171));
background: -ms-linear-gradient(-45deg, rgb(238 119 82), rgb(231 60 126), rgb(35 166 213), rgb(35 213 171));
background: linear-gradient(-45deg, rgb(238 119 82), rgb(231 60 126), rgb(35 166 213), rgb(35 213 171));
background-size: 300% 200%;
background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
>@keyframes gradient 0%
50%
100%
>
Настройка CSS для элемента в дизайн-блоке
Можно задать класс заголовку, изображению, галерее и другим элементам, а затем указать название класса в html-коде.
Рассмотрим, как работает функция, на примере. Добавим анимацию при наведении на кнопку:
- Перейдите в настройки страницы и во вкладке HTML добавьте перед закрывающим тегом head код: < script src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js' >
- Добавьте на страницу «Дизайн-блок», затем элемент «Кнопка».
- Откройте настройки элемента и нажмите CSS. В поле Class Name задайте название класса, например magnitbutton.
- Добавьте блок «HTML-код» из категории «Другое» или элемент «Код» в дизайн-блоке.
- Скопируйте код ниже, вставьте его в блок и опубликуйте страницу.