首頁
Button
The structure used:
[ jvbutton link="http://joomlavi.com" color="btn-theme" size="btn-lg" type="btn-round" target="blank" icon=""]See more[/jvbutton]
Options:
- [link]: your url
- [color]:
btn-theme,btn-primary,btn-success,btn-warning,btn-danger,btn-inverse - [size]:
btn-lg,btn-sm,btn-xs - [type]:
btn-round,btn-outline - [target]:
blank,self,parent,top - [icon]: Template classes that support. Example:
fa fa-star,gala-star,icon-star
[jvbutton color="btn-theme" type="btn-round" target="blank" icon="fa fa-flash"]See more[/jvbutton] [jvbutton color="btn-primary" type="btn-round" target="blank" icon=""]See more[/jvbutton] [jvbutton color="btn-danger" type="btn-outline btn-round" target="blank" icon=""]See more[/jvbutton]
Social
The structure used:
[ jvsocial mode="facebook_like" name="user_name" width="250" height="24"]
Options:
- [mode]:
facebook_like,facebook_fanpage,twitter_follow,twitter_tweet - [name]: Page name (only facebook_fanpage & twitter_follow)
- [width]/[height]: Width/height block facebook fanpage (only facebook_fanpage)
[jvsocial mode="facebook_like"]
[jvsocial mode="facebook_fanpage" name="joomlavi.page" width="250" height="300"]
[jvsocial mode="twitter_follow" name="joomlavi"]
[jvsocial mode="twitter_tweet"]
Quote block
The structure used:
[ jvquote type="quote-green" title="Someone famous in" subtitle="Source Title"]Cotents[/jvquote]
Options:
- [type]:
quote-green,quote-red,quote-yellow,quote-icon,quote-unstyledor empty - [title]: Your title
- [subtitle]: Your subtitle
[jvquote type="quote-green" title="Someone famous in" subtitle="Source Title"]Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. Duis aute irure dolor in reprehenderit in voluptate. [/jvquote]
List style
The structure used:
[ jvlist type="arrow" icon="fa fa-star"]List item|List item|List item[/jvlist]
Options:
- [type]:
arrow,check,square,roundor empty - [icon]: Template classes that support. Example:
fa fa-star,gala-star,icon-star
Arrow list
[jvlist type="arrow"]List item 1|List item 2|List item 3[/jvlist]Check list
[jvlist type="check"]List item 1|List item 2|List item 3[/jvlist]Round list
[jvlist type="round"]List item 1|List item 2|List item 3[/jvlist]Icon list
[jvlist icon="fa fa-calendar-o"]List item 1|List item 2|List item 3[/jvlist]Alert
The structure used:
[ jvalert type="success " close="yes" icon="yes" title="Your title"]Content[/jvalert]
Options:
- [type]:
success,info,warning,danger - [icon]:
yesorno(default) - [close]:
yesorno(default) - [title]: Your title
[jvalert type="success" icon="yes" close="yes" title="Alert success"]Lorem ipsum dolor sit amet.[/jvalert]
[jvalert type="info" icon="yes" close="yes" title="Alert info"]Lorem ipsum dolor sit amet.[/jvalert]
[jvalert type="warning" icon="yes" close="yes" title="Alert warning"]Lorem ipsum dolor sit amet.[/jvalert]
[jvalert type="danger" icon="yes" close="yes" title="Alert danger"]Lorem ipsum dolor sit amet.[/jvalert]
Accordion
The structure used:
[ jvaccordions type="accordions" style="icon" theme="info"] [jvaccordion title="Title 1" icon="fa fa-user" active="yes"]content[/jvaccordion] [jvaccordion title="Title 2" icon="fa fa-user" ]content[/jvaccordion] [/jvaccordions]
Options:
- [type]:
toggle,accordionsor empty (default) - [style]:
icon,unstyledor empty (default) - [theme]:
theme,primary,info,success,danger,warnigor empty - [title]: Your title of accordion item
- [icon]: Icon title of accordion item. Template classes that support. Example:
fa fa-star,gala-star,icon-star
Accordion:
[jvaccordions style="icon" theme="theme"] [jvaccordion title="Who we are" icon="gala-user-stroke" active="yes"]Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.[/jvaccordion] [jvaccordion title="What we do" icon="gala-rocket-stroke"]Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.[/jvaccordion] [jvaccordion title="Why choose us" icon="gala-leaf-stroke"]Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.[/jvaccordion] [/jvaccordions]
[jvaccordions style="unstyled" theme="theme"] [jvaccordion title="Who we are" active="yes"]Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.[/jvaccordion] [jvaccordion title="What we do"]Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.[/jvaccordion] [jvaccordion title="Why choose us"]Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.[/jvaccordion] [/jvaccordions]
Toggle:
[jvaccordions type="toggle" style="icon" theme="theme"] [jvaccordion title="Who we are" icon="gala-user-stroke" active="yes"]Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.[/jvaccordion] [jvaccordion title="What we do" icon="gala-rocket-stroke" active="yes"]Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.[/jvaccordion] [jvaccordion title="Why choose us" icon="gala-leaf-stroke"]Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.[/jvaccordion] [/jvaccordions]
[jvaccordions type="toggle" style="unstyled" theme="theme"] [jvaccordion title="Who we are" active="yes"]Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.[/jvaccordion] [jvaccordion title="What we do" active="yes"]Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.[/jvaccordion] [jvaccordion title="Why choose us"]Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.[/jvaccordion] [/jvaccordions]
Columns
The structure used:
[ jvcolumns] [jvcol title="Title" number="4" desktop="4" tablet="2" mobile="1" head="h3"]Content[/jvcol] [jvcol title="Title" number="4" desktop="4" tablet="2" mobile="1" head="h3"]Content[/jvcol] [jvcol title="Title" number="4" desktop="4" tablet="2" mobile="1" head="h3"]Content[/jvcol] [jvcol title="Title" number="4" desktop="4" tablet="2" mobile="1" head="h3"]Content[/jvcol] [/jvcolumns]
Options:
- [number]: Từ 1 đến 12 (bootstrap). Trên màn hình chiều ngang lớn hơn 1200px
- [desktop]: Từ 1 đến 12 (bootstrap). Trên màn hình chiều ngang lớn hơn 992px
- [tablet]: Từ 1 đến 12 (bootstrap). Trên màn hình chiều ngang lớn hơn 768px
- [mobile]: Từ 1 đến 12 (bootstrap). Trên màn hình chiều ngang bé hơn 768px
- [head]: heading
h1,h2,h3,h4,h5,h6,p... - [title]: Your title
[jvcolumns] [jvcol title="1/4 Columns" number="3" desktop="3" tablet="2" mobile="1" head="h6"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. [/jvcol] [jvcol title="1/4 Columns" number="3" desktop="3" tablet="2" mobile="1" head="h6"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. [/jvcol] [jvcol title="1/4 Columns" number="3" desktop="3" tablet="2" mobile="1" head="h6"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. [/jvcol] [jvcol title="1/4 Columns" number="3" desktop="3" tablet="2" mobile="1" head="h6"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. [/jvcol] [/jvcolumns]
Testimonials
The structure used:
[jvtestimonials style="slide" number="4" desktop="4" tablet="2" mobile="1" title="Title" border="no"] [jvtest name="John Doe" subname="Photographer" avatar="avatar.jpg" link="http://joomlavi.com"]Content[/jvtest] [jvtest name="John Doe" subname="Photographer" avatar="avatar.jpg" link="http://joomlavi.com"]Content[/jvtest] [jvtest name="John Doe" subname="Photographer" avatar="avatar.jpg" link="http://joomlavi.com"]Content[/jvtest] [/jvtestimonials]
Options:
- [style]:
silde,fullandclassicor empty dedault - [number]: Số cột trên màn hình chiều ngang lớn hơn 1200px (only classic style)
- [desktop]: Số cột trên màn hình chiều ngang lớn hơn 992px (only classic style)
- [tablet]: Số cột trên màn hình chiều ngang lớn hơn 768px (only classic style)
- [mobile]: Số cột trên màn hình chiều ngang bé hơn 768px (only classic style)
- [title]: Your title (only full style)
- [border]: Show/hidden border
[jvtestimonials style="slide"] [jvtest name="John Doe" subname="Photographer" avatar="images/demo/avatar/te-3.jpg" link="http://joomlavi.com"]Aenean egestas semper arcu, in rhoncus ligula tincidunt non. Sed laoreet diam vel justo tempus pulvinar.[/jvtest] [jvtest name="John Doe" subname="Photographer" avatar="images/demo/avatar/te-2.jpg" link="http://joomlavi.com"]Aenean egestas semper arcu, in rhoncus ligula tincidunt non. Sed laoreet diam vel justo tempus pulvinar.[/jvtest] [jvtest name="John Doe" subname="Photographer" avatar="images/demo/avatar/te-1.jpg" link="http://joomlavi.com"]Aenean egestas semper arcu, in rhoncus ligula tincidunt non. Sed laoreet diam vel justo tempus pulvinar.[/jvtest] [/jvtestimonials]
[jvtestimonials style="slide"] [jvtest name="John Doe" subname="Photographer" avatar="images/demo/avatar/te-3.jpg" link="http://joomlavi.com"]Aenean egestas semper arcu, in rhoncus ligula tincidunt non. Sed laoreet diam vel justo tempus pulvinar.[/jvtest] [jvtest name="John Doe" subname="Photographer" avatar="images/demo/avatar/te-2.jpg" link="http://joomlavi.com"]Aenean egestas semper arcu, in rhoncus ligula tincidunt non. Sed laoreet diam vel justo tempus pulvinar.[/jvtest] [jvtest name="John Doe" subname="Photographer" avatar="images/demo/avatar/te-1.jpg" link="http://joomlavi.com"]Aenean egestas semper arcu, in rhoncus ligula tincidunt non. Sed laoreet diam vel justo tempus pulvinar.[/jvtest] [/jvtestimonials]
Tabs
The structure used:
[ jvtabs active="1"] [jvtab title="Tab 1" icon=""]Content tab 1[/jvtab] [jvtab title="Tab 2" icon=""]Content tab 2[/jvtab] [jvtab title="Tab 3" icon=""]Content tab 3[/jvtab] [/jvtabs]
Options:
- [active]: Tab panel active
- [title]: Tab title
- [icon]: Template classes that support. Example:
fa fa-star,gala-star,icon-star
[jvtabs active="1"] [jvtab title="Tab 1" icon="gala-rocket-stroke"]Tab 1, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. [/jvtab] [jvtab title="Tab 2" icon="gala-leaf-stroke"]Tab 2, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. [/jvtab] [jvtab title="Tab 3" icon="gala-location-stroke"]Tab 3, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. [/jvtab] [jvtab title="Tab 4" icon="fa fa-star"]Tab 4, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. [/jvtab] [/jvtabs]
[jvtabs active="1" style="left"] [jvtab title="Tab 1" icon="gala-rocket-stroke"]Tab 1, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. [/jvtab] [jvtab title="Tab 2" icon="gala-leaf-stroke"]Tab 2, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. [/jvtab] [/jvtabs]
[jvtabs active="1" style="right"] [jvtab title="Tab 1" icon="gala-rocket-stroke"]Tab 1, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. [/jvtab] [jvtab title="Tab 2" icon="gala-leaf-stroke"]Tab 2, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim et ven veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat. [/jvtab] [/jvtabs]
Pricing table
The structure used:
[ jvpricing number="4" desktop="4" tablet="2" mobile="1" color="theme"] [jvplan title="Title" button_link="#" button_label="Sign up!" price="$15" per="month" feature="yes"]Feature 1|Feature 2|Feature 3[/jvplan] [jvplan title="Title" button_link="#" button_label="Sign up!" price="$15" per="month" feature="no"]Feature 1|Feature 2|Feature 3[/jvplan] [jvplan title="Title" button_link="#" button_label="Sign up!" price="$15" per="month" feature="no"]Feature 1|Feature 2|Feature 3[/jvplan] [jvplan title="Title" button_link="#" button_label="Sign up!" price="$15" per="month" feature="no"]Feature 1|Feature 2|Feature 3[/jvplan] [/jvpricing]
Options:
- [color]:
theme,primary,info,success,danger,warnigor empty - [number]: Số cột trên màn hình chiều ngang lớn hơn 1200px
- [desktop]: Số cột trên màn hình chiều ngang lớn hơn 992px
- [tablet]: Số cột trên màn hình chiều ngang lớn hơn 768px
- [mobile]: Số cột trên màn hình chiều ngang bé hơn 768px
- [title]: Your title
- [button_link]: Your button link
- [button_label]: Your button label
- [price]: Your price
- [per]: Your per price. Example: day, month, year...
- [feature]: Select Plan feature.
[jvpricing number="4" desktop="4" tablet="2" mobile="1" color="theme"] [jvplan title="Standard" button_link="http://joomlavi.com" button_label="Purchase" price="$15" per="month" feature="no"]Feature 1|Feature 2|Feature 3[/jvplan] [jvplan title="Premium" button_link="http://joomlavi.com" button_label="Purchase" price="$25" per="month" feature="no"]Feature 1|Feature 2|Feature 3[/jvplan] [jvplan title="Profesional" button_link="http://joomlavi.com" button_label="Purchase" price="$35" per="month" feature="yes"]Feature 1|Feature 2|Feature 3[/jvplan] [jvplan title="Ultimate" button_link="http://joomlavi.com" button_label="Purchase" price="$45" per="month" feature="no"]Feature 1|Feature 2|Feature 3[/jvplan] [/jvpricing]
Progressbar
The structure used:
[jvprogressbar theme="back"] [jvprogress title="Graphic Design" width="75"] [jvprogress title="Web Design" width="87"] [jvprogress title="Development" width="63"] [/jvprogressbar]
Options:
- [theme]:
theme,primary,info,success,danger,warnig, ,black,whiteor empty - [title]: Your title
- [width]: Bar width.
[jvprogressbar] [jvprogress title="Graphic Design" width="75"] [jvprogress title="Web Design" width="87"] [jvprogress title="Development" width="63"] [/jvprogressbar]
Piechart
The structure used:
[ jvpiechart title="Title" from="100" to="25" barcolor="#dddddd" trackcolor="#ffd442" linecap="10" linewidth="10" size="253" icon="gala-flash-stroke"]
Options:
- [title]: Your title
- [from]: Start point
- [to]: End point
- [barcolor]: The color of the curcular bar. You can pass either a css valid color string like rgb, rgba hex or string colors. But you can also pass a function that accepts the current percentage as a value to return a dynamically generated color.
- [trackcolor]: The color of the track for the bar, false to disable rendering.
- [linecap]: Defines how the ending of the bar line looks like. Possible values are: butt, round and square.
- [linewidth]: Width of the bar line in px.
- [size]: Size of the pie chart in px. It will always be a square.
- [icon]: Template classes that support. Example:
fa fa-star,gala-star,icon-star
[jvpiechart title="Title" from="100" to="25" barcolor="#dddddd" trackcolor="#ffd442" linecap="10" linewidth="10" size="253" icon="gala-flash-stroke"]
Counting
The structure used:
[ jvcounting title="Title" color="theme" number="56343" icon="gala-flash-stroke"]
Options:
- [title]: Your title
- [color]:
theme,primary,info,success,danger,warnig,back,whiteor empty - [number]: Your number
- [icon]: Template classes that support. Example:
fa fa-star,gala-star,icon-star
[jvcounting title="Web projects" color="theme" number="9870" icon="gala-camera-stroke"]
[jvcounting title="Design Projects" color="theme" number="8796" icon="gala-flash-stroke"]
[jvcounting title="SEO Keywords" color="theme" number="6893" icon="gala-leaf-stroke"]
[jvcounting title="Lines of code" color="theme" number="8796" icon="gala-rocket-stroke"]
Services
The structure used:
[ jvservices type="feature" title="Title" color="theme" icon="gala-flash-stroke"]Cotent[/jvservices]
Options:
- [title]: Your title
- [color]:
theme,primary,info,success,danger,warnigor empty - [icon]: Template classes that support. Example:
fa fa-star,gala-star,icon-star
[jvservices type="feature" title="100% Responsive Design" color="theme" icon="gala-mobile-stroke"]Aenean adipiscing purus in odio aliquet gravida. Pellentesque convallis metus at venenatis commodo.[/jvservices]
[jvservices type="feature" title="100% Responsive Design" color="theme" icon="gala-flash-stroke"]Aenean adipiscing purus in odio aliquet gravida. Pellentesque convallis metus at venenatis commodo.[/jvservices]
[jvservices type="feature" title="100% Responsive Design" color="theme" icon="gala-cog-stroke"]Aenean adipiscing purus in odio aliquet gravida. Pellentesque convallis metus at venenatis commodo.[/jvservices]
[jvservices type="feature" title="100% Responsive Design" color="theme" icon="gala-leaf-stroke"]Aenean adipiscing purus in odio aliquet gravida. Pellentesque convallis metus at venenatis commodo.[/jvservices]