Привет читателям. Думаю, многие владельцы сайтов на WordPress уже наслышаны о замечательном премиум плагине Visual Composer, который позволяет произвольно строить страницы и посты для сайта. Плагин великолепный, но увы, очень даже платный. Есть ли достойная альтернатива для тех кто платить не хочет, ну или не может? Есть! И зовется она — Page Builder by SiteOrigin.

Page Builder by SiteOrigin — совершенно бесплатен, обладает более чем достойным функциями (особенно с учетом расширений, а о них я расскажу ниже), имеет высокий рейтинг и давно пользуется популярностью среди пользователей. Назначение плагина по сути, точно такое же как и у его знаменитого, платного аналога — возможность гибко размещать различные функциональные блоки с контентом на страницах и в записях.

Устанавливаем плагин стандартным способом через админку и заходим в Настройки — SiteOrigin Page Builder .

Настройки Page Builder by SiteOrigin

Одна страничка с общими настройками не содержит ничего сложного. Можно определить включение композера для постов и/или для страниц, определить параметры адаптивности и отступов, включить встроенные виджеты и так далее. Я рекомендую все оставить по умолчанию, как есть. Возможно, стоит только отключить композер для постов. Обычно используется построение страниц. Но это вы уже сами решайте.

Теперь выбираем/создаем страницу где вы планируете развернуть «строительство» и переходим не неё.

Работа с композером

В правом, верхнем углу стандартного редактора жмем на новую закладку Page Builder и переключаем страницу в режим построения. Вернуть обратно к стандартному виду всегда можно нажав Switch to Editor .

После переключения видим две не большие кнопки:

Add Widget — вызывает окно со всеми доступными для размещения блоками и виджетами.

Add Row — вызывает окно, где можно указать количество разделяемых столбцов (строк). Каждый из них можно затем регулировать просто перетаскивая курсором за разделитель.

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

Выводите и располагайте на странице изображения, стандартные виджеты, видео, посты, галереи, отзывы и прочее. Количество блоков и их возможности могут показаться скромными, особенно тем кто уже использовал ранее коммерческие аналоги. Но не торопитесь! Дело в том, что вы можете легко подключить к Page Builder by SiteOrigin еще четыре мощных плагина которые уверен, придутся кстати очень и очень многим.

При добавлении нового блока жмем внизу большую синюю кнопку — Recommended Plugins and Widgets . Переходим к выбору установки четырех дополнительных плагинов. Рассмотрим вкратце каждый их них.

Дополнительные плагины

Зачем вообще связываться со строителями кастомных страниц (Page Builder)?

Сегодня WordPress Page Builder является самым популярным выбором среди разработчиков по всему миру. Его удобно использовать для создания разных страниц, начиная от самых элементарных и заканчивая очень сложными. Помимо WP Page Builder доступны и другие бесплатные инструменты. Однако разработчики выбирают именно WordPress из-за следующих характерных особенностей:

  • Легко установить
  • Легко настроить
  • Легко пользоваться

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

Сегодня мы бы хотели провести сравнение 3 самых популярных строителей страниц в WordPress: Visual Composer , Beaver Builder и Velocity Page .

1. Visual Composer


Описание | Демо | Купить за $34

Особенности

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

Удобство использования

Интерфейс Visual Composer очень прост и удобен. После установки, вы потратите максимум 15 минут, чтобы разобраться в нем и понять, как все работает. Но, несмотря на всю практичность этого плагина, разработчику понадобится несколько часов, чтобы создать кастомизированные страницы, которые бы отвечали всем требованиям и запросам. Вам нужно понимать, как работать с каждым элементом и что произойдет после его установки. Некоторые шаблоны поставляются вместе плагинами, которые будут увеличивать скорость загрузки. Желательно загружать такие шаблоны в самом начале и начинать работу с них. Таким образом, вы быстрее разберетесь в рабочем процессе.

Поддержка

Visual Composer представлен на рынке уже много лет. Плагин постоянно обновляется, к нему добавляются новые функции. Система поддержки очень достойная. Запросы клиентов обрабатываются постоянно (используется система тикетов), разработчики также активно отвечают на комментарии. Вы приобретаете Visual Composer одним платежом, без ежегодной платы, поэтому получаете качественную поддержку на всю жизнь. Стоит добавить, что на сайте WP Bakery вы найдете отличную "базу знаний", которая поможет вам лучше разобраться в работе с плагином.

Аддоны

“Ultimate ” - самый популярный аддон на CodeCanyon. Каждый элемент в этом пакете создавался очень кропотливо, с особым вниманием к деталям. В него входят Info Box, иконки, Info List, Counter, Flip Box, Modal Popup Box, интерактивный баннер, расширенные Google Maps и Timeline. Есть функция вертикального и горизонтального параллакса, фиксированные фоновые изображения, видео фон, Hover-параллакс и многослойный Hover-параллакс. С помощью WordPress Icon Fonts Manager вы можете изменять шрифты вашей собственной иконки.

Встроенные блоки

Visual Composer поставляется с более чем 40 загруженными блоками контента. В них водит Text Block, Text Separators, Facebook Like, Pinterest, Single Image, Call to Action, Video Player, Google Maps, Pie Chart, Media Grid и так далее. Только файлы JavaScript.

Итог

Visual Composer легко можно рассматривать как наиболее удачный выбор среди всех доступных подобных инструментов на WordPress. При покупке данного плагина, пользователь получает удобный интерфейс и огромное количество разных элементов контента, что явно выводит плагин на первое место. Однако в Visual Composer нет никакого варианта для добавления виджета на страницу, в отличие от некоторых других бесплатных плагинов.

2. Beaver Builder


Особенности

Beaver Builder совместим с любыми типами WordPress тем. Он позволяет создавать страницы через фронтэнд. Основное преимущество этого способа - вы сразу будете видеть внешний вид вашего сайта и у вас не возникнут какие-то ложные представления. Beaver Builder поставляется с 11 встроенными конструкциями страниц и 12 вариантами домашних страниц. Есть шаблоны для страниц Услуги, Про нас, Контакты, Портфолио и т.д. В отличие от многих других строителей страниц, которые вы можете использовать только на одном сайте, Beaver Builder можно установить на всех сайтах, которые вы ведете.

Удобство использования

После запуска плагина Beaver Builder на вашем сайте, вы можете приступать к работе. В меню настроек вы не найдете слишком много разных параметров, поэтому весь процесс не займет у вас много времени. Здесь вы сможете выбрать шаблоны страниц, модули и типы постов.

Чтобы начать работу, вы должны создать новый пост или страницу. Затем нажмите на вкладку “Page Builder” или на линк “Page Builder” на экране списка постов.

После запуска Page Builder вы перейдете во фронтэнд сайта и сможете там выбрать любой из 12 предложенных шаблонов для домашней страницы или 11 конструкций страниц, которые содержат контент.

В Beaver Builder доступны три категории модулей: виджеты, продвинутые, базовые. В зависимости от системы управления модуля, вы сможете подключать изображения, форматировать компоненты и тексты различными способами.

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

Поддержка

Команда поддержки Beaver Builder работает очень хорошо и предоставляет решения в течение очень короткого времени. В случае каких-либо задержек, ответ будет предоставлен в течение максимум 24-48 часов. Кроме того, есть форум поддержки Beaver Builder, где вы можете оставить свой запрос или просмотреть запросы других пользователей.

Аддоны

К сожалению, на данный момент, в Beaver Builder нет поддержки аддонов.

Встроенные блоки

Beaver Builder поставляется с большим количеством встроенных блоков контента. Слайд-шоу, вкладки, страницы, кнопки, отзывы, формы, таблицы ценообразования - лишь некоторые из них.

Итог

Создание веб-страницы требует много усилий и времени, особенно, когда нужно запустить несколько проектов одновременно. Beaver Builder позволит вам упростить этот процесс и поможет создавать страницы без единой строчки кода. Отличный интерфейс поможет справится со всем быстро. Но в этом способе есть и свои недостатки.

3. Velocity Page


Особенности

Velocity Page - сравнительно новый WordPress плагин, который позволяет вам создавать страницы и менять их контент из фронтэнда. Velocity Page совместим со всеми типами WordPress страниц. Таким образом, вы можете разработать новую страницу или отредактировать уже существующую. Однако вы не можете редактировать существующие посты. После запуска Velocity Page существующий контент будет скрыт (или он просто будет игнорироваться). Можно использовать текущую тему или выбрать один из предложенных шаблонов.

Удобство использования

После включения Velocity Pagе вы сможете изменять контент только через фронтэнд. После входа в систему вы увидите кнопку “Edit”, кликните на нее и включите элементы управления модификациями. В редакторе вы сможете сделать предпросмотр доступных функций. Есть возможность менять строку в столбце, с помощью кнопки “Change item type”, но у вас не получится изменить ширину колонки.

Поддержка

