Как узнать настройки стиля виджета?

У каждого элемента виджета есть свои настройки стиля. Их можно посмотреть в административном меню (Ctrl + Shift + I или Cmd+Opt + I), на примере сайта с уже изменённым стилем кнопки.

Слева появится административная панель с кодом элемента. В нём содержится информация о стиле и атрибутах стиля.

На примере кнопки Купить, видим что ей задан класс class=btn-widget и параметры в виде атрибутов: class с параметрами фона, обязательными атрибутами type (тип) и tc-event (id нашего события).

Так как код каждого сайта уникален, то в вашем случае настройки могут иметь своё название, например, btn-widget, button-widget, tc-widget-button и др., важна лишь привязка к виджету.

Таким образом можно увидеть настройки любой части нашего виджета: фона, надписи, кнопки и цвета категорий. Для этого в левом верхнем углу нажмите стрелку и щёлкните на элемент виджета.

А целиком код страницы открывается через правую кнопку мыши 🠖 Посмотреть код страницы. Скопируйте из админ панели class=btn-widget 🠖 нажмите Ctrl + F на странице кода 🠖 смотрите настройки.

Очень похоже на то, что мы предлагаем в нашем ЛК:

Чтобы изменить настройки, то есть изменить код виджета, нужны административные права к интернет-площадке. В зависимости от платформы, на базе которой сделан сайт, редактор стиля (кода) будет отличаться.

Например, у нас есть инструкция по установке виджета на сайт на платформе Tilda.

Что делать если нам не нравятся цвета?

Для примера возьмём кнопку Купить.

1. Для этого нам нужен класс элемента class=btn-widget, копируем его.

2. Идём в админку нашего сайта, ищем элемент кнопки (либо есть отдельный блок изменения настроек/кода кнопки, либо один блок с кодом всего сайта).

3. Меняем настройки/код кнопки, вместо заданных параметров подставляем необходимые.

За основу можно взять настройки стиля нашей кнопки, их можно свободно менять 🠖 сохранить в админке своего сайта 🠖 увидеть результат :

<button

style= — атрибут стиля

"background-color: #FFD900; — цвет фона кнопки

color: black; — цвет текста

text-shadow: #f2f2f2 0 -1px 1px; — размер тени текста

font: bold 22px/41px 'PT Sans', Trebuchet, Helvetica, Arial, sans-serif; — настройки шрифта

padding: 0 13px; — отступы

text-align: center; — выравнивание текста

text-transform: lowercase; — только строчные буквы

border: 0; — границы

border-radius: 4px; — радиус границ

box-shadow: rgba(0, 0, 0, 0.75) 0 1px 1px; — настройки теней

appearance: button; — отображение элемента (зависит от платформы сайта)

cursor: pointer; — курсор при его наведении на кнопку

margin: 0; — величина отступа со всех сторон

vertical-align: baseline;" — вертикальные отступы

>Купить билет</button>

Можно придумать свой класс и прописать свои стили к нему.

Другие атрибуты стиля:

data-tc-round — Плавающая кнопка

Она всегда будет на виду у покупателя, даже если у вас на сайте очень много контента.

tc-position-bottom — положение кнопки на странице

data-tc-event — id события Ticketscloud

data-tc-token — токен (цифровой ключ индентификации и доступа)

data-tc-meta — периодическое событие (необязательный атрибут)

width: 110px;

height: 110px;

border-radius: 50%;

border: 3px solid transparent;

padding: 0 !important;

margin: 8px;

text-transform: none;

font: bold 16px/16px 'PT Sans', Trebuchet, Helvetica, Arial, sans-serif;

box-shadow: 0 0 0 5px #FFFFFF inset;

Параметры кнопок.

Стандарт:

padding: 0 13px;

text-align: center;

text-transform: lowercase;

border: 0;

border-radius: 4px;

Выбор цвета.

Мы не ограничиваем себя в цветах виджета. Но есть основные сочетания.

Для кнопки Купить:

Цвет кнопки #FFD900

Цвет текста #000000

Тень текста #f2f2f2

Цвет кнопки #f77100

Тень текста #ab4e00

Цвет кнопки #CB000D

Тень текста #7f0008

Цвет кнопки #808080

Тень текста #5a5a5a

Цвет кнопки #97b700

Тень текста #4a6b00

Примеры цвета категорий на схеме:

#02a8e4

#5c58b0

#8f4b14

#3a872

#5b3c6c

#175184

Возможно наши цвета не подходят, тогда используйте иную палитру цветов для WEB, например, Артемия Лебедева.

Развёрнутые примеры кнопок.

Вот пример настроек плавающей кнопки нашего виджета:

Открываем код страницы в ЛК 🠖 <link rel="stylesheet" href="/static/css/tc-widget-button.css" />

button[data-tc-round] {

width: 110px;

height: 110px;

border-radius: 50%;

border: 3px solid transparent;

padding: 0 !important;

margin: 8px;

text-transform: none;

font: bold 16px/16px 'PT Sans', Trebuchet, Helvetica, Arial, sans-serif;

position: fixed;

z-index: 111111;

box-shadow: 0 0 0 5px #FFFFFF inset;

padding: 0 !important;

}

button[data-tc-round] > img {

width: 35px;

height: 35px;

}

button[data-tc-round] > div {

max-height: 32px;

min-height: 32px;

width: 75%;

margin: 0 auto;

display: flex;

justify-content: center;

align-items: center;

overflow: hidden;

text-overflow: ellipsis;

}

Можно придумать свои атрибуты и задать свой стиль, вот пример кнопки с градиентом:

<a href="#" class="button10">кнопка</a>

<style>

a.button10 {

display: inline-block;

color: black;

font-size: 125%;

font-weight: 700;

text-decoration: none;

user-select: none;

padding: .25em .5em;

outline: none;

border: 1px solid rgb(250,172,17);

border-radius: 7px;

background: rgb(255,212,3) linear-gradient(rgb(255,212,3), rgb(248,157,23));

box-shadow: inset 0 -2px 1px rgba(0,0,0,0), inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px rgba(255,255,0,0);

transition: box-shadow .2s, border-color .2s;

}

a.button10:hover {

box-shadow: inset 0 -1px 1px rgba(0,0,0,0), inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px rgba(255,255,0,.5);

}

a.button10:active {

padding: calc(.25em + 1px) .5em calc(.25em - 1px);

border-color: rgba(177,159,0,1);

box-shadow: inset 0 -1px 1px rgba(0,0,0,.1), inset 0 1px 2px rgba(0,0,0,.3), inset 0 0 0 60px rgba(255,255,0,.45);

}

</style>

В качестве альтернативы, для изменения настроек кнопки подходят сторонние сервисы, например Генератор HTML кнопок

  • Настройте дизайн кнопки, но ссылку кнопки не указывайте

  • Потом внизу в графе "код для установки на сайт": удалите надпись href=""

  • Вставьте вместо удалённой href="" из кода кнопки ЛК только: data-tc-event="5e5e5c103534b15d152f328e" data-tc-token="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImlzcyI6InRpY2tldHNjbG91ZC5ydSJ9.eyJwIjoiNWIyZDA2YWM1YzNlYjMwMDBjNDc1ZTM2In0.KCvealeHshYm5Hd4Ej7PUPfqjHT5ZksLG3-CTET6Xp4"

  • Вставьте полученный код на свою страницу.

В данном случае используется пример, у вас будут другие идентификаторы data-tc-event и data-tc-token.

Вы нашли ответ?