• Getting Started
• Installing Recommended/Required Plugins
• Installing Demo Data
• Working with plugin widgets
• How to customize widgets output
• Heading Widget
• Services Widget
• Team Members
• Statistics Widgets
• Testimonials Widgets
• Posts Carousel
• Carousel Widget
• Posts Grid
• Clients
• Pricing Table
• Buttons
• Icon List
• Hero Header
• Tabs and Accordions
• Image Slider – Pro!
• Image/Video Gallery – Pro!
• Image/Video Carousel – Pro!
• FAQ Widget - Pro!
• Features Widget - Pro!

Getting Started Back to top

Thanks for choosing our plugin for SiteOrigin widgets. This help file aims to provide you with all the information you need to make the best use of this powerful plugin. The aim of the plugin to make the task of building a website effortless and pleasurable. Towards that end, we have built a number of widgets most commonly used across most of the websites of small businesses, corporates, design agencies, freelancers, artists etc.

Do follow the steps below to get started -

1. Install and activate the required plugin SiteOrigin Widgets Bundle.
2. Make sure you deactivate the free plugin Livemesh SiteOrigin Widgets upon installing the premium version.
3. Unzip the downloaded livemesh-siteorigin-widgets-pro.zip file and upload to the /wp-content/plugins/ directory or upload the plugin zip with the help of Plugins→Installed Plugins→Add New button.
   Activate the plugin through the 'Plugins' menu in WordPress. If you are viewing this help page in WordPress admin under Livemesh Widgets→Documentation, you have already activated the plugin.
4. Enable all the widgets you need from . Alternatively you can visit and check the box 'Activate all plugin widgets' option - that will activate all of the widgets part of the plugin. The widgets can be selectively deactivated later in .
5. If you need page builder functions, install and activate the optional plugin Page Builder by SiteOrigin. To get most of this plugin, we highly recommend you install the page builder.
6. If you plan to build a portfolio site and plan to use Posts Grid widget for the same, install and activate the optional plugin Portfolio Post Type. The portfolio examples of Posts Grid widget is built using custom post type registered by this plugin.
7. Optionally, if you have premium version of the plugin installed, you can import the sample data that replicates the demo site for you by importing the file sample-data.xml file located in the plugin directory. The import option is available under in WordPress admin.

---

Installing Recommended/Required Plugins Back to top

Below is a list of recommended plugins to install that will help you get the most out of this plugin. Although many of these plugins are optional, we recommend that you install these popular plugins if you plan to install the demo data and get most out of this plugin. The demo site and the sample data provided with the premium version of the plugin utilizes all of these plugins including the SiteOrigin Page Builder and the Portfolio Post type plugin.

These plugins are also listed in the Plugins tab of this help file under Livemesh Widgets → Documentation, and you can install the plugins directly from there.

• SiteOrigin Widgets Bundle is a powerful framework for building WordPress widgets with support for advanced forms, unlimited colors and 1500+ icons. Widgets built using this framework can be used in a page builder page or any widgetized area of your site like the sidebar or footer.

  All of the widgets part of Livemesh SiteOrigin Widgets plugin were created using this framework and hence this plugin must be installed and activated on the site for this plugin to function.

  More about SiteOrigin Widgets Bundle →

• SiteOrigin Page Builder is the most popular page builder plugin for WordPress. It makes it easy to create responsive column based content, using WordPress widgets including those created by Livemesh SiteOrigin widgets plugin. All of the pages of our demo site for the plugin have been built using this page builder. You should install and activate this plugin if you plan to replicate the plugin demo site by importing the sample data provided.

  More about SiteOrigin Page Builder →

• Portfolio Post Type is a free plugin that registers a custom post type for portfolio items. It also registers separate portfolio taxonomies for tags and categories. The Portfolio grid instances showcased on our demo site was built using custom post types registered by Portfolio Post Type plugin.

  More about Portfolio Post Type →

---

Installing Demo Data Back to top

If you have premium version of the plugin installed, you can install the demo data to replicate the plugin demo site to get a head start on building your site. Installing demo data reduces the learning curve associated with trying out the powerful widgets part of this plugin.

The sample data imports the pages part of the demo site. Once you are done with playing around the widgets and feel comfortable creating/configuring them, you can delete the unwanted pages/posts that you may not need.

Prior to installing demo data, make sure you have recommended plugins installed as mentioned above in the Recommended Plugins section.

The demo site sample-data.xml file is located in the plugin directory created after unzipping the premium bundle. Once you have access to the sample data file, you can install the demo site by visiting and click Choose File. Upload the xml file and follow the steps to import. When the demo data is finished importing, you will have many pages that contain widgets configured in them.

---

Working with plugin widgets Back to top

• If you plan to use the SiteOrigin Page Builder to build your site (recommended) and new to its functions, make sure you checkout the documentation of the page builder before starting to use this plugin.
• As mentioned earlier, Livemesh SiteOrigin Widgets plugin is built on a powerful widget builder framework of SiteOrigin Widgets Bundle plugin. If you need more information about this plugin or need help with it, go through the SiteOrigin Widgets Bundle documentation.
• Once the Livemesh SiteOrigin Widgets plugin is activated, you should see a menu item in WordPress admin with three sections - Settings, Documentation and .

  

  - The settings screen for the plugin is self-documenting with minimal options. If you need the plugin widgets auto activated by default, you can check the option 'Activate all plugin widgets' option. This will avoid you having to go to screen (see below) and activate the plugin widgets individually. Once auto activate is enabled via Settings, you can still deactivate widgets by reaching Plugins→SiteOrigin Widgets.

• - This is the admin page for deactivation and activation of all widgets created using the framework built by SiteOrigin Widgets Bundle. If you have the option 'Activate all plugin widgets' option in screen above unchecked, you will need to activate each of the widgets defined by the plugin.

  To look for widgets defined by the Livemesh SiteOrigin Widgets plugin, search for widgets starting with name Livemesh in the SiteOrigin Widgets Bundle screen.

  

• Once a SiteOrigin widget is activated (or auto activated), the widgets are available in screen for drag and drop into widgetized areas defined by the theme activated on your site.

  

• The activated widgets also become available for drag and drop in the SiteOrigin Page builder. In the Page edit window, click on the 'Page Builder' tab to bring up the page builder controls on the page edit screen.

  

• To add a Livemesh widget, just click on the 'Add Widget' button to bring up the 'Add New Widget' popup screen of the page builder. The plugin widgets are grouped under 'Livemesh SiteOrigin Widgets' tab on the left. Click on a widget listed on the right closes the popup and adds the widget to the page builder.

  

• Hovering over the widget added to the page builder, you can view the Edit link. Clicking the widget also brings up the edit/configure screen of a widget. Most of the widget options are self-documented but additional help is provided in the below sections for each of the Livemesh widgets.

  Once the data required for configuring a widget is entered, you can preview the changes by clicking on the 'Preview' button.

  Click on the 'Done' button once the required data is provided for the widget and you are done with previewing.

  

• After you hit the Update or Publish button on the page,the widget is then ready for viewing on the frontend page.

  

---

How to customize output generated by widgets Back to top

The strength of this plugin over many others is that this plugin lets you customize almost any piece of HTML generated by an widget part of the plugin. You can move around or modify the output elements to suit your needs - change HTML tags, change sequence of information (e.g., place image at the bottom of the post in a grid), add new CSS classes of your own, add branding material, delete unneeded output element (e.g. remove post meta information), modify information (e.g., truncate description or excerpt generated) etc. with the help of templates and filters provided by the plugin.

Following are the two ways to customize the output of an widget part of the plugin.

• Filters are hooks that are provided at almost every customization opportunity that presents itself as the widget renders the widgets by parsing the settings input by the user in the SiteOrigin editor. About 200+ filters have been provided to help users customize almost any information output by the widgets of this plugin.

  To locate the filters, the users are encouraged to have a look at the PHP code located in the tpl/default.php file of the respective widget folder located in includes/widgets/ folder.

  More about Filters - a guide for non-developers →

• Templates let you modify the HTML generated by an widget by placing an appropriately named PHP file in a folder named 'siteorigin-widgets' in your child theme (or parent theme).

  Following are the names of the files that plugin looks for to customize the respective widget rendering - clients.php, carousel.php, heading.php, odometers.php, piecharts.php, posts-grid.php, posts-carousel.php, pricing-table.php, services.php, stats-bars.php, team-members.php, testimonials.php, testimonials-slider.php, accordion.php, button.php, faq.php, features.php, gallery.php, gallery-carousel.php, icon-list.php, image-slider.php, posts-block.php, services-carousel.php, slider.php, tabs.php.

  Once a particular template file is found in the theme folder, the corresponding widget rendering code is replaced with that in the template PHP file. The template files are provided with $settings variable to help read the widget settings and then display the output. The current output generated by the plugin widget can be seen in the tpl/default.php file of the widgets folder located in includes/widgets/ folder. In most cases, it is recommended to copy over the rendering code from the tpl/default.php file to the template file and modify the same to achieve the desired customization. A basic knowledge of PHP and HTML is all that is required to customize an widget.

• Module Templates (Pro Feature) are PHP files which can be placed in the siteorigin-widgets/modules/ of the child theme to customize the posts grid item information part of posts grid/block widgets output by module files located in includes/blocks/modules/ folder of the premium version of the plugin. The template files should be named as module-1.php, module-2.php .... , module-12.php, module-13.php to match the corresponding files located in the includes/blocks/modules folder. Only HTML part of render() function needs to be customized in the module template files. The users are recommended to copy over the rendering code part of this function to the corresponding template file and then customize it to their needs.