После приобретения Velocity Page можете быть уверены в качестве их поддержки. Если вам не понравится их работа, то в течение 30 дней вы сможете получить свои деньги обратно. Используется система билетов (тикетов), которая уже давно доказала свою эффективность. Команда поддержки приложит максимальные усилия для того, чтобы быстро и качественно решить ваш вопрос.

Аддоны

К сожалению, Velocity Page не поддерживает внешние аддоны.

Встроенные блоки

В данном плагине есть много встроенных блоков, которые вы можете легко использовать для улучшения вашего дизайна страницы. Для добавления нового блока используется система “drag and drop”. Представлены следующие блоки: изображения, MailChimp, форум, медиа, Aweber форум, текст и т.д.

Итог

Velocity Page является хорошим вариантом для дизайнеров и владельцев сайтов, которые хотят легко добавлять новый контент на свои страницы. Вы действительно сможете без особых усилий добавить изображение или видео, при этом не изменяя основной дизайн сайта. Однако, в данном случае, очень многих потенциальных пользователей может смутить цена. К тому же он совместим не со всеми темами. Поэтому тот факт, что в случае неудовлетворенности результатом вы сможете вернуть свои деньги, очень радует. Несмотря на эти недостатки, Velocity Page - отличное решение для тех, кто не имеет ни малейшего представления о WordPress Dashboard и программировании в общем.

В то время, когда процесс создания и разработки веб-сайтов развивается и совершенствуется, вовлекая в себя тех, кто не очень уверенно разбирается в мире кодов, редактирование сайта с помощью перетаскивания способом Drag-and-Drop позволяет пользователям забыть о необходимости работать с унылым текстовым редактором WordPress для того, чтобы сделать свои сайты удобными для посетителей.

Редактирование сайта с помощью перетаскивания способом Drag-and-Drop решает две задачи:

  • позволяет вам реально видеть то, что вы создаёте
  • сокращает время, необходимое для создания веб-сайта.

Не правда ли, перетаскивать компоненты интерфейса быстрее и проще, и вам не придётся в этом случае переключаться между пользовательской и административной частями сайта для того, чтобы посмотреть результаты.

Редакторы сайта способом перетаскивания Drag-and-Drop являются очень полезными как для новичков, так и для опытных пользователей, создающих свои сайты. В данной статье представлен обзор лучших плагинов WordPress для редактирования сайта с помощью перетаскивания способом Drag-and-Drop, который поможет вам сделать правильный выбор.

1. Visual Composer

Visual Composer является одним из самых продаваемых плагинов для редактирования сайтов с помощью перетаскивания. И не без оснований, поскольку это весьма продвинутый премиум-плагин. С помощью Visual Composer вы сможете выбрать, будете ли вы создавать свой сайт из пользовательской или административной частей сайта. Этот плагин работает с любой темой, которую вы решите установить на свой сайт WordPress, он имеет более 40 компонентов, которые готовы к использованию сразу после его установки.

Ещё одной интересной особенностью этого плагина является его гибкость. Вы можете легко добавлять дополнительные модули, если знаете, что вы делаете. С помощью визуального редактора можно добавлять пользовательские элементы, такие, как различные значки, плитку и многое другое.

2. Beaver Builder

Beaver Builder является премиум-плагином, но вы можете получить облегчённую версию, если зайдёте в панель плагинов в вашей админке WordPress. Плагин также включает в себя тему в том случае, если вы выбрали один из тарифных планов, а некоторые планы предоставляют вам даже мульти-сайтовые функции.

Beaver Builder является одним из лучших плагинов для редактирования сайта перетаскиванием. Так, многие темы имеют редактор страниц, но изменения в вашей теме заблокированы. Что произойдёт, если вы когда-либо захотите изменить тему? Beaver Builder – это сторонний плагин, так что он не блокирует ваши изменения конкретной темы или проекта. Вы всегда можете изменить элементы без необходимости начинать всё сначала в ваших проектах.

Просмотрите подробный обзор о плагине Beaver Builder, если хотите узнать больше. Помните, что этот плагин сохраняет ваши изменения даже в том случае, если вы решите отказаться от использования Beaver Builder. Так работают не все плагины.

3. VelocityPage Drag and Drop Builder

Плагин VelocityPage Drag and Drop Builder имеет некоторые довольно уникальные возможности, он может помочь вам создать ваши страницы в течение нескольких минут. Так, редактор позволяет вам создавать потрясающие целевые страницы всего в несколько кликов. Вы можете также видеть изменения в реальном времени, прежде чем сохранить страницу с изменениями.

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

4. Elegant Themes Drag and Drop Page Builder

Плагин Elegant Themes Drag and Drop Page Builder является продвинутым инструментом для реструктуризации контента, который вы хотите разместить на вашем сайте. Скачайте и активируйте премиум-плагин для того, чтобы иметь возможность быстро изменить размер, переместить и отладить любой элемент на страницах вашего сайта. Приятной особенностью этого плагина является то, что редактор Drag-аnd-Drop отображается прямо под стандартным редактором WordPress, так что у вас есть прямой доступ и возможность видеть все ваши изменения.

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

5. Page Builder by SiteOrigin

Page Builder by SiteOrigin является полностью бесплатным плагином, включающим в себя виджеты WordPress. Он поможет вам создавать и модифицировать проекты с отзывчивыми страницами. Поскольку плагин использует виджеты, он очень удобен для новичков, которые могут легко освоить работу с ним. Кроме этого, он не делает больших изменений в интерфейсе вашей панели управления WordPress.

Работа с этим плагином даёт возможность видеть в интерактивном режиме те изменения, которые вы производите в процессе редактирования, а вкладка истории позволяет вернуться назад для того, чтобы посмотреть все изменения. Так, если вы сделаете ошибку, вы сможете просто вернуться назад и выполнить это снова.

6. MotoPress Content Editor

MotoPress Content Editor является премиум-плагином, но вы всегда можете поработать с демо-версией, если не уверены в необходимости покупки. Этот плагин полностью заменяет стандартный редактор WordPress по умолчанию, так как стандартный редактор не позволяет вам перетаскивать все ваши компоненты.

Редактор позволяет перетаскивать любой элемент, он имеет удобную панель инструментов для выбора компонентов, которые вы хотите включить в свою запись. Плагин работает с любой темой, поэтому всё, что вам нужно сделать, это активировать его и начать работу.

7. Themify Builder

С помощью Themify Builder можно вырезать и вставлять в код что-либо необходимое. При этом плагин предлагает интерактивный просмотр каждого изменения, которое вы делаете с помощью редактора. Премиум-плагин работает с любой темой, которую вы выбрали, и вы можете решить, хотите ли вы вносить изменения из пользовательской или административной части вашего сайта.

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

8. Page Builder by WooRockets.com

Плагин Page Builder by WooRockets.com предлагает бесплатный редактор интерфейса способом Drag-and-Drop с мощным макетом и полностью адаптивным дизайном, чтобы пользователи могли просматривать ваш сайт на различных устройствах. Вы можете также легко добавлять элементы, такие, как таблицы со списками цен, индикаторы выполнения и списки содержимого.

Также вы можете добавлять виджеты на любую страницу в редакторе WordPress. Просто перетащите какой-нибудь стандартный виджет в ваш редактор страниц, и вы сможете немедленно начать редактирование.

9. Live Composer

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

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

10. Aqua Page Builder

Aqua Page Builder – удобный бесплатный плагин, он делает процесс перетаскивания скорее интуитивным. Этот плагин хорошо работает с функцией импорт/экспорт в WordPress, он имеет множество функций и фильтров. Плагин может иногда немного глючить, но в целом, его возможности для работы весьма приличные.

11. FormCraft Drag and Drop Form Builder

Этот плагин не является в полном смысле редактором страниц, но он позволит вам создавать формы, используя редактор Drag-and-Drop. FormCraft позволяет быстро сделать потрясающую форму, и вы сможете с лёгкостью управлять процессом. В плагине имеются всплывающие окна и встроенные формы. Плагин имеет руководство от разработчиков, которое поможет вам начать работу.

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

Заключение

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

Firstly, we would like to thank you for purchasing Pav Fashion and chosen it for your website. We outline all kinds of good information, and provide you with all the details you need to use Pav Fashion.

If you are unable to find your answer here in our documentation, feel free to ask for help from our support team, all you have to do is submitting a ticket via our .

Opencart 2.x and Layout Builder

Pav Opencart is native with OpenCart 2.x, the latest version of OpenCart and it"s powered with the best Opencart page builder, you can check out the video tutorial

Here are some significant changes in Opencart 2.x

  • Google reCAPTCHA added for contact page and product reviews
  • Amazon Login and Pay module added
  • Global Payments module added
  • PayPal merchant on boarding added to PayPal Express module

Pavo Fashion OpenCart theme Overview

Pav Fashion is a responsive OpenCart theme for Fashion, High - tech, and Beauty. The OpenCart theme is developed with Pavo Framework version 4, LESS, it integrates Bootstrap 3, Font Awesome, supports HTML5 and CSS3. Pav Fashion menu system is powerful with MegaMenu and Off-canvas.

The theme also supports many modules that will help you save time and money to build a full functionality E-commerce website.

  • Pav MegaMenu
  • Pav Vertical MegaMenu
  • Theme Control Panel
  • Pav Home Page Builder
  • Pav Blog Category Module
  • Pav Blog Latest Comment Module
  • Pav Blog Latest Module
  • Pav Blog Management
  • Pav Carousel
  • Pav Category Banner
  • Pav Custom Module
  • Pav Deals
  • Pav Layers Sliders
  • Pav Newsletter
  • Pav Product Carousel
  • Pav Product Tabs

You can have a complete E-commerce website in some simple steps with our sample data package included when you install the theme.

Download and Installation

The instruction is to help you with installation of the Pav Fashion.

Download packages

To download Pav Fashion, please check it out at:

Once the download is complete, unzip the file and you would see the following packages:

  • Guides - our detail documentation for the theme
  • Quickstart package - for quickstart installation
  • Theme folder - for manual installation
  • Modules - the installation packages of all modules used in the theme
  • Source - the PSD files of the theme
  • Licensing - the theme license

System Requirements

OpenCart requires certain technical requirements to be met for the store to operate properly. First, a web server must be created to make the OpenCart store publicly available on the web. Domain names and hosting services can easily be purchased for an affordable price.

When selecting a hosting service, you should check to see that these server requirements are provided and installed on their web servers:

  • Web Server (Apache suggested)
  • PHP (at least 5.3)
  • Curl enabled
  • Database (MySQLi suggested)

Quickstart Installation

The Quickstart Package includes Opencart core, Pav Fashion theme, Extensions supported for the theme, and Sample data. Quickstart is the best choice for beginner to explore back-end settings and for new site building. Installing the Quickstart steps is just like Opencart installation, after the step, you will have a site that is exactly the same as our demo site.

Installing in Localhost or installing on your hosting is almost the same. Here is the quick guide to install Quickstart in localhost.

  • Step 1 - Create a folder in htdocs folder for Xampp, www folder for Wamp
  • Step 2 - Unpack the Quickstart package then copy all the files and folders to the new created folder.
  • Step 3 - Create database: You can create a database in your hosting provider"s control panel, for example cPanel. It may also be possible to do so in phpMyAdmin. Remember to take note of the details that you use as you"ll need them for the next step.
  • Step 4 - Auto - installer: The final step is to run the auto-installer. Open your favourite web browser and add “/install” to the end of your site"s website address. When doing this you should see with the following page:

The 4 steps in the auto-installer wizard.

  • Accept License: Click “Continue” after reading the GNU licence.
  • Pre-Installation: The pre-installation page checks that your server meets the minimum requirements. If there are any issues then you may need to contact your hosting provider. Assuming that everything is okay, click the “Continue” button.

  • Configuration: In section one, enter the database details that you used in step 3 and in section two enter your desired admin username, password and email address. Once all of the information is entered, click the “Continue” button.

  • Finished: That"s it! Now delete or rename the installation directory and you"re DONE.

Theme Installation

Before you install this theme:

  1. Read our complete instruction to install theme
  2. Make sure you have installed and running the correct version of OpenCart: OpenCart 2.x
  3. Take a FULL BACKUP for your site

We recommend to use this theme on a new, clean installation shops without custom core modifications.

Steps to install Pav Fashion Theme manually:

Step 1 - Unzip the theme package

After unzip the download package, please unzip the theme package - pav_fashion_themes_unzip.zip

Step 2 - Upload theme to your OpenCart site root directory

Module Installation

Step 1 - Unzip the module package

Step 2 - Upload the folder admin, catalog,... in the Module package that you want to install to the root directory of your OpenCart site

Step 3 - When you install Fashion theme manually, please unzip the Quickstart file: pav_fashion_full\pav_fashion_quickstart.zip\image. Then go to image folder and copy to theme folder.

Step 4 - After uploading all the folders, you can install it as Quickstart installation

Step 5 - Go to your OpenCart site admin panel, navigate to: Extensions → Modules , find the module you just uploaded then hit the "Install" button to proceed with the module installation.

After installing all modules, please navigate to Design → Layouts

Click on the Edit button to choose the page you need to edit then click on the Add module button.

Choose any module you want and assign the position for it

Theme Configuration

Supported themes/layouts

Pav Fashion is a 4 in 1 OpenCart theme. It supports 4 themes/layouts. Each theme/layout supports 2 skins: Default, Dark. It has different style and different layout structure.

1. Fashion home 1 theme/layout

2. Fashion home 2 theme/layout

3. Fashion home 3 theme/layout

4. Fashion home 4 theme/layout

Active Theme

Once the theme is uploaded, access your admin panel, navigate to: Admin > Extensions > Themes . Next, select Edit button.

And set Pav Fashion General section as your default store.

In here, you can configure the image size for category, product thumbnail, product popup, etc that fit your layout best

Image Size Adjustment

To configure the logo and favicon for theme, please navigate to: Admin > System > Settings and select Edit button.

Next, select Image tab and set store logo and icon for theme.

Theme Control Panel Setting

Pav Fashion supports Theme Control Panel module that allows you to manage your theme and customize your theme easily based on tons of options built in such as Custom Font, Layout management, compression, etc.

From your OpenCart site admin panel, go to Admin > Extensions > Modules , open the setting panel of Theme Control Panel module.

General Settings

In the General setting, you can see a lot of settings. The screenshot below is based on our Demo site.

Here are the main things that you can do with the General setting panel.

  • Select theme for your site: Default or Dark.
  • Theme layout width: You can design width for your layout or using auto mode by adding auto in the Theme Layout Width field.
  • Using customized copyrights info or not
  • Enable or disable OffCanvas Sidebars
  • Enable Panel Tool: The tool is to quickly change theme, layout, header layout, etc on front-page of your site
  • Enable Catalog Mode: Enable or disable Add to cart product.
  • Using Main Content Home FullWidth or not
  • Templage Layout Mode: Select mode for your template layout - Full Width, Boxed Large, Boxed Medium
  • Header Layout: Choose header for theme: default, fullslide, home3 or home4.
  • Enable Quickview: Enable or disable Quickview product
  • Logo Type: Choose Logo In Theme or Logo OpenCart
  • Product In Listing Layout: Choose Default or Swap image
  • StickyMenu: Choose Fixed or No Fixed

Pages Settings

Depend on page type, there are different settings. Select the page you want to edit then change the page setting using the available parameters.

Font Settings

The Font setting panel allows you to customize font for your whole site or for specific elements in your site such as heading, module heading, body. Google Font is supported.

Static Modules Settings

Static module is a OpenCart static module, depend on theme type, there are different modules. Select the module you want to edit then change the static module settings.

1. Logo

4. Call Us

Monday - Friday .................. 8.00 to 18.00

Saturday ......................... 9.00 to 21.00

Sunday ........................... 10.00 to 21.00

Call us: 0123 456 789

5. Contact Us

Warehouse & Offices
12345 Street name, California, USA
Retail Store
54321 Street name, California, USA
0123 456 789 / 0123 456 788

Layout Settings

Thanks to the Pavo Framework version 4, Pav Fashion comes with powerful theme configuration admin panel that allows you to customize the theme easily without touching any file. You can customize font, changing logo, changing skin, etc.

Sample Data Settings

Sample data is an important part of any site, importing, exporting back-up sample data is a regular work. It"s quite complex and risky if you do it manually. Theme Control Panel module helps you solve all the difficulties with the Sample Data management system.

CSS and JS Compression

Compression Feature allows to speed up your site by merging, compressing JS and CSS files.

All cached files are stored in folder system/cache/pavo-assets/ . To clear cached you click to CLEAR button on the top right side corner of your setting panel.

CSS and JS Customization

You can add CSS rules and JS to customize for your site. The CSS rules and JS added in the panel will have highest priority so it will override the styles in your CSS files.

Live Theme Customization

This is amazed feature in our product. The feature is to customizing your theme with pre-define parameters such as font size, text color, background color, font family, etc.

Here is the steps to customizing your site with Live Theme Customization

Step 1 - Open the Live Theme Customization panel

Step 2 - Customize your site with pre-defined parameter.

The Live Theme Customization panel includes 2 main sections: the setting panel (include all pre-define parameters) and your site front-page. When you change setting of a parameter, you would see the change in the front-page at the same time.

Step 3 - Save the customization when you"re done by hitting the "Submit" button.

Pav Module Configuration

The module configuration is based on Default demo site, if you use the other layout, the module configuration is expected to be the same.

Pav Fashion supports a lot of Pav modules that help you build a full Ecommerce functionality and help with content building for your site easier. Here is the instruction to use the extension the way they are used in Pav Fashion demo site.

Pav MegaMenu module

Pav MegaMenu module helps you create MegaMenu menu for your Opencart site. The visual configuration panel allows you to see the structure of the menu in front-page. What you change is what you see.

To configure MegaMenu, please go to: Extensions > Modules, find the Pav MegaMenu module then hit the "Edit" button. There are 2 main sections in the panel: the Menu management system and MegaMenu configuration panel.

Menu management system

  • Create a new megamenu
  • Edit any menu item:
  • Change menu item"s position: Update Order

Widget management system

Live Mega Menu Editor button in Pav MegaMenu module.

Filter By Name box or Filter By Group

Create Widget

  • Select Widget type:
  • Add content for the widget:

MegaMenu Configuration

Live MegaMenu Editor to access the MegaMenu configuration panel.

Pav Vertical MegaMenu module

Pav Vertical MegaMenu module helps you create Vertical MegaMenu menu for your Opencart site. The visual configuration panel allows you to see the structure of the menu in front-page. What you change is what you see.

To configure Vertical MegaMenu, please go to: Extensions > Modules, find the Pav Vertical MegaMenu module then hit the "Edit" button. There are 3 main sections in the panel: The VerticalMenu Management System, Module management system and MegaMenu configuration panel.

Menu management system

The Menu management system allows you to:

  • Create a new vertical megamenu : Fill in enough necessary information for your menu such as name, title, description... Remember to Save it before logging out.
  • Edit any menu item: Click on edit icon of the menu item you want to edit, then edit the settings of the menu item in the right panel.
  • Change menu item"s position: Drag and drop the menu item to change its position, after changing the order of menu items, please hit the Update Order , the saving option in the panel does not save the order change of menu item.

Widget management system

To go to Widget management system, please click on the Live Vertical Mega Menu Editor button in Pav Vertical MegaMenu module.

The widgets are used to assign to MegaMenu. You can create as many widgets as you expect. The content of widget can be chosen from Filter By Name box or Filter By Group : All, Blog, Typo, Opencart, Others and Image.

You can create a new submenu for any widgets by hitting the "Setting" icon or delete the widget that is not used any more.

To create a new widget, please hit the Create Widget icon in the upper right corner.

  • Select Widget type: There are a lot of widget types such as Blog, Typo, Opencart, Social, Image, Others.
  • Add content for the widget: The content is depend on what widget type you select, add the required info and save the widget.

Vertical MegaMenu Configuration

In the main setting panel of MegaMenu, hit the Live Vertical MegaMenu Editor to access the Vertical MegaMenu configuration panel.

In the configuration panel, you can:

  • Create sub-menu for any menu item, assign widget for the sub-menu and configure size of the sub-menu block.
  • Add row, column inside created sub-menu block.
  • Add class to style for column, row in sub-menu.
  • Align sub-menu block: left, right, center

Pav Home Page Builder module

Pav Home Page Builder module is to help you build Homepage layout for your site the ways you want. In short, each layout is built up from blocks, each block contains columns, you can resize the columns and assign widgets to the columns. Each block, column, widget has its own setting to make sure you can build any layout you want.

To configure the module, please go to: Extensions > Modules, find the Pav Home Page Builder module then hit the "Edit" button to go to its setting panel.

Layout Settings

Pav Fashion supports a lot of layouts, you can configure, customize any layout you want easily with the visual layout configuration. You can move a position to any place in the layout, assign any module to a position, etc.

1. Home Default

2. Home 2

3. Home 3

4. Home 4

Quickly edit a module

Hit the Edit icon in the module loaded in the layout and you can edit settings of the module in a popup.

Changing position to any place in the layout

You can move a module to any position inside the layout panel, there are some hard fixed positions, blocks that you can not move such as Header, Footer.

Edit the width of the module for each position

For each module, you can edit the width of the module by dragging and dropping it..

Widget management system

A new point in our framework is used for more widgets instead of using module as before to create a website. It is very easy and friendly with every user. With using this widget, you can save much time and energy. Only a few clicks, you can create a website you expect.

To go to Widget management system, please click on the "+" icon in the bottom position in Pav Home Page Builder Module

Then Add Column and Add Widget

There are two options for you choose in Module Management: Opencart Modules and Widgets

1. Opencart Modules

This Opencart Modules tab allows you to choose our modules: Pav Blog Latest Comment Module, Pav Deals,... or default Opencart module: Banner, Latest, Bestsellers,...

2. Widgets

In Widgets tab, you can choose any widget you want for your website. You can create as many widgets as you expect. The content of widget can be chosen from Filter By Name box or Filter By Group such as: All, Others, Typo, Product, Image, Piechart, Social and Opencart.

When you selected widget type, you need to add content for the widget. The content is depend on what widget type you select, add the required info and save the widget.

Pav Blog module

This is the platform for Blog on Opencart. You can create categories, blog items and get it displayed in front-page brilliantly. The module comes with a lot of settings that allow you to manage your blog post easily. It also includes comment system, a lot of modules such as Category module, Most Read blog module, Latest Comment module and Latest blog module.

To manage Your Blog system, please go to: Extensions > Modules, find the Pav Blog module then hit the "Edit" button to go to its setting panel.

General Settings

Category Page setting

Category Management

Blog Management

Comment Management

Category Module setting

Latest Comment Module setting

Front-end appearance of the module

Latest Module setting

Front-end appearance of the module

Pav Carousel module

The module allows you to add any module to display in carousel. All you have to do is adding modules you want to display in carousel, configure layout, position, max items ...

To configure the module, please go to: Extensions > Modules, find the Pav Carousel module then hit the "Edit" button to go to its setting panel.

Pav Category Banner module

This module is used in Home 2. Pav Category Banner module is to display list of products with banner in the website.

To configure the module, please go to: Extensions > Modules, find the Pav Category Banner module then hit the "Edit" button to go to its setting panel.

Pav Custom module

This module is used in Home 3 and Home 4. The module allows you to create content using HTML added to the content field.

To configure the module, please go to: Extensions > Modules, find the Pav Custom module then hit the "Edit" button to go to its setting panel.

There are a lot of custom HTML used in the site. We will show you one by one.

Pav Deals module

To configure the module, please go to: Extensions > Modules, find the Pav Deals module then hit the "Edit" button to go to its setting panel.

Pav Layers Sliders module

To configure the module, please go to: Extensions > Modules, find the Pav Layers Sliders module then hit the "Edit" button to go to its setting panel.

Pav Newsletter module

Pav Newsletter module is to manage signup newsletter for your site, you can display a SIGN UP FOR NEWSLETTER form in your site where user can add their email in the form to sign up for newsletter. In the back-end, you can create email and send to the subcriber.

To configure the module, please go to: Extensions > Modules, find the Pav Newsletter module then hit the "Edit" button. In the dashboard of the module, please select Frontend Modules to configure for the displaying of the module in front-page.

Pav Product Carousel module

This module is used in Home 3. Pav Product Carousel module is to display list of products in carousel. The products are selected based on: Featured, Latest, Best Seller, Most Viewed, Special, Top Rating.

To configure the module, please go to: Extensions > Modules, find the Pav Product Carousel module then hit the "Edit" button to go to its setting panel.

Pav Product Tabs module

Pav Product Tabs module is to display list of products in the website. The products are selected based on: Latest, Featured, Best Seller, Special, Most Viewed.

To configure the module, please go to: Extensions > Modules, find the Pav Product Tabs module then hit the "Edit" button to go to its setting panel.

Default Opencart Modules

These are default Opencart modules but it"s style has been customized to fit the theme design.

Category module

The module is to display list of category product in your OpenCart site. Its setting is so simple, just add layout, position that the module is displayed in and product image size.

To configure the module, please go to: Catalog > Categories and you can see the list of category product in your site.

Specials module

The module is to display list of special product in your OpenCart site. Its setting is so simple, just add layout, position that the module is displayed in and product image size.

To configure the module, please go to: Extensions > Modules, find the Specials module then hit the "Edit" button to go to its setting panel.

Banner module

The module is to display the banner of product in your OpenCart site. Its setting is so simple, just add layout, position that the module is displayed in and product image size.

To configure the module, please go to: Extensions > Modules, find the Banner module then hit the "Edit" button to go to its setting panel.>

Get Support

If you are unable to find your answer here in our documentation, please go to our forum and post up a new topic with all the details we need. Please be sure to include your site URL as well or send us an email.

Our support scope

Our support covers configuration, building site as demo, trouble using any features, and bug fixes. We don"t provide support for customizations or 3rd party extension.

Our support time

We try our best to monitor the email around the clock, however, this is not always possible due to different time zones. We will try to reply you as fast as we can.

Our working time is 8.00 AM - 5.30 PM, Monday to Friday (GMT+7). So if ask for help in the weekend, you may have to wait a little bit for support and please be patient.