Внешний вид
Стиль — весь облик квиза: цвета, рамки, скругления, шрифты, кнопки, варианты ответа, фон, полоса прогресса и анимация. В плагине 12 готовых стилей, можно сделать и свои. У каждого квиза в редакторе выбирается стиль, и сменить его можно в любой момент.
Где найти: eLDeR Quiz→Настройки→Внешний вид
Как это устроено
- Квизу в редакторе выбирают стиль (панель «Внешний вид»). Первая карточка — «Стиль по умолчанию»: такой квиз оформлен стилем, который выбран здесь в поле «Стиль по умолчанию».
- Новые квизы создаются с выбором «Стиль по умолчанию». Поменяли стиль по умолчанию — сменили облик всех таких квизов разом.
- Правка стиля сразу касается всех квизов с этим стилем. Нужен особый вид одному квизу — сделайте для него свой стиль.
- Своих цветов и размеров у квиза нет: всё оформление — в стиле.
- При экспорте квиз уносит свой стиль с собой, при импорте на другом сайте стиль создаётся заново (Импорт и экспорт).
Готовые стили
| Стиль | Какой он |
|---|---|
| Стандартный | Исходный вид плагина: фиолетовый акцент и светлые карточки. |
| Чистый | Чернила на белом, тонкие линии, без теней. Подойдёт любому сайту. |
| Деловой | Спокойный синий, строгие углы и лёгкая тень. Для услуг и B2B. |
| Полночь | Тёмно-синяя тема с мягким лавандовым свечением. |
| Стекло | Матовое стекло на цветных пятнах, кнопки-«таблетки» с градиентом. |
| Леденец | Яркий розовый, круглые формы и игривое появление. Для бьюти и детских тем. |
| Необрутализм | Толстые чёрные линии, жёсткие тени и жирный шрифт на масляно-жёлтом. |
| Эко | Глубокий зелёный на шалфейном фоне, классические засечки в заголовках. |
| Синтвейв | Ночной фиолетовый с розово-фиолетовым градиентом и свечением. |
| Бутик | Баклажановый и белый, контрастные засечки, острые углы. |
| Закат | Градиент от кораллового к розовому, белая карточка и глубокая тень. Хорошо продаёт. |
| Контрастный | Чёрное на белом, крупный текст и толстые рамки. Легко читать всем. |
Как настроить или создать стиль
- Откройте eLDeR Quiz→Настройки→Внешний вид. На карточке стиля — живое превью.
- Нажмите «Настроить» — откроется редактор: слева настройки по группам, справа предпросмотр, по вариантам ответа в нём можно щёлкать.
- Меняйте значения — предпросмотр обновляется сразу.
- Нажмите «Сохранить» внизу экрана. До сохранения квизы на сайте не меняются.
| Кнопка | Что делает |
|---|---|
| «Настроить» | На карточке стиля: открывает редактор. Готовый стиль после правки помечается «Изменён». Остальные кнопки — в шапке редактора. |
| «Вернуть исходный» | Возвращает готовому стилю исходный вид. Есть только у изменённых готовых стилей. |
| «Дублировать» | Создаёт свой стиль — копию выбранного, с названием «… — копия». |
| «Новый стиль» | Последняя карточка галереи: создаёт свой стиль — копию «Стандартный». |
| «Сделать стилем по умолчанию» | Делает стиль стилем по умолчанию — то же, что выбрать его в поле «Стиль по умолчанию». У текущего стиля по умолчанию кнопки нет. |
| «Удалить» | Только у своих стилей. Квизы с этим стилем переходят на стиль по умолчанию. |
| «Название стиля» | Название своего стиля: его видно в галерее и в редакторе квиза. |
Настройки вкладки
Стили квизов
Стиль — это весь внешний вид квиза: цвета, рамки, скругления, шрифты, кнопки, варианты ответов и анимация. Выберите готовый или настройте свой; любой квиз может сменить стиль в редакторе в любой момент.
Его получают новые квизы и все квизы, у которых в редакторе выбран «Стиль по умолчанию». Смените его здесь — и все такие квизы сразу поменяют вид.
- Стандартный
- Чистый
- Деловой
- Полночь
- Стекло
- Леденец
- Необрутализм
- Эко
- Синтвейв
- Бутик
- Закат
- Контрастный
Свой CSS
Правила добавляются на каждую страницу сайта.
Только CSS-правила, без тега <style>. Классы квиза начинаются с .elder-quiz; у квиза с определённым стилем есть ещё класс .elder-quiz--style-<id стиля>.
Подсказка в пустом поле: .elder-quiz-question__title { font-size: 24px; }
<style id="elder-quiz-custom-css"> в <head> каждой страницы — поэтому пишите селекторы, начинающиеся с .elder-quiz, чтобы не задеть остальной сайт. Для одного квиза — класс .elder-quiz--ID. Готовые решения — CSS: готовые рецепты.Настройки стиля
В редакторе стиля 52 настроек в 8 группах. Значения по умолчанию ниже — это стиль «Стандартный»; готовые стили меняют часть из них.
Цвета
Кнопки, выбранные варианты ответа и полоса прогресса.
Для градиентных кнопок, полосы прогресса и украшения фона. Пусто — основной цвет.
Цвет надписей на кнопках. Подбирайте так, чтобы текст читался на основном цвете.
Фон квиза. Оставьте пустым, чтобы использовать фон страницы темы.
Карточки вариантов ответа, второстепенные кнопки и дорожка полосы прогресса.
Рамки и разделители, если цвет рамки не задан; второстепенные кнопки при наведении.
Вопросы, варианты ответа и пояснения.
Описания вопросов, подсказки и подписи.
Поля ввода, отметки выбора и выбранный вариант ответа.
Рамки
Вокруг вариантов ответа и полей ввода.
- Сплошная
- Штриховая
- Точечная
Пусто — дополнительный фон 2.
И рамка поля в фокусе. Пусто — основной цвет.
Та же толщина, линия и цвет, что у рамок вариантов.
Скругления
Выключено — все углы прямые, какие бы значения ни стояли ниже.
30 и больше — кнопки-«таблетки».
Шрифты
Берутся шрифты, уже установленные на устройстве посетителя, — ничего не скачивается.
- Шрифт темы
- Системный (Segoe UI, Roboto, San Francisco)
- Гротеск (Helvetica, Arial)
- Геометрический (Avenir, Montserrat)
- Гуманистический (Ubuntu, Calibri)
- Скруглённый (SF Rounded, Nunito)
- С засечками (Georgia, Palatino)
- Контрастный с засечками (Didot, Bodoni)
- Брусковый (Rockwell, Roboto Slab)
- Моноширинный
- Как у текста
- Шрифт темы
- Системный (Segoe UI, Roboto, San Francisco)
- Гротеск (Helvetica, Arial)
- Геометрический (Avenir, Montserrat)
- Гуманистический (Ubuntu, Calibri)
- Скруглённый (SF Rounded, Nunito)
- С засечками (Georgia, Palatino)
- Контрастный с засечками (Didot, Bodoni)
- Брусковый (Rockwell, Roboto Slab)
- Моноширинный
На широких экранах. На телефонах размер уменьшается сам.
- Средний
- Полужирный
- Жирный
- Очень жирный
- Сверхжирный
- Плотный
- Обычный
- Широкий
- По краю
- По центру
- Компактный
- Обычный
- Свободный
- Воздушный
Кнопки
- Заливка
- Градиент
- Контур
- Тонированные
- Маленькие
- Средние
- Большие
- Средний
- Полужирный
- Жирный
- Очень жирный
- Нет
- Мягкая
- Свечение основным цветом
- Жёсткая со сдвигом
Варианты ответов
- Карточка: фон и рамка
- Только рамка
- Только фон
- Список с разделителями
- Фон поля и цветная рамка
- Тонировка основным цветом
- Заливка основным цветом
- Компактный
- Обычные
- Просторные
- Круг для одного ответа, квадрат для нескольких
- Всегда квадрат
- Скрыта
- Подсветка рамки
- Приподнять
- Нет
- Нет
- Мягкая
- Жёсткая со сдвигом
Квиз целиком
Действует, когда у квиза есть фон или рамка. На телефонах — вдвое меньше.
Видна, когда у квиза есть фон.
- Нет
- Мягкая
- Средняя
- Сильная
- Жёсткая со сдвигом
- Свечение основным цветом
Меньше 100% — сквозь фон квиза видна страница.
Размывает страницу за полупрозрачным фоном.
Рисуется поверх фона квиза основными цветами.
- Нет
- Мягкий градиент
- Цветные пятна
- Точки
- Сетка
Прогресс и анимация
- Сплошная
- Градиент
- Полосатая
- Сдвиг
- Растворение
- Масштаб
- Без анимации
- Быстро
- Обычно
- Медленно
Если не работает
- Квиз не поменялся после правки стиля. Изменения применяются кнопкой «Сохранить» внизу экрана настроек. Проверьте также, какой стиль выбран у квиза: правка «Стандартный» не касается квиза, у которого выбран «Чистый».
- Квиз выглядит иначе, чем превью. Тема сайта может переопределять стили (шрифт, размеры кнопок). Превью использует шрифт админки; «Шрифт темы» на сайте — шрифт вашей темы.
- Не видно матового стекла. Нужен «Цвет фона» с непрозрачностью меньше 100% и пёстрая страница под квизом.