Как сделать квиз на Tilda: обзор, цены, специфика работы ZeroBlock и другие особенности

Лендинги активно развиваются. К самой перспективной их разновидности относят квиз-сайты. Там предлагают пройти тест или поучаствовать в опросе. Экспертами доказано, что конверсия квиз-лендингов в 3 раза превышает стандартные. Людям интересно участвовать в интерактиве, а не просто пассивно впитывать информацию.

Конструктор сайтов Тильда

Разработчики площадки предложили новый метод создания квиз-сайта. Он собирается из блоков. Даже при отсутствии навыков дизайнера и программиста сделать ошибку практически нереально. Платформа с самого начала работы позволяет владельцу получать прибыль.

Библиотека блоков

Конструирование сайта состоит из нескольких этапов. Вначале обложка, далее – описание услуги, изображения, отклики, контактная информация. В Тильде указанные этапы называются блоками. Их можно найти с левой стороны библиотеки.

Это важно! Каждый блок создан опытным дизайнером. Важное значение уделяется типографике и стройной композиции элементов. Пользуйтесь уже готовыми вариантами и получайте грамотно оформленный платформы.

К коллекции блоков относят:

  • обложку;
  • текстовые блоки;
  • изображения;
  • меню;
  • форму и кнопки;
  • плитки и ссылки;
  • преимущества;
  • этапы;
  • тарифы;
  • команды;
  • отзывы;
  • видео;
  • разделители;
  • магазин;
  • другое.

После выбора необходимого блока(ов) копируем в него текст и изображения (в библиотеке есть возможность копировать блоки, переставлять их местами, передвигать в любое место).

ZeroBlock

Встроенный редактор, предназначенный для веб-дизайна в Тильде, называется Zero Block. С его помощью можно с нуля сделать собственный сайт, изменять ранее созданные блоки.

Преимущества Zero Block:

  1. Все элементы контролируются. Можно проверить местоположение, размер и разрешение дисплея любой детали блока (текст, иллюстрации, кнопки, плашки);
  2. Использование слоев (создание эффекта глубины с наложением теней).
  3. Оригинальные типографические варианты.
  4. Прозрачность (с регулированием адаптивности). С учетом разрешения дисплея можно менять прозрачность всей композиции или отдельных деталей.
  5. Возможность добавлять цветные плашки, карточки для постов, картинки в готовые шаблоны.
  6. Больше возможностей для работы с роликами из YouTube.
  7. Блоки можно привязать к краям дисплея либо сетки.
  8. Можно работать через HTML-редактор.
  9. Tooltip – инструмент для создания всплывающих подсказок. Можно регулировать тень, цвет, размер, иконку.
  10. Обратная связь. Можно загружать строки для ввода, подключать сервисы приема данных, оформлять форму в собственном стиле.
  11. Анимация элементов блоков. Ее включение можно синхронизировать с временем наведения курсора на деталь. А ещё – по скроллу, клику и при отображении элемента на дисплее.
  12. Параллакс во время движения мышки.

Квизы

Небольшой опрос, по результатам которого человек способен принять то или иное необходимое владельцу интернет-магазина решение, называется «квизом». Такой метод не первый год применяется для продажи товаров и предоставления услуг.

В конструкцию квиз-сайта входят различные интерактивные элементы: викторины, тесты, опросы. С каждым последующим вопросом заинтересованность пользователя должна возрастать. После опроса заинтересованность достигает такого уровня, что опрашиваемый может предоставить личную информацию.

Для поощрения за ответы на вопросы предлагается скидка, презент, бесплатная доставка товара и другие бонусы.

Польза для бизнеса

Квиз преследует такие цели:

  • Выявление предпочтений подписчиков.
  • Анализ интереса к товару, услуге и их представителю.
  • Сбор личной информации.
  • Привлечение новых клиентов.

Все указанные задачи направлены на увеличение продаж и пополнение клиентской базы.

Каким должен быть?

Квизы по возможности не должны повторять тесты и опросы конкурирующих компаний. Их главная цель – привлечение аудитории. Условно их можно поделить на 3 категории:

  1. Маркетинговые. Такие тесты создаются для подогрева интереса к продукции или получения большего количества заказов. Квиз помогает клиенту быстро выбрать нужный товар.
  2. Игровые. К ним относятся конкурсы, опросы и тесты. С их помощью поддерживают и увеличивают интерес к странице, проводят социологические исследования, увеличивают трафик, привлекают внимание новых пользователей.
  3. Просветительские. Применяют для напоминания той или иной необходимой представителю услуги или товара информации. Наиболее распространенный вариант такого квиза – тест на проверку знаний.

Где можно сделать?

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

Обратите внимание! Многие сервисы предоставляют услугу сборки квиза на конструкторе. Однако есть и такие, где есть возможность подключения специальных инструментов (онлайн-чата либо crm).

Наименование сервиса Пробный период (бесплатный) Цена за месяц использования
MadTest 14 суток 990 руб. и выше
Enquiz 10 суток 667 руб. и выше
Envybox 7 суток 990 руб.
Marquiz 14 суток 600 руб.
stepFORM 7 суток 390 руб.
MoClients 15 суток 570 руб.
QuizGo 7 суток 499 руб.

