Рулетка в модальном окне АДАЛТ (мануал)
Купить или заказать установкуУпсс... Если фотки и гифки, сразу не грузятся😱, ждемс - там, самое вкусное🔥 Если ждемс, не помогает - перезагрузка страницы, может помочь!
В комплект входит:
- Папка "css"
- Папка "img"
- Папка "js"
- Стиль модального окна, стиль поп-апа после вращения рулетки, стиль "плавающей кнопки", стили рулетки и формы контактов (для скорости загрузки находятся в корневой директории сайта)
- index.html - с установленным модальным окном, кодом рулетки и формой контактов
- Базовые фото для формы, поп-апа, рулетки, плавающей кнопки и фото для закрывания модального окна
- Скрипты: hystmodal.min.js - скрипт модального окна, "wheel.js" - скрипт рулетки, "maskedinputptrn-js.js" - скрипт маски телефонного номера
Содержимое папок:
№1 Папка "css" со стилями
- Папка "Доп.стили" - находятся все стили рулеток и форм контактов (2 комплекта - 2 стиля рулетки и 2 стиля форм)
- demos.css - стиль index.html
- hystmodal.css - стиль модального окна
Папка "Доп.стили"
- Папки со стилями рулеток и форм
- Фото стилей рулетки и поп-апов после вращения рулетки
Папки с доп. стилями
- Папка "pop-up для bootstrap" - дополнительный css стиль поп-апа появляющегося после вращения рулетки (для некоторых сайтов на bootstrap - подробности ниже и в мануале)
- "form.css" - css стиль формы подходящий под стиль рулетки
- "pop-up.css" - css стиль поп-апа появляющегося после вращения рулетки
- "wheel.css" - css стиль рулетки
- "wheel.js" - скрипт рулетки (в скрипте, по-умолчанию указано изображение колеса рулетки, подходящее под текущий стиль)
- Фото - как выглядит стиль
№2 Папка "img"
- Папка "Архив" - подборка фото для поп-апа после вращения рулетки
- Базовые фото (коллаж с продуктом, плашка "Скидка 50%", фото для рулетки "курсор", фото "колес рулетки", фото подложек под надписью "вращать", фото для плавающей кнопки, комплект изображений для поп-апа "фоновое фото и исчезающее фото")
- PSD шаблоны
3-1) - "Product-коллаж.psd" - шаблон для изготовления фото с продуктом (размеры фото в PSD шаблоне - 450рх*450рх, после редактрования можно уменьшить фото до 300рх*300рх и сжать конечный файл)
3-2) - "Колесо рулетки с буквами.psd" - шаблон для изготовления и/или редактирования колеса рулетки (размеры фото в PSD шаблоне - 1440рх*1440рх, после редактрования можно уменьшить фото до 478рх*478рх и сжать конечный файл)
3-3) - "Фото после вращения рулетки 420х630.psd" - шаблон для изготовления и/или редактирования фото для поп-апа
Папка "img/Архив"
В папке находятся комплекты изображений, для поп-апа и "плавающей кнопки" (фото "телефон" и подложки под фото "телефон")
№3 Папка "js"
- Скрипт модального окна "hystmodal.min.js"
- Маска телефонного номера "maskedinputptrn-js.js"
Установка модального окна с рулеткой и формой контактов
Видео версия (просмотр на Youtube - у видео, ограничения 18+)
1) Откройте index.html с шаблоном, в редакторе кода
2) Скопируйте код модального окна от надписи <!-- Modal window FORM START -->
до надписи <!-- Modal window FORM END -->
3) Скопируйте код подключения стилей от надписи <!--Подключение стилей модального окна START--> до надписи <!--Подключение стилей модального окна END -->
и добавьте в код своего сайта, внизу страницы - перед скриптами. !!! Внимание. В строках прописан путь к файлам стилей "hystmodal.css" до корневой директории сайта.
4) Подключите скрипт модального окна. Скопируйте код подключения скрипта от надписи <!--Скрипты модального окна START-->
до надписи <!--Скрипты модального окна END -->
и добавьте в код своего сайта, перед закрывающим тегом </body>
!!! Внимание. В строке подключения <script src="hystmodal.min.js"></script> прописан путь к файлу скрипта, до корневой директории сайта.
5) Подключите скрипт рулетки. Добавьте в код сайта перед закрывающим тегом </body>, строку <script src="wheel.js" ></script>. Строка находится между строками <!--Подключение скрипта рулетки START--> и <!--Подключение скрипта рулетки END -->
6) Скопируйте из шаблона и добавьте в корневую директорию своего сайта необходимые файлы:
6-1) "form.css" - стиль формы (выберите подходящий стиль из папки "css/Доп.стили/... и скопируйте в свой сайт)
6-2) "pop-up.css" - стиль поп-апа появляющегося после вращения рулетки
6-3) "wheel.css" - стиль рулетки
6-4) "wheel.js" - скрипт рулетки
!!! Внимание. Файлы "form.css", "wheel.css", "pop-up.css" и "wheel.js" находятся в папках "сss/Доп.стили/..." одним комплектом под определенный стиль (в файле "wheel.js" для каждого стиля, меняется фото рулетки и/или фоновые фото). Скопируйте все файлы и добавьте в корневую директорию своего сайта.
6-5) "hystmodal.css" - стиль модального окна
6-6) "hystmodal.min.js" - скрипт модального окна
6-7) "closeimg.png" - фото закрывания модального окна
6-8) "50sale.png" - фото "скидка 50%"
6-9) "form-prod-bg.png" - коллаж с продуктом "по умолчанию"
6-10) "prizewheel-4-4.png" и "prizewheel-4-5.png" - фото колес рулетки под стили "Темный-1" и "Темный-2"
6-11) "cursor-4-4-3.png", "cursor-4-4-4.png", "cursor-4-5.png" и "cursor-4-5-2.png" - фото подложек под надписью "вращать-GIRO" под стили "Темный-1" и "Темный-2"
6-12) "wom-bg.png" - фоновое фото для поп-апа
6-13) "wom-bust.png" - дополнительное, исчезающее фото для поп-апа
6-14) "callbtn.css" - стиль "плавающей кнопки", находится в корневой папке шаблона
6-15) "cb-bg-phone.png" - фото с телефоном, для "плавающей кнопки" (в корневой папке и в img/Архивы)
Подключение модального окна к кнопкам и/или ссылкам
Добавьте атрибут data-hystmodal="#modalFormsSpin" ко всем элементам сайта по которым будут кликать пользователи (кнопки, картинки, ссылки). Пример на фото
Редактирование надписей и фото, в рулетке
Откройте файл "wheel.js" в редакторе кода (например - Sublime Text или Notepad++). В верхней части скрипта находится раздел params
в котором редактируются все надписи и названия фото для рулетки и поп-апа после вращения.
1) Надписи в окне рулетки
редактируются в строках params texts: в строчках скрипта
1-1) Заголовок в окне рулетки
1-2) Подзаголовок в окне рулетки
1-3) Надпись "ВРАЩАТЬ" в центре колеса рулетки
2) Надписи в окне поп-апа после вращения рулетки
редактируются в строках params texts: в строчках скрипта
2-1) Заголовок в поп-апе
2-2) Текст в поп-апе Часть-1
2-3) Выделенный текст в поп-апе
2-4) Текст в поп-апе Часть-2
2-5) Надпись в кнопке поп-апа
3) Название фото и путь к файлу редактируется в строках params image:
3-1) Фото колеса рулетки
3-2) Фото "курсора" в рулетке
3-3) Фото центр круга - подложка под надписью "вращать"
3-4) Картинка в поп-апе - №1
3-5) Картинка в поп-апе - №2
3-6) "Плавающая кнопка" - фото подложки под телефоном
3-7) "Плавающая кнопка" - фото телефона
"Плавающая кнопка"
Дополнительный инструмент для вызова модального окна с формой или рулеткой.
Кнопка появляется при прокрутке до какого-то места на странице сайта. Активная кнопка не исчезает при скролле вниз или вверх. Если страницу перезагрузить ниже, чем место подключения кнопки - кнопка останется активной. Если сайт перезагрузить, выше места подключения - кнопка исчезнет и при прокрутке к месту подключения, снова появится.
Подключение плавающей кнопки
1) Откройте "index.html" в редакторе кода (например - Sublime Text или Notepad++).
2) Скопируйте код активации кнопки <div id="callbtnbox"></div>
и установите в html код своего сайта в то место страницы, где предполагается появление кнопки.
!!! Внимание - функция для всплывающей кнопки уже есть в скрипте "wheel.js". css стиль "плавающей кнопки" добавляется на страницу сайта из скрипта (подключать стиль к странице - не нужно, только добавьте css файл в корень сайта)
3) Скопируйте из папки с шаблоном - "callbtn.css"
3-3) Выберите в папке "Архив" фото телефона и подложку под фотографию телефона. И скопируйте все файлы в корневую папку своего сайта.
!!! Внимание. Для скорости загрузки - все пути к файлам (стили, фото и скрипты) прописаны до корневой директории сайта (корневая директория - главная папка сайта).
4) Отредактируйте названия и/или пути к фото (если это необходимо)
В строке cbimgone: 'cursor-xxxxx.png', напишите название фото подложки
В сроке cbimgtwo: 'cb-bg-phone.png', напишите название фото с телефоном
!!! Внимание. В каждом "js" скрипте, фото подложек, указаны под стиль колеса рулетки (одинаковые фото) Если нужно - укажите свой вариант.
В плавающей кнопке, уже подключены атрибуты для активации модального окна. Подключите кнопку к странице и все будет работать.
Редактирование формы контактов
1) В форму контактов в тег <form action="..." между кавычек, впишите название своего API файла
2) Добавьте в форму скрытые поля
3) Отредактируйте названия "Antiguo precio: - Старая цена", "Nuevo precio: - Новая цена" и ценники под свой оффер и ГЕО
Текстовые строки с ценниками имеют (position: absolute;) и располагаются поверх контента формы. Длина строки не влияет на расположение элементов в форме. В строках запрещен перенос слов - текст, всегда в одну линию.
Верстка по умолчанию, рассчитана на использование двух слов и цифр с символом валюты. Почти на всех языках, использующих латинский алфавит, длина слов "Старая цена" и "Новая цена" имеют схожее кол-во символов. Разумеется, в каждом языке мира, есть сокращенное написание - в одно слово. Если два слова не помещаются - возможно использовать одно слово и цифры.
!!! Внимание. Тексты "прижаты" к правой границе формы. Если используете одно слово и цифры - смещение текста, может выглядеть неаккуратно
Добавьте после цифр пробел или несколько пробелов (пробел в html кодах - " " - 6 символов, без кавычек. Добавьте один или несколько пробелов.)
это сместит текст от правого края формы
!!! Внимание. Если добавляются пробелы - зачеркивание будет на всю строку, с учетом пробелов. Можно добавить такое же количество пробелов в начале строки или убрать декорацию текста.
Что бы убрать зачеркивание - добавьте в тег <p id="oldprice" class="oldprice"> этот фрагмент кода (style="text-decoration: none !important;")
Строка целиком - <p id="oldprice" class="oldprice" style="text-decoration: none !important;">
!!! Внимание. Между none и !important должен быть один!!! пробел.
После добавления дополнения к стилю - текст будет отображаться без зачеркивания
4) Отредактируйте плейсхолдеры подсказки в полях ввода данных в форме
5) Отредактируйте надпись в кнопке
6) Укажите путь к плашке "скидка 50%" (если необходимо)
7) Укажите путь к фото продукта.
Настройка маски телефонного номера
1) Подключите скрипт маски номера телефона
На фото скрипт добавлен в код сайта, перед закрывающим тегом </body>. Скопируйте содержимое скрипта от строчки <!-- Скрипт MaskedInput START --> до строчки <!-- Скрипт MaskedInput END -->
Можно подключить скрипт локально - добавьте строку <script src="js/maskedinputptrn-js.js"></script> в код сайта, перед закрывающим тегом </body> (на фото строка закомментирована) и пропишите путь к файлу со скриптом.
2) Впишите в поле ввода номера телефона type="tel" в атрибут data-phone-pattern = "+5(___) ___-___-__"> нужный номер телефона. Номер телефона указывается между кавычек "........" Одно нижнее подчеркивание = 1 цифра номера телефона.
Впишите аналогичный номер телефона (как в п.2) в скрипт маски в строку matrix_def = "+5(___) ___-___-__",
Замена стилей
Стили рулетки и формы контактов, меняются заменой файлов.
1) Удалите из корневой директории сайта файлы - "form.css", "pop-up.css", "wheel.css" и "wheel.js"
2) Скопируйте файлы "form.css", "pop-up.css", "wheel.css" и "wheel.js" из папок со стилями в папке "CSS/Доп.стили/..."
3) Добавьте файлы "form.css", "pop-up.css", "wheel.css" и "wheel.js" в корневую директорию своего сайта.
Стили для Bootstrap
Основные стили всех частей рулетки - подходят для большинства прелендингов, но есть некоторое кол-во сайтов сделанных на bootstrap со своеобразным отображением кнопок (кнопки имеют большую высоту, чем указано в стилях). Вootstrap влияет не отображение кнопки "ОК" в поп-апе после вращения рулетки.
Фото №1 - стиль поп апа "по умолчанию"
Фото №2 - отображение кнопки в поп-апе на некоторых bootstrap прелендингах (стиль поп-апа - по умолчанию)
Фото №3 - отображение кнопки в поп-апе с доработанным файлом стилей
Для нормального отображения всех элементов есть дополнительный стиль с некоторыми изменениями (папка "pop-up для bootstrap") (пункт №1 на фото)
Замените "pop-up.css" по умолчанию на "pop-up.css" из папки "pop-up для bootstrap" - (на тестовых прелендингах - эта проблема решалась)
Замена дефолтных фото на фото из папки "img/Архив"
В комплекте есть несколько вариантов фото, для замены. Фото в папке "Архив" отличаются от фото по-умолчанию, дополнительным цифровым индексом (пример, дефолтное фото "bg.png", фото в архиве "bg-1.png" и т.п.. сравните названия фото из корневой папки и из архива).
Заменить фото можно двумя способами:
- Переименовать фото из архива на название для фото по-умолчанию
- Прописать в скрипте "wheel.js" новое название фото. (В скрипте указаны названия фото по-умолчанию)
Корректировка высоты надписи "Вращать-GIRO"
Блок с рулеткой, на большинстве прелендингов, нормально отображается - не требуется вносить какие-то изменения. Но, на некоторых сайтах может понадобиться корректировка высоты надписи "вращать".
1) Откройте "wheel.css" в редакторе кода (например - Sublime Text или Notepad++) На скриншотах используется редактор кода "Sublime Text"
2) Напишите в поисковой строке надпись #spinButton.spinbtn (№1) (стиль текста "GIRO")
3) Нажмите "Find" (№2)
4) Пролистайте строки со стилями #spinButton.spinbtn до строки с параметрами top: ...;(№4) Строки будут подсвечиваться желтым цветом (№3)
5) По умолчанию top: 52% !important; Укажите нужное значение (чтобы надпись поднять выше - укажите меньшее значение, чем указано по-умолчанию, чтобы опустить надпись - укажите большую цифру)
6) Повторите корректировку для всех значений top: ...; стиля #spinButton.spinbtn. По-умолчанию, высоты надписи указаны для трех разрешений дисплея (для всех экранов, width < 360px и width < 340px)
7) Продолжайте нажимать кнопку "Find" чтобы пролистать все строки и найти нужные.
Измение отображения надписи "Вращать-GIRO" (замена заглавных букв на прописные)
По умолчанию рулетка сверстана под определенное кол-во букв в надписи "вращать". Надпись до 6 букв крупным шрифтом не требует корректировки. Если букв больше - есть два простых решения:
- Изменить отображение шрифта (поменять заглавные буквы на прописные)
- Увеличить размер фото подложки под надписью "Вращать-GIRO"
Чтобы изменить отображение шрифта:
1) Откройте "wheel.css" в редакторе кода (например - Sublime Text или Notepad++) На скриншотах используется редактор кода "Sublime Text"
2) Напишите в поисковой строке надпись #spinButton.spinbtn (№1) (стиль текста "GIRO")
3) Нажмите "Find" (№2)
4) Строка со стилем #spinButton.spinbtn и с параметром text-transform: uppercase !important;(№4) находится в самом верху файла "wheel.css". Строка #spinButton.spinbtn подсветится желтым цветом (№3)
5) Замените в строке text-transform: uppercase !important; слово uppercase на слово none
!!! Внимание между словом none и словом !important - один!!! пробел.
Теперь надпись "Вращать-GIRO" будет отображаться строчными буквами. Чтобы указать первую букву заглавной - напишите в файле "wheel.js" в разделе ректирования текстов слово так, как оно должно отображаться на странице сайта (каким шрифтом напишете - такой будет на странице)
Корректировка размера подложки под надписью "Вращать-GIRO"
Еще один способ улучшить отображение надписи "Вращать-GIRO" если буквы выходят за границы подложки - увеличить размер подложки.
1) Откройте "wheel.css" в редакторе кода (например - Sublime Text или Notepad++) На скриншотах используется редактор кода "Sublime Text"
2) Напишите в поисковой строке надпись #cursor-img.cursor (№1) (стиль фото подложки)
3) Нажмите "Find" (№2)
4) Строка #cursor-img.cursor с параметрами width: ...;(№4) - отобразится первой в поиске. Строка будет подсвечиваться желтым цветом (№3)
5) По умолчанию width: 34% !important; Добавьте несколько % и проверьте отображение подложки.
!!! Внимание. По умолчанию, размеры подложки указаны в одном месте, для всех разрешений. Если это необходимо - добавьте размеры для других разрешений дисплея.
1) Выберите нужное разрешение экрана - @media screen and (width < ...px)
2) Если стиль #cursor-img.cursor в нужном разрешении не указан - допишите нужные строки (синтаксис указан ниже, вместо "xxx" подставьте нужное значение)
#cursor-img.cursor{
width: xxx% !important;
}
Фото коллаж со своим продуктом
- Откройте PSD шаблон в Фотошопе
- Совместите изображение своей банки/коробки (без фона) с банкой в шаблоне
- Сохраните результат в .png формате - все будет нормально отображаться. Также можно менять, включать или выключать плашки, листики, капсулы.
- Конечное изображение можно уменьшить до размера 300рх*300рх и сжать полученный файл.
Как сделать коллаж с помощью PSD шаблона - видео на Youtube
Видео - Установка модального окна с рулеткой на прелендинг (ссылка)
!!! Внимание. "Продукт" создан для использования на стандартных арбитражных сайтах (код лендинга/прелендинга находится внутри файла index.html или index.php). На сайтах с динамически формируемым HTML кодом и на сайтах сделанных на CMS - "продукт" не тестировался и установка на такого рода сайты не входит в "Цену с установкой".
Цена за комплект - 20$
Цена с установкой - 27$
Блоки для быстрой доработки прелендингов
Хэш сумма zip архива с файлами (Virus Total)
7ddf57267b584f8316a3a71cb6a879b0530902d0bb42c7f5c577760dad8c0d02