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.

Heading

The Heading Widget allows you to create stylish title headings.

Content

 

Step 1 : Title–  Type your heading text.

Step 2 : Link– Link the heading to a URL

Step 3 : Size– Change the heading to Small, Medium, Large, XL or XXL

Step 4 : HTMLTag – Set the heading’s HTML tag to H1- H6, Div, Span or Paragraph

Step 5 : Alignment– Align the heading to the left, right, center, or justified

 
Style
 
  1. TextColor – Choose the color of the heading text
  2. Typography– Change the typography options for the heading text
  3. TextShadow – Add a shadow and blur to the heading text
  4. BlendMode – Select from multiple layer effects including Normal, Multiply, Screen, Overlay, etc.

Image

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.

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 – Optionally, add a caption to the bottom of the image. Choose to either create a new custom caption or use the current Attachment Caption from the image’s location in the WordPress Media Library.
  5. Link To – Set a link to a custom URL, media file, or no link. Choose “media file” to link directly to the location of the image within your media library. Choose “custom URL” to link to any page on any site. Choose “none” if you don’t want to add a link to the image at all.

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.

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.

Step 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.

Step 2 :

  • Columns: Select the number of columns to split the text into

Step 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

Video

Use the Video Widget to easily embed videos on your page.

  1. Source: Select the source of the video. Choose between Youtube, Vimeo, Dailymotion, or Self Hosted (which includes hosting on external servers)
  2. URL: Enter the URL of the video
  3. Start / End Time: Set Start and End time for your video. Leave blank for full length video

 

Video Options

 

Youtube

  1. Autoplay: Slide to YES to automatically play the video on page load
  2. Play on Mobile: This option only appears if Autoplay is set to Yes. Useful to allow iOS to autoplay the video.
  3. Mute: Slide to YES to Mute the video
  4. Loop: Slide to YES to Loop the video
  5. Player Controls: Show or Hide the Player Controls, such as Play/Pause, Volume, etc.
  6. Modest Branding: When Player Controls is set to YES, you can Hide the YouTube logo by sliding Modest Branding slider to YES
  7. Suggested Videos: Choose from “Current Video Channel” or “Any Video”
  8. Privacy Mode: Slide ON or OFF. When ON, Youtube won’t store information about visitors on your website unless they play the video

Vimeo

  1. Autoplay: Slide to YES to automatically play the video on page load
  2. Mute: Slide to YES to Mute the video
  3. Loop: Slide to YES to Loop the video
  4. Controls Color: Choose the color of the Player Controls, such as Play/Pause, etc.
  5. Intro Title: Show or Hide the Intro Title
  6. Intro Portrait: Show or Hide the Intro Portrait
  7. Intro Byline: Show or Hide the Intro Byline

Dailymotion

  1. Autoplay: Slide to YES to automatically play the video on page load
  2. Mute: Slide to YES to Mute the video
  3. Player Controls: Show or Hide the Player Controls, such as Play/Pause, Volume, etc.
  4. Video Info: Show or Hide the Video Info, such as the video’s title
  5. Logo: Show or Hide the Video Logo
  6. Controls Color: Choose the color of the Player Controls, such as Play/Pause, etc.

Self Hosted

  1. Autoplay: Slide to YES to automatically play the video on page load
  2. Mute: Slide to YES to Mute the video
  3. Loop: Slide to YES to Loop the video
  4. Player Controls: Show or Hide the Player Controls, such as Play/Pause, Volume, etc.
  5. Download Button: Show or Hide the Download Button (applicable for Chrome only)

Button

The Button Widget helps you easily design and customize buttons without the need for any other plugins or shortcodes.

  1. Type: Select from 5 styles of buttons to begin your design. Choose from DefaultInfoSuccessWarning, or Danger
  2. Text: Enter the button’s text
  3. Link: Set the URL for the button’s link. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link
  4. Alignment: Align the button to the left, center, right, or justified in relation to its column.
  5. Size: Select the preset button sizes, from Extra Small to Extra Large (see padding default details at the bottom of this document)
  6. Icon: Select a FontAwesome icon to display on the button
  7. Icon Position: Set the icon to appear before or after the button text
  8. Icon Spacing: Adjust the amount of space between the icon and the button text
  9. Button ID: (Optional) Assign a unique button ID to use for situations such as Google Analytics events

Style

 

  1. Typography: Change the default typography options for the button’s text
  2. Text Shadow: Add a shadow and blur to the button’s text
  3. Text Color: Select the color of the button’s text
  4. Background Color: Select the button’s background color for both Normal and Hover states
  5. Hover Animation: Click on the Hover tab to set a Hover Animation
  6. Border Type: Select the type of border to use around the button
  7. Width: Control the thickness of the border around the button
  8. Color: Choose the border’s color
  9. Border Radius: Set the border radius to control corner roundness
  10. Box Shadow: Set options to apply a box shadow on the button
  11. Padding: Change the padding settings of the button

Divider

The Divider Widget allows you to add styled horizontal lines that divide your content. 

Content
  1. Style: Choose between many classic and patterned styles, such as solid, curly, wavy, tribal patterns, arrows, pluses and more.
  2. Width: Control the width of the divider as percentage from 0 to 100 percent.
  3. Alignment: Align the divider to the left, center or right of the page.
  4. Add Element: Select from NoneText, or Icon. Select Text or Icon allows you to either enter the Text to be included or select or upload an icon from the Icon Library.
