1. Home
  2. Kleo
  3. Shortcodes for KLEO

Shortcodes for KLEO

Ajax Search Form

Example usage :

COPY CODE
[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 :

COPY CODE
[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 :

COPY CODE
[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:

COPY CODE
[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

COPY CODE
[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:

COPY CODE
[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:

COPY CODE
[kleo_list_item icon="attention"]Lorem Ipsum[/kleo_list_item]
Name Value Description
icon Default: none Select icon from list

Animated Numbers

Example Usage:

COPY CODE
[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

COPY CODE
[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:

COPY CODE
[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:

COPY CODE
[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:

COPY CODE
[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:

COPY CODE
[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:

COPY CODE
[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:

COPY CODE
[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:

COPY CODE
[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:

COPY CODE
[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:

COPY CODE
[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:

COPY CODE
[[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:

COPY CODE
[[kleo_bp_activity_page]]
Name Value Description
kleo_bp_activity_page Default: none Show the activity page

Pricing Tables

Example Usage:

COPY CODE
[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:

COPY CODE
[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:

COPY CODE
[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:

COPY CODE
[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, see https://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.

Blazing Fast Site Hosting & Maintenance

BuddyBuilder is out. Total freedom to build online communities
SeventhQueen  - 2021 - Privacy Policy