The below sections provide help on each of the widgets built as part of Livemesh SiteOrigin Widgets plugin.

---

Heading Widget Back to top

The heading widget is perhaps the most frequently used widget on a page since it displays a heading at the top of a section.

It comes in three styles – Style 1, Style 2 and Style 3 which allow variations of headings displayed in various sections.

The heading consists of the main heading text which is renders as one of the HTML heading tags on the frontend. Additionally, a short text is displayed below the heading and some of the heading styles allow you to input a subtitle which is usually displayed on top of the main heading title.

You can choose to align the heading left, right or center with center being the default alignment.

The premium version of the plugin allows selection of a custom font for the heading title. You may choose one of 500+ custom fonts hosted in the Google Fonts library. By default, the heading font used by the theme is used for main heading title.

---

Services Widget Back to top

Many agencies, freelancers, corporates, products/apps require capturing the services provided by the agency or the features of a product. The services widget is designed to help users capture these services or features in a multi-column grid.

The widget supports about 3 different styles (with 2 additional styles in premium version of the plugin) and each of these styles can be customized further by choosing the type of icon desired to represent the service – a font icon or an custom image icon. While the choice of font icons is huge in number and perhaps sufficient for most common services, the icon images can help present the unique nature of the services offered.

Each of the service requires you to input a title for the service/feature and a short description of the service offered or the product feature. Additionally, each service allows you to enter a font icon or an icon image file to represent that service.

The premium version of the plugin allows you specify a custom font size, font color and and hover color for the font icon along with providing two additional styles of services/features.

Services widget supports the following options –

• Columns per row – Number of services to display per row of services.
• Icon Custom Size – If the icon chosen for services is icon font, you can specify a custom size for the font icon in pixels.
• Icon Custom Color – Specify a custom color for the font icon.
• Icon Custom Hover Color – Specify a custom hover color for the font icon.

---

Team Members Back to top

This widget provides an easy way to capture the team members of your organization or an agency. The details captured include team member name, position, a short description and the email plus social profile of the individual team members.

Two different styles are provided with more styles planned in the premium version of the plugin. Most of the styles display the team members in a multi-column grid. The option to specify the number of columns is provided that helps to control the number of team members displayed per row of the team members.

---

Statistics Widgets Back to top

The plugin features a number of widgets that help display statistical information in the form of odometers, piecharts and stats bars. The premium version of the plugin also includes a countdown widget that displays a countdown timer for planned events such as product launches or website going live.

Most of these widgets are designed to animate the display of the statistical information or numbers when the users scroll down to the section containing the widget.

Odometers

This widget displays one or more animated odometer statistics in a multi-column grid. This number statistic requires a start and an end value with a title and icon providing the information about what the number represents – like a download number or number of products sold or customers gained.

The widget animates from the start value to the end value when the user scrolls down to the section. You can control the number of such odometers displayed per row.

Stats Bars

Stats Bars capture percentage statistics like coverage area, skills gained, survey findings, usage statistics etc. that typically require bar charts to represent them. Each statistical item requires a percentage value, a title describing the number. The user can choose to display the bar charts in multiple or single color with the help of color choice available with each value input.

The widget animates from the zero to the percentage value set for the item when the user scrolls down to the section containing the widget. The bars are placed one below the other horizontally.

Piecharts

Piecharts provide an alternative way to display percentage stats. When the users scrolls down and the chart becomes visible, the widget animates from zero to percentage value provided for the statistic. A bar of user chosen color moves along a track to display the percentage information. An option to specify the number of charts displayed per row is provided.

Countdown  - Pro!

This widget displays a countdown timer for an end date and time specified by the user. This is like a clock ticking to signal the arrival of an event planned for a future date. The user just provides the end date time, a label for the event and widget displays the time remaining in days, hours, minutes and seconds, with the timer updated every second on the page.

---

Testimonials Widgets Back to top

The plugin features two widgets for capturing testimonials received for your product or business or services. Most agencies, corporates, small businesses, freelancers and products/apps require testimonials to displayed prominently on the site to help convert visitors to customers. The two widgets provided are elegantly designed to achieve greater conversion rate.

The testimonials information include details about the person/company endorsing the product/service; details like name, company, website of this person/organization along with an image representing this person/entity.

Testimonials

The regular testimonials widget displays multiple testimonials in a row with the user having the option to specify the number of items per row. This is useful if you need a large number of testimonials to be visible instantly when the user scrolls down to view the testimonials section.

Testimonials Slider

The testimonials slider widget is useful for display of endorsements/recommendations with large amount of text for each testimonial. The slider displays the testimonials as a slideshow with multiple widget options provided to control/customize this slideshow – options like speed of switching, speed of animation, whether to pause the slideshow on hover, controls needed for manual navigation by the user etc. The slider is completely responsive and touch swipe controls available for easy navigation on smartphones/tablets.

