Login Engines - Page Maker

In order to offer a truly personalized platform for user login experience, we created the “Page Maker” module. Page maker module is a powerful platform that let you create pages for sign up, informative pages and login pages which are personalized to your unique organisation. Page maker editor let you drag and drop snippet/box of content and let you customize the login page to your own. This module let you design your page creatively without the requirement of doing html programming. With each update of Kiwire platform, new snippet will be introduced which enable future login mechanism and logic to be introduced to your network. To access the page maker module click on Login Engine > Page Maker and the Page Maker module screen will display the existing listing of the added pages in system. The field and its function description is listed below. 

* NOTE : You are required to create an initial login page for your platform to work. If not user will be encounter a warning page of “No login page being created!”. Please create an initial login page and set it to be default.

Page Maker Preview

Click on the arrow under Page ID column from page maker listing to load the preview of the page. 

Page Maker Editor

Click on the edit icon to access the page maker editor. The page maker editor consist of three primary pane:

• Red Pane         – The red pane on the RHS is the primary snippet container which you can drag and drop the snippet box into the main canvas.

• Orange pane  – The orange pane on the LHS is when you click on a text which load the typography option.

• Blue pane        – The blue pane let you save the page, upload or remove background for the page.

Create/Edit Page

1. Click on the “Create Page” button to create a new page.

2. The Page Maker Editor will load.

3. To set a background for the page, click on “Upload Background” and a popup window will appear as below:

Click on “Choosing File”to select the background. It supported image format (.jpeg, .png, .gif, .bmp) to their respective categories to proceed. Any background uploaded under “Desktop Size” will only appear for desktop. If there is no image uploaded for “Tablet Size” or “Mobile Size” the default background image for desktop will be used. Click “Upload” to set the background.

* NOTE : All background images will be set to full width and centralized so imagery near the edges will have some clipping, please test and ensure your image size is optimized for use as it will affect loading time

4. To remove background click on “Remove Background” button.

5. When you click on a text, it shows the typography option on the LHS. The typography option is to edit the text such as font size, font color, bold and many more.

6. Open the snippet selection box by clicking on the snippet box loader on the RHS to shows all the snippet blocks.

7. Drag and drop the required snippet block into the main canvas area from the snippet selection box.

8. Most of the snippet block are editable, just click on the snippet and hover the edit icon will display.

9. The first icon is to move the position of the snippet box.

10. The second icon is the HTML editor. Page maker support the HTML/CSS code. After finish editing on html editor, click on “Save” button to save the code.

11. The third icon is to copy and paste the snippet block.

12. The last icon is the delete icon to delete the block.

13. Most of the snippet box are editable, just click on the snippet and hover the edit icon will display.

14. Once done with the new customized page, click on “Save” button to the page.

15. At the save option, type the page name, enable the default page and type if any remark for the page then click “Save” button.

* NOTE : Only 1 default page are allowed.

16. To edit the previous page, click on the edit icon and make the changes. After done with changes, click on “Update” button to save the page. Video Example – Page Maker

Page Maker Shortcode

Shortcode are tag code design to be embedded into pages for performing additional function beside display typography, media and login box snippet. To use the short code just use edit html code function in page maker and type the link or button action to the shortcode.

The current available shortcode are: 

Snippet Box

Snippet are design block that let you create your own personalise and functional page. While some snippet box are for loading of media , text there are some snippet that have functionality built in. The table  bellow are the snippet box and its function usage.