Шаблон адаптивного сайта продажи товара или услуг PageBuy с комментариями в коде

Адаптивный шаблон сайта PageBuy

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

Шаблон полностью адаптивен к просмотру на любом мобильном устройстве благодаря используемому фреймворку Bootstrap 4.

Контент шаблона PageBuy содержит:
- блоки описания товара или услуги;
- видео блок, позволяет воспроизводить свой видео файл в независимом плеере;
- карточки товара;
- интерактивную диаграмму статистики;
- блок карусель отзывов покупателей;
- форму обратной связи...

При создании шаблона использовались фреймворк Bootstrap 4, анимационные исходники animate.css и wow.js.

Информация по размещению видео

Шаблон позволяет воспроизводить видео по его абсолютному или относительному адресу.

Для воспроизведения сюжета с YouTube сначала необходимо скачать его с сервиса (программы типа UmmyVideoDownloader), затем залить на свой хостинг и прописать адрес файла. В этом случае достаточно указать лишь относительный адрес, например:
files/video.mp4
files/video.webm

Ссылка может иметь относительный адрес, если видео в пределах вашего домена.

Также, будет воспроизводится любой видео файл с чужого сайта. Со стороннего интернет ресурса ссылка должна быть абсолютной, пример
https://sitey.ru/files/video.mp4
https://sitey.ru/files/video.webm

Для адаптивного просмотра видео на любом устройстве (включая смарт-телевизор) рекомендую дополнительно к формату .mp4 добавить вариант формата .webm. Воспользуйтесь бесплатным онлайн видео конвертером, их много в сети интернет.

В шаблоне PageBuy присутствует свой видео плеер. При воспроизведении отображается полоса воспроизведения, счётчик времени просмотра, регулятор громкости.

Блок отзывов

Блок отзывов

Выполнен с использованием слайдера карусели Bootstrap 4. Перемещение по отзывам происходит при нажатии на одну из иконок с изображением пользователя.

Круговая диаграмма статистики

Блок статистики

Способна формировать любые процентные значения, в зависимости от указанного числа.
Присутствует эффект появления цифрового значения при наведении курсора мыши на сегмент диаграммы. Цвет сегментов можно изменить в настройках скрипта.
Числовые значения диаграммы настраиваются в скрипте внизу страницы. Сегменты диафрагмы автоматически приобретают необходимый размер.
Изменению подлежат значения в строке data, например: [275, 65, 43].

Особенности редактирования шаблона

Если вас устраивает структура страницы, то при редактировании вам предстоит лишь заменить русский текст на свой. Изображения меняйте в папке /img/. Если не хотите лишний раз производить изменения в коде, то названия картинок (пример: image.jpg или image.png) оставьте исходными.
Если названия картинок будут новые, то поменяйте их в коде соответственно.

Код шаблона сайта содержит комментарии, которые определяют начало и конец блоков, секций. Блоки и секции можно менять местами: выше - ниже, вправо - влево.
Секции и блоки имеют примерно такой вид, соответственно:
<section class="section-intro">
...
</section>
или
<div class="col-md">
...
</div>

Файлы style.css и pagebuy.min.js шаблона максимально минимизированы и включают в себя лишь необходимые элементы фреймворка Bootstrap 4, анимационных исходников animate.css и wow.js. Это необходимо для более быстрой работы будущего сайта.


Скачать шаблон адаптивного сайта продажи товара: PageBuy.rar [1,01 Mb] (cкачиваний: 1)

Автор: Saah | Просмотров: 26 | 13-10-2019,Вс, 06:03  

Добавить свой комментарий:

@
Похожие публикации