Shortcodes | Helix V2 - Documentation | JoomShaper

Helix V2

Updated Last: 13 July 2017

Shortcodes

Accordion

An accordion is a vertically stacked list of items. Each item can be "expanded" or "stretched" to reveal the content associated with that item. It allows to displays collapsible content panels for presenting information in a limited amount of space, much like tabs but vertical. Accordion lets your visitors focus on one thing at a time. It's great for FAQs and lists that need organization. It lets you add inside any sort of content, like text, images, and even HTML.

Syntax [[accordion id="accordion1"]
[accordion_item title='Title']Content[/accordion_item]
[/accordion]]
Example code
 [[accordion id="accordion1"]
[accordion_item title='Title1']Content1[/accordion_item]
[accordion_item title='Title2']Content2[/accordion_item]
[accordion_item title='Title3']Contnet3[/accordion_item]
[/accordion]]
Attributes  id, title

 

Attributes

 Attribute NameDefault Value Description 
id accordion1 Accordion ID must be unqiue. The ID value can not be same in a single page.
title empty Enter the title for the accordion item.

 

Example screenshot

Horizontal Tabs

Tabs are perfect for displaying a bunch of organized information in a small area, it uses multiple panels. They can be used for switching between items in the container. You can use any HTML code inside the tabs also insert images, whatever you need to get your information to your viewer. Add your heading and your content for each tab easily with following shortcodes.

Syntax [tab id="tab" class="tab"]
[tab_item title='Title']Content[/tab_item]
[/tab]
Example [tab id="tab" class="tab"]
[tab_item title='Title1']Content1[/tab_item]
[tab_item title='Title2']Content2[/tab_item]
[tab_item title='Title3']Contnet3[/tab_item]
[/tab]
Attributes  id, button, class, title

 

Attributes

 Attribute NameDefault Value Description 
id tab Tab ID must be unqiue. The ID value can not be same in a single page.
button nav-tabs Use any nav style class from bootstrap. e.g. nav-pills, nav-pills nav-stacked, nav-tabs nav-justified, nav-pills nav-justified.
class tab Use any class according to your requirement.
title empty Enter the title for the tab item.

 

Example Tabs (screenshot)

If you want your website to display various photos with labels, a simple image carousels effect. You can integrate it into any article with a simple shortcode. In certain circumstances, this can be used as a replacement for the slideshow module.

Syntax [[carousel id="myCarousel"]
[carousel_item]Content[/carousel_item]
[/carousel]]
Example [[carousel id="myCarousel"]
[carousel_item]add image here [caption]Powerful templates framework to develop Joomla base website faster![/caption][/carousel_item]
[carousel_item]add image here [caption]Powerful templates framework to develop Joomla base website faster![/caption][/carousel_item]
[carousel_item]add image here [caption]Powerful templates framework to develop Joomla base website faster![/caption][/carousel_item]
[/carousel]]
Attributes  id

 

Attributes

Attribute NameDefault ValueDescription
id myCarousel Carousel ID must be unqiue. The ID value can not be same in a single page.

Button Shortcode

Helix Framework includes some pretty amazing button options (attributes). We enhances standard buttons to themeable buttons with appropriate hover and active styles. Available in small, medium and large sizes. Buttons can be an integral part of your site, and we’ve made sure you have the options you need to add beautiful buttons to any page.

Syntax [button]Button[/button]
Example [button type="" size="" link="" target=""]Button[/button]
Attributes  type, size, link, target

 

Attributes

Attribute NameDefault ValueDescription
type empty Type of button, e.g. primary, success, warning, danger, inverse.
size empty Size of button, e.g. mini, small, normal, large.
link empty Link of button, e.g. http://www.your-site.com
target self Link target of button, e.g. _blank.

Examples

Icon Shortcodes

Helix framework includes a large set of icons from Font Awesome to use throughout the template. These icons are a vector font icon (pictographic font) instead of an image, which produces much faster load times and will always ensure perfect sharpness. They are popular among web designers because they can be resized without losing quality and styled using attributes. Icons are loaded with some options that allow you to easily customize them. Now easily add any of 360+ built in icons to your articles and custom HTML modules using shortcodes. They can  be used to highlight different sections of content.

The shortcode to use is [icon name="name-of-icon"], where in brackets is the name of the icon you would like to use.

Syntax [icon name="icon-heart"]
Example [icon name="icon-heart" size="32" color="red" class="myclass"]
Attributes  name, size, color, class

 

Attributes

 Attribute NameDefault Value Description 
name icon-home Name of the fontawesome icon.
size empty Set the size of the icon, eg. 16
color empty Set desire color name or color HEX code.
class empty Set a custom class if you really need.

 

Examples

Alert Boxes

Grab your users attention by using the easy to add alert boxes shortcode. They are used for things like capturing newsletter signups, club subscribers or just warning users.  There are available 4 universal styles: information, error, success and warning. The messages will close when the 'x' is clicked. Those responsive Alert messages can be used throughout the site. And yes, inside shortcode tags you can use your own HTML code.

Syntax [alert] Content [/alert]
Example [alert type="info" style=""]
Alert content
[/alert]
Attributes  type, style

 

Attributes

 Attribute NameDefault Value Description 
type default Set alert type as: info, danger or success.
style empty Add any custom inline css style if you need.

Example Screenshot

Columns

Sometimes you just need to divide your content inside article into different columns.With this shortcode you have the most usable columns and they are responsive, which means they go from multi-column to single column on smaller screens without you having to do anything. You can put there images, text, video, or whatever you can put in Joomla content in these sections. 

