Стилизация элементов в Rich Text

Если вам нужно стилизовать элементы виджета Rich Text, (заголовки, текст, списки, цитаты, ссылки и другие), используйте код из примеров ниже.

Код можно добавить с помощью виджета Embed (доступен на тарифах Team и Bussiness).

Заголовки h1, h2, h3 и т.д.

.rich-text h1 {}
.rich-text h2 {}
.rich-text h3 {}
.rich-text h4 {}
.rich-text h5 {}
.rich-text h6 {}

Пример рабочего кода

<style> 
.rich-text h2 {
    font-family: 'Inter';
    font-weight: 900;
    font-size: 32px;
    line-height: 110%;
    letter-spacing: -0.03em;
    font-style: italic;
    margin-bottom: 0.43em;
    margin-top: 1.6em;
    }
</style> 

Обычный текст

.rich-text p {}

Пример рабочего кода

<style> 
.rich-text p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  }
</style> 

Выделение, курсив, подчеркивание, зачеркивание

.rich-text strong {}
.rich-text em {}
.rich-text u {}
.rich-text s {}

Маркированный и нумерованный списки

.rich-text ul {}
.rich-text ol {}

Пример рабочего кода

<style> 
.rich-text ul {
    padding-inline-start: 20px;  
    }

/* стилизация маркера и цифр через тег ::marker */
::marker {
    color: red;
    }
</style> 

Цитата

.tt-rich-blockquote {}

Пример рабочего кода

<style> 
.tt-rich-blockquote {
  border-left: 2px solid black;
  padding: 10px 20px;
  margin-left: 20px;
  }
</style> 

Ссылка

.tt-rich-link {}

Пример рабочего кода

<style> 
.tt-rich-link {
  color: #964b00;
  text-decoration: underline;
  }
</style> 

Изображения, видео

.tt-rich-figure :is(img,video,iframe) {}

Пример рабочего кода

<style> 
  .tt-rich-figure :is(img,video,iframe) {
    border-radius: 8px;
  }
</style> 

Стилизация для разных брейкпоинтов

/* Планшеты (ширина до 991px) */
@media (max-width: 991px) {}

/* Мобильные устройства горизонтальные (пример: ширина до 767px) */
@media (max-width: 767px) {}

/* Мобильные устройства портретные (пример: ширина до 479px) */
@media (max-width: 479px) {}

Пример рабочего кода

<style> 
/* Планшеты (пример: ширина до 991px) */
@media (max-width: 991px) {
  .rich-text h2 {
    font-size: 26px;
  }
}

/* Мобильные устройства горизонтальные (пример: ширина до 767px) */
@media (max-width: 767px) {
  .rich-text h2 {
    font-size: 22px;
  }
}
</style> 

Использование нескольких тегов

Когда вы прописываете сразу несколько стилей, вам не нужно указывать каждый раз <style></style>. Просто пропишите все последовательно.

<style> 
.rich-text h2 {
    font-family: 'Inter';
    font-weight: 900;
    font-size: 32px;
    line-height: 110%;
    letter-spacing: -0.03em;
    font-style: italic;
    margin-bottom: 0.43em;
    margin-top: 1.6em;
    }

.rich-text p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  }

.tt-rich-link {
  color: #964b00;
  text-decoration: underline;
  }

.tt-rich-figure :is(img,video,iframe) {
  border-radius: 8px;
  }

/* Планшеты (пример: ширина до 991px) */
@media (max-width: 991px) {
  .rich-text h2 {
    font-size: 26px;
  }
}

/* Мобильные устройства (пример: ширина до 767px) */
@media (max-width: 767px) {
  .rich-text h2 {
    font-size: 22px;
  }
}
</style> 

В результате выполнения этого кода в Rich Text произойдут изменения:

• h2 поменяет шрифт, толщину, размер, межсимвольное расстояние и т.д.
• Rich Text будет адаптирован на планшетах и телефонах
• обычный текст поменяет отступы сверху и снизу
• ссылка поменяет цвет
• медиа (фото и видео) поменяют скругления

Некоторые CSS свойства

Свойство	На понятном
font-size:	размер шрифта
font-weight:	жирность шрифта (400 - regular, 500 - medium и т.д.)
font-style:	стиль шрифта (italic)
color:	цвет (blue, black, red и тд)
margin-top:	отступ сверху
margin-bottom:	отступ снизу
border-radius:	скругление углов