Общее представление о Bootstrap и его классах мы получили из предыдущих постов, в сегодняшней статье рассмотрим более подробно работу с bootstrap и html компонентами в шаблонах PrestaShop.
Метка: шаблоны prestashop
Новогодние праздники позади и мы продолжаем знакомство с реализацией Bootstrap в шаблонах PrestaShop. Для навигации рекомендую использовать первый пост в цикле статей. В Bootstrap есть множество дефолтных классов с заранее заданными стилями поведения – PrestaShop поддерживает большинство из них.
В преддверии нового года предлагаю познакомиться с еще одной важной темой для верстки шаблона PrestaShop с поддержкой Bootstrap, а новогодние праздники потратить на закрепление материала )
Итак перейдем к теории — Bootstrap использует 12 колоночную сетку, которая позволяет построить гибкий макет. Вы можете использовать медиа запросы для указания контрольных точек для сетки. Дефолтное значение оптимизировано для самых низких разрешений экрана (480px – экраны самых маленьких телефонов), поэтому для этого случая использовать медиа конструкцию не нужно.
Для создания праздничного настроения у покупателей интернет магазина, можно сделать хорошие скидки и акции. А можно сделать новогодний фон для сайта на PrestaShop, о том как как изменить и сделать красивый фон для сайта читайте в статье под катом.
Как и обещала от теории переходим к практике, в сегодняшнем посте опишу подробнее применение Bootstrap в структуре шаблона PrestaShop.
Для полноценной работы Bootstrap необходимо использование HTML5. Будьте внимательны используя свойство doctype в своих шаблонах.
Начиная с версии PrestaShop 1.6 базовый шаблон разрабатывается на основе фрэймворка Bootstrap. Поэтому даже если Вы не планируете разработать шаблон с нуля, а только хотите внести ряд правок в текущий – необходимо ознакомиться с этой технологией.
Рада предложить Вашему вниманию новый бесплатный шаблон PrestaShop 1.6.
Из преимуществ стоит отметить:
— полностью респонсивная верстка, корректно отображающаяся на мониторах устройств с различным расширением (мониторы ПК, планшеты и телефоны).
— шаблон разработан с использованием новых веб-технологий: Bootstrap 3, Font Awesome 4, CSS3, HTML5, Google Fonts.
— SEO оптимизирован
— используется CSS и JS компрессия.
Представляю вашему вниманию очередную подборку новых бесплатных шаблонов для PrestaShop 1.6 на сайте web-esse.ru. Сегодня в обзор попали добротные шаблоны с грамотной версткой, современным дизайном и расширенным функционалом.
Первым рассмотрим новый бесплатный шаблон от Leo «tshirt».
Универсальная светлая гамма темы позволяет использовать её не только для магазина футболок, но и для любой другой тематики.
Как и большинство других тем от разработчика Лео, этот шаблон поставляются с дополнительными модулями. Например, в данном случае это — модуль производителей с логотипами, модуль виджетов и доработанные в виде слайдера товары на главной.
Бесплатная респонсивная тема «Apollo» с 3 цветовыми решениями. Цветовое оформление можно выбрать в «живом редакторе» при администрировании, т.е от вас не потребуется никаких навыков в вёрстке. Шаблон полностью респонсивный, а это означает, что на всех устройствах будет отображаться корректно.
Шаблон для PrestaShop 1.6 имеет не только современный дизайн, но и множество полезных модулей. Например, оформление в 1 шаг, редактор темы, расширенное меню «bootstrap megamenu», бесплатный блог для PrestaShop и многие другие.
Из технических особенностей реализации следует отметить поддержку SASS, bootstrap 3, google font.
Тип сайта: Интернет магазин детских товаров.
Поставленная задача: Разработка интернет магазина под ключ на PrestaShop. Дизайн должен получиться игрушечный, детский, но стильный (использовать 2 основных цвета).
Срок разработки: ~30 дней
Использовались: CMS PrestaShop 1.5, HTML, CSS, PHP, JQuery, Ajax.
За основу было решено взять 2 основных цвета: жёлтый и синий. В своей насыщенной гаме это сильный цветовой контраст, но в дизайне были использованы их приглушённые варианты.
В фоне используется не отвлекающий внимание мягкий жёлтый и аппликации игрушек. Основные навигационные элементы выполнены в синей гамме, для скидок добавлен традиционный красный.