---

Posts Carousel Back to top

The responsive carousel helps display posts or any custom post types like your portfolio entries with controls available for easy navigation of the items displayed. The widget features a Posts Query window to help choose posts or custom posts to display. This powerful tool has number of fields to control what gets displayed and in what order with an additional field available to provide query arguments explained in the codex page.

The Posts Query tool has the following options for filtering posts –

1. Post Type – Select the custom post type that you need the widget for. By default “All” is selected.
2. Post In – This field enabled you to specify the post ids of the posts or custom post types you would like to include in your widget. If you do not know the IDs, you can click on the ‘Select Posts’ button to bring up popup that can be used to search and select the specific posts of the post type selected above.
3. Taxonomies – If you need to filter the posts by specific category or taxonomy terms, you can specific the same here. The field autocompletes the terms you type in here.
4. Date Range – Specific a date range for filtering the posts – only those posts published during this period will be chosen for display by the widget.
5. Order By – Lets you decide on how you want the posts to be ordered – by Published Date, by Post ID, by Menu Order etc. and whether you want the ordering by Ascending or Descending.
6. Posts Per Page – Set the number of posts you wish you display in the widget. If the widget does not support pagination, the number of posts chosen by the limited by the number specified here. This is also the number of posts to display per page when the widget supports pagination as is the case with Posts Grid widget. Choosing the value zero makes the widget all the selected posts.
7. Sticky Posts – Tell the widget to ignore, exclude or include the sticky posts.
8. Additional – You may specify any additional query parameters here as documented in the codex page. These parameters will be applied in addition to the query parameters generated from the values specified in the above fields.

The posts carousel has numerous other options to control the display of posts or custom post types. Some of these are –

• Choose Taxonomy to display info – When the post info is displayed, the specific taxonomy you want the info to use. For example, choosing category will display category information for a posts while choosing ‘post_tag’ would display the tag information for posts.
• Link images to Posts – Make the images link to the posts or custom post types they represent.
• Display post titles – Checking this box will display post title below the featured image for the posts or custom post type.
• Display post excerpt/summary – Display summary information for the posts below the featured image and post title.
• Post Meta – Display post meta information like published date, author name, taxonomy information below the posts. The specific taxonomy chosen above under “Choose Taxonomy to display info” will be used for display taxonomy information.

Carousel Settings – This section has options that control how the carousel is displayed. Options include autoplay speed, gutter value between post items in various resolutions, navigation controls for carousel, number of columns or items to display before making the user to scroll for additional items etc.

• Prev/Next Arrows – Display navigation for the carousel.
• Show dot indicators for navigation – Display control navigation or pagination controls for the carousel.
• Autoplay – Display carousel as a slideshow.
• Autoplay speed in ms – The time between display of each page of images when Autoplay option is enabled.
• Autoplay animation speed in ms – The time taken for animation that moves the carousel to next or previous page of items.
• Pause on mouse hover – Pause the slideshow if the user has mouse hovered over the carousel contents.
• Columns per row – Number of gallery items visible at any given point of time without scrolling.
• Columns to scroll – With each scroll action – using the prev/next arrows or the dotted navigation, specify the number of items to scroll for each invocation of the navigation controls.
• Gutter – The spacing in pixels between images/videos in the carousel.

---

Carousel Back to top

Livemesh Carousel is a generic carousel of custom HTML content of your choice. Possibilities are endless – image carousels with textual content describing the images, video carousels, event carousels with link to the events, a carousel of team of volunteers, a collection of books sold on Amazon etc.

If you need a carousel of custom content HTML of your choice, this widget helps achieve the same. For the HTML content, you will need to provide your own custom CSS under Settings for the carousel. While posts carousel helps you display carousel items derived from posts or custom post types, this widget lets you display any well-formed HTML content as items in a carousel. You may use the WordPress visual editor to construct the required content.

The section ‘Carousel Settings’ has options that control how the carousel is displayed. Options include autoplay speed, gutter value between post items in various resolutions, navigation controls for carousel, number of columns or items to display before making the user to scroll for additional items etc. The carousel settings are explained in the help section above for Posts Carousel.

---

Posts Grid Back to top

Perhaps the most popular and most important of all widgets part of all widgets part of this plugin, Posts Grid helps you build a multi-column grid of posts or custom post types. The posts displayed are filterable by taxonomy terms.

Using the Grid widget, you can construct a portfolio of your work/services/products. We recommend you use the popular plugin – https://wordpress.org/plugins/portfolio-post-type/ for building a collection of portfolio entries. Once the portfolio entries are in place, make sure you select Portfolio Post type under Post Type entry in Build Tools window as explained below.

