Редагування зовнішнього вигляду LGT за допомогою CSS стилів
Якщо вам не вистачає вбудованих можливостей редактора для зміни зовнішнього вигляду вбудованих форм, віджетів і спливаючих вікон LGT на вашому сайті і вам потрібна повна інтеграція з дизайном вашого сайту, ви можете наслідувати кілька простих кроків:
CSS стилі редагуються з налаштувань LGT у вкладці "Traffic" у вікні "Скрипт для тега HEAD".
Для того, щоб змінити стилі, потрібно написати наступний код
<style>
// Місце для вставлення ваших стилів
</style>
Розглянемо ситуацію, в якій ми хочемо усунути тінь від форми, для кращої інтеграції в загальний дизайн вашого сайту:
Приклад коду, який потрібно вставити в "Скрипт для тега HEAD", як прибрати тінь з LGT:
<style>
#leadgentool-card .adaptive-container {
box-shadow: none !important;
}
</style>
Розшифрування коду:
#leadgentool-card - Унікальний ідентифікатор для нашої LGT не є класом.
adaptive-container - Клас LGT контейнера
box-shadow – Стиль визначальний тінь для компонента, його параметр none – відключає тінь. (Докладніше про стилі див. Довідку в кінці документа)
!important - Додається в кінці параметра, вказує на те, що цій установці надається пріоритет і що завжди буде використовуватися саме цей параметр. Не обов'язковий, але якщо при додаванні стилю стиль не застосовується, краще все-таки вказати.
Інші класи компонентів LGT:
.video - Клас для відео
.top-image - Клас для картинки
.text-block - Клас для тексту
.social-button - Клас соціальних кнопок
Основні стилі це:
background - зміна тла
color - зміна кольору тексту
box-shadow - додавання тіні
padding або margin - додавання відступів елемента
width - ширина елемента
height - висота елемента
font-size - розмір тексту
Основні параметри для стилів:
Колір в hex - #FF0000 або rbg - rgb(255,0,0)
Розміри в пікселях, наприклад 16px
Довідник за CSS (стилями): https://html5css.ru/cssref/default.php