F2 – Бесплатный шаблон Magento 2 vs Luma дизайн от TemplateMonster

В этом году мы уже рассмотрели ряд топовых релизов TemplateMonster. Адаптивные шаблоны, панели управления, посадочные страницы с билдерами… Что же следующее на очереди? Наш новый релиз не заставил себя долго ждать. Сегодня мы рады представить наш F2, построенный на Magento Framework 2, который вы можете загрузить бесплатно. Что делает его таким особенным? Давайте рассмотрим детальнее!

Что дает нам Magento Framework 2? Как и ожидалось, новая структура является более мощной и многофункциональной, чем ее предшественники, она построена на новом и современном коде. Давайте выделим ее основные функциональные возможности:

• Magento 2 поставляется с полным кешированием страницы, то есть все страницы вашего сайта будут построены в статической файловой системе, а это означает, что среднее время загрузки страницы будет снижено до 1-2 секунд (по сравнению с 5-10 секундами для некешированых файлов).
• Оформление заказа на Magento 2 стало более удобным. Рассмотрим подробнее этот функционал. Для существующих клиентов есть возможность входа без необходимости запоминать свои пароли. Кроме того, отсутствует возможность выбора типа кредитной карты, теперь система определяет ее автоматически, основываясь на первой цифре, которую вы вводите (например, 3 = Amex, 4 = Visa, 5 = MasterCard и т.д.).
• Новая структура файлов. С Magento 2, вы получите все, что размещается в «app» структуре, кроме файла config.xml. Таким образом, становится легче получить доступ ко всем шаблонам, макетам, JS и CSS файлам. С Magento 2 веб-разработчики получат больше возможностей с точки зрения настройки, без необходимости изменения функциональности сайта.
• Опция Multi-shopping также доступна, при этом снижается блокировка таблиц. Эта функция будет весьма полезной для владельцев крупных электронных магазинов. Теперь не будет закрытых таблиц, когда 100 и более людей одновременно пытаются сделать заказ на вашем сайте. Есть возможность сравнения и просмотра нескольких продуктов, Magento 2 позволяет осуществить несколько покупок в рамках одной транзакции. Благодаря новым обновлениям платформа стала ведущим открытым мульти инновационным каналом.
• Легкое редактирование. Magento 2 включает VisualEditorDesign, который позволяет изменять контейнеры и блоки без каких-либо специальных навыков программирования.

В целом, Magento 2 включает в себя ряд новых и передовых технологий, таких как HTML5, CSS3, Apache 2.2, MagentoPerformanceToolkit, Magento UI Library, PHP 5.5.x, MagentoPerformanceToolkit, CSS Pre-processor, MySQL 5.6, PSR соответствия и т.д. Если вы хотите узнать больше обо всех улучшениях Magento 2, добро пожаловать на страницу разработчиков. Теперь давайте вернемся к основной цели этого поста и поближе рассмотрим бесплатный шаблон TemplateMonster Magento 2 и сравним его с обычной темой Magento 2.

F2 - Бесплатный шаблон Magento 2 vs Luma

Анонс выпуска новых или обновленных бесплатных продуктов стал хорошей традицией. Magento 2 не является исключением. Благодаря модному макету и современным стилям он не менее мощный изнутри. Но давайте обо всем по порядку.

Для того чтобы помочь вам выбрать оптимальный вариант, который будет отвечать требованиям вашего бизнеса, сравним стандартную тему Magento 2 под названием Luma и бесплатный шаблон TemplateMonster, выделим их общие черты, опции.

Дизайн главной страницы

Luma приняла все особенности обновленной платформы. В основу структуры легла плитка из баннеров - это является одним из определяющих факторов, которая отличает Luma от Мэдисон-Айленд (стандартной темы Magento 1). Плитка была также показана в теме F2, но немного в другой форме. Вот так расположение темы Luma выглядит по умолчанию.

Плитка в виде баннеров занимает большую часть первой страницы. Здесь пользователи не работают со слайдами или галереей.

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

С точки зрения читаемости F2 является более удобным для пользователей. В то время как тексты, написанные на плитках Luma, выглядят хорошо на стандартных мониторах. Однако дело обстоит иначе на сенсорных экранах. F2 в этом плане выигрывает и прекрасно выглядит на любых экранах.

