Редагування зовнішнього вигляду LGT за допомогою CSS стилів

 

 

Якщо вам не вистачає вбудованих можливостей редактора для зміни зовнішнього вигляду вбудованих форм, віджетів і спливаючих вікон LGT на вашому сайті і вам потрібна повна інтеграція з дизайном вашого сайту, ви можете наслідувати кілька простих кроків:

  1. CSS стилі редагуються з налаштувань LGT у вкладці "Traffic" у вікні "Скрипт для тега HEAD".

  

  1. Для того, щоб змінити стилі, потрібно написати наступний код
    <style>
    // Місце для вставлення ваших стилів
    </style>

  1. Розглянемо ситуацію, в якій ми хочемо усунути тінь від форми, для кращої інтеграції в загальний дизайн вашого сайту: 

Приклад коду, який потрібно вставити в "Скрипт для тега 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