The premium version of the plugin has support for pagination, lazy load with load more button and lightbox option for images. The additional posts are loaded via AJAX when the user navigates through the pages populated or when the user hits the Load More button.

The widget features a Posts Query window to help choose posts or custom posts to display. This powerful tool has number of fields to control what gets displayed and in what order with an additional field available to provide query arguments explained in the codex page.

The Posts Query tool has the following options for filtering posts –

1. Post Type – Select the custom post type that you need the widget for. By default “All” is selected. To construct a portfolio of your work, choose ‘Portfolio’ as your post type if you have the Portfolio Post Type activated and portfolio entries created.To construct a grid of blog posts, choose Post as your Post Type.
2. Post In – This field enabled you to specify the post ids of the posts or custom post types you would like to include in your widget. If you do not know the IDs, you can click on the ‘Select Posts’ button to bring up popup that can be used to search and select the specific posts of the post type selected above.
3. Taxonomies – If you need to filter the posts by specific category or taxonomy terms, you can specific the same here. The field autocompletes the terms you type in here.
4. Date Range – Specific a date range for filtering the posts – only those posts published during this period will be chosen for display by the widget.
5. Order By – Lets you decide on how you want the posts to be ordered – by Published Date, by Post ID, by Menu Order etc. and whether you want the ordering by Ascending or Descending.
6. Posts Per Page – Set the number of posts you wish you display in the widget. If the widget does not support pagination, the number of posts chosen by the limited by the number specified here. This is also the number of posts to display per page when the widget supports pagination as is the case with Posts Grid widget. Choosing the value zero makes the widget all the selected posts.
7. Sticky Posts – Tell the widget to ignore, exclude or include the sticky posts.
8. Additional – You may specify any additional query parameters here as documented in the codex page. These parameters will be applied in addition to the query parameters generated from the values specified in the above fields.

The grid widget has numerous other options to control the display of posts or custom post types. Some of these are –

• Choose Taxonomy to display and filter on – The terms of this taxonomy chosen will be used for filtering the posts if ‘Filterable’ option is checked. When the post info is displayed, the specific taxonomy you want the info to use. For example, choosing category will make the posts filterable on category while choosing ‘post_tag’ would make the posts filterable by post tags instead of category.
• Choose a Layout for the grid – You may choose Masonry or Fit Rows layout for the grid.
• Pagination options (Pro!)– Choose pagination type or choose None if no pagination is desired. If you choose Paged or Load More option, make sure the ‘Post per page’ field value is set in the Build Query window to control number of posts to display per page.
  – If the Pagination option chosen is Paged, the grid displays a paginated grid of entries with links to various pages displayed at the bottom of the grid, provided sufficient number of entries of this post type has been created by the user and the Posts Per Page value is set to a lower value than the number of entries created.
  – If the Pagination option chosen is Load More, the grid displays a Load More button below the grid of posts/portfolio with an option count of remaining posts/post types yet to loaded. When the users hits the Load More button, a number of posts/portfolio entries equal to ‘Posts per Page’ value will be lazy loaded into the widget via AJAX. Upon loading all of the remaining entries, the Load More button is no longer shown.
  Do check the option ‘Display count of posts yet to be loaded with the Load More button’ to display the remaining post count with the Load More button.
• Link images to Posts/Portfolio – Make the post images link to the posts or custom post types they represent.
• Enable Lightbox Gallery (Pro!)– If checked, the images part of the grid entries will have a lightbox option enabled to display a gallery of post images in a popup display.
• Display post/project titles – Checking this box will display post/portfolio entry title below the featured image for the posts or custom post type.
• Display post/portfolio excerpt/summary – Display summary information for the posts/portfolio items below the featured image and post title.
• Post Meta – Display post meta information like published date, author name, taxonomy information below the posts. The specific taxonomy chosen above under “Choose Taxonomy to display and filter on” will be used for display taxonomy information.
• Columns per row – The number of posts/portfolio items to display in each row on desktop.
• Gutter options – The spacing in pixels between each entry in the grid. If you need a packed layout, specify zero here.

---

Clients Back to top

Whether you are freelancer or run a small business, agency or represent a big corporate house, you have a list of clients that you have worked with. This widget lets you create a list of these clients with banner images representing these clients.

For each of the client, you provide a client name, a banner image for the client and a URL for their website. The client name is shown on user hovering over the banner image and title text is optionally a link pointing to the website of the client, if that link is provided by the user.

The collection of clients will be displayed in a multi-column grid. The ‘Columns per Row’ option lets you control the number of client entries per row of clients displayed.

---

Pricing Table Back to top

The pricing plans offered by your business can be captured with pricing plan widget. The pricing plans are displayed in a multi-column grid.

For each of the pricing plan, provide the following information –

