Shortcodes for KLEO

Ajax Search Form

Example usage :

[kleo_search_form context="post,page,gd_place,portfolio" placeholder="Custom text placeholder"]

Name Value Description

context default:none Enter what post formats to show separated by comma

placeholder default:none Placeholder text for search input

type default:both Just form submit, just ajax results or both. Values: both, form_submit, ajax

form_style default:default This affects the look of the form. Default has a border and works for white backgrounds. Values: default, transparent

Gap

Example  usage :

[kleo_gap size="12px" class="" id=""]

Name Value Description

size default:12px Enter in the size of your gap. Pixels, ems, and percentages are all valid units of measurement.

class default:none A class to add to the element for CSS referrences.

id default:none Unique id to add to the element for CSS referrences

Custom inline style default:none add your custom css inline

Divider with icon

Example  usage :

[kleo_divider type="double" double="yes" position="right" text="" class="" id=""]

Name Value Description

type full,long,short default: full The type of the divider.

double yes, no default: no Have the divider double lined.

position center, left, right, default : center

icon Default: none Choose the icon to display

icon_size normal,large default: normal Where to apply the snow affect. To the parent column element or to the whole window.

text Default: none

id Default: none Unique id to add to the element for CSS referrences

class Default: none A class to add to the element for CSS referrences.

style Default: none Where to apply the snow affect. To the parent column element or to the whole window.

Feature Items Grid

Example usage:

[kleo_grid type="36" animation="yes"]
[kleo_feature_item]Feature item 1[/kleo_feature_item]
[kleo_feature_item]Feature item 2[/kleo_feature_item]
[/kleo_grid]

Name Value Description

type one,two,three,fourDefault: one Select how many items you want per row.

animation yes,noDefault: no Animate elements inside the grid one by one

colored_icons no,yesdefault : no Show colored icons. Color will be taken from the Highlight color from Theme options

style default,boxDefault: default Show bordered icons

bordered_icons no,yesDefault: no Show bordered icons

el_class Default: none  If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

Icon

Example Usage

[kleo_icon icon="android" icon_size=""]

Name Value Description

icon Default: none Choose the icon to display

tooltip_position left,top,right,bottom Default: left In which position to show the tooltip/popover

tooltip_action hover,click Default: hover When to trigger the popover

href default: none Type a http:// address

target _blank,_self Default: _blank In which position to show the tooltip/popover

el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

icon_size regular2x3x4xdefault : regular When to trigger the popover

tooltip no,tooltip,popover Default: no Type a http:// address

tooltip_title Default: none

tooltip_text Default: none

Fancy List

Example Usage:

[kleo_list]
[kleo_list_item]Lorem ipsum[/kleo_list_item]
[kleo_list_item]Lorem ipsum[/kleo_list_item]
[/kleo_list]

Name Value Description

type standard, icons, ordered, ordered-roman,unstyled Default: standard Select the list type.

icon_color yes Default: none

divider no, solid, dashed Default: no

align left, center, right, none Default: none Align the list.

el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

List Item

Works inside the kleo_list shortcode only

Example Usage:

[kleo_list_item icon="attention"]Lorem Ipsum[/kleo_list_item]

Name Value Description

icon Default: none Select icon from list

Animated Numbers

Example Usage:

[kleo_animate_numbers animation="animate-when-almost-visible" timer=""]100[/kleo_animate_numbers]

Name Value Description

animation animate-when-almost-visible, animate-when-visible Default: none

timer Default: none Enter the number to animate

el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

[/vc_column_text][vc_column_text]

Visibility

Example Usage

[kleo_visibility type="hidden-xs,hidden-sm,hidden-md,hidden-lg,visible-xs,visible-sm,visible-md,visible-lg" el_class="extraclass"][/kleo_visibility]

Name Value Description

type hidden-xs,hidden-sm,hidden-md,hidden-lg,visible-xs,visible-sm,visible-md,visible-lg Default: none Hide/Show content by screen size.

