Shortcodes Explanation

NOTICE: Please note that following article is still incomplete, we will be listing all variables details for all shortcodes.

Bravio Shortcodes

We have compiled full list of Bravio Shortcodes (that are part of Clixint Core plugin). Please feel free to browse through documentation and contact is of you have any questions.

How to use this page

You can view a Shortcode Generator preview and a Live Demo of each shortcode, that will lead to actual demo. If you want to copy the code, please double click on shortcode code tag below and copy the syntax. Please note that all the values always fall in Double Quotations e.g. if color value is supposed to be #ffffff (white) then the value of color should look like color=”#ffffff”

Flexible Theme Colors

You may use keywords i.e. accent or primary to use main Accent and Primary theme colors, in this the color variable would look like color=”accent” or color=”primary”. This can be used throughout Shortcode, Page Panel and Theme Options, this makes the whole design colors flexible, changing Main Theme color will change everywhere on your website.

Animated Words

Generator View . Live Demo . Download Demo Page Source

words – list all words that you want to animated separated with comma e.g. Scalable, Awesome, Perfect – words=”Word 1, Word 2, Word 3″
style – this is animation style (a number) from 1 to 10 e.g. 2 – style=”8″
heading – it will wrap the line in Heading from 1 to 6 e.g. 1 will become <*h1> heading=”1″
position – this defines if animated words should be before or after the text, accepted 2 values: 1 means before and 2 means after e.g. 1 – position=”1″
textcolor – color of the text line but NOT animated words e.g. #666666 (primary or accent) – textcolor=”accent”
wordscolor – color of animated words e.g. #999999 (primary or accent) – wordscolor=”#999999″
google_font – this will load a custom Google Font with e.g. Raleway:200,300 (200 and 300 are font weight) – fontweight=”Raleway:200,300″
fontsize – font size for text and animated words e.g 25 without px – fontsize=”25″
fontfamily – you may define existing font family e.g. if Raleway font already loaded on page, just use fontfamily=”Raleway”
fontweight – sets font weight e.g. 100 or 200 or 300 … 800 e.g. fontweight=”200″

Accordion / Toggle

Generator View . Live Demo . Download Demo Page Source

type – Wrapper: type can be accordion or simple toggle e.g. type=”accordion”
skin – Wrapper: can be value 1 .. 5 e.g. skin=”2″
title – Toggle: this is text title e.g. title=”Title of Accordion / Toggle”
icon – Toggle: this uses Font Awesome icons e.g. icon=”fa-tablet”
open – Toggle: if you want to open any toggle by default e.g. open=”yes”

Button

Generator View . Live Demo . Download Demo Page Source