• Pricing Plan Title – The title for the pricing plan like Standard, Premium, Developer etc.
• Tagline Text – Provide any subtitle or taglines like “Most Popular”, “Best Value”, “Best Selling”, “Most Flexible” etc. that you would like to use for this pricing plan. Usually displayed above the pricing plan title.
• Image – Optional image or icon to represent the pricing plan.
• Price Tag – This is where you specify the actual price tag for the plan along with the currency. HTML is allowed.
• Text for Pricing Link/Button – Specify the text for the link or a button displayed at the bottom of the pricing plan. This link takes the user to the purchase page.
• URL for the Pricing link/button – Provide the target URL for the link or the button shown for this pricing plan. This link takes the user to the purchase page. Check the option ‘Open Button URL in a new window’ if you need the link to open the target page in a new tab or window of the browser.
• Highlight Pricing Plan – Specify if you want to highlight the pricing plan. This would be most likely plan your user would choose to sign up for.
• Pricing Columns per row – The number of pricing plans to display per row of plans. Most businesses choose to fit in all of their plans into a single row.

---

Buttons Back to top

The plugin lets you create buttons of multiple colors that you would use in your site. The supported colors are Orange, Blue, Teal, Cyan, Green, Pink, Black, Red, Transparent and Semi Transparent (for dark backgrounds). You can choose a custom color and custom hover color too for the button to create a button of your chosen color.

You may choose to create a button of Default color which is the color derived from the Theme Color set in the plugin options.

Additional options provided are button size, rounded and alignment – center, right, left and None.

You can choose to display an icon along with the button text. The icon can be a icon font or an image.

The widget options are mostly self-explanatory and you can view a live preview of the buttons here.

---

Icon List Back to top

The icon list widget is extremely useful for creating a list of icons with optional links to sites or pages that the icons represent. Examples include social media profiles, icon lists representing payment options or download platforms or a quick summary of services.

Each of the icons part of a list have a title, optional target URL and the icon itself can be a font icon or an custom image. The title for the icon is displayed as a tooltip on mouse hover.

Following options are available –

• Icon/Image size in pixels – Custom size of the icons displayed.
• Icon color – If the icons chosen are font icons, you may specify a custom color for the icons.
• Icon hover color – The color of the font icons on mouse hover.
• Open the links in new window – If a target URL is specified for a link, whether the links should open in a new window.
• Alignment – The icon list can be chosen to align at the center, left, right of it’s position in a page.

---

Hero Header Back to top

Hero Headers are popular way to drive across a message, market your products or work, create a call to action for the user etc. Hero headers are often used at the top of a page. With the Hero Image widget, you can display hero header content with option to set HTML5/YouTube video or parallax image background.

The options include –

Header Type – The widget provides option of a built-in standard header content and a custom one where you provide the HTML for the header and the required CSS to style the HTML of the header content. While standard header should meet the requirements of most sites, the custom one is the one to choose for creating more creative headlines.

The standard header consists of following –

• Header text – The heading title for the hero header, displayed as a Heading tag on the frontend.
• Heading Font (Pro!) – The custom font for the header. The user can choose from one of the 500+ fonts from the popular Google Fonts library.
• Sub-heading text(Optional) – A small sized subheading displayed above the main heading.
• Button text – If the hero header represents a call to action or simply want to provide to another page with related content, you will need a button to be displayed below the main heading. You can provide the text for the button. Examples include ‘Purchase Now’, ‘Contact Us’ etc.
• Button URL – The URL to which the button anchor points to.
• Open URL in a new window – Whether to open the link in a new window of the browser.

The custom header lets you build a custom header of your own and requires input of the following –

• Custom HTML – The custom HTML content with the header information for the hero header.
• Custom CSS – The custom CSS to be applied to the custom HTML header information provided above. Will be embedded inline with the page.

Further options for Hero Image include –

• URL for Pointer Down – This option is used for the hero header displayed at the top of a page. If an internal URL for the pointer down is specified, the hero image will sport a pointer down indicator to help user scroll to the section indicated by this URL.
• Background Type – The hero image’s power lies in its ability to display multiple types of background – cover image, parallax image, YouTube video or HTML5 Video as background. For both image as well as video backgrounds, a background image must be specified. This image will be the background image for the hero header and if a video background is specified, will act as a placeholder image for the background until the video is loaded or if the video cannot be autoloaded as in the case of mobile devices.
• Background Overlay – Specify a overlay color for the image/video background and the opacity for the overlay applied to the image/video. The overlay is used to enhance the visual impact of the hero header and help display the header content more prominently.
• Top and Bottom Padding – The top and bottom padding specified in pixels decide how big the hero image gets on the frontend. This is the padding applied on top and bottom of the header content displayed. You can specific the padding for various device resolutions. The height of the hero header is typically smaller in lower resolutions and in mobile devices.

---

