Skip to content

Custom Shortcodes

In this section of the User Guide we will take a comprehesive look at all the custom shortcodes included in the theme and their repsective options.

Visual Composer

Row

The row element is a container element in which you can add other elements (shortcodes) and sort them on your page. Besides the standard Visual Composer options for rows, you also have the following custom options:

Caledon Settings

  • Caledon Row Content Width - Set a width for your row content. You can choose between "Full Width" and "In Grid".
  • Caledon Anchor ID - Enter an anchor ID for this row. Anchor IDs are used to create anchor links for one page site functionality. You can find out more about creating anchor links in the Menus section of this User Guide.
  • Caledon Background Color - Set a background color for the row.
  • Caledon Background Image - Upload a background image for the row.
  • Caledon Background Position - Set the starting position for the background image.
  • Caledon Disable Background Image - Optionally, you can choose a responsive breakpoint below which the background image won't be displayed.
  • Caledon Parallax Background Image - Upload a background image for the parallax row.
  • Caledon Parallax Speed - Input a speed (in milliseconds) for the parallax effect.
  • Caledon Parallax Section Height - Input a height for the parallax row.
  • Dynamic Background Color Value - Set the value for the dynamic background color. For this option to take effect you first need to enable Dynamic Background Color for each specific page you wish to feature this effect on.
  • Caledon Content Alignment - Set an alignment for the content in this row.

Portfolio List

The portfolio list shortcode enables you to present a listing of your portfolios on a page.

General

  • Portfolio List Template - Choose a template for your portfolio list. The template you choose will define how your portfolio list will display.
  • Click Behavior - Choose how the portfolio items will behave when clicked on.
  • Number of Columns - Set the number of columns in which you would like to display your portfolio list.
  • Space Between Portfolio Items - Choose a spacing between portfolio items in the list.
  • Number of Portfolios Per Page - Choose how many portfolios you would like to display per page. Enter "-1" do display all portfolios on a single page.
  • Image Proportions - Choose the proportions of the images in your portfolio list.
  • Enable Fixed Image Proportions - Set this option to "Yes" if you would like to enable setting predefined image proportions for the featured image of each of your portfolio items. If you set this option to "Yes" the featured image proportions will correspond to the setting you set in the "Dimensions for Masonry - Image Fixed Proportion" field in your portfolio single item. If this options is set to "No" the images original proportion will be used.
  • Enable Image Shadow - Set this option to "Yes" to enable a shadow effect on the images.
  • One-Category Portfolio List - If you would only like to display portfolios from a single category, enter the category slug in this field.
  • Show Only Projects with Listed IDs - If you would only like to display certain projects in your portfolio list, enter the IDs of those projects in this field.
  • One-Tag Portfolio List - If you would like to display portfolios with only a certain tag attached to them, you can enter the tag here.
  • Order by - Choose how you would like to order your portfolio items.
  • Order - Choose between ascending and descending order.

Content Layout

  • Item Style - Choose a style (layout and hover type) for the items in your portfolio list.
    • Content Top Margin - Input the value for the content top margin size. This option is only available for standard portfolio list styles.
    • Content Bottom Margin - Input the value for the content bottom margin size. This option is only available for standard portfolio list styles.
  • Enable Title - Set this option to "Yes" to display the portfolio titles in the list.
  • Title Tag - Choose a heading tag for the titles in your portfolio list.
  • Title Text Transform - Choose a text transform style for the title.
  • Enable Category - Set this option to "Yes" to display the categories on your portfolio list.
  • Enable Number of Images - Set this option to "Yes" if you would like to display the number of images in the gallery when the images are opened in PrettyPhoto.
  • Enable Excerpt - Set this option to "Yes" to display the excerpt on your portfolio list.

Additional Features

  • Pagination Type - Choose a pagination type to use.
    • Load More Top Margin - Set a top margin for the "Load More" button when using the "Load More" type of pagination.
  • Enable Category Filter - Set this option to "Yes" to enable a category filter above the portfolio list. This option is only available with the "Masonry" type of portfolio list.
    • Filter Order By - Choose how you would like to order the items in the filter.
    • Filter Text Transform - Choose a text transform style for the filter.
    • Filter Bottom Margin - Set a bottom margin for the category filter.
  • Enable Article Animation - Set this option to "Yes" to enable a content entry animation for projects in your portfolio list.

