CSS Editor

Comfort+ Доступен на тарифах Comfort и Premium.

Что такое CSS Editor?#

CSS Editor позволяет писать произвольный CSS, который инжектируется прямо на публичную страницу квиза. Меняйте цвета, шрифты, отступы, скругления, анимации — всё, что возможно в CSS.

В отличие от других конструкторов, требующих !important на каждом правиле, Qwizoo построен на CSS custom properties (переменных). Измените --qz-primary один раз — обновятся все кнопки, подсветка выбора и прогресс-бар.

Как открыть CSS Editor#

1. 1Откройте квиз в конструкторе.
2. 2Нажмите вкладку Design на правой панели.
3. 3Перейдите на суб-вкладку CSS (четвёртая, после Layout).
4. 4Напишите или вставьте CSS в редактор.
5. 5Изменения сохраняются автоматически — откройте квиз в новой вкладке для просмотра.

CSS-переменные#

Задаются на корневом элементе квиза и каскадируют на все дочерние компоненты. Переопределяйте в :root или на [data-quiz="container"].

Таргетирование — data-quiz-* селекторы#

Каждый ключевой элемент имеет стабильный атрибут data-quiz или data-quiz-btn. Атрибутные селекторы имеют выше специфичность чем классовые — переопределяют Tailwind без !important.

Макет и навигация

Прогресс-бар

Шаг Приветствия

Вопрос и варианты ответа

Лид форма

Шаг Результата

Калькулятор формул

Спасибо и Поделиться

Видео и Календарь

Примеры кода#

Изменить цвет бренда

:root {
  --qz-primary: #7B61FF;
}

Тёмный режим

:root {
  --qz-bg: #1A1A2E;
  --qz-card-bg: #16213E;
  --qz-text: #F9FAFB;
  --qz-shadow: 0 24px 60px rgba(0,0,0,0.40);
}

Кнопки-«таблетки»

:root {
  --qz-btn-radius: 9999px;
}

Градиентная кнопка «Далее»

[data-quiz-btn="next"] {
  background: linear-gradient(135deg, #FF7A00, #FF4500) !important;
  letter-spacing: 0.04em;
}

Кастомная карточка

[data-quiz="card"] {
  border-radius: 24px;
  border: 2px solid var(--qz-primary);
  padding: 40px;
}

Подключить Google Font

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

:root {
  --qz-font: Montserrat, sans-serif;
}

Увеличить размер вопроса

:root {
  --qz-q-size: 26px;
}

Стилизовать поля ввода

[data-quiz="text-input"] {
  border-radius: 8px;
  border: 2px solid var(--qz-primary);
  font-size: 16px;
}

Стилизовать заголовки и результат

[data-quiz="title"] {
  font-size: 2rem;
  letter-spacing: -0.02em;
}
[data-quiz="result-value"] {
  font-size: 3rem;
}

Встроенные сниппеты#

Нажмите любой сниппет в правой панели — он добавится в редактор. Сниппеты дописываются к существующему CSS, не заменяют его.

• Тёмный режим — тёмный фон и карточка со светлым текстом
• Фиолетовый акцент — заменяет основной цвет на фиолетовый
• Без тени карточки — убирает тень
• Больший размер вопроса — шрифт вопроса до 26px
• Google Font — Montserrat — подключает и применяет Montserrat
• Градиентная кнопка — оранжево-красный градиент
• Кастомная карточка — скруглённая карточка с цветной рамкой

Советы и ограничения#

• Копируйте селекторы из панели — панель Селекторы элементов в редакторе содержит все 16 селекторов с кнопкой копирования в один клик.
• CSS-переменные имеют приоритет над inline-стилями — внутри используется var(--qz-primary), поэтому изменение переменной обновляет всё.
• Атрибутные селекторы перебивают Tailwind-классы — [data-quiz="card"] имеет специфичность (0,1,0,0) против (0,0,1,0) — отступы и размеры переопределяются без проблем.
• Цвет подсветки при выборе использует hex-alpha (#FF7A0012) — для изменения нужен !important.
• Лимит 50 000 символов — более чем достаточно.
• @import для Google Fonts работает — style-тег инжектируется в head страницы, @font-face тоже поддерживается.