To start with layout configuration, go to Extension → Template → JSN_template_default. The first tab you see will be the Layout tab, where you can have the ultimate control of the template layout.

Understand Layout Control

Overview

The Layout Builder consists of 3 main areas:

1. Layout Items: list of items which you can drag & drop into the layout.
2. Layout: including the main layout and four off-canvas regions. There are areas where your template’s layout items are positioned and built.
3. Setting Panel: all the settings related to layout items which are being configured. 

Common Settings

Most of the items in Sun’s layout share the following settings

	Hide (the eye icon): it will hide the item in all viewports
	Clone: make a duplicate of selected item
	Delete: delete selected item
	Margin/ Padding: most use to modify space between sections, rows and columns
	Display in Layouts: hide or display item in different viewports (applied for columns/rows/items)
	Custom classes: for custom styling

 

Tips:

• By using Display in Layouts features, you can choose which module or section you want to show in other Mobile devices.
• Using Save as Layout to save your most used layout. You can select by choosing the arrow button under the Save button. And Use the Load Layout feature the next time you use the template.

Layout Concept

Sun Framework’s layout concepts:

1. Page: Overall settings for the layout.
2. Section: is a division of a page. A section is automatically created when you add a row to an empty area in the layout. It contains one or more rows in which you can add layout items.
3. Row: is the component contained in the section. Same as section, a row is automatically created when you add a layout item on the left of the page. A row contains one or more columns corresponds one or more layout items.
4. Column: is the component contained in the row. Each column corresponds to only one layout item.
5. Layout items: These are the smallest pieces in the layout. Each item is made up of one column.

You can start building your own layout by drag & drop items on the left panel into the layout area. After that, you can adjust their settings via the right panel.

• If you drag a new item into a blank area of the layout, it will automatically create a row, column and section wrapped around this item.
• If you drag a new item below an existing row, a new row which contains this new item will be created. These two rows will be in the same section.
• If you drag a new item below an existing item/row in a column, these two items will be wrapped in the same column.
• You can drag an existing item in the layout to any position simply by clicking on the drag icon in the item and bringing it to anywhere you want.

Adjusting Column Width

Sun Framework utilizes Bootstrap 3, which means there will be 12 columns in the layout. All item will take a total sum of 12 columns.

To change a column width, simply move your mouse cursor on the dividing line between two columns and drag it left or right, depending on how you want it to go.

Modify space between item and layout elements

There are 2 ways to modify space between elements

1. Use Margin/ Padding parameter in every Section/ Column/ Rows to modify the space between each item.

2. Use Flexible Space layout item. Will talk more detail in below section.

To go in the page setting control panel, click on the outer box as the image below:

Enable responsive layout

Configure in Page setting

The responsive mode is enabled by default. If you don’t want to use Responsive Layout, go back to Page Settings and deselect Enable Responsive.

You can adjust the width of each item in tablet and mobile, as well as their visibility in each viewport, by going to each viewport and change its settings.

The responsive viewport of Sun Framework layout is similar to that of Bootstrap 3.

Note: This feature is only available in PRO templates powered by JSN Sun Framework.

Enable boxed layout

Configure in Page setting

Change from full-width layout to boxed layout. Upon selecting this option, you can set the width for your layout.

After that, you can go to Styles/General and set the background for both Outer Page and Inner Page.

Show “Go to Top” button

Configure in Page setting

Display go-to-top button near the bottom of the website. Upon selecting this option, you can select proper icons for this button.

Change the “Template by JoomlaShine” line

Configure in Page setting

By check/uncheck the Show Branding options, you can remove the “Template by JoomlaShine” line or change it with another content.

Enable full width

Configure in Section setting

Set full-width layout for a section.

Enable Sticky

Configure in Section setting

Set stick mode for a section. This feature is often used for header section to set menu sticky.

Off-canvas Section

You can use this section to place menus, modules and positions in a special Off-canvas sidebar, used for both desktop and mobile view.

The Sun framework offers four Off-canvas sections, which are located on the top, right, bottom and left side of the layout.

To set up a Off-canvas section, you only need to click on one of the toggle buttons, which are available on each side of the layout builder, depending on where you want the Off-canvas section to display on the front end.

Layout Items Detail

On the left of the control panel, there are eight layout items show on the main layout:

• Logo

• Menu

• Module Position

• Module

• Main Body

• Social Icons

• Custom HTML

• Flexible Space.

Now, let’s go to each item:

Logo Item

Drag the logo item in the layout, you can change your logo on site with this item.

You can understand better about setting up logo in this article.

Menu Item

Use to control your menu item. 

You can understand better about setting up menu in this article.

Module Position Item

With one module position, you can assign one or more modules to this item.

You can also create a new module position with this item.

Note: The Name section on the left is just the name you give for this module in the Sun Framework. This name don't exit in Joomla and you can't search a module with this name.

Module Item

Similar to the function of the Module Position item, you can assign module created before for this item, but you just assign only one module for a module item by selecting module from Module selector.

After clicking on the Select icon you can find your module faster by smart search tool.

Note: if you don't assign a position for this module, it will take the position similar to the SFW layout and within the Section it built in.

Main Body Item

It shows the main component of the page (Article mostly)

You can only drag one item for one page.

If your page has this item before you select item to drag to the page, you will see a notification Layout already has item “Main Body”.

Show On Front Page: Turn on or turn off the mode to show or hide the main body on the frontend. This option only effect on the menu of the homepage.

Social Icons Item

If you want to put your site some social icons, simply drag “Social Icons” item to the page and make some quick settings. 

To add more social icons, click on Add Social Icon button → select a Social Network. Here you can the social link, click on the icon image → Social Profile Link to update the social link.

Custom HTML

This item allows you to put your HTML content, you just need to drag this item to the page and click on Set HTML content button to customize your content.

Flexible Space Item

Flexible Space allows you to add an empty space between items in the layout. This item doesn't have any special function but merely a styling tool.

The most common use is drag this item between 2 sections.

However, you can also add to any position to create a white space as you needed.

Tips on building layout

1. You can click Preview Layout to see the actual layout look like in your website.

2. You can see the Module position page in the demo to understand more about the position built within a template (Each template has a different layout). For example: