Joomla Template Documentation

This document will guide you how to install any Jumazi Joomla template into your server 

JMZ Sella Configuration Manual

Written by  Supporter

1. Introduction


Thank you for purchasing Sella Template. If you have any questions that are beyond the scope of this documentation file, please feel free to ask a question by submit a ticket.

This is Sella's documentation file. Please read this file carefully before contacting with us for support.

Current Version: 1.0.0

Compatibility: Joomla! ver 3.x

Some Features:

  • Built with our JMZ Easy Pagebuilder.
  • Fully responsive.
  • K2 Component Support.
  • Bootstrap 3 Framework.
  • MultiLevel Push Menu.
  • Beautiful Icons Support.
  • Built with LESS CSS.
  • Unlimited Colors.
  • Fast & Lightweight Theme
  • And more...

 

2. Installation Guide

In this document, we will find step by step instructions for installing and using JMZ Sella effectively.

2. 1 System Requirement

  • Localhost xampp, wamp or any Apache with PHP and MySQL server.
  • Microsoft IIS.
  • Livesite (preferably a sub-domain for testing).
  • For Manual Installation, you need a full installation package for Joomla 3.x, so download here and don't forget about Joomla! requirements here.

2. 2 Quickstart Installation

The Quickstart Package consists of a complete Joomla! + Template + Extensions + Sample Content, excellent for beginner users to explore back-end settings and sample content. Installing the Quickstart is just like installing Joomla!, but you will have the full demo of the template on your server. Once your environment is ready, follow this quick guide:
  • Step 1: Localhost only: Create a new folder in the htdocs folder for Xampp (www folder for Wamp). Example: my-website
  • Step 2: Unpack/copy all files and folders of the Quickstart folder into this newly created folder or upload them into your sub-domain folder on your live site
  • Step 3: Open your favorite browser and type in the address bar localhost/my-website for localhost or sub-domain.my-live-site.com for your live site sub-domain, then hit Enter.
  • Step 4: Install Joomla!. Don't forget select Install Sample Data button.
  • Step 5: View this tutorial on how to install a Joomla Quickstart Package.

2. 3 Manual Installation

Manual Installation refers to installing the template on your Joomla! powered website. This means you already have a website with content items, modules, various extensions, so you just decided you want to improve the design of your website. Please note that this template DOES NOT require any additional template framework like JA T3 Framework or Gantry or Warp, it's completely framework FREE. So here's what you have to do:
  • Unpack all files and folders of the Template Package file and open the Sella Template folder
  • Copy the tpl_sella_VX.X.zip file to your desktop for your convenience.
  • Log-in to your Joomla! back-end (www.your-website.com/administrator).
  • Go to Extensions menu at the top and click Extensions Manager .
  • Click Choose File and find the provided installation file tpl_sella_VX.X.zip , then click the Open button.
  • Click Upload & Install. The template is now installed.
  • Go to Extensions menu at the top and click Templates Manager.
  • Select the newly installed template and click the Make default button in the top-right toolbar.
  • Go to front-end and check the new module positions. You will have to reassign your modules to the new positions of the template.

3. Template Configuration


See and understand the available Template Options
Image 1

number-1.png Favicon: Choose Your Favicon 
number-2.png Logo: Choose Your Logo
number-4.png Logo title: Type logo title
number-4.png Main Color: Choose your favorite Color for the whole Theme, click in the field to see a Color Picker.
number-5.png Google Font: Enable / Disable google font.
number-6.png Google Font for Headings: Choose the Font for the Headlines (means H1, H2, H3, H4, H5, H6).
number-7.png Font for Body: Choose the Font for the Main Body (means all Elements expact H1, H2, H3, H4, H5, H6).
number-8.png Scroll To Top: Enable / Disable Scroll To Top.
number-9.png Animate CSS: Enable / Disable Animate CSS.
number-10.png Page Preloader: Enable / Disable Page Preloader.

4. Experience with Joomla ?


Have you ever used Joomla?

4. 1 Beginner

You have never used Joomla and have no experience how to use this Conent Managment System? So please have a look at the below Informations:

4. 2 Advanced

You have used Joomla a few Times and have experience in using this Software. In best case you have build a few other sites with Joomla and maybe have used a few other Themes for Joomla? So you will have really no problem to setup this Theme. If you have a few other Questions you can contact us over our Support Forum

4. 3 Professional

You are a Joomla Professional and have much experience with Joomla, maybe you're a developer which have no time to build an own Theme. So you will be in a position to really easy modify this Theme to your needs. Simple PHP Code and easy CSS. Feel free to modify this Theme to your needs, change the Code or general functions.

 

5. Configure JMZ Easy Pagebuilder


JMZ Easy PageBuilder for Sella will save you tons of time working on the site content. Now you’ll be able to create complex layouts within minutes! It’s build on top of the modern technologies – get the best for your website, we defined elements, and you can drag and drop elements to create the page. Take a quick tour

Create a page with JMZ Easy PageBuilder

- Go to Components / JMZ Easy PageBuilder
- Click New Button => Insert a Name. Ex Home => Click Save Button
- Drag and Drop available elements to page content

Image 1

5. 1  Columns Element

Image-2.png