Размещение на Тильде

Для добавления такой кнопки на Тильду необходим обязательное использование платного тарифа (например, Tilda Personal). Кнопка квиза размещается на площадке при помощи нескольких действий:

  1. Дополнить head секцию страницы кодом.
  2. Дополнить блок на странице кодом кнопки.
  3. Загрузить изменения.

Получаем коды

В раздел управления квизом (графа «Установка квиза») помещены коды для секции head и кнопки квиза. Первый код расположен в текстовом поле. Надо скопировать его и перенести на Тильду.

Код кнопки квиза расположен в разделе, появляющемся при нажатии кнопки «Открыть редактор кнопки». Его тоже нужно перенести на площадку Тильда.

Добавляем код в head

Сначала в Тильде переходим на страницу, где предполагается меню создание кнопки квиза. Кликаем по пункту Еще ➨ Настройки страницы. Он расположен в правом верхнем углу.

В появившемся разделе нажимаем «Дополнительно». Листаем вниз до надписи «HTML-код для вставки внутрь head». Кликаем по графе «Редактировать код».

После открытия страницы копируем в текстовое поле код для вставки в секцию head. Его находим в графе «Установка квиза». После этого нажимаем «Сохранить», а потом «Вернуться к списку страниц сайта».

Добавляем код кнопки

Вернитесь в графу, куда недавно скопировали код. В предполагаемом месте добавления кнопки кликните по ссылке Добавить блок ➨ Черный круг с символом «+» в центре онлайн-платформы. После появления бокового меню перейдите к пункту «Другое» (он находится внизу перечня), далее – раздел «HTML-код».

Выбираем кнопку «Контент» в открывшейся форме. Затем переносим код кнопки со страницы «Установка квиза» в текстовое поле «HTML код / код виджета».

Кликаем по графе «Сохранить» ➨ «Выйти».

Публикация

Нажимаем в правом верхнем углу площадки кнопку «Опубликовать». Далее появится ссылка, кликнув по которой, откроем квиз.

Квиз через зеро блок

В пример входит 9-м ZeroBlock. Первый из них – это стартовый экран. Вопросы находятся в разделах со 2 по 7-й пункты. Результаты соответственно в 9-м.

Для создания квиза в зеро блок надо:

  1. Сделать Zero-приветствие, добавить кнопку для старта квиза, сопровождающуюся ссылкой #startQ.
  2. Добавить 7-м похожих разделов вопросов. Сюда помещаем кнопки для навигации «Вперед» (копируем ссылку #next), а также «Назад» (переносим ссылку #previous).
  3. Создать Zero-формы в блоках, содержащих вопросы. Дать названия полям: тип объекта, площадь объекта, вид ремонта, дизайн проект, эксплуатация, время старта, подарок.
  4. Указать стоимость ответа во всех вопросах. В каждый из таких разделов добавляем дополнительный блок с одной строкой – «Калькулятор». Для указанного поля прописываем название и в формулы вводим значение поля от сопоставляемого вопроса.
  5. Сделать графу с ответами, сформированными в виде элементов «Text». Им по порядку присвоены ссылки: #smitog1…#smitog7. Вписываем в текстовое поле получившуюся сумму, используя ссылку #smitog8. Добавляем в указанный блок форму с отправкой личной информации (имя и активный номер телефона). Здесь же формируем еще 7 скрытых граф с именами: sendtypeobject, sendtypesquare, send typetype, sendtypeproject, sendtypeage, sendsendtypesoon.
  6. В раздел «Другое – Т123» перенести код, с указанием ID-графа с вопросами. Переместить ID блоки контента var quizcontent = [#rec129086862, #rec129197533, #rec129296771, #rec129303642, #rec129309403, #rec129312133, #rec129314389.
  7. Указать ID конечного раздела, прописав финальный блок с ответом var finishBlock = #rec129396301.
  8. Перенести формулу для получения ответов, высчитав общую сумму let fsumm=step1*step2*step3*step5*step6+step4.

Примеры квизов

Есть примеры весьма удачных квизов, помогающие увеличить продажи и вывести бизнес на новый уровень. Ниже приведены примеры таковых:

  1. Компания по строительству коттеджей сформировала квиз, который помогает рассчитать стоимость будущего помещения. Для этого посетителю не требуется заказывать обратный звонок. Расчеты выдаются мгновенно, без долгого ожидания результатов.
  2. Школа иностранных языков предлагает клиентам проверить знания через интернет. Помимо этого, люди получают бесплатные занятия, сопровождающиеся инструкциями. Конечно, информация высылается на электронную почту после прохождения теста.
  3. Студия дизайна кухонь не предлагает приобрести дизайн-проект напрямую. Клиент может самостоятельно определить сумму, с которой готов расстаться при заказе услуги. При прохождении теста необходимо указать площадь комнаты, тип дизайна, а также вид ремонтных работ.

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

Оцените статью