Layout

Styling for individual tabs is OFF by default, relying on the global styles which are set on the widget’s Style tab. If you wish to override the global slide styles, turn the Custom switch to ON. This will enable you to set custom styles for that individual slide. The custom styles for individual slides are:

1. Horizontal Position: Position the content horizontally: Left, right or center
2. Vertical Position: Position the content to the top, middle or bottom
3. Text Align: Align the text left, center or right
4. Content Color: Choose the color of the content
5. Height: Set the exact height of the slide in either PX, VH, or EM

Search Form

1. Skin: Choose classic, minimal or full-screen pre-built styles
2. Placeholder: Set the text that appears inside the search form by entering a value or using a Dynamic Tag

Full-screen shows only a small button which opens the search form as a lightbox popup

List Items

A list of all the features you are offering. You can drag and drop them to change their order. Click on the Add Item button to add another item to the list.

Tip: Quickly duplicate or delete items by clicking an item’s Duplicate or Delete icon 

By clicking on each item you can customize their content and settings, which are:

1. Text: Enter the description of the feature
2. Icon: Choose from a list of Font Awesome icons
3. Icon Color: Choose a color for the icon

The Portfolio Widget allows you to display your posts, pages, and custom post types in an attractive, filterable grid.

Note: The Portfolio widget ONLY works with posts, pages, and custom post types. The Portfolio widget does NOT work with Galleries.

1. Columns: Set the number of columns displayed in the widget
2. Posts count: Set the exact amount of posts to be displayed in the widget
3. Image size: Set the size of the images
4. Item ratio: Set the ratio of the items
5. Show title: Choose whether to show or hide the title. The title will display while hovering over the images
6. Title HTML tag: Wrap the title with a tag, either H1…H6, span, div or paragraph

Footer

1. Button Text: Write the text that will appear for the button
2. 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.
3. Additional Info: Include a line of additional info below the button

Ribbon

1. Show: Show or hide a corner ribbon
2. Title: Enter the text to be displayed on the ribbon
3. Horizontal Position: Display the ribbon on the top left or top right of the pricing table

Header

1. Title: Enter the title of the specific price plan
2. Subtitle: Enter the subtitle that appears below the main title
3. Heading Tag: Set the Header’s Title tag, choosing from H2 – H6

Pricing

1. Currency Symbol: Switch between the main currencies, or choose a custom symbol
2. Price: Set the exact pricing of your product or service, including cents
3. Currency Format: Choose the thousands separator format
4. Sale: Display the original price with a strikethrough and the new sale price
5. Period: Enter text for the period of time for each payment that appears under the price

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

Slider Options

1. Navigation: Choose to display arrows, dots, both or none
2. Pause on Hover: Make the slide pause when the mouse hovers over it
3. Autoplay: Get the slides to rotate automatically, according to the speed you set
4. Autoplay Speed: Set the time it takes for the slide to start rotating
5. Infinite Loop: Have the slides rotate in an infinite loop and without stopping
6. Direction: Choose a direction for the slider as left or right
7. Transition: Set the transition of the slides as slide or fade
8. Transition Speed: Set the time it takes for the slides to rotate
9. Content Animation: Set the animation effect of the content’s display when the slide is shown: None, Down, Up, Right, Left, or Zoom

Slides

Shows the list of slides. You can drag and drop them to change their position, duplicate, delete or add a slide.  When you click on a single slide, its options open up. Each slide has Background, Content and Style settings.

Items

Shows a list of all the items in the slide. You can drag and drop them to change their order. Click on the Add Item button to add another item to the list.

1. Columns: Set the number of columns displayed in the widget
2. Posts count: Set the exact amount of posts to be displayed in the widget
3. Image: Upload or Choose an image from the media library
4. Show title: Choose whether to show or hide the title. The title will display while hovering over the images
5. Title HTML tag: Wrap the title with a tag, either H1…H6, span, div or paragraph
6. Title: Enter the customer’s title
7. Skin: Select a pre-designed skin, either Default or Bubble
8. Layout: Choose from Image Inline, Image Stacked, Image Above, Image Left, Image Right
9. Alignment: Align the testimonial to the left, center or right
10. Slides Per View: Select the number of slides to show at one time, from 1 to 10
11. Slides To Scroll: Select how many slides to scroll per swipe, from 1 to 10
12. Width: Set the width of the widget

Additional Options:

1. Arrows: Show or hide the navigation arrows
2. Pagination: Select the carousel pagination style, either None, Dots, Fraction, or Progress
3. Transition Duration: Set the time between slide movement, in milliseconds

