Najah Alert Box

Najah Banner

Najah Behance Feed

Najah Blog

Najah Button

Najah Content Switcher

Najah Carausel

Najah Chart

Najah Countdown

Najah Divider

Najah Dual Heading

Najah Facebook Feed

Najah Facebook Review

Najah Fancy Text

Najah Flip Box

Najah Google Review

Najah Grid

Najah Hotspots

Najah Icon Box

Najah IHover

Najah Image Button

Najah Image Comparison

Najah Image Layers

Najah Image Seperator

Najah Instagram Feed

Najah Magic Section

Najah Map

Najah Messenger Chat

Najah Modal Box

Najah Multi-Scroll

Najah Person

Najah Preview Windows

Najah Pricing Table

Najah Progress Bar

Najah Social Counter

Najah Table

Najah Tabs

Najah Testimonial

Najah Title

Najah Unfold

Najah Vertical Scroll

Najah Video Box







Nav Menu

Animated Headline

Price List

Price Table

Flip Box

Call To action

Media Carousel

Testimonial Carousel


Table Of Contents


Share Buttons


Facebook Button

Facebook Comments

Facebook Embed

Facebook Page




Image Box

Icon Box

Star Rating

Image Carousel

Basic Gallery

Icon List


Progress Bar





Social Icons





Menu Anchor

Side Bar

Read More

Side Logo

Site Title

Page Title

Nav Menu

Search Form


Menu Cart

Post Title

Post Excerpt

Featured Image

Table Of Contents

Author Box

Post Comments

Post Navigation

Post Info



Woocommerce Breadcrumbs

Custom Add To Cart

Woocommerce Pages

Product Categories

Manu Cart

WL Product Tab

WL Add Banner

WL : Special Day Offer

WL : Image Marker

WL : Universal Product Layout

WL : Category List

WL : Brand Logo

WL : Customer Review

WL : Product Archive layout ( Default )

WL : Product Title

WL : Related Product

WL : Add To Cart

WL : Product Additional Information

WL : Product Data Tabs

WL : Product Description

WL : Product Short Description

WL : Product Price

WL : Product Rating

WL : Product Reviews

WL : Product Image

WL : Product Video Gallery

WL : Product Upsell

WL : Product Stock

WL : Product Meta

WL : Call For Price

WL : Suggest Price

WL : QR Code

WL : Product Curvy

WL : Product Image Accordion

WL : Product Accordion








Image Gallery






Recents Posts

Recent Comments


Tag Cloud

Navigation Menu

Custom HTML


Active Product Filters

Filter Products By Attributes

Filter Products By Price

Product Categories

Product Search

Product Tag Cloud


Recent Viewed Products

Products By Rating

Recents Products Reviews

Filters Products By Rating


Inner Section

The Inner Section widget use is to create nested columns within a section. This way you can create complex layouts.

Step 1 : Drag an Inner Section Widget to your column

Step 2 : As a default, you will get a section with two columns

Step 3 : You can add or remove columns by right-click the columns handle icon

Step 4 : You can drag and drop the Inner Section widget to any column on your page, but it cannot be used within another Inner Section.

Step 5 : Now you can style the Inner Section in the same way you would style a Section.


Set the Advanced options that are applicable to this widget


The Heading Widget allows you to create stylish title headings.


  1. Title : Type your heading text.
  2. Link : Link the heading to a URL
  3. Size : Change the heading to Small, Medium, Large, XL or XXL
  4. HTML Tag : Set the heading’s HTML tag to H1- H6, Div, Span or Paragraph
  5. Alignment : Align the heading to the left, right, center, or justified


  1. Text Color : Choose the color of the heading text
  2. Typography : Change the typography options for the heading text
  3. Text Shadow : Add a shadow and blur to the heading text
  4. Blend Mode : Select from multiple layer effects including Normal, Multiply, Screen, Overlay, etc. 


  1. Set the Advanced options that are applicable to this widget


Images play a vital role in web design, so you will most likely use the Image Widget a lot while designing your website. Let’s go over all of the settings you can control for this widget.


  1. Image : Upload an image or choose Dynamic to dynamically use Posts featured image, Site Logo, and Author Profile Picture.
  2. Image Size : Choose the size of the image
  3. Alignment : Set the image Alignment
  4. Caption : Add a caption to the bottom of the image.
  5. Link To : Set a link to a URL, media file, or no link.


  1. Width : Set the Image Width
  2. Max Width : Set the Max Width for the Image
  3. Hover Animation : Click the dropdown to choose a Hover Animation
  4. CSS Filters : Set CSS Filters: Blur, Brightness, Contrast and Saturation
  5. Opacity : Set the Opacity
  6. Transition Duration : Set the Hover Animation duration
  7. Border Type : Set a Border Type
  8. Border Radius : Set a Border Radius
  9. Box Shadow : Set Box Shadow: Horizontal, Vertical, Blur, and Spread
  10. Caption : Set the Alignment, Text color, Text Shadow, and Typography of the caption.


  1. Set the Advanced options that are applicable to this widget