link – defines url path e.g. link=”http://ultimax.co/bravio”
target – open url (_self) in current or new window (_blank) e.g. target=”_blank or _self or _parent or _top or framename”
size – button sizes e.g. mini, small, medium, large and xlarge
shape – different button shapes e.g. flat, round, pill, shield and skew
icon – set Font Awesome icon e.g. icon=”fa-tablet”
inset – sets inner semi-transparent line if is set to 1 e.g. inset=”1″
fontsize – sets font size e.g. fontsize=”15″
fontweight – sets font weight e.g. fontweight=”300″
fontfamily – sets font family if already included in theme e.g. fontfamily=”Open Sane”
hovereffect – sets CSS effect on hover
marginright – this helps when you have more than 1 button in a row to add space berteen buttons e.g. marginright=”5″
lrpadding – set left and right padding inside the button e.g. lrpadding=”10″ so 10px padding added to left and right
iconcolor – sets icon color e.g. iconcolor=”accent or primary” or iconcolor=”#fff”
iconovercolor – sets icon HOVER color
iconposition – sets position of icon before or after text e.g. iconposition=”before” or iconposition=”after”
bggradstart – sets if you want to make gradient button, this is start color value e.g. bggradstart=”#888888″
bggradend – sets end color for gradient button e,g, bggradend=”#000″
gradtype – default gradient color starts from Top to Bottom, but you can also start from Left to Right e.g. gradtype=”left”
bgcolor – sets background color e.g. bgcolor=”accent” or bgcolor=”#787878″
bgovercolor – set HOVER background color e.g. bgcolor=”primary” or bgcolor=”#333″
bgtransparency – set background transparency applied to both active / hover state including border e.g. bgtransparency=”70″ means 0.7
bordertransparency – set border background transparency separately if you don’t want transparency border set it to 0 e.g. bordertransparency=”0″
textshadow – sets text shadow, if you set it to 1, it will add grey shadow or choose your color e.g. textshadow=”1″ or textshadow=”accent” or textshadow=”#666″
textcolor – set button’s text color e.g. textcolor=”#fff”
textovercolor – set button’s text HOVER color e.g. textcolor=”#fff”
border – sets button border, if you want border of 1 pixel set it to border=”1″
bordercolor – sets border color e.g. bordercolor=”accent” or bordercolor=”#444″
borderovercolor – sets border HOVER color e.g. bordercolor=”accent” or bordercolor=”#444″
tdbordercolor – sets color of 3D border, if color is set it will make button look 3D
tdborderovercolor sets HOVER color of 3D border, if color is set it will make button look 3D

Column

Generator View . Live Demo . Download Demo Page Source

type – this defines type of column i.e. one_half, one_fourth, three_fourth, one_third, two_third, one_fifth, two_fifth, three_fifth, four_fifth, one_sixth, two_sixth, five_sixth e.g. [column type=”one_half”]content 1[/column] then last column e.g. [column type=”one_half” last=”1″]content 2[/column]
last – always set if its a last column e.g. last=”1″ means yes
equalheights – set equalheight=”1″ for any row columns to be always equal in height
nospace – set nospace=”1″ if you don’t want margin between columns
bgcolor – background color e.g. bgcolor=”accent” or bgcolor=”#f7f7f7″
bgimage – background image e.g. bgimage=”url”
bgpattern – set background pattern from 1..34 e.g. bgpattern=”7″
bgtransparency – background transparency, if you want .7 then set it to bgtransparency=”70″
fontsize – font size e.g. fontsize=”15″ for inner text
border – set border for column e.g. border=”2″ means 2px border
borderonly – sets border for one side (top, right, bottom, left) e.g. borderonly=”right” will set border on right only
borderstyle – css border style (dotted,dashed,solid,double,groove,ridge,inset,outset)
bordercolor – border color e.g. bordercolor=”accent”
textalign – sets text alignment e.g. textalign=”left, center or right”
textcolor – set text color e.g. textcolor=”#444″
height – custom height for any column e.g. height=”50″
textjustify – text justify accepts only 1 parameneter e.g. textjustify=”1″ means yes
radius – making round corners e.g. radius=”4″ means 4px round corner
verticalmiddle – sets content in vertically center verticalmiddle=”1″ means yes
nopadding – removes inner column padding e.g. nopadding=”top, bottom, left or right”
lrpadding – sets both left and right inner padding lrpadding=”30″
tbpadding – sets top and bottom padding e.g. tbpadding=”30″

Content Box

Generator View . Live Demo . Download Demo Page Source