1. Autoplay: Slide to YES to have the carousel slide automatically
2. Autoplay Speed: Set the speed at which the carousel will slide, in milliseconds
3. Infinite Loop: Set to YES to have the carousel continue sliding, infinitely
4. Pause on Interaction: Set to YES to have the autoplay pause when the carousel is hovered over with a mouse or clicked
5. Image Size: Set the size of the image, from thumbnail to full, or enter a custom size
6. Lazy Load: Toggle to enable lazy loading of the images.

Background

1. Color: Set the background color for the slide
2. Image: Choose an image from the media library

If an image is chosen as a slide background, additional options appear:

• Size: Choose whether to display the background as cover or auto. The auto image is for situations where you have the exact sizes needed, and also where you would want the entire image to appear in the slider. The cover size is for more abstract and atmospheric images, where the showing of the entire image is less important.
• Ken Burns Effect: Choose YES to enable this popular zooming effect on the background image.
• Background Overlay: Choose YES to set a background overlay that will appear on top of the image. If set to YES, you have the option of choosing the overlay’s color.

Content

Dynamic Tags may also be used in addition to manually entering text into following options. This is done by clicking on the stack icon and selecting the available options from the list.

1. Title & Description: Insert the title and description for the slide
2. Button Text: Set the text for the button
3. Link: Add a URL the slide or button will link to
4. Apply Link On: If a link is set, this option appears. Choose if the link applies to only the button or to the whole slide
5. Alignment: Align the Page Title to the left, right, center, or justified

Query

Source: Select the source from which the widget will display the content. Options include posts, pages, custom post types if available, manual selection, current query, and related. Depending upon which source you’ve chosen for the query, you’ll be given options which allow you to filter the results.

Include

1. Include By: Term or Author, then use Search and Select to choose which ones to use
2. Date: Select from All, Past Day, Past Week, Past Month, Past Quarter, Past Year, Custom (Choose Before or After dates) 
3. Order By: Set the order in which the posts will be displayed. Options include: Date, Title, Menu Order, or Random
4. Order: DESC (descending) or ASC (ascending)
5. Ignore Sticky Posts: Yes or No
6. Query ID: Give your Query a custom unique ID to allow server side filtering

Exclude

1. Date: All, Past Day, Past Week, Past Month, Past Quarter, Past Year, Custom (Choose Before or After dates)
2. Order By: Date, Title, Menu Order, or Random
3. Order: DESC (descending) or ASC (ascending)
4. Ignore Sticky Posts: Yes or No
5. Query ID: Give your Query a custom unique ID to allow server side filtering by entering a value in the field or by using Dynamic Tags. See the developer docs for more information on how to use this advanced feature.

Filter Bar

1. Show: Set whether to show or hide the filter bar above the portfolio
2. Taxonomy: Choose the taxonomy from which to display the posts. Options include: Categories, Tags, and any custom post type taxonomies

---

Style

1. Columns: Set the number of columns displayed in the widget
2. Color: Set the background color for the slide
3. Posts count: Set the exact amount of posts to be displayed in the widget
4. Color: Set the background color for the slide
5. Image: Choose an image from the media library
6. Image size: Set the size of the images
7. Show title: Choose whether to show or hide the title. The title will display while hovering over the images
8. Title HTML tag: Wrap the title with a tag, either H1…H6, span, div or paragraph

Items

1. Gap: Control the space between the image and the testimonial text
2. Item Gap: Set the exact gap between the items
3. Rows Gap: Set the exact gap between rows of items
4. Border Radius: Set the border radius for the images to control corner roundness

Slides

1. Content width: Set the width of the content inside the slide
2. Padding: Set the inner spacing between the edge of the content and the edge of the slide
3. Horizontal Position: Set the position of the content as right, left and center
4. Vertical Position: Set the position of the content as top, middle or bottom
5. Text Align: Align the text to the right, left or center
6. Text Shadow: Add a shadow and blur to the text
7. Space Between: Control the space between the slides
8. Background Color: Choose the background color of the slides
9. Border Size: Set the thickness of the border around each slide
10. Border Radius: Set the border radius to control corner roundness
11. Border Color: Choose a color for the border
12. Padding: Set the padding within the border of each slide

Note: If an individual slide has Custom styles set, these global styles will have no effect upon that slide.

Item overlay

1. Background Color: Set the background color of the overlay when you hover over the image
2. Color: Set the post’s Title color. The title appears within the overlay when you hover over the image
3. Typography: Customize the typography of the Title

Image

1. Background Color: Set the background color of the overlay when you hover over the image
2. Color: Set the post’s Title color. The title appears within the overlay when you hover over the image
3. Typography: Customize the typography of the Title
4. Size: Adjust the size of the image
5. Gap: If Image Inline is selected, the gap controls the space between the image and the name and title
6. Border: Slide to YES to place a border around the image
7. Border Color: If Border is set to YES, choose the color of the border
8. Border Width: If Border is set to YES, set the thickness of the border around the image
9. Border Radius: Set the border radius to control corner roundness. This option is available even if Border is set to NO

Title

1. Background Color: Set the background color of the overlay when you hover over the image
2. Color: Set the post’s Title color. The title appears within the overlay when you hover over the image
3. Typography: Customize the typography of the Title
4. Spacing: Set the spacing between the title and the description
5. Text Color: Set the color of the title
6. Typography: Set the typography of the title

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

Subtitle

1. Background Color: Set the background color of the overlay when you hover over the image
2. Color: Set the post’s Title color. The title appears within the overlay when you hover over the image
3. Typography: Customize the typography of the Title

Caption

1. Background Color: Set the background color of the overlay when you hover over the image
2. Color: Set the post’s Title color. The title appears within the overlay when you hover over the image
3. Typography: Customize the typography of the Title
4. Spacing: Set the spacing between the description and the button
5. Text Color: Set the color of the description
6. Typography: Set the typography of the description

Pricing

1. Background Color: Choose a background color for the pricing area
2. Padding: Change the padding of the pricing area
3. Color: Choose the color of the price
4. Typography: Set the typography options for the pricing area

Currency Symbol

1. Size:  Change the size of the currency symbol
2. Position: Display the currency symbol to the left or right of the price
3. Vertical Position: Set the currency symbol to display at the top, middle or bottom of the price

Fractional part

1. Size: Set the size of the fractional part of the price
2. Vertical Position: Set the fractional part to display at the top, middle or bottom of the price

Period

1. Color: Choose the color of the text of the time period
2. Typography: Set the typography options for the text of the time period
3. Position: Set the time period below or beside the price

Features

1. Background Color: Choose the background color of the features list
2. Padding: Customize the padding of the features list
3. Color: Choose the color of the features list text
4. Typography: Set the typography options for the features list text
5. Alignment: Align the list to the right, left or center
6. Width: Set the width of the features list

Divider

1. Style: Choose the features list divider style, from solid, dotted, double or dashed
2. Color: Choose the color of the divider
3. Weight: Set the thickness of the divider
4. Width: Set the width of the divider
5. Gap: Set the distance between the divider and the feature item

Footer

1. Background Color: Choose the background color of the footer area
2. Padding: Set the padding of the footer area

Button

1. Size: Choose from 5 button sizes
2. Text Color: Choose the color of the button’s text
3. Typography: Set the typography options for the button’s text
4. Background Color: Choose the background color of the button
5. Border Type: Select the border type, from none, solid, double, dotted, dashed, or grooved
6. Border Radius: Set the border radius of the button to control corner roundness
7. Text Padding: Set the distance between the button text and the border

Ribbon

1. Background Color: Choose the background color of the ribbon
2. Distance: Control the distance between the ribbon and the corner
3. Text Color: Choose the color of the ribbon’s text
4. Typography: Set the typography options for the ribbon’s text
5. Box Shadow: Add a box shadow effect to the ribbon

Normal State / Hover State

1. Text Color – Set the text color
2. Background Color – Set the background color of the button
3. Border Color – Set the border color of the button

Navigation

Arrows

1. Arrows position – Set the position of the arrows inside or outside the slider
2. Arrows size – Set the exact size of the arrows
3. Arrows color – Set the color of the arrows

Pagination

1. Dots Position – Set the position of the dots inside or outside the slider
2. Dots size – Set the exact size of the dots
3. Dots color – Set the color of the dots

Button

1. Background Color: Set the background color of the overlay when you hover over the image
2. Color: Set the post’s Title color. The title appears within the overlay when you hover over the image
3. Typography: Customize the typography of the Title

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

Background

1. Color: Set the background color for the slide
2. Image: Choose an image from the media library
3. Size: Set the size of the button, from extra small to extra large
4. Text Color: Set the text color for the button
5. Typography: Set the typography of the button
6. Border Width: Set the border width of the button
7. Border Radius: Set the border radius, to control corner roundness

If an image is chosen as a slide background, additional options appear:

• Size: Choose whether to display the background as cover or auto. The auto image is for situations where you have the exact sizes needed, and also where you would want the entire image to appear in the slider. The cover size is for more abstract and atmospheric images, where the showing of the entire image is less important.
• Ken Burns Effect: Choose YES to enable this popular zooming effect on the background image.
• Background Overlay: Choose YES to set a background overlay that will appear on top of the image. If set to YES, you have the option of choosing the overlay’s color.

Filter bar

1. Color: Set the color of the Filter Bar text
2. Active Color: Set the color for the Filter Bar’s active text
3. Typography: Customize the typography of the Filter Bar text
4. Space Between Items: Set the space between the items in the Filter Bar
5. Filter Spacing: Set the spacing between the Filter Bar and the images