WordPress используется уже очень давно. За это время вышло большое количество тем под эту CMS. Эти темы каждый год становятся все более популярными, так как они позволяют сделать сайт быстрее и зачастую даже дешевле, чем при заказе у верстальщиков и дизайнеров. Все шаблоны подразделяются на определенные категории. В каждой из категорий есть такие макеты, которые определенно можно считать лидерами своей категории. Сегодня мы рассмотрим лидера в категории макетов, совместимых с WooCommerce, – Flatsome.
Flatsome – что это
Flatsome – это многоцелевая тема WordPress. Макет был разработан и выпущен 3 сентября 2013 года. Разработчики поддерживают свой продукт и до сих пор выпускают для него обновления. Это можно заметить по длинному журналу обновлений. Шаблон можно использовать в любых целях. Его возможности позволяют запустить интернет-магазин, личный блог, портфолио фрилансера и т.д.
Посмотрим, какие именно функции делают этот макет одним из лучших:
- несколько вариантов для меню. Это позволяет выбрать любой тип меню в зависимости от количества страниц и контента на веб-сайте;
- совместимость с последней версией WordPress;
- возможность создавать и сохранять страницы в UX Builder. Этот визуальный конструктор предоставляет обширную библиотеку элементов, которая в разы расширяет возможности при создании сайтов;
- безграничное количество опций и настроек. С Flatsome вы можете не переживать об уникальности своего сайта. Тема предоставляет большое количество настроек, чтобы можно было сделать уникальный сайт с неповторимым дизайном и функционалом;
- высокая скорость загрузки и оптимизация под поисковые машины. Шаблон хорошо оптимизирован и имеет высокую скорость загрузки, что подтверждается различными сервисами. Высокая скорость обеспечивается отложенной загрузкой изображений, чистым кодом и множеством других факторов;
- продающий дизайн. Дизайн макет разрабатывался таким образом, чтобы пользователь быстро ориентировался по сайту и имел простой доступ ко всем элементам;
- всегда актуален. Разработчики сделали фокус на том, чтобы их продукт всегда шел в ногу со временем. Поэтому они постоянно готовят обновления для Flatsome. Также шаблон всегда совместим с самыми актуальными версиями WordPress и WooCommerce;
- более 300 заготовленных страниц и разделов. Авторы подготовили большое количество страниц, чтобы вы могли быстрее установить их и начать работу над сайтом;
- установка в один клик. Вместо того, чтобы с нуля создавать страницы можно установить в один клик одну из заготовленных и изменить ее контент под потребности бренда;
- мультиязычный макет. Flatsome уже поддерживает больше 12 языков. Если вам будет нужно еще больше – всегда можно обратиться к разработчикам, с просьбой добавить еще языковые пакеты. Также можно сделать перевод самостоятельно – при помощи специальных расширений;
- большая база клиентов. Макет существует на рынке уже достаточно долго. За это время он получил обширную базу клиентов. Это только подтверждает высокое качество Flatsome;
- адаптивность. Тема полностью адаптивна под любые размеры экранов. Также разработчики специально переработали некоторые элементы для более простого доступа к функционалу;
- безлимитные настройки для шапки сайта. Макет имеет множество разнообразных настроек для шапки. Таким образом, можно сделать шапку любого типа на свое усмотрение. Содержимое редактируется простым перетаскиванием, что исключает необходимость кода при работе;
- без необходимости плагинов для слайдеров. Встроенный редактор блоков имеет предварительно заготовленные слайдеры. Поэтому вам не нужно скачивать дополнительные расширения, чтобы установить слайдер на веб-сайт;
- точка фокуса на изображениях. Иногда при сжатии экрана обрезаются самые важные части изображения. С Flatsome вы можете выделить главную область на изображении, и при изменении размера окна она не будет вырезаться.
Мультиязычный макет
Авторы темы уже подготовили более 12 языковых пакетов. Этого вполне достаточно, чтобы начать развивать сайт за рубежом. Но что делать, если веб-сайт нужно перевести на язык, которого нет в теме? В таком случае вам нужно достать языковой файл из файлов темы и сделать свой перевод при помощи специальных расширений. Например, это можно реализовать при помощи WPML, который полностью совместим с Flatsome.
Большой выбор меню
Меню – это один из самых важных элементов на сайте. С его помощью посетителям будет гораздо проще ориентироваться по страницам и содержимому ресурса. В зависимости от количества контента и страниц выбираются разные типы меню. На простом одностраничном сайте можно использовать стандартное горизонтальное меню с якорными ссылками. Другое дело – интернет-магазин или просто очень объемный сайт. Такие сайты обычно имеют множество страниц и очень сложную структуру. Для подобных веб-сайтов лучше использовать мега-меню. Такой тип меню разбивает все вкладки по соответствующим категориям и пользователь быстрее находит нужные страницы. Возможности Flatsome позволяют выводить настраиваемое мега-меню, простой раскрывающийся список, полноэкранное меню и боковое и множество других типов. Функционала темы хватает, чтобы полностью настроить этот элемент под свои потребности или потребности бизнеса.
Конструктор страниц
Многие разработчики негативно отзываются о конструкторах страниц. Говорят, что они плодят много лишнего кода и из-за них сайт работает медленнее. Но у конструкторов есть очень важная положительная черта. Они позволяют создавать сайты даже тем пользователям, которые вообще не знают веб-разработки. Авторы добавили в свой продукт интеграцию визуального конструктора страниц. С его помощью вы можете самостоятельно создавать новые страницы и изменять любое содержимое более ранних страниц. Главная особенность этого конструктора – большая библиотека элементов. В этой библиотеке можно найти буквально все, что только нужно сайту – от блоков с текстом и заголовками до настраиваемых слайдеров.
Вот некоторые блоки, которые позволяет добавить конструктор:
- секции;
- сетки;
- слайдеры;
- баннеры;
- кнопки;
- видео;
- картинки;
- галереи;
- сетка баннеров;
- лайтбоксы;
- карты;
- блоки с сообщениями;
- кнопки социальных сетей.
На демонстрационной странице макета вы можете просмотреть полный список элементов. Здесь еще можно сказать, что эта библиотека избавляет от необходимости скачивать множество расширений. Визуальный редактор также позволяет изменять любые параметры шапки сайта. Вы можете выбрать любой из предварительно заготовленных вариантов. А можете создать свой. Для этого всего лишь нужно перетаскивать элементы на нужные места, пока не получится нужный результат.
Также Page Builder включает в себя разнообразные слайдеры и галереи. Обычно, если на сайт нужно добавить галерею или слайдер, приходится скачивать дополнительные расширения. Но с Flatsome в этом больше нет необходимости. Вам просто нужно взять эти элементы из библиотеки и перетащить на страницу. Уже там можно изменять их параметры, размеры и наполнять контентом. Самое главное, что все слайдеры и галереи полностью настраиваются инструментами темы.
Безлимитные параметры
Макет имеет просто невероятно большое количество параметров. Совмещая их, вы получите безграничные возможности. Настройщик позволяет изменять цвета, шрифты, размеры и множество других аспектов. Чтобы посмотреть их все, вам нужно воспользоваться шаблоном самостоятельно.
Продающий дизайн
Дизайн сайта – не менее важная часть, чем его функциональность. Можно добавить на сайт огромное количество элементов, но при этом посетители будут быстро покидать его, не делая покупок. А можно сделать простой сайт с минималистичным дизайном, но при этом его охват будет расти бешеными темпами. Над Flatsome работали профессиональные дизайнеры. Они точно знают, как должен выглядеть современные веб-сайт. Поэтому они сделали тему с максимально крутым и современным дизайном.
Также в дизайне очень важна адаптивность. Адаптивный веб-сайт предоставляет посетителям полный доступ ко всем функциям на любом устройстве, будь это телефон или ноутбук. Авторы шаблона сделали свой продукт отзывчивым. Поэтому ваш сайт не только понравится посетителям, но и будет занимать высокие позиции в поисковой выдаче из-за хорошей оптимизации под поисковые машины.
Большое количество страниц
Разработчики подготовили несколько различных страниц. Это стандартные страницы для любого сайта, в основном, для блога:
- страница с портфолио. Здесь можно размещать свои работы. Портфолио отображается в виде сетки с картинками и подписями. Каждая карточка портфолио ведет на отдельную страницу работы, где вы можете подробно рассказать о ней. Страница также включает фильтрацию;
- о нас. Здесь можно подробно рассказать все о вашем бренде или компании. Здесь можно вставить фоновую картинку, заголовок и краткое описание. Дальше можно сделать полное описание компании, а затем добавить ваших сотрудников. В карточке сотрудника можно поставить его фотографию, имя, должность, ссылки на соцсети и дать краткую характеристику.
- контакты. Здесь можно вывести карту с адресом компании, показать график и время работы, дать ответы на самые частые вопросы и указать контактные данные. Также здесь посетители могут задать свои вопросы через специальную форму обратной связи;
- о магазинах. На этой странице выводится информация обо всех магазинах сети. Если у вас есть несколько магазинов в разных частях страны или города, то можно указать их здесь в виде списка и карты с расположением каждого магазина;
- обслуживание. Временная страница, которая покажет посетителю, что сайт находится на обслуживании. В центре экрана располагается таймер обратного отсчета. Он покажет, сколько осталось времени до запуска веб-сайта.
Также разработчики подготовили отдельную страницу, где вы можете увидеть все предварительно разработанные макеты.
Поговорим о SEO
В продвижении сайта большую роль играет поисковая оптимизация. Чем она выше, тем выше будет веб-сайт в списке сайтов. Соответственно, это приведет еще больше новых посетителей. Чтобы веб-сайт был на первых местах в поисковике, нужно выполнять некоторые требования. Flatsome соответствует всем требованиям поисковых машин. Помимо адаптивности, тема имеет высокую скорость загрузки и отличные показатели при проверке в трех сервисах:
- 98 балов из 100 по Google Page Speed;
- 100 из 100 балов при проверке в Desktop UX;
- 100 из 100 балов по Mobile UX.
На странице темы можно посмотреть на скриншоты с проверок в этих сервисах.
Интернет-магазин
Раз уж речь идет о лучшей WooCommerce теме, то нельзя не затронуть интернет-магазин. Так как шаблон полностью совместим с WooCommerce, вы сможете создать на его основе полноценный магазин. Для этого к возможностям расширения электронной коммерции подключаются функции визуального конструктора.
Вы можете разбить товары по категориям и вывести эти категории в виде сетки. Шаблон позволяет добавить фильтрацию товаров по типу, цвету и другим параметрам. При наведении на категорию можно увидеть плавную анимацию. На страницах категорий в виде сетки отображаются сами товары. Карточка товара включает в себя:
- изображение;
- категорию;
- название товара;
- цену;
- кнопку для добавления в избранное (отображается при наведении на карточку).
Все параметры карточек товаров быстро настраиваются при помощи визуального редактора.
Страница товара уже содержит галерею с изображениями товаров (к слову, это очень важно, ведь сам по себе WooCommerce не имеет функции интеграции галерей). Изображения в галереи меняются с плавным переходом, а миниатюры имеют красивые эффекты при наведении. Помимо галереи страница содержит пагинацию для перехода к следующему или предыдущему товару, цену, описание, поле для ввода количества и кнопку для добавления в корзину. К дополнительным элементам страницы можно отнести:
- список похожих продуктов;
- лучшие продажи;
- новые товары;
- отзывы о продукте;
- кнопки социальных сетей;
- теги.
Корзина появляется в виде бокового меню и имеет такие элементы, как: карточку товара, общую цену, кнопку открытие отдельной страницы корзины и кнопку заказа.
На странице шаблона можно посмотреть другие возможности макета. Здесь были приведены лишь основные функции и параметры. В целом, Flatsome просто идеально подходит для интернет-магазина.
Всегда в тренде
Разработчики Flatsome хорошо знают о том, как важно, чтобы продукт шел в ногу со временем. Поэтому они постоянно работают над обновлениями темы. Чтобы убедиться в этом, можно просто открыть журнал изменений макета. На нем просто сплошным списком идут функции, которые добавлялись в каждой из версий. Помимо этого, макет всегда совместим как с последними версиями WordPress, так и с самыми актуальными версиями WooCommerce.
Работа с изображениями
Здесь речь пойдет не о галереях или слайдерах, так как это уже относится к возможностям визуального редактора. Здесь мы поговорим о таких функциях, как точки фокуса и изменение размера изображений, в соответствии с размером экрана устройства.
Часто при изменении размера страницы изображения обрезаются там, где это в принципе не нужно. То есть, может сайт может обрезать лицо человека или какой-то предмет, который как раз и должно быть видно. Знакомо, не так ли? Авторы подумали о том, как исправить эту проблему. Для этого они добавили точки фокуса. Все, что вам нужно сделать – это указать наиболее важную часть изображения. После этого при сжатии экрана эта часть не будет обрезаться.
Как изображения подстраивают свой размер под экраны. Когда пользователь заходит на веб-сайт с компьютера, то нужно, чтобы картинка была качественной. Но в случае с мобильным телефоном этой необходимости нет. Поэтому шаблон измеряет экран устройства и отображает картинку, соответствующую размеру. То есть, на больших мониторах отображаются объемные изображения (как по разрешению, так и по весу). На экранах телефонов выводятся только маловесящие изображения, так как там не так важно высокое качество картинки. Таким образом, нагрузка на сайт при просмотре с телефона значительно уменьшается.
Контактные формы
Формы обратной связи – обязательный элемент, особенно в интернет-магазине. С помощью интеграции Contact Form 7 можно добавлять любые формы. Каждая форма отдельно настраивается, и расширение позволяет задействовать любое количество полей.
Как работать с темой
Flatsome имеет множество функций. Когда тема имеет множество функций, то это значит, что пользователя трудно разобраться со всеми настройками. В этом случае можно надеяться только на поддержку и документацию. О работе поддержки мы узнаем из отзывов покупателей, а здесь разберем документацию. В качестве документации разработчики предлагают следующие пункты:
- видеоуроки, обучающие работе с макетом. На отдельном YouTube канале авторы выложили видеоуроки, в которых они рассказывают о том, как работать с макетом. Видео разбиты по отдельным плейлистам. Например: как использовать UX Builder, как пользоваться самой темой и другие;
- онлайн-документация. Под документацию авторы сделали отдельную страницу. Все этапы настройки разбиты по категориям, поэтому вы быстро сможете найти нужное решение проблемы. Страница полностью адаптивна, текст и значки достаточно большие, чтобы их можно было разглядеть даже на маленьких экранах. Каждый этап в документации подробно расписывается. Наиболее важные пункты выделяются, а также авторы добавили изображения для наглядного примера;
- другие пользователи. Макет имеет большое количество пользователей. Это значит, что вы можете общаться с другими покупателями темы, чтобы лучше и быстрее разобраться с проблемами. Также вы сможете получить ценные советы от них.
Перед установкой темы обязательно стоит просмотреть все требования к серверу и версии PHP. Таки образом вы избежите большинства проблем при использовании.
Отзывы покупателей и работа поддержки
Здесь мы посмотрим на пару отзывов, из которых можно узнать о том, как на самом деле работает шаблон и насколько качественную поддержку предоставляют разработчики.
Вот один из отзывов, достаточно хорошо характеризующий работу темы: “Отличная тема. Она превосходно работает у меня уже больше трех лет. Конечно, некоторые обновления и функции необходимо доработать, но все равно шаблон работает превосходно. Я хочу сказать некоторым пользователям, чтобы они давали команде поддержки время на ответ. Они обязательно дадут решения, только нужно немного подождать. В целом, это прекрасный шаблон, который принес мне огромное количество продаж”.
Также вы можете посмотреть на отзыв, в котором пользователь рассказывает о своем опыте работы с поддержкой темы: “Я спокойно могу порекомендовать этот макет всем начинающим разработчикам. К ним отношусь и я. Тема действительно очень простая в использовании. Помимо этого нельзя не оценить работу команды поддержки. У меня было несколько проблем. Эти проблемы не относились к работе самого шаблона, но сотрудники службы поддержки все равно помогли найти их решения. Просто превосходное обслуживание клиентов”.
Стоит ли покупать Flatsome
Тема стоит 59 долларов. Для шаблонов такого уровня это средняя цена, но перед выводами о покупке стоит пробежаться по некоторым важным характеристикам макета. Flatsome имеет быструю службу поддержки и подробную документацию. Это гарантирует, что после покупки вы в любом случае сможете разобраться с темой. Макет имеет адаптивный дизайн и высокую скорость загрузки, что повышает поисковую оптимизацию и выводит сайт на высокие позиции в поиске. Также шаблон позволяет создавать любые типы сайтов, и разработчики постоянно готовят обновления для своего продукта. Помимо этого один из пользователей написал, что этот шаблон принес ему немало денег.
Заключение
Flatsome – это превосходная многоцелевая тема. С ее помощью можно сделать и интернет-магазин, и блог, и одностраничный сайт. Шаблон легко адаптируется под потребности вашего бизнеса. В случае если возникнут проблемы, макет имеет отличную службу поддержки и подробную документацию. Очень важно, что Flatsome имеет множество пользователей, а еще важнее, что разработчики позволили всем пользователям связываться между собой. Вы можете поговорить с другими покупателями и получить от них ценные советы или решения проблем.