Для того чтобы не перегружать пользователей информацией, в F2 позднее были разделены блоками «Новые» и «Специальные» продукты, которые были организованы в функциональную «Карусель». Каждый раз, когда пользователь хочет видеть больше вариантов из каждой категории, ему просто нужно нажать на кнопку-стрелку на первой странице без необходимости перемещения в другое место.

Когда дело доходит до Luma, то здесь один блок организован в одну основную сетку «Горячие предложения». Опция слайдер не включена.

Категория страниц

Страницы категорий Luma имеют сетку или создаются на основе списка просмотра опций. Организован в сжатой форме, предварительный просмотр каждого элемента включает в себя звезды рейтинга, цвет и варианты размера, а также призывы к действию, которые появляются при наведении курсора. Существует также возможность выбора количества элементов пользователями, которые будут отображаться на странице (9, 15 или 30). По умолчанию ширина страницы 980px, которая больше на 300px, чем ширина темы Magento 1 по умолчанию, но все же не такая большая, как F2.

Ширина страницы в F2 составляет 2048px. В дополнение к опциям отображения элементов в виде сетки или списка, вы можете задать количество элементов, отображаемых на странице (4, 8 или 16), иметь возможность фильтровать все продукты по названию и цене. Анонсы продукта крупнее по сравнению с Luma, которые позволяют пользователям поближе взглянуть на каждый элемент на странице категории. Размер и цветовые вариации, количество звезд, цены и элементы CTA, которые появляются при наведении, также включены.

Страницы товаров

Страницы товаров в Luma и F2 очень аккуратные. Изображения товаров достаточно большие, так что пользователи не будут иметь никаких проблем с определением особенностей для каждого товара. Все продукты показаны с помощью нескольких изображений и в различных цветовых вариациях. Оба шаблона включают четко определенные блоки с деталями для получения дополнительной информации и отзывы под изображением продукта. Название, количество звезд, цены, размеры и варианты цветов, а также множество элементов СТA, размещенных справа от изображения товара.

Хотя оба шаблона и имеют много общих элементов на странице товара, есть несколько определенных различий. Например, взгляните на блок «Совместимые товары» из F2. Организованная карусель товаров, которая дает пользователям больше возможностей для удобного выбора. Кроме того, существует также блок с товарами, которые могут также понравиться пользователям, они тоже представлены посредством слайдера. Таким образом, при совершении покупки клиенты знакомятся с большим ассортиментом продуктов, которые так или иначе связаны с выбранным товаром.

Особенности Luma - это аккуратное представление определенного продукта с набором изображений и деталей, а также наличие блока связанных между собой товаров, организованного в виде сетки. Функция слайдера не включена, отсутствует блок продуктов «Вам также может понравиться».

Подводя итоги следует отметить, что F2 имеет индивидуальный дизайн страницы, которая была построена в соответствии с последними веб-тенденциями. Аккуратный и элегантный вид главной страницы привлекает внимание пользователей своим стилем и вниманием к деталям. Понятная иерархия контента достигается посредством шрифтов разных размеров и цветов, благодаря этому шаблон легко воспринимается пользователем.

Рассмотрим тематические рубрики на F2

Теперь давайте рассмотрим функциональность, которая делает F2 шаблоном, достойным вашего внимания. Полностью адаптивный, кроссбраузерная совместимость, идет с набором слоев PSD файлов, а также шаблон наполнен множеством других функций, которые могут сравниться с премиум вариантами. Давайте начнем с навигации.

Прилипающий хэдер

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

Выпадающее меню

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

Продажа новых видов продукции

Стоит обратить особое внимание на эти элементы. Рекомендуемые продукты в виде горизонтальной карусели придают больше интерактивности и функциональности странице, позволяя продемонстрировать более 4 продуктов одновременно. Кроме того, для удобства пользователей, каждый элемент снабжен значками «Новинка!» или «Распродажа!».

Настраиваемые образцы товаров

На страницу описания продукта добавлена возможность предварительного просмотра клиентом определенного предмета в различных цветовых вариациях на сайте. Цвет, ткань и размер - можно выбрать практически любой атрибут, который вы хотите.

Слайдер с изображениями

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

Вот и все. Идем дальше и проверяем демо. И не забудьте поделиться своим мнением о новой теме к этому посту. Какая тема вам больше нравится - F2 или Luma? Почему? Ваше мнение всегда имеет значение!