Shortcodes is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line.

You'll find the Power Shortcodes icon in your theme Visual Editor for Section, Page, Post or Project. With the built-in shortcodes, creating your content has never been easier. 

Before inserting any content, a Layout has to be defined:

Here you can choose how to display your content:

  • 1/2 will create an element on half the page, thus you'll need 2 of 1/2 elements to build a full-width section. 
[column md="6"]You can enter any shortcodes here.[/column]
  • 1/3 will create an element taking 33% of your section, so 3 elements of 1/3 are required to complete a full-width page
[column md="4"]You can enter any shortcodes here.[/column]
  • 1/4 will separate the page in 4 section, requiring 4 of them
[column md="3"]You can enter any shortcodes here.[/column]
  • Using a 1/4 and 3/4 will create 2 elements, one spanning on 25% of the page with the other taking 75% of the section space.
[column md="3"]You can enter any shortcodes here.[/column]
[column md="9"]You can enter any shortcodes here.[/column]
  • The same analogy applies for 1/6 and 5/6 column shortcode
[column md="2"]You can enter any shortcodes here.[/column]
[column md="10"]You can enter any shortcodes here.[/column]
  • The general rule to create a full-width layout is to sum up a 12 column md
[column md="12"]You can enter any shortcodes here.[/column]

Every 12 columns full-width row must be wrapped inside a [row][/row] shortcode.

Now that you completed a full-width row, you might want to add spacing to continue with another set of elements. 

Shortcodes > Layout > Spacing 

[spacer xclass="" height="30"]

Set any height value and also input a custom CSS class, in case you want to style it with customs CSS code that you can add in Theme Options > General Settings.

Shorcodes > Layout > Dividers 

[sep style="solid" margin_top="20px" margin_bottom="20px"]

Another way to separate rows of elements, is by using a separator. The separator, currently supports the following options: a solid, dashed or double border as well as a margin to the top and the bottom of the line, achieving a clean and balanced design.

In Shortcodes > Elements, you can visually create different items from a list of predefined components.

Elements > Button 

[button link="" background-color="#000000" text-color="#000000" size="xs" border-radius="3px" target="_self" rel=""]Download[/button]

To fully set the button functionalities and style, set:

  • Button Text
  • Button URL
  • Border radius - corner roundness, with 0 for flat design
  • Button Background color and text color
  • Size - small, medium or large
  • Target - Load the URL in the current session (self) or open the link in a new tab (blank)
  • Rel - instruct some search engines that the hyperlink should not influence the ranking of the link's target

Elements > Heading 

[heading style="" type="h1" font_size="14px" text_align="left" margin_top="30" margin_bottom="30" color="#000000" icon_left="" icon_right=""]This is a heading[/heading]

Set up an SEO powerful header title, with various options

  • Title content
  • Font Size
  • Color
  • Margin top and bottom
  • Border
  • Header Type, from h1-h6, as well as span or custom divs
  • Alignment
  • Header Icon (Classes Full list)

Elements > Highlights 

[highlight color="blue"]hey check me out[/highlight]

Attention grabber element, offer the posibility to highlight (select) text with predefined colors ranging from blue, green, yellow, red gray. Can also be styled with CSS code under the class name  mt-highlight

Elements > Rounded Image 

[rounded-image align="center" margin_top="0" margin_right="0" margin_bottom="0" margin_left="0"]581[/rounded-image]

Inserts an image with rounded corners. Besides the margins setup for breathing space, border radius and alignment will define your picture settings. 

To get the image ID, refer to your Dashboard > Media > Library, select the picture and get the ID at the end of the URL 

Elements > Google Map 

[map disablecontrols="false" enablescrollwheel="false" address="New York" width="100%" height="300px" zoom="15"]

This shortcode will insert a google map into your section with various standard settings. 

  • Enable Scroll Wheel - Provides zoom in and out from your mouse scroll.
  • Map controls - Icons on the map to zoom in and out.
  • Height - Numeric value, interpreted as pixels
  • Width - Numeric or percentage
  • Zoom - Accepts values from 0 to 18.
When scroll wheel is enabled it might come as a downside for fullscreen maps and on mobile devices, as some users might get blocked on scrolling the map instead of the website. In this particular case, we highly recommend the default settings.

Elements > Skillbars

[skillbar title="Web Design" percentage="85" color="#a13838" show_percent="true"]

The settings include  Title, Percentage, Color and Show Percent with True(Yes) and False(No).

Elements > Callout

[cta background-color="#2fcc70" button_text="Download" button_url="" button_target="_self" button_rel="" button_icon_left="" button_icon_right=""]<br>This is our main CTA text.<br>[/cta]

A callout shortcode is what we call a CTA, Call to Action.

  • Button Text
  • Button URL
  • Button Link Target - Loads the URL in the current session (self) or open the link in a new tab (blank)
  • Button Rel -Instruct some search engines that the hyperlink should not influence the ranking of the link's target
  • Button Icon (Classes Full list)
  • Background color
  • Content

Elements > Pricing

[pricing-container size="6"]
[pricing-table position="first" featured="no" plan="Basic" cost="$20" per="per month" button_text="Purchase" button_url="" button_target="_self" button_rel="" button_icon_left="" button_icon_right=""]
	<li class="checked">30GB Storage</li>
	<li class="checked">512MB Ram</li>
	<li class="checked">10 databases</li>
	<li class="unchecked">1,000 Emails</li>
	<li>25GB Bandwidth</li>

Predefined pricing box as found in the theme demo, with numerous variable and settings:

  • New Table - Will create a pricing container when numerous tables are used
  • Size - Same functionality as Layout shortcodes
  • Position - Sets order number when multiple pricing tables are used
  • Featured - Style the pricing box to stand out as the most important/used one
  • Plan - Text field
  • Cost - Product Pricing
  • Per - Optional text field to define the cost plan

Button Settings

  • Text
  • Shopping Cart URL
  • Button Size
  • Link Target - Loads the URL on the current page (self) or open in a new window (target)
  • Rel - Instruct some search engines that the hyperlink should not influence the ranking of the link's target
  • Icon (Classes Full list)

Pricing Box Features

To keep the demo pricing box format, please use the following format:

Class checked and  unchecked  will differentiate what services are included for the current pricing table.

Elements > Chart

[pie percent="75" track_color="#ff0000" bar_color="#000000" icon="" ]Pie Chart[/pie]

Also known as Pie Charts, they are a beautiful alternative for skill bars. The settings includes:

  • Chart Text
  • Percentage
  • Track Color - The circle background color
  • Bar Color - The chart percentage color
  • Chart Icon - Classes Full list

Content > Blog Posts

[posts limit="1"]

This shortcode will introduce blog posts into your section, ranging from 1 post to a maximum of 6 in the same row.

Content > Slider

[slider id="1"]

This shortcode introduces a slider into your section. To get the slider ID, refer to  Power Slider Dashboard menu

Content > Team

[member name="John Doe" description="Lorem Ipsum" image_id= "" facebook_url="" linkedin_url="" twitter_url="" dribbble_url="" ]

Shortcode to add team members on your website, providing fields like:  Name, Description, Image and Social Media Links. Just keep in mind to add every member in a corresponding column layout.

To get the image ID, refer to your Dashboard > Media > Library, select the picture and get the ID at the end of the URL 

Still need help? Contact Us Contact Us