Описание:
В текстовом блоке или в ZeroBlock Tilda стоит маркированный список, но стандартные точки не подходят под дизайн сайта или заказчик хочет видеть на их месте фирменные элементы.
Модификация позволяет заменить стандартные точки маркированного списка на свое изображение (PNG, JPEG, SVG и даже GIF).
Модификация позволяет заменить стандартные точки маркированного списка на свое изображение (PNG, JPEG, SVG и даже GIF).
Присвоить класс блоку, в котором будет маркированный список (Настройки → CSS Class Name).
Пошаговая инструкция подключения модификации
Шаг #1
Шаг #2
Внизу сайта поставить блок IM01 в контент загрузить изображение или векторную иконку, которая должна быть вместо стандартного маркера (буллита), размер подстраивается автоматически относительно размера текста, новый буллит должен быть в фрейме 1:1.
Перейти в раздел в CSS сайта. (Настройки сайта → Еще → Пользовательские CSS-стили → Редактировать CSS).
Шаг #3
Шаг #4
Вставить код (код также можно вставить в блок T123, но тогда он будет работать только на странице, на которой он расположен).
<style>
./*название класса*/ ul {
list-style: none;
margin: 0;
padding: 0;
}
./*название класса*/ ul li {
position: relative;
padding-left: 2em;
line-height: inherit;
}
./*название класса*/ ul li::before {
content: "";
position: absolute;
top: 0.15em; /* ! Настроить высоту от верхней границы ! */
left: 0.5em;
width: 1em;
height: 1em;
background-image: url(" "); /* Ссылка на изображение */
background-size: cover;
background-repeat: no-repeat;
transform: translateY(0.125em); /* ! Настроить позицию маркера относительно первой строки ! */
}
</style>Скопировать ссылку на картинку, открыв вкладку контент, кликнуть по картинке ПКМ → скопировать URL картинки;
Шаг #5
Далее название класса блока и ссылку необходимо вставить в код модификации, места куда надо вставлять отмечены комментариями;
Шаг #6
Опубликуйте страницу, в редакторе Tilda новый маркер оторажаться не будет, он будет виден только на опубликовонной страницу;
Шаг #7
Стоит обратить внимание на положение маркера относительно первой строки. В зависимости от межстрочного интервала положение маркера может двигать, в коде прописано, где можно поменять расстояние.
Готово! Теперь на блоках с определенным классом маркированные списки будут уникальными со своим значком.
PS: Можно использовать для всего сайта, надо убрать в коде привязку к классу (.название_класса удалить), но если на сайте есть еще модификации, может возникнуть конфликт и изображение маркера может появится на сайте в рандомных местах.
PS: Можно использовать для всего сайта, надо убрать в коде привязку к классу (.название_класса удалить), но если на сайте есть еще модификации, может возникнуть конфликт и изображение маркера может появится на сайте в рандомных местах.
Шаг #8
Видео инструкция по подключению модификации
