JA Builder | Joomla Templates and Extensions Provider

The section will help you with steps to install JA Builder to your Joomla site.

System requirement

JA Site Builder is native with Joomla 3. Please make sure your system meets the following requirements:

Software

  • Software: PHP (Magic Quotes GPC off): 5.3.1 + (5.4+ recommended)

Databases

  • MySQL(InnoDB support required): 5.1+
  • MSSQL 10.50.1600.1+
  • PostgreSQL 8.3.18+

Web Severs

  • Apache 2.x+
  • Microsoft IIS 7
  • Nginx 1.0 (1.1 recommended)

Browser requirement

  • Firefox 4+
  • IE (Internet Explorer) 8+
  • Google Chrome 10+
  • Opera 10+
  • Safari 5+

Development Environment

During development process, Localhost is preferred. You can use the following servers on your PC to develop your site.

Windows

  • WAMPSEVER
  • XAMPP for Windows

Linux

  • LAMP Bubdle
  • XAMPP for Linux

Mac OS

  • MAMP & MAMP Pro
  • XAMPP for Mac OS

Installation Guide

Download packages

Access the download page of the builder then download the package or download all the files.

  • Full package
  • JA Builder template
  • JA Builder component
  • JA Universal Builder plugin

Install JA Site builder to your Joomla site

From your back-end setting panel, go to: "Extensions → Extension Manager", browse the JA Site builder installation package then hit the "Upload and Install"

Set JA Builder template as default template style (optional: in case you want to use the template for your whole site - all menu items). Go to: "Extensions → Template Manager", set JA Builder template style as your default template style.

Enable JA Builder plugin. Go to: "Extensions → Plugin", find and enable the plugin JA builder.

Video tutorial

This video is a quick guide to use JA Builder to create a Joomla site,

In this section, we will help you how to work with the builder, how to create pages, sections, work with Joomla pages and 3rd extensions.

Create JA Builder page

Firstly, you need to understand the structure of a builder page layout. The layout includes 3 main sections, for each section, you can add as many content blocks as you want.

JA site builder layout structure

  • Header - Content blocks added to the header section are displayed in pages that is assigned to same template style
  • Content - Content blocks added to the "content" section are displayed in the page only.
  • Footer - Content blocks added to the "footer" section are displayed in pages that is assigned to same template style.

1. Create new page

Access the "Pages" menu, the panel lists all created pages. Hit the "New" button to create new page.

In the creating new page, add page title and additional info for the menu.

There is an other way to create new JA Builder page. On front-end, when you edit a page, you will see a "Create Page" button on topbar, you can create new page from there.

2. Edit page

After create new page, hit the "Live Edit" to edit the page on front-end.

Click the Edit Page button to start editing the page.

Now, add content block to header, main content or footer. As mentioned, the content block added to header and footer section will be displayed in all pages that use same layout.

Next, select block type then layout and style.

Once done, you can edit the block and elements in the content block.

Depend on the added content block and content in the block, the settings can be different to help you customize it with ease.

Do the same to add other content block. Once done, publish the page so user can see the page.

Now, create menu item then select meny type: JA Builder » JA Builder Page then select the created page.

Create Joomla default page

The Joomla default page structure layout includes

Joomla page layout structure

  • Header - Content blocks added to the header section are displayed in pages that is assigned to same template style.
  • Top - Content blocks added to the Top section are displayed in pages that use same layout
  • Content - This is the page main content that is loaded from meny type.
  • Bottom - Content blocks added to the "content" section are displayed in the page only.
  • Footer - Content blocks added to the "footer" section are displayed in pages that is assigned to same template style.

1. Create new menu item

You can create new Joomla menu item as normal, access Menu » Main Menu » and create new menu item. For example we create Articles » Category Blog menu item named "Blog". Here is the menu setting.

2. Edit the Joomla page

In front-end, open the Blog page we just created in step 1 and hit the Edit button.

You can add content block to the following sections:

  • Header
  • Top
  • Bottom
  • Footer

Remember that, the content blocks added to the Header and Footer sections are displayed in all pages that use same template style while the content blocks added to the "Top" and "Bottom" are only displayed in the entire page.

Hit the "Add block" for specific section then select layout and style do content update, customization for the content block based on supported configurations.

In the "Content section", it has 2 inside block: "Main Content" that loads content from the menu type and the "Sidebar" that load modules from a defined position.

You can configure the Main Content and Sidebar block, hover the block and hit the configuration icon. You can change width or the block (based on Bootstrap 12 grid system), select content type: content (to load content from menu type) and module (load modules from defined module position).

In case you want to create 3 column layout, you clone a block then configure the width of the 3 blocks, can be: 6-3-3, 2-8-2.

Now, you can create modules in your site back-end and assign to the module position that you configured for the block and select to display in the menu item.