el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

Pin

Example Usage:

[kleo_pin type="circle" left="" right="" top="" bottom=""]

Name Value Description

type icon,circle,POI Default: icon Type of pin

icon Default: none Choose the icon to display.

top Default: none Enter only pixels and percentage, eq. 50px or 15%

left Default: none Enter only pixels and percentage, eq. 50px or 15%

right Default: none Enter only pixels and percentage, eq. 50px or 15%

bottom Default: none Enter only pixels and percentage, eq. 50px or 15%

tooltip_position left,right,bottom,top Default: left Enter only pixels and percentage, eq. 50px or 15%

tooltip tooltip,popover Default: tooltip To show it as a tooltip or as a popover

animation animate-when-almost-visible, animate-when-visible Default: none

el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

Clients

Example Usage:

[kleo_clients animated="yes" animation="appear" number="5" target="_blank" tags="" el_class="customclass"]

Name Value Description

animated yes, no Default: yes Animate the icons when you first view them

animation fade, appear Default: fade Choose the icon to display.

target default:none

number Default: 5 How many images to show

tags Default: none Filter by tags

el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

Testimonials

Example Usage:

[kleo_testimonials type="simple" specific_id="yes" ids="99" tags="" height="200px" el_class="extraclass"]

Name Value Description

animated simple, carousel Default: simple

specific_id yes, no Default: no Choose the icon to display.

ids default:none Comma separated list of ids to display.

number Default: 5

height Default: none Force a height on all elements. Expressed in pixels, eq: 300 will represent 300px

tags Default: none Filter by tags

el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

Members Carousel

Example Usage:

[kleo_bp_members_carousel type="active" number="15" min_items="2" max_items="7" image_size="thumb" rounded="square" item_width="155" autoplay="yes" online="noshow" class="customclass"]

Name Value Description

type active, newest, popular, online, alphabetical, random Default: active The type of members to display.

number Default: 12 How many members to get.

min_items Default: 1 Minimum number of items to show on the screen

max_items Default: 6 Maximum number of items to show on the screen

image_size thumbnail, full Default: full The size to get from buddypress

rounded rounded, square default: rounded. Rounded or square avatar

item_width Default: 150px The size of the member image

autoplay no, yes Default: no If the carousel should play automatically

online show, hide Default: show Show online status

el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

Members Grid

Example Usage:

[kleo_bp_members_grid type="active" number="12" perline="nine" rounded="rounded" animation="appear"]

Name Value Description

type active, newest, popular, online, alphabetical, random, Default: active The type of members to display.

number Default: 12 How many members to get.

perline one, two, three, four, five, six, seven, eight, nine, ten,eleven ,twelve Default: one How many members to show per line

rounded rounded, square default: rounded. Rounded or square avatar

animation fade, appear Default: none Maximum number of items to show on the screen

el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

Members Masonry

Example Usage:

[kleo_bp_members_masonry type="newest" number="15" rounded="square" online="noshow" class="myclass"]

Name Value Description

type active, newest, popular, online, alphabetical, random, Default: active The type of members to display.

number Default: 12 How many members to get.

rounded rounded, square default: rounded. Rounded or square avatar

online show, hide Default: none Maximum number of items to show on the screen

el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

Groups Carousel

Example Usage:

[kleo_bp_groups_carousel type="most-forum-posts" number="12" min_items="1" max_items="6" image_size="full" rounded="rounded" item_width="150"]

Name Value Description

type active, newest, popular, online, alphabetical, random, most-forum-topics, most-forum-posts Default: active The type of members to display.

number Default: 12 How many members to get.

min_items Default: 1 Minimum number of items to show on the screen

max_items Default: 6 Maximum number of items to show on the screen

image_size thumbnail, full Default: full The size to get from buddypress

rounded rounded, square default: rounded. Rounded or square avatar

item_width Default: 150px The size of the member image

