Как поменять стиль стандартного таймера в JustClick

Если при создании страниц в JustClick вы используете встроенный таймер, то наверное не раз задавались вопросом как поменять его внешний вид? Стандартный выглядит примерно так:

justclick-timer

 

И в некоторых случаях не очень органично смотрится на странице.

Напомню, что стандарный таймер в Justclick можно вставить на любую страницу, созданную в личном кабинете в разделе Сайт -> Страницы

Таймер будет менять содержимое вашей странице и может быть настроен на срабатывание в следующих случаях:

  • по заданной дате окончание (например: распродажа до 31 декабря…)
  • по времени от первого посещения страницы (например: осталось всего 20 минут…)
  • по времени отправки письма (например: осталось 3 дня с момента получения письма…)

Этого функционала в принципе достаточно, для того, чтобы проводить распродажи по определенным датам, делать короткие предложения новым посетителям и настраивать распродажи и акции в сериях писем.

Как поменять стиль и внешний вид таймера JustClick?

Таймер JustClick можно добавить на страницу 2-мя разными способами:

#1 из панели инструментов справа

marker-timera

#2 из панели инструментов вверху

timer

В первом случае, в визуальном редакторе появиться текст {$TIMER} и именно в этом месте на странице будет выводится значения таймера. Например:

03-01-2015 9-47-13

 

Таймер установлен посередине пустой страницы. В настройках заданы параметры: начало отсчета — первое посещение страницы, длительность 20 часов.

Если нажать на синюю кнопку «предпросмотр», то можно увидеть результат:

03-01-2015 9-51-12

Чтобы изменить шрифт таймера, его размеры, начерание или цвет, достаточно вернуться к визуальному редактору, выделить надпись {$TIMER} и с помощью панели инструментов настроить необходимый вид. Например так:

03-01-2015 9-56-14

В результате таймер на странице будет отображаться таким же стилем:

03-01-2015 10-02-02

Этот способ удобен, когда необходимо вставить таймер в тексте.

Во втором случае, в визуальном редакторе появляется надпись #TIMER##/TIMER#, которая также будет выводить значение таймера на странице с текстом, написанным между ##

Например, вы можете вставить свой текст между ##, чтобы получилось: #TIMER#предложение действует еще:#/TIMER# и получите вот такой результат:

03-01-2015 10-17-06

Блок с таймером будет растянут на всю ширину элемента в котором находится. Т.е., если вы вставляете его просто на страницу, то он будет растянут на всю ширину экрана. Если вставить его, например в ячейку таблицы, то на ширину этой ячейки. А шрифт таймера и надписи по умолчанию будет довольно крупным.

В визуальном редакторе форматировать этот таймер бесполезно. Для того, чтобы изменить его внешний вид, необходимо переопределить для него стандартные CSS стили.

Возможно для тех, кто совсем не знаком с HTML и CSS этот метод покажется сложным, но на самом деле все достаточно просто. Постараюсь объяснить так, чтобы было понятно…

CSS стиль описывает как отображать тот или иной элемент. И если в визуальном редакторе все более наглядно, на то он и визуальный :), то для изменения шрифта, цвета, размера и т.д. с помощью CSS все придется прописать руками.

Для этого на вкладке «дополнительно» в редакторе страниц JustClick есть поле «дополнительный код в head», в котором и нужно прописать CSS стили.

03-01-2015 10-27-57

Что можно поменять с помощью CSS в стандартном таймере JustClick?

Внешнюю рамку: ее ширину, цвет, стиль. Цвет фона таймера, шрифт (размер, цвет)

Я покажу на примере, как из стандартного таймера JustClick можно сделать вот такой:

03-01-2015 11-02-50

Для этого в поле «дополнительный код в head» нужно вставить код:


<style>
div.timer-timer1 {
border: #F0B419 2px dotted !important;
border-radius: 8px !important;
}
div.timer-timer2 {
background: #F0B419 !important;
font-size: 16px !important;
color: #4D4D4D !important;
border-radius: 8px !important;
font-family: Tahoma !important;
}
</style>


Теперь давайте разберем что все это значит :)

div.timer-timer1 — это CSS класс, который отвечает за внешнюю границу таймера. В данном примере я поменял цвет границы на #F0B419 (можете посмотреть в google «палитра HTML цветов» и выбрать другой), ширину линии на 2px (2 пикселя) и ее начертание на dotted (точки). Начертание можно заменить еще на штрихи (dashed) или сплошную линию (solid). Border-radius — сглаживает углы элемента, в данном случае на 8px (8 пикселей)

div.timer-timer2 — это CSS класс, который отвечат за содержимое таймера. В данном примере я поменял цвет фона, на тот же, что и цвет границы в предыдущем классе #F0B419, размер шрифта на 16px (16 пикселей), цвет текста на #4D4D4D, шрифт на Tahoma и так же установил сглаживание углов на 8px (8 пикселей)

Обратите внимание, что после каждого стиля написано !important. Это позволяет задать приоритет вашему стилю перед стандартными стилями JustClick и без этого указания ничего в таймере не измениться.

На этом все. Если у вас остались вопросы задавайте их в комментариях:

Маркетолог-перфекционист. С 2007 года помогаю предпринимателям привлекать клиентов и увеличивать продажи за счет инструментов интернет-маркетинга.