← Назад

Пошаговая инструкция

FAQ

Как вставить таймер обратного отсчета на сайт

В этой инструкции мы рассмотрим, как создать и настроить таймер обратного отсчета.

Аудит вашего сайта или консультация по редактору

0₽

подключенного тарифа для конструктор сайтов

+4

месяца

промокод на продвижение в сетях Яндекс

+12.000₽

тарифа чат-ботов, автоворонок и мобильных приложений

+3

Бесплатный домен в зоне .ru/.рф

0₽

Бесплатный шаблон сайта под вашу сферу бизнеса

0₽

месяца

/год

Забронировать предложение

Получите подарки от mottor при подключении тарифа

спецпредложение

Создание таймера

Чтобы создать таймер, нажмите на кнопку "Добавить блок" в левом верхнем углу редактора:

Добавление таймера обратного отсчёта в редакторе сайта

В категории "Дизайн/контент" найдите блок "Таймер", перенесите его на нужное место сайта:

Таймер появится в секции.

Настройка таймера

Кликните по блоку и нажмите на иконку шестеренки, чтобы открыть его настройки:

Открытие настроек таймера обратного отсчёта

Справа откроется панель настроек блока:

Панель настроек таймера обратного отсчёта

Здесь имеется 4 категории параметров:

1. Выбор шаблона оформления

Позволяет выбрать один из нескольких доступных шаблонов оформления таймера:

Выбор шаблон оформления таймера обратного отсчёт

2. Тип таймера

Здесь можно выбрать один из трех типов работы таймера:

Цикличный — выберите промежуток времени для отсчета (день/неделя/месяц) и укажите количество дней/часов/минут для отсчета.

До определенной даты — таймер будет работать до указанной даты и времени, после чего остановит отсчет.

Таймер обратного отсчёта до определённой даты

С посещения страницы — таймер запускается при первом посещении сайта и продолжает отсчет даже если пользователь закрыл сайт.

Таймер обратного отсчёта с посещения страницы

3. Состав таймера

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

Или наоборот, для таймеров с малыми промежутками времени можно отключить показ дней.

4. Дизайн

Здесь настраивается оформление таймера:

Стиль цифр — здесь можно задать шрифт, размер шрифта и начертание для цифр таймера.

Цвет цифр — параметр говорит сам за себя, здесь задается цвет цифр.

Разделитель — позволяет заменить символ разделителя между цифрами и задать отдельный цвет для них.

Подписи — здесь меняются шрифт, размер шрифта и цвет подписей под таймером.

Состав полей ниже зависит от выбранного шаблона оформления и позволяет настроить внешний вид и анимацию эффектов таймера.

Настройка таймера в мобильной версии

Могут возникать ситуации, когда таймер получился слишком большой и не помещается в мобильной версии сайта полностью.

Чтобы исправить это, зайдите в мобильный редактор сайта и откройте настройки блока, вкладку "Дизайн":

Настройка таймера обратного отсчёта в мобильной версии

В поле "Стиль цифр" кликните по полю "Изменить стиль". Перейдите во вкладку настройки мобильной версии:

Мобильный редактор таймера обратного отсчёта

Уменьшите размер шрифта, чтобы таймер полностью помещался внутри секции

Если потребуется, уменьшите также стиль текста подписей и размеры отступов:

Настройки стилей подписей таймера обратного отсчёта

ВАЖНО:
Кнопка "Сбросить настройки" сбрасывает все измененные параметры в блоке и откатывает таймер до состояния, когда он был только добавлен в редактор.

Сброс настроек таймера обратного отсчёта

Часто задаваемые вопросы:

1. Шаблоны таймеров с кругами выглядят слишком размытыми в мобильной версии. Как исправить?

Сейчас это не удастся исправить, так как круг таймера - это динамически вычисляемая линия. Она отличается от простого круга, написанного на css, тем, что у нее может быть не полный круг и на конце есть “наконечник” - полукруг.
Для максимальной совместимости и производительности наш таймер работает на канвасе. Здесь уже включается обработка браузера/устройства - от него зависит, насколько ровно будет нарисован круг.

Если что-то будет непонятно — в конструкторе сайтов mottor есть бесплатная техподдержка для всех пользователей. Вам поможет живой специалист:

— в чате на сайте lpmotor.ru
— по телефону 8 800 200 51 47 (звонки по РФ бесплатные)
— в Телеграм: https://t.me/lpmotorchat