← Назад
Пошаговая инструкция
FAQ

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

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

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

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

0₽

0₽

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

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

+4

+4

месяца

месяца

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

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

+12.000₽

+12.000₽

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

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

+3

+3

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

0₽

0₽

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

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

0₽

0₽

месяца

месяца

/год

/год

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. Дизайн

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

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

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

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

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

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

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

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

  • Чтобы исправить это, зайдите в мобильный редактор сайта и откройте настройки блока, вкладку "Дизайн":
  • В поле "Стиль цифр" кликните по полю "Изменить стиль". Перейдите во вкладку настройки мобильной версии:
Уменьшите размер шрифта, чтобы таймер полностью помещался внутри секции


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

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

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

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

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

Ищете конструктор чтобы собрать сайт или интернет-магазин?
Попробуйте mottor бесплатно
шаблон сайта доставки еды
шаблон интернет-магазина
шаблон интернет-магазина
шаблон-квиз строительство
шаблон сайта по ремонтуо
450+ шаблонов
ждут вас
Бесплатный конструктор сайта
Все шаблоны
Шаблон онлайн курс
Шаблон курс инвестиций
Шаблон доставка еды
Шаблон онлайн школа
Шаблон для портфолио
Шаблон лендинг вебинара
Шаблон интернет-магазин мебели
Одностраничный сайт
Многостраничный сайт
Создать сайт онлайн бесплатно самому
Создать квиз
Создать сайт бесплатно конструктор
Создать бесплатно интернет магазин
Создать сайт конструктор
Конструктор сайта онлайн
Онлайн конструктор сайта бесплатно
Конструктор интернет магазинов
Конструктор страниц
Сайт конструктор бесплатно
Конструктор создания сайтов
бесплатный конструктор сайтов, лендингов и квизов
Документы:
Полезные ссылки:
Функциональность:
Функциональность:
О компании:
при поддержке Фонда Развития Интернет Инициатив
бесплатный конструктор сайтов, лендингов и квизов
Бесплатный звонок по России
Шаблоны:
Популярные запросы:
support@lpmotor.ru
О компании и сервисе
Тур по сервису
Блог
Инструкции
Договор-оферта
Партнёрская программа
Шаблоны
Видеоинструкции
Согласие
Тарифы и услуги
Обновления
Политика конфиденциальности
Сделано на mottor
Техподдержка
Платная поддержка
Инструкция по установке