Default Layout

Brief: default layout helps the admin to manage the website form easily. It enables him to add and order blocks using the website interface without any need of programming codes. All he needs is to add blocks wherever using the drag and drop technique, and use tools that control the block size. 

The default layout has been perfectly provided to see the website during proceeding editing, whether the admin is using a laptop, tablet, or mobile. 

The Features of default layout: 

-Add plugins blocks and manage their dimensions and location. 

-Adjust the blocks settings, as you can set appropriate settings for each layout incase of creating several ones. 

-Create a special layout for a certain plugin or page. 

-Create a special layout for every device; (Desktop, tablet, mobile). 

-Save a default layout of any layout to be restored later. 

Firstly: Activate Layout: 

To activate the default layout, press (Active Live Mode) from the menu list as shown in the below picture: 

After pressing (Active live mode), the website form is changed to a form through which you can create and manage blocks. To deactivate it, press (Deactivate live mode) from the menu list as shown in the below picture: 

Secondly: Toolbar of the default layout: 

Several tools are provided to help the admin to smoothly formulate and manage the website such as available layouts, add zone, device type, etc., the toolbar is shown on the website as the picture below: 

1- Available Layouts: it includes all previously created layouts, through which you can choose, or edit any one of them. 

2- Add Zone: you can add new zones to the website, the use of it will be mentioned later in this tutorial. 

3- Add Block: you can add new blocks to the website, the use of it will be mentioned later in this tutorial. 

4- Hide Widgets Title: press this icon to hide the blocks titles, to republish them, press the same icon. 

5- Redo-Undo: you can undo or redo the last action using these two icons. 

6- Device Type: choose the device that you want to create this layout for, whether it is a laptop, tablet, or mobile. 

7- About live mode: press this icon to know about the live mode. 

8- Run Fullscreen Page: press here, so the layout out will be shown in the full screen, to cancel, press the same icon. 

9- Save Changes: press (actions) and a list will show up, to save changes as shown in the below picture: 

Save these changes, so you can restore this layout at any time. 

If you are on an internal page, and press (Save changes), the below options will show up: 

 Save changes for this layout too: press here to save change change of the layout and be able to restore them at any time. 

Save as a layout for all pages of current plugin: the changes will be saved to be applied only for internal page of the current plugin. For example, if the current page is a one of certain modules, so changes are saved for only this module pages, which enables you to create layout for a module by using one page.

Save as a layout for the current action in this plugin (s): you can save this change for one action . Action is the letter (S) shown after the module name and before the ID in the browser bar as the picture below: 

 As a result, all the action pages will use the same layout. 

 Save as a layout for the current page only: the editing will be saved for only the current page. 

Press ( Save Changes) to save and execute these ones. 

Note: if any of the previous steps is done, and you press (Save Changes) again , an additional option will show up as below:

Rename: save the current layout with another name as the picture below: 

Why do you need to save the layout with another name? 

You can’t create a new layout from scratch, you need to edit an already existed one. 

Apply default layout: You can set it as a current default layout. 

Reset defaults layout: You can resort to the original layout, and cancel any adjustments. 

Cancel changes: reload the page and ignore any editing. 

Thirdly: Zones: 

Zone is the container of blocks. 

Add Zone: 

Add zonse by pressing the icon (Zone) in the toolbar. 

Zone Tools: 

Various tools are available to manage any zone: 

Move: you can move the zone anywhere. 

Increase Grid: to enlarge the zone size. 

Decrease Grid: to downsize the zone. 

Clearing: is used to align the zone without a need to downsize or enlarge.  For example, if you want to make the calendar beneath the latest pictures yo, you can this option. 

Delete: this icon shape is different depending on the zone content: 

Bin icon: if the zones include blocks. 

X icon: if the zone is empty. 

Fourthly: Blocks: 

are the plugins blocks that you have installed. 

Add Block: Add block by pressing the icon (block) in the toolbar. 

Press it, and the available blocks will show up: 

1- Search by block name: to search for any block. 

2- Blocks List: includes all the available blocks of any module or plugin. 

To display the block, drag and drop it wherever on the website. Its location can be changed anytime. 

Block tools: 

Increase Grid: to enlarge the block size. 

Decrease Grid: to downsize the block. 

Send to the helper box: the block is moved to the helping bin at the bottom, and the block can be dragged again and located wherever. 

Remove block to the blocks cycle: the block will be moved again to the adding block window. 

Clearing: is used to align the block right or left. Pressing the cycle icon is canceling the alignment and get back to the default layout. 

Block Settings: this option is shown for certain blocks, press (Submit) to save any adjustment and reload the page. 

Notes: 

1- The newly added adjustment are not found in the control panel because they are saved only in the default layout. .

2- If you press (Block Settings) in the layout again, you will find another option beside (Submit) which is (Reset Default Settings). If you press this option, all adjustments will be removed and the block will back to the default version set by the plugin settings by the control panel.