Front-end Builder

GENERAL SETTINGS

Go to Admin -> MGS -> Front-end Builder [General]

With General Settings, you can config:

  • Active Front-end Builder: Enable or Disable Builder extension
  • Disable Widgets on Homepage & CMS Pages: Make widgets for homepage and cms page be invisible in CONTENT > Widgets
  • Width of section container: Set default width for the container of section builder.
  • Columns padding: Set padding left and right values for columns builder

HTML STRUCTURE SETTINGS

Go to Admin -> MGS -> Front-end Builder [Html Structure]

With Html Structure Settings, you can config:

  • Grid Mode: Custom Config layout for Grid Mode of catalog elements.
  • List Mode: Custom Config layout for List Mode of catalog elements.
  • Deal Product Grid Mode: Custom Config layout for Grid Mode of Deal Product elements.
  • Deal Product List Mode: Custom Config layout for List Mode of Deal Product elements.
  • Single Product: Custom Config layout for Single Product elements.

SOCIAL SETTINGS

Go to Admin -> MGS -> Front-end Builder [Social]

With Social Settings, you can config:

  • Instagram [Access Token]: Insert Access Token for your Instagram Shop
  • Snapppt [Embed Code]: Insert Embed Code for your Snapppt
  • Google [Google API Key]: Insert the Google API Key

OWL SLIDER (SINGLE SLIDER)

Go to Admin -> MGS -> Front-end Builder [OWL Slider (Single Slide)]

With OWL Slider (Single Slide) Settings, you can config:

  • Navigation section: Settings for the navigation.
    • Navigation Type: Choose between Use Front Icon or Use Image.
    • Next font class and Previous font class:Insert the class CSS for your previous and next icon.
    • Width – Height – Font size: Config the width height value of your navigation, and the font size used in it.
    • Border radius: Set value for the navigation radius border.
    • Default section: Settings for the navigation without any mouse effects.
    • Hover section: Settings for the navigation once.
  • Pagination section: Settings for the pagination of slider with: WidthHeightBorder radiusBackground.

OWL SLIDER (MUTIPLE SLIDER)

Go to Admin -> MGS -> Front-end Builder [OWL Slider (Multiple Slides)]

Similar to OWL Slider (Single Slide) Settings, you can config Navigation, Pagination and others detailed settings.

  • Navigation section: Settings for the navigation.
    • Navigation Type: Choose between Use Front Icon or Use Image
    • Next font class and Previous font class:Insert the class CSS for your previous and next icon
    • Width – Height – Font size: Config the width height value of your navigation, and the font size used in it
    • Border radius: Set value for the navigation radius border
    • Default section: Settings for the navigation without any mouse effects
    • Hover section: Settings for the navigation once
  • Pagination section: Settings for the pagination of slider with: WidthHeightBorder radiusBackground.

FONT & STYLE

Go to Admin -> MGS -> Front-end Builder [Font & Style]

With Font & Style Settings, you can config:

  • Include font Awesome: Choose to include font Awesome 4.7.0 style if you have not had fontAwesome
  • Custom style: Quickly put any additional custom style here.

EXPORT & IMPORT

Go to Admin -> MGS -> Front-end Builder [Export - Import - Restore]

  • Export: This function helps to immediately download to newest layout XML of any CMS Page.
    • Click the dropdown list to choose page you want to export its layout.
    • You should see an XML file automatically downloaded to your system. It is identified by page name, date amd time created
  • Import: This function allows importing any layout XML to CMS Page.
    • Click Browse to find the XMl file in your system.
    • Choose CMS page that needed to import.
    • Should you see the green message “Successfully import the page”, the process is finished.