fbpx

KOPERASI AL-NAJAH  |   KOSMAS MALAYSIA

Site Features
Basic
Pro
General
Site
Single
Woocommerce
Woolentor Addons
WordPress
Al-Najah

Site Logo

With the Site Logo feature, you upload your logo once, and it will display perfectly in most themes, no matter how often you change.

  1. Open My Sites → Customize and click on the Site Identity section.
  2. Click Add Logo to open the Media Manager.
  3. Upload a new image, or select one that’s already in your Media Library.
  4. Click Set as logo, and you’ll see your logo appear in the preview window.
  5. Click the Publish button at the top right of the Customizer to activate the logo on your site.

Create a logo with Fiverr

  1. Open My Sites → Customize and click on the Site Identity section.
  2. Click Create Logo to go to the Fiverr website.
  3. Enter the name of your company or blog and click Make Your Logo.
  4. Finalize the name on your logo and add a slogan if you’d like.
  5. Select your industry and any design elements you’d like to see in your logo (e.g., a tree, book, coffee cup, sun, etc.) and click Next.
  6. Define your brand’s personality using Fiverr’s characteristics.
  7. Pick your favorite logo from the selection of logos tailored to your identity and customize as you’d like.
  8. Along the way, you will create a Fiverr account and can purchase your custom, high-resolution logo. After completing the purchase, you’ll receive your logo files, including high-res PNGs. They can be downloaded from your Fiverr account or your email.
  9. Follow the steps described in the “Adding your Site Logo” section above.

Once a logo has been set, you can change or remove it using the Remove Logo and Change Logo buttons. Once you’re satisfied, be sure to click the Save & Publish button at the bottom right to preserve your logo settings.

Hiding the Site Title and Description

Once you have a logo, you might not need your theme to display your site’s title in regular text. But titles are good for SEO! Rather than leaving the title blank, you can hide it: below the Site Logo tools in the Customizer, you will see a checkbox labeled Display Site Title and Tagline. To hide your site title and description, leaving just the logo, uncheck this box, then click Save & Publish.

Theme Support

To see all the themes that are supported, check out the Site Logo filter on the Theme Showcase.

 

Site Title

The Site Title widget is a dynamic widget that displays the Site Title that was assigned in the WordPress Customizer. Although the site’s title can only be replaced or deleted in the WordPress Customizer, the Site Title widget gives you the ability to change some design aspects of the title.

Content

  1. Title: The title is automatically, dynamically retrieved for you
  2. Link: The link is automatically, dynamically retrieved for you
  3. Size: Select the size of the Site Title, from Small to XXL
  4. HTML Tag: Set the Site Title’s tag to H1-H6, Div, Span or Paragraph
  5. Alignment: Align the Site Title to the left, right, center, or justified

Style

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

Page Title

The Page Title widget is a dynamic widget that displays the Page Title that was assigned in the WordPress page editor.

Content
 
Settings
  1. Type: Select type of gallery, choosing from Single or Multiple. Multiple allows you to have a filterable portfolio-style gallery of images. 
  2. Add Images: Choose multiple images from the media library to insert into your gallery and type a Title for the gallery.
  3. Order By: Choose Default or Random order
  4. Lazy-Load: Set to Yes to use Lazy Load to improve loading speed.
  5. Layout: Select from Grid, Justified, or Masonry.The Grid is based on an aspect ratio of your choosing. Justified lets you set the height for each row, and adjusts to different widths per image. Masonry maintains the same image width and adjust to varying heights.
  6. Columns: Set how many columns will be displayed per row, from 1 to 24. Not available if Justified Layout is chosen.
  7. Row Height: Set the height of each row, in pixels. Only available if Justified Layout is chosen.
  8. Spacing: Control the amount of space between each image in a row.
  9. Link: Set the link for the images to None, Media File, or Custom URL
  10. Aspect Ratio: Choose the Aspect Ratio, selecting from 1:1, 3:2, 4:3, 9:16, 16:9, and 21:9. Only available for Grid layout. 
  11. Image Size: Set the size of the image, from thumbnail to full, or enter a custom size.

If Type: Multiple is chosen, the following Filter Bar additional options become available:

Filter Bar (only available if Multiple type is chosen)
  1. “All” Filter: Select Yes to include the “All” filter, or No to exclude it.
  2. “All” Filter Label: If set to Yes, enter the desired label. “All” is default.
  3. Pointer: Select the pointer used when hovering over each filter label. Choose from None, Underline, Overline, Double Line, Framed, Background, or Text.
  4. Animation: Set the Pointer’s animation style. Choose from Fade, Slide, Grow, Drop In, Drop Out, or None.