Text Editor

The Text Editor widget is a TinyMCE WYSIWYG editor that behaves just like the classic WordPress visual editor. You can enter rich text, images, and even WordPress shortcodes.


  1. Drop Cap : Slide to ON to set the first letter of the text as a Drop Cap, which makes it larger and gives it the ability to be styled independently from the rest of the text.
  2. Columns : Select the number of columns to split the text into
  3. Column Gap : Set the width of the gap between columns


Text Editor

  1. Alignment : Align the text to the left, right, center, or justified
  2. Text Color : Choose the color of the text
  3. Typography : Set the typography options for the text

Drop Cap (only visible if Drop Cap was set to On in the Content tab)

  1. View : Select the view style of the drop cap, choosing from Default, Stacked, or Framed
  2. Primary Color : Choose the color of the drop cap
  3. Space : Select the exact space between the drop cap and the rest of the text
  4. Border Radius : If Stacked or Framed is chosen as the View, set the border-radius to control corner roundness
  5. Typography : Set the typography options for the drop cap


  1. Set the Advanced options that are applicable to this widget


Is a set that was given with certain amount of product/service for a certain amount of price.

Step 1 : Click on “Symbol +” at column Add Content

Step 2 : Put all infomation at

  • Name (for example: “Peanut Butter” or “Toast”)
  • Price (This field isn’t compulsory, as you can enter the price in the menu description, but it’s recommended)
  • Description (Describe your menu here)
  • Rules  (This field isn’t compulsory. You will be able to use it to specify some conditions, for example “only available on mondays”)
  • Picture ( Add a picture to describe your menu)

* This feature is similar to catalog, but design will be more simple and nice, only cons is it cannot be categorized by assign to different categories.


Users can send relevant information through your company.

Step 1 : Click on “fields” all put information at (Fields are grouped in two sections, Formatting elements & Input elements)

Step 2 : Let’s check below how each fieldwork :

Formatting elements:

  • Title (section, divider): use it to create contrasting title/label elements
  • White space (spacer): adds a 20px space between any other field
  • Illustration: adds an image in the form
  • Richtext (block): creates a richtext (wysiwyg) block anywhere in the form
  • Clickwrap (action, agreement): adds a checkbox which when clicked opens a modal with either a custom agreement, or the application privacy policy

Under fields

  • Input elements
  • Number: adds a number input with options, minimum, maximum & step increment
  • Dropdown select: adds a select element with multiple options
  • Radio choice: adds a radio input choice
  • Checkbox: adds a simple checkbox element
  • Password: adds a password text element, input text is not readable
  • Text input: a single line text input
  • Textarea: a multiline text input
  • Pictures (images): allows user to send up to 10 images, the limit can be configured individually for each picture input, as long as the placeholder texts
  • Date: simple date field, with format options & weekdays restriction
  • Date & time: simple date & time field, with format options & weekdays restriction
  • Geolocation (GPS): a clickwrap action, when the users check the box, its location is saved based on their current location.

Step 3 : Click on “Setting Colums” put In Recipient emails field (you can enter multiple recipients, separate e-mails with a coma)

  • Enable in-app-history: with the history, logged-in users will be able to see (read-only) their submissions, sorted by date.

Step 4 : Setting at the “Result” (Under Results, you can see the answers of the users)

  • You can also export the results as .CSV file and choose to exclude anonymous results and/or keep only the last entry for identified customers/users.

*Note: the history is only available for logged-in users and when the option is enabled, all submissions made when the setting is off are not saved in the user history, however they are saved in the admin results tab & sent by e-mail when configured


Allows you to insert picture through Picasa, Instagram, Flickr or upload it yourself.

Step 1 : Click on “+” Symbol at ADD CONTENT

Step 2 : Click on “Instagram”, “Flickr” or ” My Image”. But we recommended “Insert via My Images”

(Option 1) Insert via Instagram

  • The gallery name is only the name displayed on the App, and is not related to the Instagram gallery. (Not Suggested)

(Option 2) Insert via flickr

  • The “Gallery name” field allows you to give a name to your gallery.
  • With the “Search” field you’ll be able to retrieve all photos from Flickr that are relevant to this search. (Not Suggested)

(Option 3) Insert via My Images