Tabs and Accordions Back to top

A large of finely designed styles are supported by tabs function of the plugin. Tabs can be of two types – vertical and regular horizontal style tabs.

There are a total of 10 tab styles to choose from. There is simply no another plugin or theme that supports so many elegant styles for tabs.

Tabs required two attributes – a tab title and tab content. For styles that support icons, choice of displaying a font icon or an icon image along with the tab title is supported.

Mobile Resolution – Indicate the device resolution in pixels for displaying the tab in responsive mobile mode. The tabs are designed to work well in all device resolutions without sacrificing usability.

Accordions

Accordions support panels that are collapsed by default. The panels can be opened by clicking on panel title bar.

Each of the panels part of an accordion require the user to input a tab title and tab content.

Option to allow multiple panels to be open is provided.

---

Image Slider – Pro! Back to top

The image slider lets you create a responsive slider of images with a multiple options to customize the function and presentation of the slider. The slider can be used anywhere on a page and can also function as the main slider of the page displayed at the top of the page. The slider supports multitude of options but for most users, the default options provided should suffice.

• Class – Set a unique CSS class for the slider. (optional). This lets you customize the slider content, specially the slider caption content via Custom CSS.
• Slider Type – The slider provides you with the choice of four popular slider libraries – Flex Slider, Nivo Slider, Slick Slider and Responsive Slider.
• Flex Slider – Perhaps the most popular of all and actively maintained by the open source community. Provides features like touch navigation, thumbnail navigation and many options to customize the slider.

  

• Nivo Slider – Has been a very popular slider for many years now and loved by many for number of beautiful transition effects that is supports.

  

• Slick Slider – The most popular open source library for building carousels. Responsive controls like touch swipe controls, desktop mouse dragging makes it a compeling choice.
• Responsive Slider – Simplest and most lightweight of all sliders (just 1 KB in size minified and gzipped). If you need a slider that uses minimal resources, this option should be worth trying out.

  

• Choose Caption Style – There are two styles of captions – one center aligned and the other left aligned. While center aligned caption is more suited to situation where the slider image is functioning more like a background for the caption that is a call to action or a message to the visitor, the style 2 is useful when images speak for themselves and captions describe the images.

Each slide for the slider allow for following options –

• Slide Image – The image for the slide itself.
• URL to link to by image and caption heading. (optional) – Specify the URL to which the slide image and caption heading should link to.

Slider Caption Details

• Caption Heading – The heading title for the caption
• Caption Sub-heading(Optional) – Subtitle for the caption.
• Button text – The text for the button displayed below the caption.
• Button URL – URL for the button.
• Open URL in a new window – Specify the button click opens the link in a new browser window.
• Color – The color of the button. The supported colors are Orange, Blue, Teal, Cyan, Green, Pink, Black, Red, Transparent and Semi Transparent.
• Button Size – Can be large, medium or small.
• Display rounded button – Make the button display with rounded edges.

Slider Settings – The widget has a number of options available for customizing the slider experience –

• Animation – Can be Slide or Fade. Applies when the slider type chosen is Flex Slider or the Slick slider. Nivo supports a number of custom transitions while Responsive slider is fade only.
• Sliding Direction – Can be vertical or horizontal. Supported by Flex and Slick sliders.
• Control navigation – Create navigation for paging control of each slide.
• Direction navigation – Create navigation for previous/next navigation.
• Thumbnails Navigation – Use slider image thumbnails for slider navigation. Supported by Flex and Nivo sliders.
• Randomize slides – Display slides in random order.
• Pause on hover – Pause the slideshow when hovering over slider, then resume when no longer hovering.
• Pause on action – Pause the slideshow when interacting with control elements. Supported by Flex Slider only.
• Loop – Should the animation loop?
• Slideshow or Autoplay – Animate slider automatically without user intervention.
• Slideshow speed (default – 5000) Set the speed of the slideshow cycling, in milliseconds when the Slideshow option is checked.
• Animation speed – Set the speed of animations like fade or slide, in milliseconds.

---

Image/Video Gallery – Pro! Back to top

This powerful widget lets you create a gallery of images or videos displayed in a multi-column grid. An instance of this widget can capture a portfolio of work like that of a photographer or graphic designer/artist.

It can be used to create a gallery of videos uploaded to YouTube/Vimeo – useful for video bloggers, video tutorial sites, video marketers, small businesses or websites with a major presence on YouTube/Vimeo. The videos can be played with a single click of the play button on the gallery item as seen in this demo page.

The configuration for creating a video gallery is similar to that of image gallery; a video URL would be required along with image that acts as a placeholder.

Each of the gallery items capture following information –

