Как задать CSS-класс для блока или элемента?

В конструкторе есть возможность задавать стили для блоков и элементов, а также «привязывать» объекты к скриптам. Например, таким образом вы можете сделать эффект блика на кнопке, обводку текста и другие модификации.

Настройка CSS для блоков

Нужно перейти в настройки блока, добавить CSS-класс и указать его название в html-коде.

Рассмотрим подробнее, как работать с функцией, на примере добавления градиентного заголовка:

1. Добавьте на страницу блок из категории «Заголовок», например title-01.
2. Перейдите в настройки блока и во вкладке «Контент» кликните на раздел CSS.
3. В поле Class Name задайте название класса, например text-gradient. 
4. Добавьте блок «HTML-код» из категории «Другое».
5. Скопируйте код ниже, вставьте его в блок и опубликуйте страницу.
   Готово!

<style>

    .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% {background-position: 0% 40%;}   

    50% {background-position: 100% 40%;}

    100% {background-position: 0% 60%;}
}

</style>

Посмотреть, что получилось →

Настройка CSS для элемента в дизайн-блоке

Можно задать класс заголовку, изображению, галерее и другим элементам, а затем указать название класса в html-коде.

Рассмотрим, как работает функция, на примере. Добавим анимацию при наведении на кнопку: 

1. Перейдите в настройки страницы и во вкладке HTML добавьте перед закрывающим тегом head код: <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
2. Добавьте на страницу «Дизайн-блок», затем элемент «Кнопка».
3. Откройте настройки элемента и нажмите CSS. В поле Class Name задайте название класса, например magnitbutton.
4. Добавьте блок «HTML-код» из категории «Другое» или элемент «Код» в дизайн-блоке.
5. Скопируйте код ниже, вставьте его в блок и опубликуйте страницу.

Готово!

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script>

<script>

    if ($(window).width() >768) {

          var magnetizm=document.querySelectorAll('.magnitbutton');

          magnetizm.forEach(function (elem) {

              $(document).on('mousemove touch', function (e) {

                  magnetize(elem, e);

              });

    })

             function magnetize(el, e) {

             var mX=e.pageX,

                   mY=e.pageY;

             const item=$(el);

    const customDist=item.data('dist') *20||120;

    const centerX=item.offset().left+ (item.width() /2);

    const centerY=item.offset().top+ (item.height() /2);

             var deltaX=Math.floor((centerX-mX)) *-0.45;

             var deltaY=Math.floor((centerY-mY)) *-0.45;

             var distance=calculateDistance(item, mX, mY);

    if (distance<customDist) {

        TweenMax.to(item, 0.5, { y: deltaY, x: deltaX, scale: 1.1 });

    item.addClass('magnet');

    }

    else {

        TweenMax.to(item, 0.6, { y: 0, x: 0, scale: 1 });

        item.removeClass('magnet');

}
    }

             function calculateDistance(elem, mouseX, mouseY) {

             return Math.floor(Math.sqrt(Math.pow(mouseX- (elem.offset().left + (elem.width() /2)),                            2) +Math.pow(mouseY- (elem.offset().top + (elem.height() /2)), 2)));

}

    }

</script>

Посмотреть, что получилось →