title – sets title of content box e.g. title=”My Title”
titlemargin – sets title bottom margin e.g. titlemargin=”20″
titlecolor – sets color of title e.g. titlecolor=”accent”
titlefontsize – sets title’s font size e.g. titlefontsize=”15″
rollovertitlecolor – sets rollover title color e.g. rollovertitlecolor=”primary”
icon – sets icons e.g. icon=”fa-pencil” uses Font Awesome class
iconcolor – sets icon color e.g. iconcolor=”#555″
iconbgcolor – sets icon’s background color e.g. iconbgcolor=”#333″
rollovericoncolor – sets HOVER icon color e.g. rollovericoncolor=”accent”
rollovericonbgcolor – set icon background color e.g. rollovericonbgcolor=”#888″
iconshadowcolor – sets 2px shadow color e.g. iconshadowcolor=”#f7f7f7″
rollovericonshadowcolor – sets 2px shadow color e.g. rollovericonshadowcolor=”#555″
iconborder – set border for icon iconborder=”2″ means 2px border
iconbordercolor – set icon border color e.g. iconbordercolor=”#777″
rollovericonbordercolor – hover icon border color e.g. rollovericonbordercolor=”#222″
style – sets content box style from 1..8 e.g. style=”5″
textcolor – sets color of inner text e.g. textcolor=”#444″
textfontsize – sets inner text e.g. fontsize=”14″
textcolorover – hover inner text color e.g. textcolorover=”#444″
container – sets a container around content box e.g. container=”1″ means add container
cnbgcolor – sets container background color e.g. cnbgcolor=”#f7f7f7″
cnbgovercolor – sets container’s hover background color e.g. cnbgcolor=”#f5f5f5″
cnbordercolor – sets container border color e.g. cnbordercolor=”#f3f3f3″
cntransparency – sets container background transparency e.g. cntransparency=”70″ means .7
imagebottommargin – if style supports image, it sets bottom margin e.g. imagebottommargin=”30″
bgtransparency – set icons background transparency e.g. bgtransparency=”70″ means .7
shadow – adds a css show around content box from 1..5 e.g. shadow=”2″
button – sets button like “read more” e.g. button=”Read More”
buttonalign – set aligment of button e.g. buttonalign=”left, center or right”
buttonbgcolor – sets button’s background color buttonbgcolor=”#f7f7f7″
buttonbgovercolor – set hove button’s background color e.g. buttonbgovercolor=”$333″
buttontextcolor – sets buttons text color e.g. buttontextcolor=”#444″
link – set button link e.g. link=”http://bravio.co”
justify – justifies text, add 1 to activate e.g, justify=”1″
align – aligns content inside e.g. align=”left or right”
image – adds image if support by style e.g. image=”imageurl”
imageonclick – if you want to open Lightbox set it to 1 e.g. imageonclick=”1″
imagesize – defines if image is responsive or fixed size e.g. imagesize=”respimage OR fixed”
imageovereffect – select from 4 different hover image styles e.g. imageovereffect=”1″
animation – uses Animate.css for animation e.g. animation=”fadeInUp”
animation_delay – animation start delay e.g. animation_delay=”0.2s”
animation_offset – animation offset
animation_duration – complete animation in X time e.g. animation_duration=”0.5s”

Counter Box

Generator View . Live Demo . Download Demo Page Source

Fancy Callout Box

Generator View . Live Demo . Download Demo Page Source

Fancy Icon List

Generator View . Live Demo . Download Demo Page Source

Fullwidth Section

Generator View . Live Demo . Download Demo Page Source

Google Maps

Generator View . Live Demo . Download Demo Page Source

Separator / Gap / Divider

Generator View . Live Demo . Download Demo Page Source

Image

Generator View . Live Demo . Download Demo Page Source

Icon Button

Generator View . Live Demo . Download Demo Page Source

Latest / Recent Portfolio (Work)

Generator View . Live Demo . Download Demo Page Source

Progress Bars

Generator View . Live Demo . Download Demo Page Source

Counter / Percentage Circles

Generator View . Live Demo . Download Demo Page Source

Recent Blog Posts

Generator View . Live Demo . Download Demo Page Source

Review / Testimonial

Generator View . Live Demo . Download Demo Page Source

Team Member

Generator View . Live Demo . Download Demo Page Source

Titlebox / Icon Divider

Generator View . Live Demo . Download Demo Page Source

Tabs

Generator View . Live Demo . Download Demo Page Source

Was this article helpful?

Related Articles