Style

 

Divider
  1. Color: Choose the color of the divider
  2. Size: Set the size/height of the divider, from 1 to 100, in either pixels or as a percentage
  3. Amount: Set the number of patterned elements to show
  4. Gap: Slide to set the gap above and below the divider, from 1 to 50
Text
  1. Color: Choose the text color
  2. Typography: Set the typography options for the text
  3. Position: Choose the position of the text in relation to the divider, selecting from LeftCenter, or Right
  4. Spacing: Slide to add space between the text and the divider line, from 1 to 50
Icon

There are 3 different VIEWS for the widget: DefaultStacked, and Framed. Each comes with its own set of options.

 

VIEW: Default
  1. Size: Set the size of the icon
  2. Primary Color: Choose the icon color
  3. Position: Choose the position of the icon in relation to the divider, selecting from LeftCenter, or Right
  4. Spacing: Slide to add space between the icon and the divider line, from 1 to 50
  5. Rotate: Slide to select the number of degrees to rotate the icon, from 0 to 360
VIEW: Stacked
  1. Size: Set the size of the icon
  2. Padding: Set the padding around the icon
  3. Primary Color: Set the color of the stack background
  4. Secondary Color: Set the color of the icon
  5. Position: Choose the position of the icon in relation to the divider, selecting from LeftCenter, or Right
  6. Spacing: Slide to add space between the icon and the divider line, from 1 to 50
  7. Rotate: Slide to select the number of degrees to rotate the icon, from 0 to 360
  8. Border Radius: Set the border radius of the stack background to achieve rounded corners are completely round stacks
VIEW: Framed
  1. Size: Set the size of the icon
  2. Padding: Set the padding around the icon
  3. Primary Color: Set the color of the frame border
  4. Secondary Color: Set the color of the icon
  5. Position: Choose the position of the icon in relation to the divider, selecting from LeftCenter, or Right
  6. Spacing: Slide to add space between the icon and the divider line, from 1 to 50
  7. Rotate: Slide to select the number of degrees to rotate the icon, from 0 to 360
  8. Border Width: Control the thickness of the frame border
  9. Border Radius: Set the border radius of the frame border to achieve rounded corners are completely round frames

Spacer

The Spacer Widget creates a block of space anywhere on your page. You can fill this block of space with a color or an image. You can use it to create cool shapes and elements as well.

  1. Space: Set the amount of vertical space, in pixels.

Google Maps

The Google Maps widget is a really simple way to embed Google Maps in your website. This is very useful for contact pages, so your visitors can know where you are located.

Content
  1. Location: Enter the location you wish to display
  2. Zoom: Set the zoom level of the map
  3. Height: Set the height of the map
Style
  1. CSS Filters: Adjust the image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings.
  2. Transition Duration (only on Hover): Set the amount of time to transition from one filter setting to the other when hovering over the map.

Icon

The Icon widget is useful for displaying FontAwesome icons in numerous styles on your page.

There are 3 different views for the widget: DefaultStacked, and Framed.
If Default view is chosen, the following options are available:

Content
  1. Icon: Choose from a list of Font Awesome icons
  2. View: Choose between default, stacked or framed
  3. Link: Enter the URL for the item’s link. Click the Link Options  cog  to either add rel=nofollow to the link or to open the link in a new window.
  4. Alignment: Align the icon to left, center or right.
Style

 

Icon

 

Normal
  1. Primary: Choose the main and secondary colors for the icon
  2. Size: Increase or decrease the size of the icon
  3. Rotate: Rotate the icon

Hover

  1. Primary Color: Set colors for the hover
  2. Hover Animation: Set any animation for the hover state
  3. Size: Set the exact size of the icon
  4. Rotate: Rotate the icon up to 360 degrees

If Stacked or Framed view is chosen, the following options are available:

Content
  1. Icon: Choose from a list of Font Awesome icons
  2. View: Choose between default, stacked or framed
  3. Shape: Choose the shape of the stack or frame, either Circle or Square
  4. Link: Enter the URL for the item’s link. Click the Link Options cog  to either add rel=nofollow to the link or to open the link in a new window.
  5. Alignment: Align the icon to left, center or right.

Style

Icon

 

Normal

  1. Primary Color: Choose the primary color (the background or frame) color for the icon
  2. Secondary Color: Choose the secondary color, which is the color of the icon itself
  3. Padding: Set the padding around the icon to control the size of the stack or frame
  4. Size: Set the size of the icon.
  5. Rotate: Rotate the icon up to 360 degrees
  6. Border Radius: Set the border radius to control the corner roundness of the stack or frame

Hover

  1. Primary Color: Choose the primary color (the background or frame) color for the icon
  2. Secondary Color: Choose the secondary color, which is the color of the icon itself
  3. Hover Animation: Choose an animation effect when hovering over the icon, such as Grow, Pulse, Skew, etc.
  4. Padding: Set the padding around the icon to control the size of the stack or frame
  5. Size: Set the size of the icon.
  6. Rotate: Rotate the icon up to 360 degrees
  7. Border Radius: Set the border radius to control the corner roundness of the stack or frame