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 теж підтримується.