Как применять кастомный код к отдельным виджетам

У каждого виджета в вашем проекте есть уникальный идентификатор — ID. Используя его, вы можете изменять свойства отдельных виджетов при помощи кастомного кода.

К примеру, вы хотели бы анимировать текст и использовать для этого готовый скрипт. Сделайте следующее:

1. Нажмите правой клавишей мыши (двойной клик на тачпэде) на виджет, чтобы открыть контекстное меню, а затем выберите «Просмотреть код» (Inspect). Откроется вкладка Elements консоли вашего браузера.
2. Найдите строчку, которая относится к вашему виджету, и скопируйте значение параметра ‘’data-id attribute’’ (cочетание букв и цифр после значка =). Именно это значение вы будете использовать для того, чтобы указать, к какому виджету должен применяться ваш скрипт.
3. Создайте виджет Code, откройте вкладку СSS и добавьте скрипт.
   
   

Попробовать этот способ на практике вы можете на примере кода, который преобразовывает текст таким образом, что буквы всплывают по отдельности — как будто их набирают на печатной машинке или клавиатуре. 

Чтобы протестировать его, скопируйте код ниже и вставьте его во вкладку CSS виджета Code.

[data-id="PASTE WIDGET ID HERE"] > div {
overflow: hidden;
white-space: nowrap;
border-right: 1px solid; /* Cursor style */
animation: typing 4s steps(15, end), blink-caret 0.5s 8 forwards; /* 15 steps per 4s (15 characters in the line)*/
}
/* Input animation */ @keyframes typing { from { width: 0 } to { width: 100% }
}
/* Cursor animation */
@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: black } /* black — cursor color */
}