number-1.png Control buttons
  • Icon Duplicate: Copy a new element
  • Icon Eye: Hidden / Visible column content  
  • Icon Setting: Set ID, Class, Title, Description, FullWidth Column.
  • Icon Close: Remove this element.
number-2.png Settings column width: Support responsive and grid system that appropriately scales up to 12 columns.  Learn more

 number-3.png Number of columns: If you want to change the number of columns, you can use the mouse to choose the number.

5. 2  Divider Element

You can use this element to split your pages

Image-3.png

number-1.png Style: Set the border or none for your divider.
number-2.png Margin: Set or change margin-bottom and margin-top.
number-3.png Class: Define unique class name to element so you can easily set CSS style for specified element.

5. 3  Custom HTML Element

This allows you to create a Module that contains any valid HTML code. There are many cases where you might want to put free-form HTML inside a web page. For example, you might want to create an HTML Image Map or you might want to copy HTML code from PayPal, Amazon, or some other site.

Image-4.png
number-1.png Title:  Module should have a title 
number-2.png Description:  Allows you to create your own HTML Module using a WYSIWYG editor.

5. 4  Module Call Element

You can easily add all your current modules into your pages

Image-5.png
number-1.png Choose Module: You can choose module as you want for your site without any coding.
number-2.png Show Title:  Show / Hide module title
number-3.png Template:  Select template for module
number-4.png Module Class Suffix: Define unique class name to element so you can easily set CSS style for specified element.

5. 5  Google Map Element

Bring google maps to your website by the simplest & easiest way. Using Google Map version 3 services, support you input address, create your custom marker with title, images, description...

Image-6-1.png

There are many different standard parameters

Image-6-2.png

number-1.png Address: Type your address
number-2.png Latitude: Your latitude for the center of the map (Get Latitude)
number-4.png Longitude: Your longitude for the center of the map. (Get Longitude)
number-4.png Formatted Address: Type your location (Eg:London, Paris, NewYork,..)
number-5.png Zoom: Type the value of Zoom Map (By the default, this value is 15)
number-6.png MapType: There are four types of maps available within the Google Maps - Roadmap, Satellite, Hybrid, Terrain.
number-7.png Height: Type height of map ( By the default, this value is 400px)
number-8.png Class: Define unique class name to element so you can easily set CSS style for specified element.
number-9.png Color:  Type color for google map.
number-10.png Controls: The maps displayed through the Google Maps API contain UI elements to allow user interaction with the map.

Front-end Appearance:
jmz easy pagebuilder map

5. 6  Contact Form Element

Simple but flexible contact form. It is very quick and easy to setup.

Image-7.png

number-1.png Title: Type form title
number-2.png AddressType your Address
number-3.png Phone: Type your phone
number-4.png Description: Type your description
number-5.png Email: Type your email
number-6.png WebsiteType your website
number-7.png Intro Text: Type intro text
number-8.png Thanks Message: Type thanks message.
number-9.png Captcha:  Enable / Disable Captcha.

Front-end Appearance:
jmz easy pagebuilder contact

5. 7  Portfolio Element

Helps users create a portfolio easily with filter, lightbox effect, readmore button and categories.

We use K2 Component to create Portfolio element.

  • Step 1: Create Portfolio Category of K2
    • Go to Components / K2 / Categories
    • Click New Button => Create category with: + Name: Portfolio ( Theme One Page / Theme Multi Page)
  • Step 2: Create list Portfolio Tags of K2. For example, I created list K2 tags as shown below: 
    Image 10
  • Step 3: Create list K2 items in Portfolio Category. 
    • Go to Components / K2 / Items
    • Click New Button => Create an item to have:
      • Title
      • Image
      • Category: Portfolio
      • Content: Enter description of the portfolio item.

    For example, I created list Portfolio items of K2 as shown below
    Image 11
  • Step 4: Associated Tag for Portfolio Item
    Image 12
  • Step 5: Goto Components / JMZ Easy PageBuilder  => Choose page contains Portfolio element  => After clicking Config Button will display popup:
    Image 13
number-1.png Title: Type Portfolio Title
number-2.png Description: Type Portfolio Description
number-3.png K2 Category: Select Portfolio Category
number-4.png Item Count: Item count display
number-5.png Template: Select template for portfolio
number-6.png Columns: Select columns for portfolio
number-7.png Order By: Select Item Order

Front-end Appearance:
jmz easy pagebuilder portfolios

5. 8  Testmonial Element

Allows you to present customer testimonials on your website, supports show authors avatar, name, url,location, etc.

We use K2 Component to create Testimonial element.

  • Step 1: Create Testmonial Category of K2
    • Go to Components / K2 / Categories
    • Click New Button => Create category with: + Name: Testmonial
  • Step 2: Create list K2 items in Testmonial Category. 
    • Go to Components / K2 / Items
    • Click New Button Create an item to have:
      • Title
      • Image
      • Category: Testmonial
      • Content: Enter content of the testmonial item

    For example, I created list Testmonial items of K2 as shown below
    Image 15
  • Step 3: Goto Components / JMZ Easy PageBuilder  => Choose page contains Testmonial element . After clicking Testmonial Config Button will display popup:
    Image 16