Syntax [[row id="" class=""]
[col class="span4"]Content[/col]
[/row]]
Example [[row id="row" class="row"]
[col class="span4"]Content[/col]
[col class="span4"]Content[/col]
[col class="span4"]Content[/col]
[/row]]
Attributes  id, class

 

Attributes

 Attribute NameDefault Value Description 
id empty Row ID must be unqiue. The ID value can not be same in a single page.
class empty Enter a class name for the row.

Example Screenshot

One of the most important elements in successful Joomla! website is beautiful and unique image gallery catching eye. The gallery shortcode which comes with Helix Framework allows you to add one or more image responsive galleries to your articles and custom HTML modules. This shortcode allows you to include images in your gallery that aren't necessarily "attached" to your article  — because you have to add url of images manually. This flexibility allows you to create and embed any number of galleries containing any number of photos. The CSS is automatically outputted for each [gallery] shortcode that is used. This gallery allows you to create very easily a portfolio gallery with some nice effects (sorting by tags using filter option) and flexible customization settings.

Syntax [gallery columns="4" filter="yes"]
[gallery_item tag="joomla" src="/2014/istore-ii/images/helix/gallery/300x200.png"/]
[/gallery]
Example [gallery columns="4" filter="yes"]
[gallery_item tag="joomla" src="/2014/istore-ii/images/helix/gallery/300x200.png"/]
[gallery_item tag="wordpress" src="/2014/istore-ii/images/helix/gallery/300x200.png"/]
[gallery_item tag="joomla, wordpress" src="/2014/istore-ii/images/helix/gallery/300x200.png"/]
[gallery_item tag="magento" src="/2014/istore-ii/images/helix/gallery/300x200.png"/]
[gallery_item tag="opencart" src="/2014/istore-ii/images/helix/gallery/300x200.png"/]
[gallery_item tag="magento, opencart" src="/2014/istore-ii/images/helix/gallery/300x200.png"/]
[gallery_item tag="joomla, magento, wordpress, opencart" src="/2014/istore-ii/images/helix/gallery/300x200.png"/]
[gallery_item tag="drupal" src="/2014/istore-ii/images/helix/gallery/300x200.png"/]
[/gallery]
Attributes  columns, modal, filter, tag, src

 

Attributes

 Attribute NameDefault Value Description 
columns 3 Number of columns for gallery items.
modal yes Whether the gallery items open in modal or not.
filter no Enable or disable tag filter for gallery items.
tag no Tags for gallery items.
src no Relative or absolute path of gallery item image.

Example Screenshot

Google Map Shortcode

With our map shortcode you can embed a Responsive Google Maps anywhere to your content easily by entering your latitude and longitude coordinates. To find a place using its coordinates, just open Google Maps and search for them.  We include intuitive attributes that allow you to use the default Google Map styles, or customize the options to fit your branding style. Perfect for contact page or any other use you can think of. Multiple maps can be created in a single Joomla article.

Syntax [spmap lat="" lng="" maptype="" height="" zoom=""]
Example [spmap lat="-34.397" lng="150.644" maptype="ROADMAP" height="300" zoom="8"]
Attributes  lat, lng, maptype, height, zoom

 

Attributes

 Attribute NameDefault Value Description 
lat -34.397 Latitude coordinate.
lng 150.644 Longitude coordinate.
maptype ROADMAP Set a desire maptype. e.g. ROADMAP, SATELLITE, HYBRID, TERRAIN.
height 200 Set the height of the map, eg. 200.
zoom 8 Zoom value 1-10.

Example Screenshot

Testimonials

Testimonials are the perfect way to show your potential clients the others clients quotes or reviews of work you can provide. They are an important way to gain the trust of your visitors, helpful in building trust between seller and the buyer. Which as a result can help to persuade potential clients to use your services. Remember, when testimonials used effectively, are a great tool to increase conversions rates on your website!

The easiest way to add this functionality to your site would be to use our shortcode.

Syntax [testimonial name="John Doe" email="[email protected]" designation="CEO"]Testimonial Contnets[/testimonial]
Example [testimonial name="John Doe" email="[email protected]" designation="CEO"]Testimonial Contnets[/testimonial]
Attributes  name, email, designation, url

 

Attributes

 Attribute NameDefault Value Description 
name John Doe The name of the person that wrote the testimonial.
email [email protected] Email address of that person.
designation empty Designation of that person.
url empty URL of that person's website.

Example screenshot

Responsive Video Shortcode

Video shortcodes allow you to embed videos from YouTube and Vimeo directly in to your Joomla-powered site and play them back. All you need to do to embed something into a post or page is to post the video URL to it into shortcode tags. Make sure that the URL is on its own line and not hyperlinked (clickable when viewing the page). Videos  if selected carefully, they can add a new media dimension to your website or blog.

Syntax [spvideo]http://www.youtube.com/watch?v=vb2eObvmvdI[/spvideo]
[spvideo]http://vimeo.com/98908995[/spvideo]
Example [spvideo height="300"]http://www.youtube.com/watch?v=vb2eObvmvdI[/spvideo]
Attributes 
height
Support YouTube and Vimeo video

 

Attributes

If you don’t want the video to be too big/small on your article page, you can control the size of the video by specifying the height value. 

 Attribute NameDefault Value Description 
height 281 Height of the video.

Example Video (screenshot)