• Item Type – Can be a Image or YouTube Video or Vimeo Video.
• Item Label – The label or name for the gallery item. This label is displayed on mouse hover over the image.
• Choose Media – The image for the gallery item. If item type chosen is YouTube or Vimeo video, the image will be used as a placeholder image for video.
• Item Tag(s) – One or more comma separated tags for the gallery item. Useful when items are made filterable.
• Page URL – The URL of the page to which the image gallery item points to (optional).
• Video URL – If the item represents a Vimeo or YouTube video, provide the URL to the video. Any gallery item representing a video is given a play button. Upon clicking the play button, the Vimeo/YouTube video opens up in a lightbox window for playing.

The Gallery widget comes with following settings –

• Filterable – If the videos or images are tagged, the items can be made filterable on the tags specified by the user just like a Portfolio Grid.
• Layout for the grid – Comes with Masonry and FitRows option.





• Pagination – Choose pagination type or choose None if no pagination is desired. Make sure you enter the items per page value in the option ‘Number of items to be displayed per page and on each load more invocation’ field below to control number of items to display per page.

  

• Columns per row – Specify the number of images/videos to display per row of the grid.
• Enable Lightbox Gallery – The lightbox for the image opens up a bigger image in a popup window. You can navigate among the gallery items here.
• Gutter – The spacing between columns that contain image/video in the grid. You can control the spacing/gutter at various resolutions like those of tablet/smartphone.

---

Image/Video Carousel – Pro! Back to top

You can create a carousel of images/videos (or a combination of both) for showcasing your work or video content uploaded to Vimeo/YouTube. An instance of this widget can capture a portfolio of work like that of a photographer or graphic designer/artist.

It can be used to create a carousel of videos uploaded to YouTube/Vimeo – useful for video bloggers, video tutorial sites, video marketers, small businesses or websites with a major presence on YouTube/Vimeo. The videos can be played with a single click of the play button on the gallery item as seen in this demo page.

The option for creation of video carousel is similar to that of image carousel - requires input of URL for the Vimeo/YouTube video along with placeholder image.

Each of the gallery items in the carousel capture following information –

1. Item Type – Can be a Image or YouTube Video or Vimeo Video.
2. Item Label – The label or name for the gallery item. This label is displayed on mouse hover over the image.
3. Choose Media – The image for the gallery item. If item type chosen is YouTube or Vimeo video, the image will be used as a placeholder image for video.
4. Item Tag(s) – One or more comma separated tags for the gallery item. Useful when items are made filterable.
5. Page URL – The URL of the page to which the image gallery item points to (optional).
6. Video URL – If the item represents a Vimeo or YouTube video, provide the URL to the video. Any gallery item representing a video is given a play button. Upon clicking the play button, the Vimeo/YouTube video opens up in a lightbox window for playing.

The section ‘Carousel Settings’ has options that control how the carousel is displayed. Options include autoplay speed, gutter value between post items in various resolutions, navigation controls for carousel, number of columns or items to display before making the user to scroll for additional items etc.

• Enable Lightbox Gallery – Enable lightbox gallery for images. The lightbox for the image opens up a bigger image in a popup window. You can navigate among the gallery items here.
• Prev/Next Arrows – Display navigation for the carousel.
• Show dot indicators for navigation – Display control navigation or pagination controls for the carousel.
• Autoplay – Display carousel as a slideshow.
• Autoplay speed in ms – The time between display of each page of images when Autoplay option is enabled.
• Autoplay animation speed in ms – The time taken for animation that moves the carousel to next or previous page of items.
• Pause on mouse hover – Pause the slideshow if the user has mouse hovered over the carousel contents.
• Columns per row – Number of gallery items visible at any given point of time without scrolling.
• Columns to scroll – With each scroll action – using the prev/next arrows or the dotted navigation, specify the number of items to scroll for each invocation of the navigation controls.
• Gutter – The spacing in pixels between images/videos in the carousel.

---

FAQ- Pro! Back to top

The FAQ makes the task of creating a FAQ for a site effortless. Just enter FAQ items and choose the number of items to show per row of content and you are done.

Each FAQ item requires two input – question and an answer for the question part of the FAQ.

Do note that the Accordion function of the plugin too can be used to create a nicely formed FAQ for a site.

---

Features- Pro! Back to top

Features widget lets you showcase a number of things. Below are some examples although possibilities are many -

• Features of a product like a mobile app or other types of software.
• Showcase features provided by an online service or a tool.
• List a set of services an agency or organization may provide.
• Describe any type of physical or digital goods you are trying to sell.

Any feature part of the features widget requires you input an icon image or a screeshot which represents the feature you are describing. Aside from the icon or screenshot, you will need to provide details like heading title, subtitle and description of the feature.

The features widget has an option to apply popular tile-based design to the features list (screenshot below). The examples of this is seen in the demo site showcasing the features widget.

---

Plugin Support Back to top

If you have queries or issues to report related to the plugin, feel free to contact us via our dedicated support portal.