Do the same to create other Joomla default pages like: Contact, Single Article, Banner, etc.

Integration to T3 Framework template site

You can use JA Builder in wesbsite based on T3 Framework template (Templates based on Bootstrap 3) like Uber, JA Teline V. Here are steps:

Install JA Builder

  • Step 1 - Download the JA Builder package and install to your Joomla site
  • Step 2 - Enable JA Universal Builder plugin (check the screenshot)

Create layout for your T3 Template

As JA Builder uses full width layout so we need to create same layout for your T3 framework template. For example, we will integrate JA Builder to JA Restaurant template based website.

Step 1 - Download the layout file builder.php from this LINK

An other way to create builder.php file:

Open the folder: templates\ja_restaurant\tpls and create new layout file named builder.php then add following code to the file:

<?php
/**
*------------------------------------------------------------------------------
* @package T3 Framework for Joomla!
*------------------------------------------------------------------------------
* @copyright Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
* @authors JoomlArt, JoomlaBamboo, (contribute to this project at github
* & Google group to become co-author)
* @Google group: https://groups.google.com/forum/#!forum/t3fw
* @Link: http://t3-framework.org
*------------------------------------------------------------------------------
*/


defined('_JEXEC') or die;
?>

<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>"
class='<jdoc:include type="pageclass" />'>

<head>
<jdoc:include type="head" />
<?php $this->loadBlock('head') ?>
</head>

<body>

<div class="t3-wrapper"> <!-- Need this wrapper for off-canvas menu. Remove if you don't use of-canvas -->

<?php $this->loadBlock('header') ?>

<!-- MAIN CONTENT -->
<?php if($this->hasMessage()) : ?>
<jdoc:include type="message" />
<?php endif ?>
<jdoc:include type="component" />
<!-- //MAIN CONTENT -->

<?php $this->loadBlock('footer') ?>

</div>

</body>

</html>

Step 2 - Paste the layout file to folder:templates\ja_restaurant\tpls

Step 3 - Access your Joomla site back-end, go to: Extensions » Templates and duplicate any JA Restaurant template style.

Step 4 - Open the duplicated template style, in the "Layout" panel, select "builder" layout that we just create.

Step 5 - Go to Component » JA Builder and create new page then hit the "Live Edit" to edit the page in front-end.

For the page, it will use Header and footer from JA Restaurant template, so you can add content block to the content section.

Once done, publish the page, the page will include header and footer loaded from JA Restaurant template and content blocks added from JA Builder.

3rd Extension Compatibility

The builder can work with all 3rd extensions like EasySocial EasyDiscuss, EasyBlog, Virtuemart, Mijoshop, etc.

In this documentation, we will use EasyDiscuss as sample and you can do the same for other 3rd extensions.

1. Install 3rd extension

Download the extension and install to your Joomla site as normal.

2. Create pages for the 3rd extension

This step depends on specific extension but normally, you will create menu item and select meny type to load content from the 3rd extension. In this case, we will create a menu: EasyDiscuss » Frontpage Layout » Frontpage Layout named: Discussion to load content from EasyDiscuss component.

3. Edit the page

On front-end, open the page and hit the "Edit page" button to edit the page.

The page layout is the same as the Joomla default page layout that also has 5 sections:

  • Header - Content blocks added to the header section are displayed in pages that is assigned to same template style.
  • Top - Content blocks added to the Top section are displayed in pages that use same layout
  • Content - This is the page main content that is loaded from meny type.
  • Bottom - Content blocks added to the "content" section are displayed in the page only.
  • Footer - Content blocks added to the "footer" section are displayed in pages that is assigned to same template style.

You can add content blocks to the header, top, bottom and footer sections. For the content section, configure the same as the Joomla default page main content section that you can:

  • Change width of each block
  • Change type to module or content, if module, can set the module position to load modules from the position
  • Duplicate a block to build multi column main content section.
  • Change position for blocks with move left and right function in each block.

Other Framework Integration

Coming soon

Customize style

You can customize style for a page or all pages by using Advanced field that allows you to add CSS rules to override styles.

To do that, open the edit mode of a page then open the SETTINGS sidebar.

Next, select Advanced configuration. There are 2 fields:

  • This Page Custom Styles: Add CSS rules to the field if you want to customize style for the current page only.
  • All Pages Custom Styles: Add CSS rules to the field if you want to customize style for all pages.

You could see the changes when active mouse in other place.

The CSS rules are auto saved, if you feel its okay, hit Publish button so user can see the update.

Please note that, the CSS rules added to the fields will override style from builder style files.

Coming soon

Documentation is a WIP. If you have any specific request or feedback as well as suggestions, feel free to drop us a line in JA Site builder forum. We'll try to cover them all.

Let us know in the forum