Menu

Shortcodes Ultimate

Full-width column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.

1/2 + 1/2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.

1/3 + 1/3 + 1/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.

1/2 + 1/4 + 1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem.

3/4 + 1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

1/5 + 4/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.

2/5 + 3/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.

2/3 + 1/6 + 1/6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading tag
Title 1Title 2Title 3
Content 1
Content 2
Content 3

Default tabs

Tab 1Tab 2Tab 3
Tab 1 content
Tab 2 content
Tab 3 content

Custom active tab

Tab 1Tab 2Tab 3
Tab 1 content
Tab 2 content
Tab 3 content

Vertical tabs

Tab 1Tab 2Tab 3
Tab 1 content
Tab 2 content
Tab 3 content

Disabled tabs

Tab 1Tab 2Tab 3Tab 4 (disabled)Tab 5 (disabled)
Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 content
Tab 5 content

Tabs anchors

Tab 1Tab 2Tab 3
Tab 1 content
Tab 2 content
Tab 3 content

Custom styles

Tab 1Tab 2Tab 3
Tab 1 content
Tab 2 content
Tab 3 content

Basic accordion

Spoiler title
Spoiler content
Spoiler title
Spoiler content
Spoiler title
Spoiler content

Fancy accordion

Spoiler title
Spoiler content
Spoiler title
Spoiler content
Spoiler title
Spoiler content

Accordion with open spoiler

Spoiler title
Spoiler content
Spoiler title
Spoiler content
Spoiler title
Spoiler content

Different spoiler styles

Spoiler title
Spoiler content
Spoiler title
Spoiler content
Spoiler title
Spoiler content

Open spoilers

Spoiler title
Spoiler content
Spoiler title
Spoiler content
Spoiler title
Spoiler content

Spoilers with anchors (see the code)

Spoiler title
Spoiler content
Spoiler title
Spoiler content
Spoiler title
Spoiler content

Use next links to open this spoilers

Open spoiler 1 | Open spoiler 2 | Open spoiler 3

Accordion + Spoilers + Anchors (see the code)

Spoiler title
Spoiler content
Spoiler title
Spoiler content
Spoiler title
Spoiler content

Use next links to expand accordion items

Open spoiler 1 | Open spoiler 2 | Open spoiler 3

Different icons

plus
Spoiler content
plus-circle
Spoiler content
plus-square-1
Spoiler content
plus-square-2
Spoiler content
arrow
Spoiler content
arrow-circle-1
Spoiler content
arrow-circle-2
Spoiler content
caret
Spoiler content
caret-square
Spoiler content
folder-1
Spoiler content
folder-2
Spoiler content

Custom styles

Spoiler title
Spoiler content

YouTube video

Vimeo video

Self-hosted video (mp4/flv)

Media grid: responsive videos + columns

Autoplay and loop

You can add autoplay=”yes” and loop=”yes” to any of these elements and the playback will be automatically started and looped.

For example: [su_youtube url="" autoplay="yes"]

Unlimited sizes

Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Unlimited sizes!

Unlimited colors

Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me

Different background styles

Click me Click me Click me Click me Click me Click me Click me Click me Click me

Customizable border radius

Click me Click me Click me Click me

Built-in icon font

List of built-in icons

Click me Click me Click me Click me Click me Click me

Different animation types

Animated text
Animated text
Animated text
Animated text
Animated text
Animated text
Animated text

Animated columns

This is box title
Column content
This is box title
Column content

Animated buttons

Click me Click me Click me

Animated tabs

Tab titleTab titleTab title
Tab content
Tab content
Tab content

List of 5 most popular posts (by comments number)

Most recent posts as a teasers

recent-post

Urna blandit tristique at nec nunc

recent-post2

Cras quis risus at urna blandit

blog1

Auctor et mollis at

blog2

Pellentesque eget nibh

blog3

Proin semper, erat semper

recent-post3

Lorem ipsum dolor sit amet,

Hello world!

Recent uploaded media file

favicon

Posted: September 8, 2022

favicon

Basic example

This is a box with nested spoilers
Spoiler title
Spoiler content
Spoiler title
Spoiler content
Spoiler title
Spoiler content

The same nested shortcodes

Click me to see nested spoilers
Spoiler title
Spoiler content
Spoiler title
Spoiler content
Spoiler title
Spoiler content

The same nested shortcodes mixed with other shortcodes

Click me to see nested accordion
Spoiler title
Spoiler content
Spoiler title
Spoiler content
Spoiler title
Spoiler content

Shortcodes inside of attributes

To use shortcodes inside of attributes you need to replace square brackets with { and }. Open code to see example

Button

 

Service title 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.
Service title 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.
Service title 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.