Step 3 : Insert Gallery Name (For example your event tittle, etc..)

Step 4 : Click on “Send your pictures”

Step 5 : Click on “Browse” ( to upload photos from your computer. You can upload several photos in the same time, just select from one folder all the photos you want to upload. It’s not compulsory, but you can enter a title and a description for all your photos)

Step 6 : Click on “Save” to save your gallery (Note be taken, one gallery is not advised to have more than 15 photos. And each photo should not be too high pixel, it will caused the loading speed of the images in App takes longer)

*Best each image pixel not more than 800.


You can type anthing such as information about your bussiness or website link.

Step 1 : Click on “Text” (We will create the first section, which is dealing with golf. To do this, click on “Text”. A new text document appears and you can write your article in it)

Step 2 : Click on “Image” (Creating a photo gallery is as easy as realizing a text section. To do that, click on  and then on “Add pictures”)

Step 3 : Click on “Video” (The creation of a video section is as easy as the creation of text sections and picture sections)

  • To do that, you must create a new section, click on “video”.
  • Here you have to choose the kind of video you want to integrate into your custom page: YouTube videos, Podcast videos or your own videos.


  • Enter your research or your YouTube URL in the field. Here I enter “kosmas malaysia kl” and then click on OK. Select the video you want to integrate and then click on “Save” to save your video.

Podcast: Enter your video podcast address ( .xml format) in the appropriate field. Then click on the video you want to integrate to the info page. Then click on “Save”.

My video: Thus, to include a video, you have to write the URL address of your video in “Video URL”. Once you have written the URL address of your video, you can write a little description of it and add a loading picture.

Note: Google Drive links are not supported.

Step 4 : Click on “Address” (Have many section at Address, you can input :

Label : Put any name to refer address (for example company name, staff name, etc…)

Latitude and Longitude : To give easy to search

  • You can search location at google
  • Click what’s here and click a number display
  • Short number is latitude and long number is longitude

Phone Number : Put contact number to customer direct contact

Display Phone :  Can choose able or unable contact number

Website : Just put link website

Display Website, Address, Location Button : Just tick if you want display

Step 5 : Click on “Button” (In button have 3 option to put the information)

Step to Use Button Phone : 

  • Upload Custom Icon : You can design your own icon and size must be 128*128
  • Label : Label refer for contact name (example company name, Sales Name, etc..)
  • Phone : Contact number

Step to Use Link : 

  • Upload Custom Icon : You can design your own icon and size must be 128*128
  • Label : Name for link (example whats app, instagram, etc…)
  • Link : Just put link (example https://www.instagram.com/koperasialnajah/, etc..)
  • Browser choice : you have three options
  • In app browser: The link will be opened in the app. You can choose different display options for Android and iOS.
  • Custom tab: The link will be opened in the app but in a custom tab of the device browser (ex: Chrome, Safari, etc…)
  • External app: The link will be opened in the device browser (ex: Chrome, Safari, etc…).

Step to Use Email : 

  • Upload Custom Icon : You can design your own icon and size must be 128*128
  • Label : Refer for email name (example Koperasi Al-Najah, Kosmas Malaysia, etc)
  • Link : Just put link (example admin@alnajah.com, etc…)

Step 6 : Click on “Attachment” (file to direct upload)(exampe pdf file, png file, jpeg file)

Step 7 : Click on “Slider” (can add many picture to make a slider)

Step 8 : Click on “Cover” (big picture like web banner at website)

Step 9 : Click on ” </> Source Code” (Need to insert code to function)

Step 10 : After done input info at all, click on “Save”

*If you dont want put all info just skip a step

Google Maps

Allows you to add a link within your app.

Step 1 : Write the name of your link in “Label”(Put url address in “URL“)

  • Then you have three options:
  • In app browser: The link will be opened in the app. You can choose different display options for Android and iOS.
  • Custom tab: The link will be opened in the app but in a custom tab of the device browser (ex: Chrome, Safari, etc…)
  • External app: The link will be opened in the device browser (ex: Chrome, Safari, etc…).

You can create as many links as you want, you just have to do this process again.


This feature allows you(only admin) to create a news page with a photo and comments from users. It works like a news wall, users are able to find all the posts you wrote on it.

Step 1 : Click on “+” at “ADD CONTENT”

Step 2 :

Insert info at : 

  • Title : Here is the title of your News
  • Date : Schedule the publication date of your news.
  • Subtitle : It’s a summary of the description of the news.
  • Description : Describe your news in the text editor.
  • Insert a picture: Choose a picture to illustrate your news.
Chinese (Simplified) Chinese (Simplified) English English Malay Malay