Внешний вид квиза задают две карточки редактора: «Шаблон» и «Дизайн». Шаблон меняет не только цвета, но и устройство экрана: где стоит прогресс, как выглядят варианты ответа, есть ли колонка эксперта. В «Дизайне» шаблон подгоняется под фирменный стиль сайта. Ниже разбираем все пять шаблонов, каждое поле «Дизайна» и то, как квиз выглядит на телефоне.
Пять шаблонов
Шаблон выбирается в карточке «Шаблон» на любом тарифе, превью справа обновляется сразу. Названия и описания совпадают с подписями в кабинете.
| Шаблон | Описание в кабинете | Как выглядит и для чего |
|---|---|---|
| Минимал | Белый лист, строки с отметкой, тонкий прогресс | Белый фон, варианты строками с кружком, тонкая полоса прогресса сверху, шрифт Inter. Подходит почти любому сайту, это шаблон по умолчанию. |
| Стекло | Матовая панель на градиенте, варианты плитками | Полупрозрачная панель на мягком градиенте, варианты плитками, прогресс точками, шрифт Montserrat. Хорош для квизов с картинками и эмодзи. |
| Неон | Тёмная игра: светящийся выбор, конфетти в финале | Тёмный фон, выбранный вариант подсвечивается, на экране результата и «Спасибо» летит конфетти, шрифт Unbounded. Для тестов, викторин и молодёжных проектов. |
| Премиум | Консультант: вопрос слева, эксперт и подсказка справа | Бежевая палитра, заголовки с засечками PT Serif, счётчик «Вопрос 2 из 5». С включённым экспертом справа появляется колонка с его фото, именем и подсказкой к текущему вопросу. Для дорогих услуг и консультаций. |
| Пастель | Диалог: вопрос пузырём, ответы пилюлями | Вопрос приходит сообщением, как в мессенджере, ответы округлыми кнопками-пилюлями, выбранный ответ появляется справа, шрифт Nunito. С экспертом его фото становится аватаром в диалоге. |
Шаблон можно сменить в любой момент: вопросы, логика и тексты от этого не меняются.
Карточка «Дизайн» на Pro и Business
Тонкие настройки доступны на тарифах Pro и Business. На Free поля карточки видны, но закрыты замком с подсказкой «Цвета, шрифт, скругления и анимация — на тарифах Pro и Business. На Free доступен выбор шаблона» и кнопкой «Подключить Pro». Сравнение тарифов — на странице «Тарифы».
Поля сгруппированы в три блока.
«Цвета»
- «Акцент: кнопки и выбор» — цвет кнопок, выбранного варианта и прогресса;
- «Текст на кнопке» — цвет надписи на акцентных кнопках;
- «Текст» — основной цвет текста;
- «Карточки вариантов» — фон вариантов ответа и панелей.
«Фон и раскладка»
- «Фон» и «Градиент фона»: если задан второй цвет, фон становится градиентом;
- «Фоновая картинка (https://…)» — ссылка на изображение, принимаются только адреса https;
- «Картинки вопросов»: «Сбоку», «Сверху» или «Не показывать» — где выводится картинка, прикреплённая к вопросу; с «Не показывать» скрывается и картинка стартового экрана;
- «Ширина квиза» — от 520 до 1100 px с шагом 20.
«Форма, шрифт и движение»
- «Скругление углов» — от 0 до 32 px;
- «Шрифт»: Inter, Montserrat, Nunito, Unbounded, Roboto, PT Serif или «Шрифт сайта», чтобы квиз взял шрифт вашей страницы;
- «Смена шагов»: «Сдвиг», «Растворение», «Приближение» или «Без анимации»;
- «Тень у квиза».
Кнопка «Вернуть значения шаблона» сбрасывает все поля к значениям выбранного шаблона. Удобно, если вы поэкспериментировали с цветами и хотите начать заново. Посетителям, у которых в системе включено уменьшение движения, квиз показывает шаги без анимации, а Неон обходится без конфетти.
Стартовый экран и эксперт
Стартовый экран настраивается на вкладке «Старт» карточки «Квиз». Если не указать «Картинка стартового экрана», квиз рисует иллюстрацию в своих цветах: макет карточки вопроса, который меняется вместе с шаблоном и акцентом. Своя картинка подставляется по ссылке https://, загрузите фото на свой сайт или в облако и вставьте адрес. Если включён бонус с анонсом, на стартовом экране появляется плашка «Бонус за прохождение».
Эксперт включается переключателем «Показывать эксперта»: «Имя», «Должность», «Приветствие» и «Фото (квадратное)». Без фото показывается кружок с первой буквой имени. Подсказки под вопросами при включённом эксперте звучат от его лица. Сильнее всего эксперт заметен в Премиуме и Пастели, в остальных шаблонах приветствие показывается на стартовом экране, а подсказка к вопросу выглядит репликой с аватаром под заголовком вопроса.
Квиз на телефоне
Отдельной мобильной версии настраивать не нужно, квиз сам перестраивается на узком экране:
- во всплывающем окне квиз занимает весь экран, кнопки «Назад» и «Далее» стоят внизу с учётом вырезов и системной полосы;
- карточки с картинками выстраиваются по две в ряд, плитки Стекла и Неона — в одну колонку;
- картинка вопроса, заданная «Сбоку», на телефоне не показывается, чтобы не отнимать место у вариантов;
- колонка эксперта в Премиуме превращается в строку с аватаром над вопросом.
Проверить мобильный вид можно в превью, переключив его на «Телефон». Если квиз не нужен на телефонах, выключите «Показывать на мобильных» в карточке «Основное»: на телефонах с сайта пропадут и встроенный блок, и кнопка, и окно. Отдельная страница по ссылке продолжит открываться: посетитель сам перешёл по ней.
White Label: ссылка на сервис
Под квизом мелким шрифтом стоит строка «работает на технологии Все Виджеты». На тарифе Business в карточке «White Label» в списке «Брендирование» можно выбрать «Отключить ссылку на сервис» или «Свой HTML-код», чтобы поставить свою подпись. На Free и Pro ссылка остаётся.
Что почитать дальше
- Как создать квиз на сайт: пошаговая инструкция — создание, способы показа, код и статистика.
- Типы вопросов, логика ветвлений и результаты квиза — всё о содержимом.
- Цели Яндекс Метрики новых виджетов — как считать прохождения и заявки.
- Конструктор квизов — возможности и живой пример.