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