Shortcode Examples

Shortcode Examples

Columns & Layout

You can simply use layout shortcode to create multiple columns. Or you can use column shortcodes to create colums respectively.
Example

The content you want display
The content you want display
The content you want display
The content you want display
The content you want display
The content you want display

The content you want display

The content you want display
The content you want display
The content you want display
The content you want display
The content you want display
The content you want display
The content you want display
The content you want display
The content you want display
The content you want display
The content you want display
The content you want display
The content you want display
The content you want display
The content you want display
The content you want display
The content you want display
The content you want display
The content you want display
The content you want display
The content you want display
The content you want display
The content you want display

Typography

Striking contain some typography shortcodes to use.
Example
dropcap

Notice that you can’t use 2 dropcap in same line.

You paragraph.
You paragraph.
You paragraph.
You paragraph.

blockquote

the blockquote you want align left

the blockquote you want align right

the blockquote text with user name

- user

Pre & code

.highlight {
background: #FFFF99;
}

styled list

  • your list item
  • your list item
  • your list item

icon text & link

user

Highlight

your text with yellow highlight

your text with dark highlight

Buttons
Parameters

id (id attribute) (optional)
size: small,medium,large (optional)
class (class attribute) (optional)
color (optional)
bgColor (optional)
textColor (optional)
align:center (optional)
full (set full width):true,false (optional)
link (link to follow when clicked) (optional)

Samples
Buttons With Different Size

Small
Medium
Large

Buttons With Color Scheme

Black

Buttons With Special Color

#769600
#769600

Buttons With Roll Over Color

Roll Over Button

Styled Boxes
Example
Framed Box

your content

Message Box

your info message
your success message
your error message title
  1. message1
  2. message2
your notice message

Note Box

Note:

This is a paragraph in note box.

Note:

This is a paragraph in note box.

Tables
Example

Company Header 1 Header 2 Header 3 Header 4
The foot text for this table
Company 1 Division Division Division Division

Tab
Example
Framed tab

contents
contents

Mini tab

contents
contents

Accordion
Example

title 1
contents
title 2
contents

Toggle

You can use shortcode to create toggle by define the title and content of it.
Example

title

contents

divider

You can use shortcode to add divider line to editer.

Image

You can add image to the page whith shortcode.you can add just only add it or add it with lightbox or piture frame.
Parameters

size: small,medium,large (optional)
link (optional)
icon: zoom,play,doc (optional)
lightbox: true,false (optional)
title (optional)
align: left,right,center (optional)
group (group for lightbox) (optional)
width (optional)
height (optional)

Example
Image With Different Size

Hall of Skulls

Image With Different Icon

Image With Lightbox Support

Your Image Title

Image With Video

Your Video Title

Picture Frame

your picture title

Iframe
Example

Google map

You can use shortcode to add goole map. This is some setting you should define:

width
height
address: Address on which the viewport will be centered.
latitude: Point on which the viewport will be centered. If not given and no markers are defined the viewport defaults to world view.
longitude: Same as above but for longitude…
zoom: Zoom value from 1 to 19 where 19 is the greatest and 1 the smallest.
html: Content that will be shown within the info window for this marker.
popup: If true the info window for this marker will be shown when the map finished loading. If “html” is empty this option will be ignored.
controls: A simple array of string values representing the function names (without “()”) to add controls. Please refer to the Google Maps API for possible values. If empty the default map controls will be applied.
scrollwheel: Set to false to disable zooming with your mouses scrollwheel. If “controls” is not set this option will be ignored (because default map controls are applied).
maptype: Predefined variable for setting the map type. Please refer to the
Google Maps API for possible values.
marker: Set to false to disable display a marker in the viewport.

Example
Simple map with marker
Displays a simple map with controls and adds one marker. The viewport gets centered automatically.

Different map type
Changes the map type to physical view.

Map without controls

Map with marker and info window

Map with address

Widgets

There are six kind of widgets you can create by shortcode generator.

Contact Form:

Enter in the email address where you would like the contact form submission to be sent. And fill out the Success Text’s textarea for the text rendering after submission.

Note: After set-up, you should send a test message to yourself to see if things are working. The Contact Form use wp_mail function to send mails. If it doesn’t work, please check with your host to make sure SMTP and smtp_port have been set in php.ini. Or you can install a Plugin for WordPress to enable SMTP configuration. For example, Configure SMTP is worked well for me.
Twitter
Flickr
Contact Info
Popular Posts
Recent Posts

Example
Contact Form

Twitter

Flickr

Contact Info

(+40) 111 222 333

admin@example.com

the Street , # 9

city, state10000

yourname

Popular Posts

Recent Posts

Video
Example
Html5 Video

flash


youtube

vimeo

dailymotion

Lightbox
Parameters

href
title
group (group for a gallery)
width: (optional)
height (optional)
iframe: true,false
photo (forces Lightbox to display a link as a photo)

Example
Lightbox for text

Single Image
Grouped Photo 1
Grouped Photo 2
Grouped Photo 3

Lightbox for Elements

Lightbox with iframe

Outside Webpage (Iframe)

Lightbox with video

Lightbox with video

Goole Chat
Example
3d-pie chat

3D Pie Chart Title

line chat

Line Chart Title

Line Chart Title 2

scatter chat

Scatter Chart Title

2d-pie chat

Pie Chart Title

gom chat

Gom Chart Title

venn chat

Venn Chart Title

Blog
Parameters

count (number of posts to show per page)
category (specific category to show) (optional)
posts (specific posts to show) (optional)
image (whether to display featured image): true,false
meta (whether to display meta information): true,false
full (whether to display all content of the post): true,false
nopaging (whether to disable pagination): true,false

Example
Blog with Image & Meta & Paging

Blog with Image

Blog with Meta

Blog without Image & Meta

Blog with Specific Category

Blog with Specific Post

Site Map
Example
All Pages

Pages With Number

Pages With Depth

Category Without Feed

  • No categories

Category Without Count

  • No categories

Posts With Number

    Posts Without Comment

      Posts With Specific Posts

        Posts With Specific Category

          Portfolios With Specific Category

            Portfolios With Specific Comment

            Image of The Dawn of Human Culture
            Image of The Cambridge Encyclopedia of Human Evolution (Cambridge Reference Book)