Overlay
  1. Background: Select Yes to have an overlay appear upon hovering over each image, or No for no overlay.
  2. Title: Choose which meta attribute to display as the overlay’s Title. Select from the image’s Title, Caption, Alt, Description, or None.
  3. Description: Choose which meta attribute to display as the overlay’s Description. Select from the image’s Title, Caption, Alt, Description, or None.

 

Style

Image
  1. Border Color: Choose the color of the image border, for Normal and Hover states
  2. Border Width: Choose the thickness of the border for Normal state only.
  3. Border Radius: Control the corner roundness of the image border, for Normal and Hover states.
  4. CSS Filters: Set CSS Filters, selecting from Blur, Brightness, Contrast and Saturation for Normal and Hover states.
  5. Hover Animation: Choose the animation of the image upon hover, selecting from None, Zoom In, Zoom Out, Move Left, Move Right, Move Up, or Move Down, for Normal and Hover states.
  6. Animation Duration (ms): Set the amount of time the animation takes, in milliseconds.
Overlay
  1. Overlay: Select the type of Overlay (Classic or Gradient) for the images’ Normal and Hover states.
  2. Color: Set the Overlay color or gradient colors for the images’ Normal and Hover states.
  3. Blend Mode: Select from multiple layer effects including Normal, Multiply, Screen, Overlay, etc. View Blend Mode demo
  4. Hover Animation: Choose the overlay’s Entrance or Exit animation upon hover. Select from Slide In Right, Slide In Left, Slide In Up, Slide In Down, Zoom In, Zoom Out, and Fade In. If Entrance Animation is chosen, images are shown full opacity in Normal state, with the overlay covering the image upon hover. If Exit Animation is chosen, the overlay covers the image in the Normal state, and is removed upon hover.
  5. Animation Duration (ms): Set the amount of time the animation takes, in milliseconds.
Content
  1. Alignment: Align the content to the left, right, or center
  2. Vertical Position: Align the content to the top, middle, or bottom
  3. Padding: Adjust the content’s padding
Title
  1. Color: Choose the Title’s color
  2. Typography: Set the typography options for the Title
  3. Spacing: Set the amount of space between the Title and the Description
Description
  1. Color: Choose the Description’s color
  2. Typography: Set the typography options for the Description
  1. Hover Animation: Choose the content’s Entrance, Reaction, or Exit Animation upon hover. For Entrance Animation, select from Slide In Right, Slide In Left, Slide In Up, Slide In Down, Zoom In, Zoom Out, and Fade In. For Reaction Animation, select from Grow, Shrink, Move Left, Move Right, Move Up, or Move Down. For Exit Animation, select from Slide Out Right, Slide Out Left, Slide Out Up, Slide Out Down, Zoom In, Zoom Out, and Fade Out.
  2. Animation Duration: Set the amount of time the animation takes, in milliseconds.
  3. Sequenced Animation: Set to Yes to have Title and Description animate in sequence. Set to No to have Title and Description animate at the same time.
Filter Bar 

These Filter Bar additional options become available only if Type: Multiple was chosen.

  1. Text Color: Choose the color of the Filter bar text for Normal, Hover, and Active states.
  2. Typography: Set the typography options for the Filter bar text.
  3. Pointer Color: Choose the color of the Filter bar pointer. Only available in Hover or Active states.
  4. Pointer Width: Select the thickness of the pointer.
  5. Space Between: Control the amount of space between Filter text items.
  6. Gap: Control the amount of space between the Filter text and the gallery images.

Nav Menu

The Nav Menu widget lets you use menus that you’ve created in WordPress and design them in whatever way you want.

Content

Layout

  1. Menu: Select a menu you’ve previously set up via Appearance > Menus
  2. Layout: Choose a Horizontal, Vertical, or Dropdown layout
  3. Align: Set the menu item alignment, either Left, Center, Right, or Justified
  4. Pointer: Select a pointer, either None, Underline, Double Line, Framed, Background, or Text
  5. Animation: Choose the pointer animation, either Fade, Slide, Grow, Drop In, Drop Out, or None
  6. Submenu Indicator: Choose the icon that indicates an item has submenu items, either None, Classic, Chevron, Angle, or Plus

Mobile Dropdown

  1. Breakpoint: Select at which point the mobile dropdown menu kicks in, either on Mobile, Tablet or None.
  2. Full Width: Select whether the mobile dropdown spans full width of the device, either Yes or No
  3. Align: Choose whether the mobile menu items are displayed on the left, or in the center, by selecting either Aside or Center
  4. Toggle Button: Show the Hamburger icon as the toggle button or not
  5. Toggle Align: Show the toggle button on the Left, Center, or Right of the screen

Style

Main Menu

Typography: Set the typography options for the menu item text.

The following items can be set independently for all three states: Normal, Hover, and Active. 

  1. Text Color: Choose the color of the menu item text
  2. Pointer Color: Choose the color of the pointer’s hover or active states. The normal state uses the color set as the Accent Color in the Default Colors settings.
  3. Pointer Width: Set the width of the pointer
  4. Horizontal Padding: Set the horizontal padding around the text of the menu items
  5. Vertical Padding: Set the vertical padding around the text of the menu items
  6. Space Between: Set the space between each menu item

Dropdown

On desktop, this will affect the submenu. On mobile this will affect the entire menu.

The following items can be set independently for all three states: Normal, Hover, and Active.

  1. Text Color: Choose the color of the menu item text
  2. Background Color: Choose the background color of the menu items
  3. Typography: Set the typography options for the menu items
  4. Border Type: Select a border type around the dropdown menu, choosing either None, Solid, Double, Dotted, Dashed, or Groove
  5. Width: Set the width of the border
  6. Color: Choose the color of the border
  7. Border Radius: Set the border radius to control corner roundness
  8. Box Shadow: Create a box shadow around the dropdown menu
  9. Horizontal Padding: Set the horizontal padding around the text of the menu items
  10. Vertical Padding: Set the vertical padding around the text of the menu items

Divider

  1. Border Type: Select a border type for the divider, choosing either None, Solid, Double, Dotted, Dashed, or Groove
  2. Color: If divider border is chosen, choose the color of the divider border
  3. Border Width: If divider border is chosen, set the width of the divider border
  4. Distance: Set the amount of space between the toggle and the dropdown menu

Toggle Button

The following items can be set independently for both the normal and hover states.

  1. Color: Choose the color of the toggle button icon
  2. Background Color: Choose the background color of the toggle button
  3. Size: Set the size of the toggle button
  4. Border Width: Set the width of the border around the toggle button
  5. Border Radius: Set the border radius of the toggle button

Accessibility Attributes

The Nav Menu Widget has the following accessibility attributes:

  • tabindex
  • aria-expanded
  • aria-hidden
  • role=”navigation”

Advanced

Set the Advanced options that are applicable to this widget

 

 

 

Search Form

The Search Form widget allows you to add a search bar anywhere on your website.

Content

Search Form

  1. Skin: Choose classic, minimal or full-screen pre-built styles
  2. Placeholder: Set the text that appears inside the search form

Button or Toggle

  1. Type: Choose to display an Icon or Custom Text on the button
  2. Icon or Text: If using an icon on the button, choose from a search or arrow icon. If using custom text, specify the text that will appear on the button
  3. Size: Adjust the size of the button or search icon
  4. Alignment (for full-screen skin only): Align the search icon to the left, center, or righ

Style

Input

  1. Overlay Color (for Full Screen skin only): Select the color of the full screen overlay
  2. Typography: Change the typography options of the search bar for both normal and focused modes
  3. Text color: Choose the color of the text
  4. Background color: Choose the background color
  5. Border color: Choose the border color
  6. Box-shadow: Give the search bar a box shadow
  7. Border size: Control the thickness of the border
  8. Border radius:  Set the border radius to control corner roundness

Button or Toggle

  1. Text color: Choose the color of the text
  2. Background color: Choose the background color of the button
  3. Icon size: Scale the icon size up and down
  4. Width: Adjust the width of the button
  5. Border Width: Control the thickness of the border
  6. Border Radius: Set the border radius to control corner roundness

Advanced

Set the Advanced options that are applicable to this widget

Site Map

The Sitemap widget creates a structured, organized, and accessible HTML sitemap of your website, which provides users and search engines easy, one-click access to your site’s pages.

Items

  1. Type: Select either Post Type or Taxonomy
  2. Source: Choose Posts, Pages, or any available custom post types if Post Type was selected. Choose Categories, Tags, Format, or any available custom taxonomies if Taxonomy was selected.
  3. Title: Enter a title
  4. Order By: Choose how to order the links. For Post Type selection, choose from Date, Title, Menu Order, or Random. For Taxonomy selection, choose from ID or Name.
  5. Order: Choose to list the links in ascending (ASC) or descending (DESC) order
  6. Hide Empty: If type chosen is Taxonomy, this option is available. Set to YES to hide if taxonomy is empty
  7. Hierarchical View: Set to YES to show hierarchical view (both parents and children).
  8. Max Depth: If Hierarchical View is set to YES, this option becomes available. Select depth of hierarchy to show, from 1 to 6, or ALL.

Additional Options

  1. Exclude: Choose to exclude the current post or manually search and select a post to exclude
  2. Avoid Duplicates: Choose Yes to avoid displaying duplicate posts that might appear in multiple categories
  3. Protected Posts: Choose to HIDE or SHOW protected posts

Style

List

  1. Indent: Set the amount of indentation within the lists
  2. Padding: Set the padding around the sitemap columns

Title

  1. Color: Choose the color of the title’s text
  2. Typography: Change the typography options for the title

List Item

  1. Color: Choose the color of the page links
  2. Typography: Change the typography options for the page links

Bullet

  1. Color: Choose the color of the list bullets
  2. Style: Select the type of list bullet, choosing from Disc, Circle, Square, or None
  3.  

Menu Cart

The Menu Cart widget enables you to place a WooCommerce cart icon in your menu or anywhere on your page. 

Content

Menu Icon

  1. Icon: Select the icon to show, choosing from Cart, Basket, or Bag, in Light, Medium or Solid designs.
  2. Items Indicator: Select the type of indicator to use for number of items in the cart, choosing from None, Bubble, or Plain
  3. Hide Empty: Slide to YES to hide items indicator if cart is empty
  4. Subtotal: Show or Hide the cart’s current subtotal
  5. Alignment: Align the menu cart to the left, right, or center

Style

Menu Icon

Normal | Hover

  1. Text Color: Choose the color of the subtotal text
  2. Icon Color: Choose the color of the cart icon
  3. Background Color: Choose the background color of the widget container
  4. Border Color: Choose the border color of the widget container
  5. Border Width: Control the thickness of the border around the widget container
  6. Border Radius: Set the border radius to control corner roundness
  7. Typography: Change the typography options for the subtotal text

Icon

  1. Size: Adjust the size of the cart icon
  2. Spacing: Adjust the amount of space between the cart icon and the subtotal text
  3. Padding: Change the padding settings of the widget container

Items Indicator

  1. Text Color: Choose the color of the number of items in the items indicator
  2. Background Color: Choose the background color of items indicator
  3. Distance: Set the distance between the icons indicator and the subtotal text

Cart

  1. Divider: Show or Hide the divider line after each item in the cart overlay
  2. Remove Item Icon: Show or Hide the icon that allows users to remove an item from the cart

Subtotal

  1. Color: Choose the color of the subtotal text in the cart overlay
  2. Typography: Change the typography options for the subtotal text in the cart overlay

Products

Product Title

  1. Color: Choose the color of the product title in the cart overlay
  2. Typography: Change the typography options for the product title in the cart overlay

Product Price

  1. Color: Choose the color of the product price in the cart overlay
  2. Typography: Change the typography options for the product price in the cart overlay

Divider

  1. Style: Select the style of the divider above and below the subtotal in the cart overlay, choosing from none, solid, double, dotted, dashed, or grooved
  2. Color: Choose the color of the subtotal divider in the cart overlay
  3. Weight: Set the thickness of the subtotal divider
  4. Spacing: Set the spacing between subtotal dividers and the subtotal text

Buttons

  1. Layout: Choose the layout of the buttons in the cart overlay, either Inline or Stacked.
  2. Space Between: Set the amount of space between the cart overlay buttons

View Cart

  1. Text Color: Choose the color of the Show Cart button text in the cart overlay
  2. Background Color: Choose the background color of the Show Cart button in the cart overlay
  3. Border Color: Choose the border color of the Show Cart button in the cart overlay
  4. Border Width: Control the thickness of the border around the Show Cart button in the cart overlay

Checkout

  1. Text Color: Choose the color of the Checkout button text in the cart overlay
  2. Background Color: Choose the background color of the Checkout button in the cart overlay
  3. Border Color: Choose the border color of the Checkout button in the cart overlay
  4. Border Width: Control the thickness of the border around the Checkout button text in the cart overlay
  5. Typography: Change the typography options for both buttons in the cart overlay
  6. Border Radius: Set the border radius for both buttons in the cart overlay

Mini Cart

To avoid conflicts with WooCommerce plugins or themes that may utilize their own Mini Cart templates, Elementor gives you the option to enable or disable Elementor’s version of the Mini Cart template. If WooCommerce is activated, follow these steps to enable or disable Elementor’s Mini Cart template.

  1. Go to Elementor > Settings > Integrations > WooCommerce
  2. Choose Enable for this option in order to replace the default WooCommerce mini cart template or your theme’s mini cart template with Elementor’s template. Unless manually set to Disable, this setting is automatically enabled once the Menu Cart widget is used anywhere on your site.
  3. Choose Disable to opt out of using Elementor’s Mini Cart template.
Whatsapp Facebook Instagram Youtube

Copyright @ 2020 |  | Koperasi Al-Najah (K.L) Berhad

Chinese (Simplified) Chinese (Simplified) English English Malay Malay