Shortcodes

Divider
The divider is a container that holds some content. To create this, simply wrap any content inside the [row_divider] shortcode in the editor as in the example below.

[row_divider]content[/row_divider]

Columns
Column shortcodes allow you to lay your content out in 2, 3, 4, 5 and 6 columns. This can be a combination text, images, videos etc. To do this, you will need to use the relevant shortcode below, noticing that the final one for each set has ‘_last’ there so the theme knows which is the closing column.

[half]content[/half]
[half_last]content[/half_last]

[third]content[/third]
[third]content[/third]
[third_last]content[/third_last]

[fourth]content[/fourth]
[fourth]content[/fourth]
[fourth]content[/fourth]
[fourth_last]content[/fourth_last]

[fifth]content[/fifth]
[fifth]content[/fifth]
[fifth]content[/fifth]
[fifth]content[/fifth]
[fifth_last]content[/fifth_last]

[sixth]content[/sixth]
[sixth]content[/sixth]
[sixth]content[/sixth]
[sixth]content[/sixth]
[sixth]content[/sixth]
[sixth_last]content[/sixth_last]

Open Toggled Content
This allows you to add an accordion to your site with a title and content. Simply use the shortcode below and swap the title and content for what you like.

[ft_accordion title='Sample Closed Toggled Content']Aliquam eros leo, tempus id semper et, hendrerit eu ante. Aliquam in tortor id eros pellentesque sagittis. In leo elit, consectetur id blandit non, pretium eget libero. Donec fermentum, mauris condimentum vestibulum ullamcorper, nulla ante tempor velit, eget consequat neque dolor eget mi. Etiam a felis est.[/ft_accordion]

Closed Toggled Content
This is the same as the accordion above, but allows multiple sections to it. Simply add pipes ‘|’ between the titles and content sections to split them off. You can get an idea of this from the shortcode below which has 2 sections to it.

[ft_accordion title='Sample Closed Toggled Content|Sample Closed Toggled Content']Aliquam eros leo, tempus id semper et, hendrerit eu ante. Aliquam in tortor id eros pellentesque sagittis. In leo elit, consectetur id blandit non, pretium eget libero. Donec fermentum, mauris condimentum vestibulum ullamcorper, nulla ante tempor velit, eget consequat neque dolor eget mi. Etiam a felis est.|Aliquam eros leo, tempus id semper et, hendrerit eu ante. Aliquam in tortor id eros pellentesque sagittis. In leo elit, consectetur id blandit non, pretium eget libero. Donec fermentum, mauris condimentum vestibulum ullamcorper, nulla ante tempor velit, eget consequat neque dolor eget mi. Etiam a felis est.[/ft_accordion]

Tabbed Content
This allows you to created tabbed content on a page. It works in a similar way to the ‘Closed toggled Content’ shortcode above with pipes ‘|’ to separate tab titles and content. See how the shortcode below works to add 2 tabs to a page.

[ft_tabs title='Tabbed Content Tab 1|Tabbed Content Tab 2']Aliquam eros leo, tempus id semper et, hendrerit eu ante. Aliquam in tortor id eros pellentesque sagittis. In leo elit, consectetur id blandit non, pretium eget libero. Donec fermentum, mauris condimentum vestibulum ullamcorper, nulla ante tempor velit, eget consequat neque dolor eget mi. Etiam a felis est.|Donec metus leo, elementum at ultrices ac, dapibus at justo. Donec tristique hendrerit dui vitae lacinia. Suspendisse ante ligula, adipiscing porta aliquam et, rutrum nec lectus. Nulla erat risus, molestie non dapibus ac, fermentum vitae felis.[/ft_tabs]

Alerts

6 alert boxes have been styled up for use in Pegasus Pro. These are for:

  1. Information Box
  2. Error Box
  3. Alert Box
  4. Download Box
  5. Tick Box
  6. Help Box

Simply add the shortcode as below with the content you want inside and a nicely styled full-width box holding the content will be generated for you. There’s nothing stopping you from adding these inside a column shortcode too as all our shortcodes can be nested inside one another.

[info_box]This is an info box[/info_box]
[error_box]This is an error box[/error_box]
[alert_box]This is an alert box[/alert_box]
[download_box]This is a download box[/download_box]
[tick_box]This is a tick box[/tick_box]
[help_box]This is a help box[/help_box]

Buttons
Many styled buttons have been created for your use. There are multiple options that you can add to a button such as size, type, color and href.
Sizes you can choose from are: small, medium and large.
Colors you can choose from are: red, orange, green, blue, aqua, teal, purple, pink, silver, grey and black.
Types you can choose from are: icon, alert, tick, download, note, error, help.
Href is the URL to the place you wish the button to go to.

[button size='small' color='red' type='info' href='http://google.com']Button Label[/button]

Lightbox Single Image
Everyone likes lightbox images, right? Well we’ve added them to this theme for you so you can easily add them in to your posts/pages. Simply use the example below to create the lightbox effect.