number-1.png Title: Type Testmonial Title
number-2.png Description: Type Testmonial Description
number-3.png K2 Category: Select Testmonial Category
number-4.png Item Count: Item count display
number-5.png Template: Select template for Testmonial
number-6.png Order By: Select Item Order

Front-end Appearance:
jmz easy pagebuilder testmonial

5. 9  Our Team Element


We use K2 Component to create Our Team element.

  • Step 1: Create Extra field Group: Building Tool - Team
    • Go to Components / K2 / Extra Field Groups
    • Click New Button create group with: + Name: Building Tool - Team
  • Step 2: Create Extra field for Building Tool - Team Group
    • Go to Components / K2 / Extra Fields
    • Click New Button; create extra field to have :
      • Name
      • Group: Building Tool - Team
      • Type: Text Field

    For example, I created list Extra field of Building Tool - Team Group as shown below
    Image 18
  • Step 3: Create Team Category of K2
    • Go to Components / K2 / Categories
    • Click New Button Create category with: + Name: Team
    • Associated "Extra Fields Group" is Building Tool - Team
  • Step 4: Create list K2 items in Team Category
    • Go to Components / K2 / Items
    • Click New Button; Create an item to have:
        • Title
        • Image
        • Category: Team
        • Content: Enter content of the Team item
        • Extra Fields: Enter value of extra field, take a look image shown below

      Image 19

    For example, I created list Team items of K2 as shown below
    Image 20
  • Step 5: Goto Components / JMZ Easy PageBuilder  --> Choose page contains Team element. After clicking Team Config Button will display popup:
    Image 21
number-1.png Title: Type Team Title
number-2.png Description: Type Team Description
number-3.png K2 Category: Select Team Category
number-4.png Item Count: Item count display
number-5.png Template: Select template for Team
number-6.png Order By: Select Item Order

Front-end Appearance:
jmz easy pagebuilder team

5. 10  Vimeo Element

This element allows you to add videos into a page. It supports video on Vimeo

Image 23

number-1.png Title: Type Vimeo Title
number-2.png Description: Type Vimeo Description
number-3.png Vimeo Link: Type Vimeo Link
number-4.png Width: Type Width Vimeo
number-5.png Height: Type Height Vimeo
number-6.png Class: Define unique class name to element so you can easily set CSS style for specified element.

Front-end Appearance:
jmz easy pagebuilder vimeo

5. 11  Youtube Element

This element allows you to add videos into a page. It supports video on Youtube

Image 25

number-1.png Title: Type Youtube Title
number-2.png Description: Type Youtube Description
number-3.png Youtube Link: Type Youtube Link
number-4.png Width: Type Width Youtube
number-5.png Height: Type Height Youtube
number-6.png Class: Define unique class name to element so you can easily set CSS style for specified element.

Front-end Appearance:
jmz easy pagebuilder youtube

5. 12  Facebook Like Element

Provides Facebook Page owners to attract and gain Likes from their own website content, it uses the FaceBook LikeBox API.

Image 27

number-1.png Title: Type Facebook Link
number-2.png Width: Type Facebook Width
number-3.png Height: Type Facebook Height
number-4.png Show Faces: Show / Hidden Faces
number-5.png Show Header: Show / Hidden Header
number-6.png Show Stream: Show / Hidden Stream
number-7.png Show Border: Show / Hidden Border
number-8.png Color Scheme: Select color scheme (Dark / Light)
number-9.png Language: Select Language for Facebook Like

Front-end Appearance:
Image 24

5. 13  Our Services Element


We use K2 Component to create Our Services element.

  • Step 1: Create Extra field Group: Building Tool - Services
    • Go to Components / K2 / Extra Field Groups
    • Click New Button create group with: + Name: Building Tool - Services
  • Step 2: Create Extra field for Building Tool - Services Group
    • Go to Components / K2 / Extra Fields
    • Click New Button; create extra field to have :
      • Name
      • Group: Building Tool - Services
      • Type: Text Field

    For example, I created the Extra field of Building Tool - Services Group as shown below
    Image 29
  • Step 3: Create Services Category of K2
    • Go to Components / K2 / Categories
    • Click New Button Create category with: + Name: Services
    • Associated "Extra Fields Group" is Building Tool - Services
  • Step 4: Create list K2 items in Services Category
    • Go to Components / K2 / Items
    • Click New Button; Create an item to have:
        • Title
        • Image
        • Category: Services
        • Content: Enter content of the Services item
        • Extra Fields: Enter value of extra field, take a look image shown below

      Image 30

    For example, I created list Services items of K2 as shown below
    Image 31
  • Step 5: Goto Components / JMZ Easy PageBuilder  --> Choose page contains Our Services element. After clicking Our Services Config Button will display popup:
    Image 32
number-1.png Title: Type Services Title
number-2.png Description: Type Services Description
number-3.png K2 Category: Select Services Category
number-4.png Item Count: Item count display
number-5.png Template: Select template for Services
number-6.png Order By: Select Item Order

Front-end Appearance:
jmz easy pagebuilder services

5. 14  About Us Element


We use K2 Component to create About Us element.

  • Step 1: Create Extra field Group: Building Tool - About Us
    • Go to Components / K2 / Extra Field Groups
    • Click New Button create group with: + Name: Building Tool - About Us
  • Step 2: Create Extra field for Building Tool - About Us Group
    • Go to Components / K2 / Extra Fields
    • Click New Button; create extra field to have :
      • Name
      • Group: Building Tool - About Us
      • Type: Text Field

    For example, I created list Extra field of Building Tool - About Us Group as shown below
    Image 34
  • Step 3: Create About Us Category of K2
    • Go to Components / K2 / Categories
    • Click New Button Create category with: + Name: About Us
    • Associated "Extra Fields Group" is Building Tool-About Us
  • Step 4: Create list K2 items in About Us Category
    • Go to Components / K2 / Items
    • Click New Button; Create an item to have:
        • Title
        • Image
        • Category: About Us
        • Content: Enter content of the About Us item
        • Extra Fields: Enter value of extra field, take a look image shown below

      Image 35

    For example, I created list About Us items of K2 as shown below
    Image 36
  • Step 5: Goto Components / JMZ Easy PageBuilder  --> Choose page contains About us element. After clicking About Us Config Button will display popup:
    Image 37
number-1.png Title: Type About Us Title
number-2.png Description: Type About Us Description
number-3.png K2 Category: Select About Us Category
number-4.png Item Count: Item count display
number-5.png Template: Select template for About Us
number-6.png Order By: Select Item Order

Front-end Appearance:
jmz easy pagebuilder about us

5. 15  Accordion Element


We use K2 Component to create Accordion element.
  • Step 1: Create Extra field Group: Building Tool - Accordion
    • Go to Components / K2 / Extra Field Groups
    • Click New Button create group with: + Name: Building Tool - Accordion
  • Step 2: Create Extra field for Building Tool - Accordion Group
    • Go to Components / K2 / Extra Fields
    • Click New Button; create extra field to have :
      • Name
      • Group: Building Tool - Accordion
      • Type: Text Field

    For example, I created list Extra field of Building Tool - Accordion Group as shown below
    Image 39
  • Step 3: Create Accordion Category of K2
    • Go to Components / K2 / Categories
    • Click New Button Create category with: + Name: Accordion
    • Associated "Extra Fields Group" is Building Tool - Accordion
  • Step 4: Create list K2 items in Accordion Category
    • Go to Components / K2 / Items
    • Click New Button; Create an item to have:
        • Title
        • Image
        • Category: Accordion
        • Content: Enter content of the Accordion item
        • Extra Fields: Enter value of extra field, take a look image shown below

      Image 40

    For example, I created list Accordion items of K2 as shown below
    Image 41
  • Step 5: Goto Components / JMZ Easy PageBuilder  --> Choose page contains Accordion element. After clicking Accordion Config Button will display popup:
    Image 42
number-1.png Title: Type Accordion Title
number-2.png Description: Type Accordion Description
number-3.png K2 Category: Select Accordion Category
number-4.png Item Count: Item count display
number-5.png Template: Select template for Accordion
number-6.png Order By: Select Item Order

Front-end Appearance:
jmz easy pagebuilder acorddtion

5. 16  Parallax Element


We use K2 Component to create Parallax element.

  • Step 1: Create Extra field Group: Building Tool - Social
    • Go to Components / K2 / Extra Field Groups
    • Click New Button create group with: + Name: Building Tool - Social
  • Step 2: Create Extra field for Building Tool - Social Group
    • Go to Components / K2 / Extra Fields
    • Click New Button; create extra field to have :
      • Name
      • Group: Building Tool - Social
      • Type: Text Field

    For example, I created list Extra field of Building Tool - Social Group as shown below
    Image 44
  • Step 3: Create Social Category of K2
    • Go to Components / K2 / Categories
    • Click New Button Create category with: + Name: Social
    • Associated "Extra Fields Group" is Building Tool - Social
  • Step 4: Create list K2 items in SocialCategory
    • Go to Components / K2 / Items
    • Click New Button; Create an item to have:
        • Title
        • Image
        • Category: Social
        • Content: Enter content of the Parallax item
        • Extra Fields: Enter value of extra field, take a look image shown below

      Image 45

    For example, I created list Parallax items of K2 as shown below
    Image 46
  • Step 5: Goto Components / JMZ Easy PageBuilder  --> Choose page contains Parallax element . After clicking Parallax Config Button will display popup:
    Image 47
number-1.png Title: Type Parallax Title
number-2.png Description: Type Parallax Description
number-3.png K2 Category: Select Parallax Category
number-4.png Item Count: Item count display
number-5.png Template: Select template for Parallax
number-6.png Order By: Select Item Order

Front-end Appearance:
jmz easy pagebuilder parallax social

5. 17  Skills Element


We use K2 Component to create Our Skills element.

  • Step 1: Create Extra field Group: Building Tool - Our Skills
    • Go to Components / K2 / Extra Field Groups
    • Click New Button create group with: + Name: Building Tool - Our Skills
  • Step 2: Create Extra field for Building Tool - Our Skills Group
    • Go to Components / K2 / Extra Fields
    • Click New Button; create extra field to have :
      • Name
      • Group: Building Tool - Our Skills
      • Type: Text Field

    For example, I created list Extra field of Building Tool - Our Skills Group as shown below
    Image 49
  • Step 3: Create Skills Category of K2
    • Go to Components / K2 / Categories
    • Click New Button Create category with: + Name: Skills
    • Associated "Extra Fields Group" is Building Tool - Our Skills
  • Step 4: Create list K2 items in Skills Category
    • Go to Components / K2 / Items
    • Click New Button; Create an item to have:
        • Title
        • Image
        • Category: Skills
        • Content: Enter content of the Skills item
        • Extra Fields: Enter value of extra field, take a look image shown below

      Image 50

    For example, I created list Skills items of K2 as shown below
    Image 51
  • Step 5: Goto Components / JMZ Easy PageBuilder  --> Choose page contains Our Skills element. After clicking Our Skills Config Button will display popup:
    Image 52
number-1.png Title: Type Skills Title
number-2.png Description: Type Skills Description
number-3.png K2 Category: Select Skills Category
number-4.png Item Count: Item count display
number-5.png Template: Select template for Skills
number-6.png Order By: Select Item Order

Front-end Appearance:
jmz easy pagebuilder skill

5. 18  Pricing Table Element


We use K2 Component to create Pricing Table element.

  • Step 1: Create Extra field Group: Building Tool - Pricing Table
    • Go to Components / K2 / Extra Field Groups
    • Click New Button create group with: + Name: Building Tool - Pricing Table
  • Step 2: Create Extra field for Building Tool - Pricing Table Group
    • Go to Components / K2 / Extra Fields
    • Click New Button; create extra field to have :
      • Name
      • Group: Building Tool - Pricing Table
      • Type: Text Field

    For example, I created list Extra field of Building Tool - Pricing Table Group as shown below
    Image 54
  • Step 3: Create Pricing Table Category of K2
    • Go to Components / K2 / Categories
    • Click New Button Create category with: + Name: Pricing Table
    • Associated "Extra Fields Group" is Building Tool - Pricing Table
  • Step 4: Create list K2 items in Pricing Table Category
    • Go to Components / K2 / Items
    • Click New Button; Create an item to have:
        • Title
        • Image
        • Category: Pricing Table
        • Content: Enter content of the Pricing Table item
        • Extra Fields: Enter value of extra field, take a look image shown below

      Image 55

    For example, I created list Pricing Table items of K2 as shown below
    Image 56
  • Step 5: Goto Components / JMZ Easy PageBuilder  --> Choose page contains Pricing Table element . After clicking Pricing Table Config Button will display popup:
    Image 57
number-1.png Title: Type Pricing Table Title
number-2.png Description: Type Pricing Table Description
number-3.png K2 Category: Select Pricing Table Category
number-4.png Item Count: Item count display
number-5.png Template: Select template for Pricing Table
number-6.png Order By: Select Item Order

Front-end Appearance:
jmz easy pagebuilder pircing

5. 19  Article Box Element


We use K2 Component to create Article Box element.
  • Step 1: Create Article Box Category of K2
    • Go to Components / K2 / Categories
    • Click New Button Create category with: + Name: Article Box
  • Step 2: Create list K2 items in Article Box Category
    • Go to Components / K2 / Items
    • Click New Button; Create an item to have:
      • Title
      • Image
      • Category: Article Box
      • Content: Enter content of the Article Box item
  • Step 3: Goto Components / JMZ Easy PageBuilder  --> Choose Others Elements page. After clicking Article Box Config Button will display popup:
    Image 59
number-1.png Title: Type Article Box Title
number-2.png Description: Type Article Box Description
number-3.png K2 Category: Select Article Box Category
number-4.png Item Count: Item count display
number-5.png Template: Select template for Article Box
number-6.png Order By: Select Item Order

Front-end Appearance:
Image 60

5. 20  Tab Element


We use K2 Component to create Tab element.

  • Step 1: Create Extra field Group: Building Tool - Tab
    • Go to Components / K2 / Extra Field Groups
    • Click New Button create group with: + Name: Building Tool - Tab
  • Step 2: Create Extra field for Building Tool - Tab Group
    • Go to Components / K2 / Extra Fields
    • Click New Button; create extra field to have :
      • Name
      • Group: Building Tool - Tab
      • Type: Text Field

    For example, I created list Extra field of Building Tool - Tab Group as shown below
    Image 61
  • Step 3: Create Tab Category of K2
    • Go to Components / K2 / Categories
    • Click New Button Create category with: + Name: Tab
    • Associated "Extra Fields Group" is Building Tool - Tab
  • Step 4: Create list K2 items in Tab Category
    • Go to Components / K2 / Items
    • Click New Button; Create an item to have:
        • Title
        • Image
        • Category: Tab
        • Content: Enter content of the Tab item
        • Extra Fields: Enter value of extra field, take a look image shown below

      Image 62

    For example, I created list Tab items of K2 as shown below
    Image 63
  • Step 5: Goto Components / JMZ Easy PageBuilder  --> Choose page contains Tab element. After clicking Tab Config Button will display popup:
    Image 64
number-1.png Title: Type Tab Title
number-2.png Description: Type Tab Description
number-3.png K2 Category: Select Tab Category
number-4.png Item Count: Item count display
number-5.png Template: Select template for Tab
number-6.png Order By: Select Item Order

Front-end Appearance:
jmz easy pagebuilder tab

5. 21  Carousel Element


We use K2 Component to create Carousel element.

  • Step 1: Create Extra field Group: Building Tool - Carousel
    • Go to Components / K2 / Extra Field Groups
    • Click New Button create group with: + Name: Building Tool - Carousel
  • Step 2: Create Extra field for Building Tool - Carousel Group
    • Go to Components / K2 / Extra Fields
    • Click New Button; create extra field to have :
      • Name
      • Group: Building Tool - Carousel
      • Type: Image

    For example, I created list Extra field of Building Tool - Carousel Group as shown below
    Image 66
  • Step 3: Create Carousel Category of K2
    • Go to Components / K2 / Categories
    • Click New Button Create category with: + Name: Carousel
    • Associated "Extra Fields Group" is Building Tool - Carousel
  • Step 4: Create list K2 items in Carousel Category
    • Go to Components / K2 / Items
    • Click New Button; Create an item to have:
        • Title
        • Image
        • Category: Carousel
        • Content: Enter content of the Carousel item
        • Extra Fields: Enter value of extra field, take a look image shown below

      Image 67

    For example, I created list Carousel items of K2 as shown below
    Image 68
  • Step 5: Goto Components / JMZ Easy PageBuilder  --> Choose page contains Carousel element . After clicking Carousel Config Button will display popup:
    Image 69
number-1.png Title: Type Carousel Title
number-2.png Description: Type Carousel Description
number-3.png K2 Category: Select Carousel Category
number-4.png Item Count: Item count display
number-5.png Template: Select template for Carousel
number-6.png Order By: Select Item Order

Front-end Appearance:
Image 70

5. 22  Video Background Element


We use K2 Component to create Video Background element.

  • Step 1: Create Extra field Group: Building Tool - Video Background
    • Go to Components / K2 / Extra Field Groups
    • Click New Button create group with: + Name: Building Tool - Video Background
  • Step 2: Create Extra field for Building Tool - Video Background Group
    • Go to Components / K2 / Extra Fields
    • Click New Button; create extra field to have :
      • Name
      • Group: Building Tool - Video Background
      • Type: Text Field

    For example, I created list Extra field of Building Tool - Video Background Group as shown below
    Image 71
  • Step 3: Create Video Background Category of K2
    • Go to Components / K2 / Categories
    • Click New Button Create category with: + Name: Video Background
    • Associated "Extra Fields Group" is Building Tool - Video Background
  • Step 4: Create list K2 items in Video Background Category
    • Go to Components / K2 / Items
    • Click New Button; Create an item to have:
        • Title
        • Image
        • Category: Video Background
        • Content: Enter content of the Video Background item
        • Extra Fields: Enter value of extra field, take a look image shown below

      Image 72

    For example, I created list Video Background items of K2 as shown below
    Image 73
  • Step 5: Goto Components / JMZ Easy PageBuilder  --> Choose page contains Video Background element . After clicking Video Background Config Button will display popup:
    Image 74
number-1.png Title: Type Video Background Title
number-2.png Description: Type Video Background Description
number-3.png K2 Category: Select Video Background Category
number-4.png Item Count: Item count display
number-5.png Template: Select template for Video Background
number-6.png Order By: Select Item Order

Front-end Appearance:
Image 75

5. 23  Text Slider Element


We use K2 Component to create Text Slider element.

  • Step 1: Create Extra field Group: Building Tool - Slider
    • Go to Components / K2 / Extra Field Groups
    • Click New Button create group with: + Name: Building Tool - Slider
  • Step 2: Create Extra field for Building Tool - Slider Group
    • Go to Components / K2 / Extra Fields
    • Click New Button; create extra field to have :
      • Name
      • Group: Building Tool - Slider
      • Type: Text Field

    For example, I created list Extra field of Building Tool - Slider Group as shown below
    Image 76
  • Step 3: Create Slider Category of K2
    • Go to Components / K2 / Categories
    • Click New Button Create category with: + Name: Slider
    • Associated "Extra Fields Group" is Building Tool - Slider
  • Step 4: Create list K2 items in Slider Category
    • Go to Components / K2 / Items
    • Click New Button; Create an item to have:
        • Title
        • Image
        • Category: Slider
        • Content: Enter content of the Text Slider item
        • Extra Fields: Enter value of extra field, take a look image shown below

      Image 77

    For example, I created list Text Slider items of K2 as shown below
    Image 78
  • Step 5: Goto Components / JMZ Easy PageBuilder  --> Choose page contains Text Slider element . After clicking Text Slider Config Button will display popup:
    Image 79
number-1.png Title: Type Text Slider Title
number-2.png Description: Type Text Slider Description
number-3.png K2 Category: Select Text Slider Category
number-4.png Item Count: Item count display
number-5.png Template: Select template for Text Slider
number-6.png Order By: Select Item Order

Front-end Appearance:
jmz easy pagebuilder slider

5. 24  Counter Element


We use K2 Component to create Counter element.

  • Step 1: Create Extra field Group: Building Tool - Counter
    • Go to Components / K2 / Extra Field Groups
    • Click New Button create group with: + Name: Building Tool - Counter
  • Step 2: Create Extra field for Building Tool - Counter Group
    • Go to Components / K2 / Extra Fields
    • Click New Button; create extra field to have :
      • Name
      • Group: Building Tool - Counter
      • Type: Text Field

    For example, I created list Extra field of Building Tool - Counter Group as shown below
    Image 81
  • Step 3: Create Counter Category of K2
    • Go to Components / K2 / Categories
    • Click New Button Create category with: + Name: Counter
    • Associated "Extra Fields Group" is Building Tool - Counter
  • Step 4: Create list K2 items in Counter Category
    • Go to Components / K2 / Items
    • Click New Button; Create an item to have:
        • Title
        • Image
        • Category: Counter
        • Content: Enter content of the Counter item
        • Extra Fields: Enter value of extra field, take a look image shown below

      Image 82

    For example, I created list Counter items of K2 as shown below
    Image 83
  • Step 5: Goto Components / JMZ Easy PageBuilder  --> Choose page contains Counter element . After clicking Counter Config Button will display popup:
    Image 84
number-1.png Title: Type Counter Title
number-2.png Description: Type Counter Description
number-3.png K2 Category: Select Counter Category
number-4.png Item Count: Item count display
number-5.png Template: Select template for Counter
number-6.png Order By: Select Item Order

Front-end Appearance:
jmz easy pagebuilder counter

5. 25  Piechart Element


We use K2 Component to create Piechart element.

  • Step 1: Create Extra field Group: Building Tool - Piechart
    • Go to Components / K2 / Extra Field Groups
    • Click New Button create group with: + Name: Building Tool - Piechart
  • Step 2: Create Extra field for Building Tool - Piechart Group
    • Go to Components / K2 / Extra Fields
    • Click New Button; create extra field to have :
      • Name
      • Group: Building Tool - Piechart
      • Type: Text Field

    For example, I created list Extra field of Building Tool - Piechart Group as shown below
    Image 86
  • Step 3: Create Piechart Category of K2
    • Go to Components / K2 / Categories
    • Click New Button Create category with: + Name: Piechart
    • Associated "Extra Fields Group" is Building Tool - Piechart
  • Step 4: Create list K2 items in Piechart Category
    • Go to Components / K2 / Items
    • Click New Button; Create an item to have:
        • Title
        • Image
        • Category: Piechart
        • Content: Enter content of the Piechart item
        • Extra Fields: Enter value of extra field, take a look image shown below

      Image 87

    For example, I created list Piechart items of K2 as shown below
    Image 88
  • Step 5: Goto Components / JMZ Easy PageBuilder  --> Choose page contains Piechart  element . After clicking Piechart Config Button will display popup:
    Image 89
number-1.png Title: Type Piechart Title
number-2.png Description: Type Piechart Description
number-3.png K2 Category: Select Piechart Category
number-4.png Item Count: Item count display
number-5.png Template: Select template for Piechart
number-6.png Order By: Select Item Order

Front-end Appearance:
jmz easy pagebuilder piechart

5. 26  Partner Element


We use K2 Component to create Partner element.

  • Step 1: Create Extra field Group: Building Tool - Partner
    • Go to Components / K2 / Extra Field Groups
    • Click New Button create group with: + Name: Building Tool - Partner
  • Step 2: Create Extra field for Building Tool - Partner Group
    • Go to Components / K2 / Extra Fields
    • Click New Button; create extra field to have :
      • Name
      • Group: Building Tool - Partner
      • Type: Image, Text Field

    For example, I created list Extra field of Building Tool - Partner Group as shown below
    Image 91
  • Step 3: Create Partner Category of K2
    • Go to Components / K2 / Categories
    • Click New Button Create category with: + Name: Partner
    • Associated "Extra Fields Group" is Building Tool - Partner
  • Step 4: Create list K2 items in Partner Category
    • Go to Components / K2 / Items
    • Click New Button; Create an item to have:
        • Title
        • Image
        • Category: Partner
        • Content: Enter content of the Partner item
        • Extra Fields: Enter value of extra field, take a look image shown below

      Image 92

    For example, I created list Partner items of K2 as shown below
    Image 93
  • Step 5: Goto Components / JMZ Easy PageBuilder  --> Choose page contains Partner element . After clicking Partner Config Button will display popup:
    Image 94
number-1.png Title: Type Partner Title
number-2.png Description: Type Partner Description
number-3.png K2 Category: Select Partner Category
number-4.png Item Count: Item count display
number-5.png Template: Select template for Partner
number-6.png Order By: Select Item Order

Front-end Appearance:
jmz easy pagebuilder parallax partner

5. 27  Process Element


We use K2 Component to create Process element.

  • Step 1: Create Extra field Group: Building Tool - Our Process
    • Go to Components / K2 / Extra Field Groups
    • Click New Button create group with: + Name: Building Tool - Our Process
  • Step 2: Create Extra field for Building Tool - Our Process Group
    • Go to Components / K2 / Extra Fields
    • Click New Button; create extra field to have :
      • Name
      • Group: Building Tool - Our Process
      • Type: Text Field

    For example, I created list Extra field of Building Tool - Our Process Group as shown below
    Image 96
  • Step 3: Create Our Process Category of K2
    • Go to Components / K2 / Categories
    • Click New Button Create category with: + Name: Our Process
    • Associated "Extra Fields Group" is Building Tool - Our Process
  • Step 4: Create list K2 items in Our ProcessCategory
    • Go to Components / K2 / Items
    • Click New Button; Create an item to have:
        • Title
        • Image
        • Category: Our Process
        • Content: Enter content of the Process item
        • Extra Fields: Enter value of extra field, take a look image shown below

      Image 97

    For example, I created list Process items of K2 as shown below
    Image 98
  • Step 5: Goto Components / JMZ Easy PageBuilder  --> Choose page contains Process element . After clicking Process Config Button will display popup:
    Image 99
number-1.png Title: Type Process Title
number-2.png Description: Type Process Description
number-3.png K2 Category: Select Process Category
number-4.png Item Count: Item count display
number-5.png Template: Select template for Process
number-6.png Order By: Select Item Order

Front-end Appearance:
jmz easy pagebuilder process

6. Unlimited Attributes Of Elements


To use JMZ Easy Pagebuilder, it required K2 component are installed. It inherits flexibility of Extra Fields in K2, so the attributes of the building elements almost unlimited the number and extremely flexible.

For example, we take a look the attributes of a Team Element

Unlimited Attributes 1


Now, we want Team Element has added an new attribute is Skill


We will do this as follows:
  • Step 1:
    • Create Extra field for Building Tool - Team Group
    • Go to Components / K2 / Extra Fields
    • Click New Button; create extra field to have :
      • Name
      • Group: Building Tool - Team
      • Type: Text Field
    • For example, I created list new Extra field of Building Tool - Team Group as shown below
      Unlimited Attributes 3
  • Step 2:
    • Go to Components / K2 / Items
    • Filter Category: Select Team
    • Edit a K2 item (Eg: Nikolas Brooten), Then enter value of  new extra fields (Team - Skill Title, Team - Skill Value), take a look image shown below
      Unlimited Attributes 4
  • Step 3:
    • Open file:  PATH_TO_JOOMLA/plugins/system/jumazi/assets/jmz_template/team.php
    • Add some line codes, take a look image shown below
      Unlimited Attributes 6
    • Go to front-end and we will see as below image ( Don't forget to add new definitions of CSS to get this result):
      Unlimited Attributes 10

Tips:  
We use extra-field of K2 to add new attributes for a building element (In this example, it is Team Element). So, Understanding the position of the extra-field of k2 is very important. Please take a look below image.
Unlimited Attributes 5

You can change the sort order by: 

  1. Go to Components / K2 / Extra Fields
  2. Filter Group: Select Building Tool - Team
  3. Drop & Drop to rearrange the order of the extra-fileds
    Unlimited Attributes 7


If you arrange the order of the extra-fields as above image, array extraFields have changed over:
Unlimited Attributes 8
Now, to get the value of the Team Skill  - Title and Team Skill - Value, we will use first two elements of the array extraFields (extraFields[0] and extraFields[1])
Unlimited Attributes 9

7. Unlimited Templates Of Elements


JMZ Easy Page Builder allows you to create different templates for building element.

For example, Now we try to create a new template for Team Element.

We do this as follows:
  • Step 1: Go to PATH_TO_JOOMLA/plugins/system/jumazi/assets/jmz_template/
  • Step 2: Copy file team.php, then paste it at here and rename : team-2.php
    Unlimited Templates 1
  • Step 3: Open and edit team-2.php, you need to rebuild the layout (This task requires you to have skills in HTML and CSS)
  • Step 4: Go to PATH_TO_JOOMLA/plugins/system/jumazi/assets/jmz_template/
  • Step 5: Open and Edit file : admin.jmz-plugin-design-3x.js
    Unlimited Templates 2
  • Step 6: Go to function getTeamOption , Add line code : content+='<option value="team-2">Team 2</option>' 
    Unlimited Templates 3
  • Step 7: Goto Components / JMZ Easy PageBuilder --> Choose Our Team page. After clicking Team Config Button will display popup, then select Team-2 in category Template .
    Unlimited Templates 4
  • Step 8: Done ! Save and Recheck.

8. Template Overrides


The standard output from any JMZ Easy PageBuilder can be overridden by adding code to the html directory of your template. If you want to try modifying existing view, you should make a copy of the existing view in the html directory of your template, and then modify the copy.

The directory structure you need is:

TEMPLATE_NAME/html/jmz_template/FILE_NAME.php

For example, if you want to change the way that the 'Skills' view displays, then you should copy the file at

PATH_TO_JOOMLA/plugins/system/jumazi/assets/jmz_template/skills.php

To

TEMPLATE_NAME/html/jmz_template/skills.php

Template overrides are almost limitless. They allow you to add, edit, and remove the views of the JMZ Easy Pagebuilder output.

9. Available Extensions


How to install Extensions?

Log in into the Joomla Backend and navigate on the Top to Extensions - Extension Manager. There you can select a ZIP-File where the Extension include! Simply choose the given one and press 'upload & install'. But please note: if you choose the Quickstart Package you must not install the Extensions seperatly, they are all included and configurated yet!

10. Support Us


We are extremely happy you have selected JMZ Easy PageBuilder for your website, if you have a suggestion about how we can do something better, please tell us ! All feedback will be appreciated.