Portfolio Project Info

You can use this shortcode to display some specific information about a selected project.

  • Selected Project - Choose the project you would like to display information about.
  • Project Info Type - Choose which information about the project you would like to display.
  • Project Info Title Tag - Choose a heading tag for the project info title.
  • Project Info Lable - Input some text to display in front of the selected info.

Portfolio Slider

The portfolio slider shortcode enables you to display your portfolio items in an interactive slideshow which viewers can navigate through.

General

  • Number of Portfolio Items - Set the number of portfolio items you would like to display.
  • Click Behavior - Choose how the portfolio items will behave when clicked on.
  • Number of Columns - Set a number of portfolios that will be displayed at the same time in the slider.
  • Space Between Portfolio Items - Set a spacing between portfolio items in the slider.
  • Image Proportions - Set proportions for your portfolio featured images.
  • One-Category Portfolio List - If you would only like to display portfolios from a single category, enter the category slug in this field.
  • Show Only Projects with Listed IDs - If you would only like to display certain projects in your portfolio list, enter the IDs of those projects in this field.
  • One-Tag Portfolio List - If you would like to display portfolios with only a certain tag attached to them, you can enter the tag here.
  • Order by - Choose how you would like to order your portfolio items.
  • Order - Choose between ascending and descending order.

Content Layout

  • Item Style - Choose a style (layout and hover type) for the projects in your portfolio slider.
    • Content Top Margin - Input the value for the content top margin size. This option is only available for standard portfolio slider styles.
    • Content Bottom Margin - Input the value for the content bottom margin size. This option is only available for standard portfolio slider styles.
  • Enable Title - Set this option to "Yes" to display the portfolio title in the slider.
  • Title Tag - Choose a heading tag for the titles in your portfolio slider.
  • Title Text Transform - Set a text transform style for the title.
  • Enable Category - Set this option to "Yes" to display the category in your portfolio slider.
  • Enable Number of Images - Set this option to "Yes" if you would like to display the number of images in the gallery when the images are opened in PrettyPhoto.
  • Enable Excerpt - Set this option to "Yes" to display the project excerpts in your portfolio slider.

Slider Settings

  • Enable Slider Loop - If you would like the slider to loop when it comes to the end of the portfolio list, set this option to "Yes".
  • Enable Slider Autoplay - Set this option to "Yes" if you would like the slider to automatically change slides.
  • Slide Duration - Set a duration time (in milliseconds) for each slide to stay on screen before switching to the next slide.
  • Slide Animation Duration - Set a duration time (in milliseconds) for the animation between slides.
  • Enable Slider Navigation Arrows - Set this option to "Yes" to enable slider navigation arrows.
    • Navigation Skin - Choose between a dark and light skin for the navigation arrows.
  • Enable Slider Pagination - Set this option to "Yes" to enable pagination bullets on the slider.
    • Pagination Skin - Choose between a dark and light skin for the pagination.
    • Pagination Position - Choose a position for the pagination bullets.

Portfolio Category List

You can use this shortcode to display a list of your portfolio items which belong to a designated category.

  • Number of Columns - Choose the number of columns you wish to be displayed in your list.
  • Space Between Items - Set the size of the space separating the items.
  • Number of Items Per Page - Set the number of portfolio category list items you wish to be displayed per page.
  • Order By - Choose how you would like to order your portfolio category items.
  • Order - Choose between and ascending and descending order.
  • Image Proportions - Set the image proportions for your portfolio category list.
  • Title Tag - Choose the heading tag for the title.

Accordion

Accordions

Accordions allow you to organize your content and display only what is necessary at a particular moment.

  • Custom CSS Class - If you wish to style a particular content element differently, you can use this field to add an extra class name to that element and then refer to that class name in your css file.
  • Style - Choose a style for your accordions.
  • Layout - Choose a layout for your accordions.
  • Background Skin - Choose a background skin for your accordions. This option is only available when using the "Boxed" type of accordion.

After you have set up the accordion holder, you can add Accordion Tabs and modify the following options:

  • Title - Enter a title for the accordion.
  • Title Tag - Set a heading tag for the title.

Now you can enter content into your accordion. You can enter any shortcode into the accordion.

Animation Holder

You can use this shortcode to create an entry animation for any element on your page. To do this you first need to add the Animation Holder to your page and set the following options:

  • Animation - Choose an entry animation.
  • Animation Delay - Enter an animation delay time (in milliseconds).

After you have added the Animation Holder Element, you can add any other shortcode inside it and it will become animated.

Blog List

This shortcode allows you to display your blog posts on a page.

General

  • Type - Choose a type for your blog list.
  • Number of Posts - Choose a number of posts to display.
  • Number of Columns - Set the number of columns you would like your blog posts to display in.
  • Space Between Columns - Choose a predefined space between columns.
  • Order By - Choose how you would like to order your blog posts.
  • Order - Choose between ascending and descending order.
  • Category - If you would like to display only blog posts from a certain category, enter the category slug in this field.
  • Image Size - Choose a size for you images.

Post Info

  • Title Tag - Choose a heading tag for your blog post titles.
  • Title Text Transform - Set a text transform style for the post titles.
  • Text Length - Enter the number of characters you would like displayed in the blog post excerpt.
  • Enable Post Info Section - Set this option to "Yes" to enable the post info section.
  • Enable Post Info Author - Set this option to "Yes" to display the author name in the post info section.
  • Enable Post Info Date - Set this option to "Yes" to display the date in the post info section.
  • Enable Post Info Category - Set this option to "Yes" to display the post category in the post info section.
  • Enable Post Info Comments - Set this option to "Yes" to display the number of comments in the post info section.
  • Enable Post Info Like - Set this option to "Yes" to display the number of likes in the post info section.
  • Enable Post Info Share - Set this option to "Yes" to display the share icons in the post info section.

Additional Features

  • Pagination Type - Choose a type of pagination to use.

Buttons

Buttons are a widely used element on the web and can be used for a variety of purposes.

General

  • Custom CSS Class - If you wish to style a particular content element differently, you can use this field to add an extra class name to that element and then refer to that class name in your css file.
  • Type - Choose a type of button to use.
  • Size - Choose a predefined size for your button.
  • Text - Input text for your button.
  • Link - Enter a URL you would like your button to lead to when clicked.
  • Link Target - Set a target for your link.
  • Icon Pack - Choose an icon pack for your button.
  • Icon - Choose an icon for your button.
  • Text Transform - Choose a text transform style for the button text.

Design Options

  • Color - Set a color for your button text.
  • Hover Color - Set a hover color for your button text.
  • Background Color - Set a background color.
  • Hover Background Color - Set a hover color for your button background.
  • Border Color - Set a border color for your button.
  • Hover Border Color - Set a hover color for your button border.
  • Font Size - Set a font size for the button text.
  • Font Weight - Choose a font weight.
  • Margin - Set a margin for the button in a top, right, bottom, left format (e.g. "10px 20px 10px 20px").
  • Button Padding - Set a padding for the button. Please input the padding in a "top right bottom left" format (e.g. "10px 20px 10px 20px").

You can use this shortcode to display your clients in a carousel slider.

  • Number of Visible Items - Choose how many items you would like to be visible on screen at the same time.
  • Enable Slider Loop - Set this option to "Yes" if you would like the carousell to loop back to the first slide after it shows the last slide.
  • Enable Slider Autoplay - Set this option to "Yes" if you would like the carousel to automatically change slides.
  • Slide Duration - Set how long (in milliseconds) a slide will stay on screen before switching to the next slide.
  • Slide Animation Duration - Set a duration (in milliseconds) for the slide transition animation to last.
  • Enable Slider Navigation Arrows - Set this option to "Yes" if you would like to display navigation arrows on the slider.
  • Enable Slider Pagination - Set this option to "Yes" if you would like to enable pagination bullets on the slider.
  • Items Hover Animation - Choose a hover animation for the client items.

After you have set up your Clients Carousel you can start adding Clients Items into it and setting the following options for each one:

  • Image - Upload an image.
  • Hover Image - Upload an image to display on hover.
  • Image Size - Enter a size for the image in a "WidthxHeight" format (e.g. 200x200).
  • Custom Link - Input the URL you would like the image to lead to when clicked on.
  • Custom Link Target - Choose whether you would like the link to open in the same browser tab or in a new browser tab.

Countdown