Options for this shortcode are as follows:

‘large’ – this is the URL of the large image that will open up in the lightbox.
‘thumb’ – this is the thumb of the image that is to be click.
‘alt’ – should you wish to add an alt tag to the image
‘title’ – should you wish to add a title to the image
You can also pass across the same options for size, color, type from the buttons shortcodes here for added styling :)

[lightbox_single large="http://localhost/wordpress-themes.com/pegasus-pro/files/2011/07/Green-Sea-Turtle.jpg" alt="Image Title" title="Image Title" thumb="http://localhost/wordpress-themes.com/pegasus-pro/files/2011/07/portfolio-item.jpg"]

Lightbox Gallery
What’s better than easily adding a lightbox image to your post/page? Adding a lightbox gallery!
Options here are the same a single lightbox image, only you should separate each image, thumb, title, alt by a comma. Please see the example below for confirmation on how to do this.

[lightbox_gallery large="http://localhost/wordpress-themes.com/pegasus-pro/files/2011/07/Green-Sea-Turtle.jpg,http://localhost/wordpress-themes.com/pegasus-pro/files/2011/07/Green-Sea-Turtle.jpg,http://localhost/wordpress-themes.com/pegasus-pro/files/2011/07/Green-Sea-Turtle.jpg" alt="Image Title" title="Image Title,Image Title 2,Image Title 3" thumb="http://localhost/wordpress-themes.com/pegasus-pro/files/2011/07/portfolio-item.jpg"]

Lightbox Flash
This shortcode allows you to add a Flash .swf file to lightbox. Add the URL to the .swf file, the height and width and the theme will take care of the rest for you :)
You can also pass across the same options for size, color, type from the buttons shortcodes here for added styling.

[lightbox_flash url="http://www.adobe.com/products/flashplayer/include/marquee/design.swf" title="Flash" height="294" width="792"]Flash[/lightbox_flash]

Lightbox YouTube
This shortcode allows you to add a YouTube video to lightbox. Add the full YouTube URL to the video and the theme will take care of the rest for you :)
You can also pass across the same options for size, color, type from the buttons shortcodes here for added styling.

[lightbox_youtube url="http://www.youtube.com/watch?v=qqXi8WmQ_WM" title="Youtube Video"]YouTube video[/lightbox_youtube]

Lightbox Vimeo
This shortcode allows you to add a Vimeo video to lightbox. Add the full Vimeo URL to the video and the theme will take care of the rest for you :)
You can also pass across the same options for size, color, type from the buttons shortcodes here for added styling.

[lightbox_vimeo url="http://vimeo.com/8245346" title="Vimeo Video"]Vimeo video[/lightbox_vimeo]

Lightbox Quicktime
This shortcode allows you to add a Quicktime video to lightbox. Add the full URL to the video, the height and width and the theme will take care of the rest for you :)
You can also pass across the same options for size, color, type from the buttons shortcodes here for added styling.

[lightbox_quicktime url="http://trailers.apple.com/movies/universal/despicableme/despicableme-tlr1_r640s.mov" height="360" width="640" title="Quicktime Video"]Quicktime video[/lightbox_quicktime]

Lightbox Website
This shortcode allows you to add an iframe of a website to your website. In our example, you will see that frogsthemes.com opens up in lightbox without having to leave the page.
You can also pass across the same options for size, color, type from the buttons shortcodes here for added styling.

[lightbox_website url="http://www.frogsthemes.com" title="frogsthemes.com"]frogsthemes.com[/lightbox_website]

Nesting Shortcodes
All our shortcodes can be nested inside one another so you can make the most of them.
For example, why not add 3 lightbox images inside 3 columns? Here’s how:

[third] [lightbox_single large="http://localhost/wordpress-themes.com/pegasus-pro/files/2011/07/Green-Sea-Turtle.jpg" alt="Image Title" title="Image Title" thumb="http://localhost/wordpress-themes.com/pegasus-pro/files/2011/07/portfolio-item.jpg"][/third]
[third] [lightbox_single large="http://localhost/wordpress-themes.com/pegasus-pro/files/2011/07/Green-Sea-Turtle.jpg" alt="Image Title" title="Image Title" thumb="http://localhost/wordpress-themes.com/pegasus-pro/files/2011/07/portfolio-item.jpg"][/third]
[third_last] [lightbox_single large="http://localhost/wordpress-themes.com/pegasus-pro/files/2011/07/Green-Sea-Turtle.jpg" alt="Image Title" title="Image Title" thumb="http://localhost/wordpress-themes.com/pegasus-pro/files/2011/07/portfolio-item.jpg"][/third_last]

 

Note: To get spacing correct on your site, you may need to remove line breaks from the shortcodes in the editor and display them in a single line E.g:

[third]content[/third] [third]content[/third] [third_last]content[/third_last]

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk