Nitro Elements | Document Categories

Spotlight

Spotlight is used to make animated image banner.

Options

Heading: type the heading for spotlight image
Link: insert a URL for your spotlight image
Normal image: upload normal image
Spotlight image: upload the spotlight image. This image will be displayed

Video

This element allows you to show a video anywhere on your live site. Here’s an example:

Video Source: Youtube or Vimeo
Link to video: enter video URL
Style
- Video Screen Preview
- Player Icon: choose icon color
- Image thumbnail: upload thumbnail
- Video width (px): enter video width number only
- Video align: 3 alignment styles
  - Left
  - Right
  - Center
Shadow: choose from 9 styles
Play in popup: when you press play, video will be played in a popup window

Nitro Button View Demo

This element allows you to add buttons to anywhere you like on a page.

Normal State

Content
- Button text
- Link: enter link URL and link title
General settings
Text style
- Font family: 2 options
  - Use theme default font family: use global font family settings. go to Typography on Live Customizer to change the default font family
  - Use custom font: pick up a font from the dropdown menu
- Font size (px): enter only font size number
- Font style: 2 styles
  - Normal
  - Italic
- Text transform
  - None: no text transformation
  - Uppercase
  - Capitalize
- Button alignment: 3 alignment styles
  - Left
  - Center
  - Right
- Color
Border settings
- Border width (px): only enter border width number
- Border styles: only available if border width >0px
  - Solid
  - Dashed
  - Dotted
  - Double
- Border radius (px): only enter border radius number
Spacing
- Line height: enter the line height with either px or %
  - Px: fix line height on all screen sizes
  - %: flexible line height on all screen sizes
- Padding left + right (px): enter the left and right padding number only. 2 possible cases
  - Enter only a number: the left and right padding number are the same
  - Enter one number for left padding and one number for right padding (e.g: 3-4)
- Letter spacing (px): enter only letter spacing number
- Margin top (px): enter only top margin number
- Margin right (px): enter only right margin number
- Margin bottom (px): enter only bottom margin number
- Margin left (px): enter only left margin number
Icon settings: check “Enable Icon” to display icon settings
- Icon Library: pick up an icon library
- Icon
- Color
- Position: 2 positions
  - Left
  - Right
- Icon size (px): enter only icon size number

Hover state

Text color
Border color
Background color
Icon color

Social

This element allows you to automatically generate image feed from your Dribbble, Flickr, and Instagram.

Network: 3image stream networks
- Dribbble
- Flickr
- Instagram

User ID: your image stream account ID
Instagram Access Token (enabled with Instagram network only): enter the token, generate the token here
Layout: 2 layouts

Masonry: enter number of items you want to set larger
Grid

Columns: choose number of columns to display image
Per Page: enter only number of images per page
Gutter Width (px): the space between 2 images, enter the gutter width number only
Enable shot info (disabled with Flickr network): show number of likes, comments, and image name

Info style: inside or outside image
Mask overlay: color of image when you hover mouse

Text color: color of info text
Enable Carousel: if you enable this, layout settings will be disabled
Item: enter number of items on the screen
Autoplay: autoplay image stream

Blog Post

This element allows you to display a section for blog posts anywhere on your live site.

Order by: 7 order typesRecent posts
- Post ID
- Title
- Last modified date
- Random order
- Number of comments
- Special post
Sort order: descending or ascendingExclude post: enter titles of posts you don’t want to show
Exclude post: enter titles of posts you don’t want to show
Note: with Order type “Special posts”: enter titles of posts you want to show
Layout: 6 layouts
- Standard
- Horizontal
- List
- Minimal
- Inner content
- Zigzag
Total posts: Enter total number of blog posts that you want to display. Enter “-1” to display all posts.
Number of columns displayed: choose from 1 to 6Gutter: drag to expand or narrow the space between 2 blog posts, Max gutter size is 100px.
Gutter: drag to expand or narrow the space between 2 blog posts, Max gutter size is 100px.
Enable slider (disabled for Zigzag layout): a tab for Slider settings will appear next to General tab

Slider settings

Enable Navigation
Enable Pagination
Autoplay
- Autoplay interval timeout: enter number only for time between autoplays, time unit is millisecond (ms)
- Pause on mouse hover

Display settings

Display excerpt
Display meta post
Show Read more
Display divider: choose color for divider
Heading font size: enter number only, size unit is px
Excerpt length by word: enter number of words from the post you want to display
Content alignment: 3 alignment styles
- Left
- Right
- Center

Pricing Table

A pricing table includes one or multiple pricing item(s). Each pricing item is a cell that contains your content. In each pricing item, there are a heading, a description text (only for some styles, and options).

General settings

Here is how to set up a Pricing Table:

Step 1: Add Pricing Table element, pick one from 4 styles
- Style 1
- Style 2
- Style 3
- Style 4
Step 2: Add Pricing Item: you can also edit, delete, duplicate, and change order of Pricing Items in a Pricing Table

Settings for pricing item

To set up a pricing item, you have to configure

Featured Item: checked item will have a different color setting
Heading
Description: disabled for Style 1
Price: enter price number only
Unit: enter pricing unit ($, USD, JPN, etc.)
Value: type value for each pricing item (e.g: month, day, week, package, etc.)
Show icon
Options: A section for options is considered as a checklist.
- Choose icon and add option text
- Add, duplicate, delete, change order of options
- Enable/disable/choose icon for options
Button text
Button link

Countdown

With this countdown element, you can put a countdown timer anywhere on your site.

Style: 2 styles
- Vertical
- Horizontal
Destination time: enter the ending time with year, month, and date
Background color
Number color
Time unit color: change color for time units (days, hours, mins, etc.)
Enable line
Space between timer (px): enter space number only

Social icons

With Social Icons element, you can add social network icons anywhere on your site.

Here are all settings for it:

General

Style: select a global style for all social icons. There are 7 icon styles:
- Default
- Square
- Circle
- Rounded
- Square Outline
- Circle Outline
- Rounded Outline
Display Multi Colors: when enabled, the icon’s color settings will be auto-selected as default branding color. No color customizations needed
Size: select a global size for all social icons. There are 3 sizes:

Small

Normal
Large

Note: For each icon style, there are different color settings

Default
- Icon Color
- Icon Hover Color
Square, Circle, Rounded
- Icon Color
- Background Color
- Icon Hover Color
- Background Hover Color
- Square Outline, Circle Outline, Rounded Outline
- Icon Color
- Border Color
- Icon Hover Color
- Border Hover Color

Social Network

Only when adding link for an icon, the icon will be displayed on live site.
(E.g: in order to display Facebook icon, you must have to add link to your Facebook fanpage)

Counter Up

Here is an example of using Counter Up sample on your live site.

Here are settings for Counter Up.

To display a Counter Up, you have to:

Enable/disable horizontal layout
Enable Icons
Add text and style for title
Add text and style for number
Add text and style for description

Horizontal layout

This is a counter up with horizontal layout.

To enable horizontal layout, click on the “Enable horizontal layout” checkbox.

Icons

Here is an icon on your counter up.

To enable icon, click on the “Enable Icon” checkbox. Then you can choose icon, or choose size and color for you icon.

Title

This is a title on your live site.

To edit title for your counter up, type your text here.

You can also change font size and color for the title right below.

Number

Here is a number on your counter up.

This number will be automatically counted up from 0 to a maximum number in settings. After reaching that maximum number, the counter up will be stopped.

You can enter the maximum number here.