fbpx

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

Posts

Portfolio

Gallery

Form

Login

Slides

Nav Menu

Animated Headline

Price List

Price Table

Flip Box

Call To action

Media Carousel

Testimonial Carousel

Reviews

Table Of Contents

Countdown

Share Buttons

Blockquote

Facebook Button

Facebook Comments

Facebook Embed

Facebook Page

Template

Lottie

 

Image Box

Icon Box

Star Rating

Image Carousel

Basic Gallery

Icon List

Counter

Progress Bar

Testimonial

Tabs

Accordion

Toggle

Social Icons

Alert

SoundCloud

Shortcode

HTML

Menu Anchor

Side Bar

Read More

Side Logo

Site Title

Page Title

Nav Menu

Search Form

Sitemap

Menu Cart

Post Title

Post Excerpt

Featured Image

Table Of Contents

Author Box

Post Comments

Post Navigation

Post Info

 

Products

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

 

 

 

Pages

Calendar

Archives

Audio

Image Gallery

Video

Meta

Search

Text

Categories

Recents Posts

Recent Comments

RSS

Tag Cloud

Navigation Menu

Custom HTML

Cart

Active Product Filters

Filter Products By Attributes

Filter Products By Price

Product Categories

Product Search

Product Tag Cloud

Products

Recent Viewed Products

Products By Rating

Recents Products Reviews

Filters Products By Rating

 

Image Box

The Image Box Widget lets you add an image box that combines an image with a headline and text, which is often used in Features sections, as an alternative to using the Icon Box widget.

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.

Advanced

Set the Advanced options that are applicable to this widget

Icon Box

Icon boxes come in very handy when building websites. The most common usage is for sections that list features of products or services. In this video tutorial, you will see the various options you get to customize every element of this widget: the icon, the headline, and the description. The icons are derived from the Font Awesome Icons, and you are able to search through them and pick the right one.

Content

  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

Style

  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. 

Advanced

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

Image Corousel

The Image Carousel Widget allows you to add interesting and dynamic galleries to your pages. In the video, we explain about creating a gallery image carousel and a three column carousel.

Content

  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.

Style

  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.

Advanced

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

Basic Gallery

The Basic Gallery Widget allows you to easily add and style beautiful image galleries on your page.

Content

  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

Style

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

Advanced

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

Icon List

The Icon List Widget creates an easy-to-manage list of items, with each item highlighted by its own icon.

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.

Counter

The Counter Widget enables you to add an animated numbered counter to your page.

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

Progress Bar

The Progress Bar Widget allows you to add fully styled, animated progress bars to your page.

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.

Testimonial

With Elementor, you can add and style testimonials easily and without the need for any 3rd party plugins.

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.

YouTube:

  • 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

Tabs

The Tabs Widget allows you to divide your content into tabs, either horizontally or vertically

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.

Accordion

The Accordion Widget is used to display text in a collapsed, condensed manner, letting you save space while still presenting an abundance of content. With the Accordion, visitors can scan the item titles, and choose to expand an item only if it is of interest.

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.

Flip Box

The Flip Box Widget helps you create animated boxes that flip to the other side, once the visitor hovers over them. 

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.

Call To Action

The Call to Action Widget is a tool for creating beautiful boxes that combine an image, some text, and a button. The widget uses animations and CSS effects to create user interactions, that appear when the user hovers over the box.

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.

Media Carousel

The Media Carousel widget allows you to create a slider of videos and images.

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.

Reviews

The Reviews widget displays a sliding carousel of user reviews.

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.

Table Of Contents

The Table of Contents widget automatically organizes your page content based on H1 through H6 levels of hierarchy.  Although the process is automatic, you have plenty of control over what gets included and what gets excluded from the display.

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.

Countdown

The Countdown widget enables you to add countdowns to your page without the use of 3rd party plugins.

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.

Share Buttons

The Share Buttons Widget adds share buttons to any WordPress page or post. Share Buttons Widget gives you full control over your Share Buttons design & style.

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.

Blockquote

The Blockquote Widget allows you to embed fully styled quotes. You can also set these as Click To Tweet quotes, enabling users to easily share them on Twitter.

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.

Facebook Buttons

Add a Facebook Like Button Facebook Like Button Widget to your website, so you visitors can like your pages or posts.

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.

Facebook Comments

Add Facebook Comments to the end of your posts to allow your readers to easily comment using their Facebook account.

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.

Facebook Embed

The Facebook Embed widget lets you easily embed Facebook posts, videos or comments on your website’s page.

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.

Facebook Page

Add your Facebook Page Feed (previously named Like box) to your site. 

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.

Template

The Template widget inserts a custom global template into your page.

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.

Lottie

Lottie widgets are small animated elements which are rendered from .json files. Simply upload or reference an external .json file and adjust as desired.

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