Using shortcodes

Generating Shortcodes – Video

Shortcodes help build page / post content and widget areas

React shortcode generator can be accessed when editing / adding any page, post or portfolio item. You can even add shortcodes via the React shortcode widget, which will allow you to add shortcodes into any widget area.

Here is where you can add shortcodes:

• Any widget area using React Shortcode widget
• Page, posts, portfolios or products content
• They can also be used in some other spaces such as Bottom of page pop out and Background captions

Whenever you see the shortcode button (on left) you can click it to launch the shortcode generator.

Add shortcodes

Use the dropdown menu or click a Popular shortcode to generate the options. Each shortcode options has a description and tool tip help where necessary. Go through all the options with your preferences and then Insert into the page.

Edit shortcodes

Edit the shortcode at any time by selecting it then copy it. Open the Shortcode Generator and press Edit existing Shortcode, paste in the code and Edit.

List of available shortcodes

Click shortcode to see the examples on the React Demo Hub

HTML and extra shortcodes

Helps neaten your page code, and will insure no extra space is added by the text editor. You can use class=”” and style=”” to all of these shortcodes.:

List of HTML shortcodes

[h1 class="textcenter" style="padding: 10px;"]Example heading [/h1]

Useful classes

You can add classes to many shortcodes and HTML you add to your content areas. Here are some useful generic classes you can use:

Responsive

Text