At first we need to know why we need layout. Then we should know how to work with layout.
1 Why we need to use Layout
- To create a style for all pages.
- To create a specific style for a single or some pages. Example: Home page design, contact pages design, portfolio page design, gallery page design, blog page design etc.
- To change menu style, header style, footer style for specific pages or all pages.
2 Working with Layout
By default, we get a layout which name is “default”. The default layout is for all pages except the pages which pages are under others layout. You may see it in Fig: 2.1. If we need to set any style globally, we must select default then we should change those options which are under the layout.
The available options under a layout are shown in the section “2.3 Options under a layout”.
We should create a layout first. Then we should assignment menus where the layout style will be affected. Then we should understand the options under a layout.
Note: Without menu assignment the layout will not work perfectly. The default layout has not menu assignment section. Because the style for layout for all pages excerpt overridden pages.
2.1 Layout Creation:
- For Joomla: At first we need to go Extensions > Templates > WARP_TEMPLATE_NAME (such as: Kirion – Default, Effortless – Default, Framed – Default, Jaap – Default, Intensy – Default) > Options >Layouts
- For WordPress: At first we need to go WARP_THEME_NAME (from main menu. Example: Beauty Salon) > Layouts.
- Click to “Add” button to create new layout.
2.2 Menu Assignment:
Now we need to assign menu for the created layout. So follow the below instruction.
- Now select the recent created layout(for example: home-page-layout)
- Just go to the bottom of the layout page. You will get the “Assignment” section.
- Now check the pages where the layout will be affected.
- Save it
2.3 Options under a layout:
One of the most important to know about which options will work for layout. Simply, all options of the layout page are under the selected layout. So you need to select the layout first, you should change any option of the pages. All options are depending on layout. Some available options are define as follows.
2.3.1 Layout width
Here you can set the width of layout of your site.
Hi guys. The most important option for layout is Style. All of styles are customizable and extensible. This option enables you to assign a style to your layout. There is a possible to create new style, edit existing style and delete unneeded style from the customizr. You will get the customizr at the “Style” section in “Settings” tab of warp. For more help you may go http://docs.bdthemes.com/obn6s
2.3.3 Body Style
This option enables you to set the background to your layout.
This option allows you to hide the main system output. This is useful, if you want to position only widgets/modules on certain pages, without leaving redundant space.
The example preview of content that will show or hide is show in below:
2.3.5 Header Style
By the following option you can easily arrange or rearrange your header content.
2.3.6 Main Menu Style
There are some custom menu style in warp template
The Warp framework provides the following layout options for the sidebars. Choose from the provided percent values to set the sidebar width. Define, whether the sidebar is published on the left or right side of the content.The sidebar settings allow you to create a fully functional multi-column layout. The only requirement is to publish a widget or module on a sidebar position to display the selected alignment.
Warp Framework has a customizable grid feature. Each grid can be customized under each layout.
There are some description for grid of layout:
- Position: There are some position of module (widget) is show there to change the behavior of the modules
- Layout: There are some (Parallel, Stacked, First Doubled) layout for each grid. If you add some module or widget in a same position, what type of layout you want for the grid. If you select the Parallel, all modules will get same width column in a single row. Or if you select “Stacked”, all modules will get full width column of the row and each module will come appear according to itself order (Module ordering). Or if you select First Doubled, all module will get same width column except 1st module and the 1st module will get double width from others.
- Responsive: There are three(disable, stack on phones and stack on tablets)responsive option for each grid position. The “disable” prevent to responsive, the “stack on phones” prevent responsive for only mobile sized devices. and the “stack on tablets” prevent responsive to tablet sized devices.
- Background: Background is the option to set the image in background of the grid of the selected layout.
- Divider: Divider is the option to set divider between two columns of the grid. The option will work when you select Parallel or First Doubled (see 2 no. step) and there are two or more module is existing.
- Padding: Padding is the distance between two columns (see 2 no. step) of the grid.