The countdown shortcode provides a great way to display a countdown timer on your page.

  • Target time for countdown - select date and time for countdown element
  • Skin - Choose a skin for the countdown.
  • Select time units to display in countdown timer
  • Delimeter value - Choose a separator symbol for countdown like : or /

Counter

Counters are great for communicating information in the form of numbers.

  • Type - Choose a type for the counter.
  • Digit - Enter a digit to count to.
    • Digit Font Size - Enter a font size for the digits.
    • Digit Color - Set a color for the digit.
  • Title - Enter a title for the counter.
    • Title Tag - Chose a heading tag for the counter title.
    • Title Color - Set a color for the title.
    • Title Font Weight - Set a font weight for the title.
  • Text - Enter some text for the counter.
    • Text Color​ - Set a color for the text.

Google Map

You can use this shortcode to display a Google Map anywhere on the page.

  • Address 1 - Input an address to show on the map.
  • Snazzy Map Style - Set this option to "Yes" if you would like to enable custom styling of the map.
    • Snazzy Map Code - Input code from the snazzy map site (https://snazzymaps.com/) to add a predefined map style to your google map
  • Pin - Choose a pin (location marker) to be used on the map.
  • Map Zoom - Enter a zoom factor for the map (0 = whole world visible; 19 = individual buildings visible)
  • Zoom Map on Mouse Wheel - Set this option to "Yes" if you would like users to be able to zoom the map with their mouse wheel.
  • Map Height - Set a height for the map.

Icon

Icons are great for communicating all sorts of information.

  • Icon Pack - Choose an icon pack.
  • Icon - Choose an icon.
  • Size - Choose a predefined size for your icon.
  • Custom Size - Enter a custom size for your icon.
  • Type - Choose an icon type.
    • Border Radius - Set a border radius for the "Square" icon type.
    • Shape Size - Set a size for the icon shape when using the "Circle" or "Square" icon types.
  • Icon Color - Set a color for the icon.
  • Border Color - Enter a color for the border when using the "Circle" or "Square" icon types.
  • Border Width - Set a width for the border when using the "Circle" or "Square" icon types.
  • Background Color - Set a background color when using the "Circle" or "Square" icon types.
  • Hover Icon Color - Set a hover color for the icon.
  • Hover Border Color - Set a hover color for the border when using the "Circle" or "Square" icon types.
  • Hover Background Color - Set a hover color for the background when using the "Circle" or "Square" icon types.
  • Margin - Enter a margin for the icon in a top, right, bottom, left format (ex.: "10px 20px 10px 20px").
  • Icon Animation - Set this option to "Yes" if you would like to animate the icon.
    • Icon Animation Delay - Set a delay time for the icon animation (in milliseconds).
  • Link - Input a URL that you would like the icon to lead to when clicked.
    • Use Link as Anchor - Check the "Use this icon as Anchor" checkbox if you would like to use the icon as an anchor link.
    • Target - Choose a target for the icon link.

Icon List Item

Icon List Items allow you to make lists using icons, rather than numbers or bullets.

  • Icon List Item Bottom Margin - Set a bottom margin for the icon list item element.
  • Icon Pack - Choose an icon pack.
  • Icon - Choose an icon.
  • Icon Size - Set a size for the icon.
  • Icon Color - Choose a color for the icon.
  • Title - Enter a title for the icon list item.
    • Title Size - Set a title size.
    • Title Color - Choose a title color.
    • Title Left Padding - Set a left padding for the title.

Icon With Text

This shortcode allows you to easily add icons with text to your page.

General

  • Type - Choose a type of Icon with Text to use.
  • Icon Pack - Choose an icon pack.
  • Icon - Choose an icon.
  • Custom Icon - Optionally, upload your own custom icon.
  • Title - Enter a title.
  • Text - Enter some text.
  • Link - Enter a link.
    • Target - Set a target for the link.

Icon Settings

  • Icon Type - Choose a type for your icon (This option won't take effect when Icon Position is set to "Top". In This case Icon Type is "Normal").
  • Icon Size - Choose a predefined size for your icon.
  • Custom Icon Size - Set a custom size for the icon.
  • Shape Size - Enter a size for the icon shape.
  • Icon Color - Set a color for the icon.
  • Icon Hover Color - Set a hover color for the icon.
  • Icon Background Color - Set a background color for the icon.
  • Icon Hover Background Color - Set a hover color for the icon background.
  • Icon Border Color - Set a border color for the icon.
  • Icon Border Hover Color - Set a hover color for the icon border.
  • Border Width - Set a width for the icon border.
  • Icon Animation - Set this option to "Yes" if you would like to animate the icon.
    • Icon Animation Delay - Set a delay time for the animation (in milliseconds).

Text Settings

  • Title Tag - Set a heading tag for the title text.
  • Title Color - Set a color for the title.
  • Title Top Margin - Set a top margin for the title.
  • Text Color - Set a color for the text.
  • Text Top Margin - Set a top margin for the text.
  • Text Padding - Set a padding for the text. Please input the padding in a "top right bottom left" format (e.g. 5px 10px 5px 10px).

Single Image

You can use this shortcode to add single images to your pages.

  • Image - Upload your image.
  • Image Size - Set a size for the image.
  • Enable Image Shadow - Set this option to "Yes" to enable a shadow animation on the image.
  • Image Behavior - Choose how you would like the image to behave when clicked on.
    • Custom Link - Input a custom link for the image to lead to.
    • Custom Link Target - Choose whether you would like the link to open in the same browser tab or in a new browser tab.

General

  • Gallery Type - Choose the type of gallery you would like to use.
  • Images - Upload the images for your gallery.
  • Image Size - Enter an image size. You can either use one of the predefined sizes (thumbnail, medium, large, full), or enter a custom size in pixels (e.g. 200x300).
  • Enable Image Shadow - Set this option to "Yes" to enable a shadow effect on the images.
  • Image Behavior - Choose how you would like the image to behave when clicked on.
    • Custom Links - If you would like the images to be linked, you can input the links here. The first link you input will be applied to the first image, the second link to the second image, etc. Please make sure to delimit the links with a comma.
    • Custom Link Target - Choose whether you would like the links to open in the same browser tab or in a new browser tab.
  • Number of Columns - Choose a number of columns (when using the "Image Grid" gallery type).
  • Space Between Columns - Choose a predefined spacing between columns.

Slider Settings

  • Number of Items Visible - Choose how many items to display in the slider at the same time (when using the "Carousel" gallery type).
  • Enable Slider Loop - Set this option to "Yes" if you would like the slider to loop back to the first slide after displaying the last slide.
  • Enable Slider Autoplay - Set this option to "Yes" if you would like the slider to automatically change slides.
  • Slide Duration - Set a duration time (in milliseconds) for each slide to stay on screen before switching to the next slide.
  • Slide Animation Duration - Set a duration time (in milliseconds) for the animation between slides.
  • Enable Slider Navigation Arrows - Set this option to "Yes" if you would like to show navigation arrows on the slider.
  • Enable Slider Pagination - Set this option to "Yes" if you would like to show pagination on the slider.

Image with Text

You can use this shortcode to create an image with some accompanying text.

  • Image - Upload the image you would like to use.
  • Image Size - Enter an image size. You can either use one of the predefined sizes (thumbnail, medium, large, full), or enter a custom size in pixels (e.g. 200x300).
  • Enable Image Shadow - Set this option to "Yes" to enable a shadow effect on the images.
  • Image Behavior - Choose a default behavior for the image.
    • Custom Link - If you choose the "Open Custom Link" behavior type in the field above, you can input your custom link here.
    • Custom Link Target - Choose whether you would like the custom link to open in the same browser tab or in a new browser tab.
  • Title - Input a title.
    • Title Tag - Choose a heading tag for the title.
    • Title Color - Set a color for the title.
    • Title Top Margin - Set a top margin for the title.
  • Text - Input the text you would like to displya alongside the image.
    • Text Color - Set a color for the text.
    • Text Top Margin - Set a top margin for the text.

Item Showcase

You can use this shortcode to showcase a certain image and place informative text around it.

  • Image - Upload the image you would like to showcase.
  • Image Top Offset - Input a top offset for the image.

After you have set up the Item Showcase, you can start adding Item Showcase Items inside it, and setting the following options for each one:

  • Item Position - Choose whether this item will be located to the left or the right of the image.
  • Item Title - Input a title for the item.
    • ​Item Link - If you would like the title to be linked to some other page, input the link here.
    • Item Title Tag - Choose a heading tag for the title.
    • Item Title Color - Set a color for the title.
  • Item Text - Input text for the item.
    • Item Text Color - Set a color for the text.

Pie Chart

Pie Charts are great for communicating information in a visual and easy to understand manner.

  • Percentage - Input a percentage to be displayed in the pie chart.
  • Percentage Color - Set a color for the percentage.
  • Pie Chart Active Color - Set a color for the active part of the pie chart.
  • Pie Chart Inactive Color - Set a color for the inactive part of the pie chart.
  • Pie Chart Size - Set a size for the pie chart.
  • Title - Enter a title for the pie chart.
    • Title Tag - Set a heading tag for the title.
    • Title Color - Set a color for the title.
  • Text - Enter text for the pie chart.
    • Text Color - Set a color for the text.

Pricing Tables

Pricing Tables are a great way to present your business' pricing packages.

  • Number of Columns - Choose a number of columns to display your pricing tables in.
  • Space Betwen Columns - Choose a predefined spacing between columns.

After you have chosen the number of columns and spacing, you can add separate pricing tables and set up the following options:

  • Content Background Color - Set a background color.
  • Title - Enter a title for the pricing table.
    • Title Color - Set a color for the title.
    • Title Bottom Border Color - Set a color for the title bottom border.
  • Price - Enter a price.
    • Price Color - Set a color for the price.
  • Currency - Enter your desired currency sign.
    • Currency Color - Set a color for the currency sign.
  • Price Period - Enter the period (time span) for the price.
    • Price Period Color - Set a color for the price period.
  • Button Text - Enter text for your button.
    • Button Link - Enter a link for the button.
    • Button Type - Choose a type of button to use.
    • Button Skin - Choose a skin for the button.
  • Content - Enter your pricing table content.

Progress Bar

The Progress Bar element is great for communicating a large amount of information in a visual and easy to understand manner.

  • Percentage - Enter a percentage to display on the progress bar.
  • Title - Enter a title for the progress bar.
    • Title Tag - Choose a heading tag for the title.
    • Title Color - Set a color for the title text.
  • Active Color - Set a color for the active part of the progress bar.
  • Inactive Color - Set a color for the inactive part of the progress bar.

Section Title

You can use this shortcode to add a title to any section.

  • Type - Choose a type of section title to use.
  • Horizontal Position - Choose a horizontal alignment for the section title.
  • Title - Text Position** - Choose a position for the title and text when using the "Two Columns" type of section title.
  • Space Between Columns - Choose a predefined spacing between columns when using the "Two Columns" type of section title.
  • Holder Side Padding - Set a left and right padding for the section title holder.
  • Title - Input your title.
    • Title Tag - Choose a heading tag for the title.
    • Title Color - Set a color for the title.
    • Words With Bold Font Weight - If you would like certain words to be displayed in a blod font weight, enter the position of those word in the title (e.g. if your title is "Our Amazing Offer", and you want the word "Amazing" to be displayed in a bold font weight, you would enter "2" here, because that word is in the second postion in the title).
    • Words With Light Font Weight - If you would like certain words to be displayed in a light font weight, enter the position of those word in the title (e.g. if your title is "Our Amazing Offer", and you want the word "Amazing" to be displayed in a light font weight, you would enter "2" here, because that word is in the second postion in the title).
    • Position of Line Break - Enter the position of the word after which you would like to create a line break (e.g. if you would like the line break after the 3rd word, you would enter "3").
    • Disable Line Break for Smaller Screens - Set this option to "Yes" if you would like to disable the line break postiion option from above.
  • Text - Input some text.
    • Text Tag - Enter a heading tag for the text.
    • Text Color - Set a color for the text.
    • Text Font Size - Set a font size for the text.
    • Text Line Height - Set a line height for the text.
    • Text Font Weight - Set a font weight for the text.
    • Text Top Margin - Set a top margin for the text.

Separator

Use the separator shortcode to create a visual divider between elements and sections on your pages.

  • Custom CSS Class - If you wish to style a particular content element differently, you can use this field to add an extra class name to that element and then refer to that class name in your css file.
  • Type - Choose a type for your separator.
  • Position - Choose a position for the separator.
  • Color - Set a color for the separator.
  • Style - Set a border style for the separator.
  • Width - Set a width for the separator.
  • Thickness - Set a thickness for the separator.
  • Top Margin - Set a top margin for the separator.
  • Bottom Margin - Set a bottom margin for the separator.

Social Share

You can use this shortcode to add social share icons to pages.

  • Type - Choose a type of social share.
  • Icons Type - Choose a type for your icons.
  • Social Share Title - Input a title for the social share element. In case you leave this field empty, social icons will be displayed instead.

Tabs

Tabs allow you to organize your content and display only what is necessary at a particular moment. After you have added the Tabs shortcode to your page, you can start adding individual tabs and changing the following settings for each tab:

  • Title - Set a title for this tab.

Now you can add content to the tab. You can insert any shortcode inside the tab.

Team

You can use this shortcode to present individual members of your team.

  • Type - Choose the type you wish to use.
  • Image - Upload the image for the team member.
  • Background Color - Set the color for the background. This option is only available if you have selected the Info Below Image team type.
  • Name - Input the team member's name.
    • Name Tag - Set the heading tag for the team member name.
    • Name Color - Set the color for the team member name.
  • Position - Input the name of the team member's position.
    • Position Color - Set the color for the position.
  • Text - Input the text you wish to display.
    • Text Color - Set the color for the text.
  • Social Icon Pack - Choose the social icon pack you wish to use.
    • Social Icon - Choose an icon you wish to display.
    • Social Icon Color - Set the color for the social icon.

Vertical Split Slider

The vertical split slider provides a way to create split slides on your screen. the left and right side items of the vertical split slider transition into the screen from the top and bottom, respectively, and then come together to display a complete image.

To create a vertical split slider, you first have to add the Vertical Split Slider element to your page, and you can set the following options for it:

  • Enable Scrolling Animation - Set this option to "Yes" to enable an animation on scroll.

After you have added the Vertical Split Slider element, you need to add a Left Sliding Panel and Right Sliding panel into it.

Then, in each sliding panel, you need to add a Slide Content Item, and set the following options:

  • Background Color – Set a background color for the Slide Content Item.
  • Background Image – Set a background image for the Slide Content Item.
  • Padding – Set a padding for your Slide Content Item. Please insert the padding in a "top right bottom left" format (e.g. 5px 10px 5px 10px).
  • Content Alignment – Set an alignment for the content of your Slide Content Item.
  • Header/Bullets Style - Choose a skin style for the header and navigation bullets for this item.

Product Info

You can use this shortcode to display information about a single shop product.

General

  • Selected Product - Input the name of the product you would like to display.
  • Product Info Type - Choose the type of information you would like to display.

Product Info Style

  • Product Info Color - Choose a color for the product info text.
  • Title Tag - Set a heading tag for the title.

Product List

You can use this shortcode to display a list of your shop products.

General

  • Type - Choose a layout for the product list.
  • Product Info Position - Choose a position for the product information.
  • Number of Products - Choose the number of products you would like to display in the list.
  • Number of Columns - Choose a number of columns to display your products in.
  • Space Between Items - Choose a predefined spacing between products.
  • Order By - Choose how you would like to order the products in the list.
  • Order - Choose between an ascending and descending order for your products.
  • Choose Sorting Taxonomy - If you would like to display only certain products, this is where you can select the criteria by which you would like to choose which products to display.
  • Enter Taxonomy Values - Depending on what you chose in the Choose Sorting Taxonomy field, input the values (category slugs, tags, or post IDs) of the products you would like to display in the list.
  • Image Proportions - Choose proportions for your featured images.

Product Info

  • Display Title - Set this option to "Yes" if you would like to display the titles of your products.
  • Display Category - Set this option to "Yes" if you would like to display the categories of your products.
  • Display Excerpt - Set this option to "Yes" if you would like to display textual excerpts on the products in the list.
  • Display Rating - Set this option to "Yes" if you would like to display product ratings on your list.
  • Display Price - Set this option to "Yes" if you would like to display the prices of your products.
  • Display Button - Set this option to "Yes" if you would like to display a button on the products in your list.

Product Info Style

  • Product Info Skin - Choose between a light and dark skin for the product info sections.
  • Title Tag - Set a heading tag for your product titles.
  • Title Text Transform - Choose a text transform style for your product titles.
  • Button Skin - Choose between a dark and light skin for the button.
  • Shader Background Color - Set a color for the shader overlay.

Product List - Simple

You can use this shortcode to display a list of your shop products with a simple layout.

  • Type - Choose the type of products you would like to display in the list.
  • Number of Products - Choose the number of products you would like to display in the list.
  • Order By - Choose how you would like to order the products in the list.
  • Order - Choose between an ascending and descending order for your products.
  • Display Title - Set this option to "Yes" if you would like to display the titles of your products.
  • Title Tag - Set a heading tag for your product titles.
  • Title Text Transform - Choose a text transform style for your product titles.
  • Display Rating - Set this option to "Yes" if you would like to display product ratings on your list.
  • Display Price - Set this option to "Yes" if you would like to display the prices of your products.

Custom Font

You can use this shortcode to create a textual section using a custom font.

  • Title Text - Input a title.
  • Title Tag - Choose a heading tag for the text.
  • Font Family - Input the name of the font family you would like to use.
  • Font Size - Set a font size for the text.
  • Line Height - Set a line height for the text.
  • Font Weight - Choose a font weight for the text.
  • Font Style - Choose a font style for the text.
  • Letter Spacing - Input a letter spacing for the text.
  • Text Transform - Choose a text transform style.
  • Text Decoration - Choose a text decoration style.
  • Color - Set a color for the text.
  • Text Align - Choose a text alignment for the text.
  • Margin - Set margin values for the custom font text. Please input the margin in a "top right bottom left" format (e.g. 5px 10px 5px 10px).

In the remaining tabs, you can set a font size and line height for each responsive breakpoint.

Text Marquee

You can use this shortcode to create a section with scrolling text.

  • Text - Input your text.
  • Text Color - Set a color for the text.
  • Font Size - Set a font size for the text.
  • Line Height - Set a line height for the text.
  • Font Weight - Set a font weight for the text.
  • Font Style - Set a font style for the text.
  • Letter Spacing - Set a letter spacing for the text.
  • Text Transform - Set a text transform style.

In the remaining tabs, you can set a font size and line height for each responsive breakpoint.

Process

You can use this shortcode to display your creative or business process.

  • Number of Columns - Choose a number of columns to display your process items in.
  • Switch to One Column - Choose a t which responsive stage you would like the process items to be displayed in one column.

After you have set up the process shortcode, you can start adding process items into it and setting the following options for each one:

  • Title - Input a title for this process item.
    • Title Tag - Choose a heading tag for the title text.
    • Title Color - Set a color for the title.
  • Text - Input some text for this process item.
    • Text Color - Set a color for the text.
    • Text Top Margin - Set a top margin for the text.

Image Marquee

You can use this shortcode to create a section with a horizontally scrolling image.

  • Image - Upload an image you wish to display.

Cascading Images

You can use this shortcode to display two adjecent images that move up or down in a floating manner, depending on the direction in which the page is being scrolled.

  • Main Image - Upload the main image you wish to display.
  • Main Image Shadow - Set the color for the main image shadow.
  • Main Image Width - Set the width for the main image.
  • Aux Image - Upload the secondary image you wish to display.
  • Aux Image Shadow - Set the color for the secondary image shadow.
  • Aux Image Width - Set the width for the secondary image.
  • Aux Image X Offset - Set the horizontal image offset in % based on the Main Image width.
  • Aux Image Y Offset - Set the vertical image offset in % based on the Main Image width.
  • Image Overlay - Upload an image to be used as the overlay.
  • Alignment - Set the alignment for the floating images.
  • Enable Parallax Animation - Set this option to "Yes" if you would like to have an animated parallax effect on the images.

Image Frame Slider

You can use this shortcode to create a scrolling section which consists of 3 images, two of which remain in the background while one is in the main focus.

  • Centered Image - Upload an image you wish to be initially positioned in the center.
  • Centered Image Link - Input a link you wish the centered image to lead to.
  • Left Image - Upload an image to be displayed on the left side of the main image.
  • Left Image Link - Input a link you wish the left image to lead to.
  • Right Image - Upload an image to be displayed on the right side of the main image.
  • Right Image Link - Input a link you wish the right image to lead to.
  • Enable Navigation - Set this option to "Yes" if you wish the navigational arrows to be displayed.
  • Link Target - Set the target for the image links.