autoplay no, yes Default: no If the carousel should play automatically

el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

Groups Grid

Example Usage:

[kleo_bp_groups_grid type="active" number="12" perline="one" rounded="rounded" animation="appear" class="myclass"]

Name Value Description

type active, newest, popular, online, alphabetical, random, Default: active The type of Groups to display.

number Default: 12 How many Groups to get.

perline one, two, three, four, five, six, seven, eight, nine, ten,eleven ,twelve Default: one How many Groups to show per line

rounded rounded, square default: rounded. Rounded or square avatar

animation fade, appear Default: none Maximum number of items to show on the screen

el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

Groups Masonry

Example Usage:

[kleo_bp_groups_masonry type="newest" number="15" rounded="square" online="noshow" class="myclass"]

Name Value Description

type active, newest, popular, online, alphabetical, random, Default: active The type of Groups to display.

number Default: 12 How many Groups to get.

rounded rounded, square default: rounded. Rounded or square avatar

online show, hide Default: none Maximum number of items to show on the screen

el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

Activity Stream

Example Usage:

[[kleo_bp_activity_stream number="6" post_form="no" show_button="yes" button_label="View All Activity" button_link="/activity"]]

Name Value Description

show all,blog, groups, friends, profile,status Default: all The type of activity to show

number Default: 6 How many activity streams to show

post_form yes,no default:no Shows the form to post a new update

show_button yes, no Default: yes Show a button with link to the activity page

button_label Default: View All Activity Button text

button_link Default: /activity Put here the link to your activity page

Activity Page

Example Usage:

[[kleo_bp_activity_page]]

Name Value Description

kleo_bp_activity_page Default: none Show the activity page

Pricing Tables

Example Usage:

[kleo_pricing_table columns="4" style="2"][kleo_pricing_table_item title="Column title" price="$10" popular="yes" button_label="Button txt" features="featureslist"]lorem ipsum[/kleo_pricing_table_item][/kleo_pricing_table]

Name Value Description

title Default: custom Title

price Default: custom Title

popular yes, no Default: no Shows this column with a different style

textarea_html Default: none Enter description column here

features Default: none

button_label Default: select

link Default: none

Galaxy Particles

Example Usage:

[kleo_particles number="88" size="6" color="#ffffff"]

Name Value Description

number Default: 88 Particles number

size Default: 6 Particles size

color Default: #FFFFFF Particles color

You can use the particle.js generator here to make your own and transfer the settings https://vincentgarreau.com/particles.js/

News Focus

Example Usage:

[kleo_news_focus name="name" featured="5" posts_query="size:10|order_by:date"]

Name Value Description

name Default: name Enter a selection name

featured Default: 5 Enter the number of post to highlight and show big on the left column.

posts_query Default: size:10|order_by:date If you refine your posts by category then they will show as tabbed content in the shortcode

Kleo Posts

Example Usage:

[kleo_posts loop="size:12|order_by:date"]

Name Value Description

query_offset Default: 0 If you want to add an offset to the wp_query posts

loop Default: size:2|order_by:date Posts query args, seehttps://codex.wordpress.org/Class_Reference/WP_Query

post_layout grid|small|standard Default: grid What layout to generate

columns Default: 4 Applies to grid layout onlyHow many items to show per row. A number between 2 and 6.

show_thumb yes|just_1|just_2|just_3|no Default: yes Applies to standard layout onlyShow Thumbnail image. A number between 2 and 6.

show_switcher yes|no Default: no If you want to show layout switcher options

switcher_layouts masonry,standard,small Default: masonry,standard,small What options to show in the layout switcher

show_meta yes|no Default: yes Show post meta

inline_meta yes|no Default: no Applies to Standard Layout only. Shows the post meta elements in one line if enabled.

show_excerpt yes|no Default: yes Show post excerpt

show_foter yes|no Default: yes Show|Hide read more button and post likes

load_more yes|no Default: no Enable Load more posts via AJAX.