Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

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

  

Image Removed

  1. На последнем шаге создания LGT формы, мы можем получить ее класс (в этом случае это leeloo-hash-dz9yav), он генерируется автоматически

...

  1. Для того, чтобы изменить стили, нужно написать следующий код
    <style>
    // Место для вставки ваших стилей
    </style>

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

Для того чтобы убрать тень, нужно написать в css такой фрагмент кода:

.<название_класса_из_последнего_шага>

...

 

Пример кода, который нужно вставить в “Cкрипт для тега 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 - Класс социальных кнопок

Image Added

Основные стили это:

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