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 Name | Default 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 Name | Default 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)

Carousel Sliders
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 Name | Default Value | Description |
id |
myCarousel |
Carousel ID must be unqiue. The ID value can not be same in a single page. |
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 Name | Default Value | Description |
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 Name | Default 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 Name | Default 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 Name | Default 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

Gallery Shortcode
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 Name | Default 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 Name | Default 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 Name | Default 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 Name | Default Value | Description |
height |
281 |
Height of the video. |
Example Video (screenshot)
