How to Use Element Pack Essential Shortcodes

How to Use Element Pack Essential Shortcodes

In the documentation below, I’m going to tell you about element pack shortcode. The shortcode can use anywhere if need.

Alert Shortcode :

[ep_alert]Alert Message[/ep_alert]

In Alert shortcode, you will get Alert Message. You can use it anywhere. Also, you can use below property –

Option name Possible values Default value
class
give a specific definition
using class
any type of html class name none
type
to add a background color
according to the type of the
message that is delivered
primary ( light blue color)
success ( light green color)
warning ( light orange color)
danger ( light red color)
default
style
add font color, size,
font type, etc.
any type of css style can apply here none

For Example:

[ep_alert class="" type="" style=""]Alert Message[/ep_alert]

Preview:

Alert Preview Image.

Author Avatar Shortcode :

[ep_author_avatar]

If you use Author Avatar shortcode , you will get Author Image. You can use it anywhere. Also you can use class parameter. 

Option name Possible values Default value
class
show the figure of the author
of the class name holder
any type of html class name none

For example:

[ep_author_avatar class="my-class"]

Preview:

Author Name Shortcode :

[ep_author_name]

If you use Author Name shortcode , you will get Author Name. You can use it anywhere. Also you can use class parameter.

Option name Possible values Default value
class
show the name of the author
of the class name holder
any type of html class name none

For example:

[ep_author_name class="my-class"]

Preview:

Author Name Preview.

Badge Shortcode :

[ep_badge]Badge Text[/ep_badge]

If you use Badge shortcode , you will get Ready badge style. You can use it anywhere. Also you can use class parameter.

Option name Possible values Default value
class
can add custom design using
class name (design should be
against the class name)
any type of html class name none

For example:

[ep_badge class="my-class"]Badge Text Here[/ep_badge]

Preview:

Badge Preview Image.

Breadcrumbs Shortcode :

[ep_breadcrumbs]

If you use Breadcrumbs shortcode , you will get current page breadcrumbs. You can use it anywhere, for example:

[ep_breadcrumbs]

Preview:

Breadcrumbs Preview Image.

Button Shortcode :

[ep_button]Button[/ep_button]

If you use button shortcode , you will get button here. You can use it anywhere. Also you can use below property –

Option name Possible values Default value
class
give a specific definition
using class
any type of html class name none
link
use link to connect to
external website or source
any type of active link
(i.e. "https://example.com")
#
type
to add a background color or
change button type
default (light gray color)
primary (light blue color)
secondary (gray color)
danger (red color)
text (plain text)
link (plain link)
default (light gray color)
style
add font color, size,
font type, etc.
any type of css style can apply here none

For Example:

[ep_button class="" link="" type="" style=""]Button[/ep_button]

Preview:

Button Preview Image.

Clipboard Shortcode :

[ep_clipboard]Copy Content[/ep_clipboard]

If you use clipboard shortcode , you can copy any text. You need first hover copy text then show copy button then you need click. You can use it anywhere. Also you can use class parameter.

Option name Possible values Default value
class
can add custom design using
class name (design should be
against the class name)
any type of html class name none

For example:

[ep_clipboard class="my-class"]Copy Content[/ep_clipboard]

Preview:

Copy Text Image

Countdown Shortcode :

[ep_countdown]

In The Countdown shortcode, you will get countdown. You can use it anywhere. Also you can use below property –

Option name Possible values Default value
class
can add custom design using
class name (design should be
against the class name)
any type of html class name none
date
add custom countdown date
(target date for countdown)
date value i.e. date = "2021-07-09 09:00" 2020-10-10 12:00

For Example:

[ep_countdown date="2020-10-10 12:00"]

Preview:

Countdown Preview Image.

Current Date Shortcode :

[ep_current_date]

If you use Current Date shortcode , you will get WordPress default date. You can use it anywhere. Also you can use class parameter & string format.

Option name Possible values Default value
class
can add custom design using
class name (design should be
against the class name)
any type of html class name none
format
change the date format at will
F j, Y – November 6, 2010
F j, Y – November 6, 2010
F, Y – November, 2010
l, F jS, Y – Saturday, November 6th, 2010
M j, Y – Nov 6, 2010
Y/m/d – 2010/11/06
2020-10-10 12:00

For example:

[ep_current_date class="my-class" format="F j, Y"]

Preview:

Current Date Preview Image

Current User Shortcode :

[ep_current_user]

If you use Current user shortcode , you will get WordPress current user. You can use it anywhere. Also you can use class parameter.

Option name Possible values Default value
class
can add custom design using
class name (design should be
against the class name)
any type of html class name none

For example:

[ep_current_user class="my-class"]

Preview:

Current User Preview Image

Label Shortcode :

[ep_label]Label[/ep_label]

If you use label shortcode , you will get label style here. You can use it anywhere. Also you can use below property –

Option name Possible values Default value
class
give a specific definition
using class
any type of html class name none
type
to add a background color
according to the type of the
message that is delivered
primary ( light blue color)
success ( light green color)
warning ( light orange color)
danger ( light red color)
default
style
add font color, size,
font type, etc.
any type of css style can apply here none

For Example:

[ep_label class="" type="" style=""]Label[/ep_label]

Preview:

Label Preview Image

Lightbox Shortcode :

[ep_lightbox]Lightbox[/ep_lightbox]

If you use Lightbox shortcode , you will get lightbox. You can use it anywhere. Also you can use below property –

Option name Possible values Default value
class
give a specific definition
using class
any type of html class name none
link
use link to connect to
external website or source
any type of active link https://youtu.be/aqz-KE-bpKQ
caption
for adding a name value
any type of text Youtube

For Example:

[ep_lightbox class="" link="" caption=""]Lightbox[/ep_lightbox]

Preview:

Lightbox Preview Image

Notification Shortcode :

[ep_notification]Content[/ep_notification]

If you use notification shortcode , you will get notification. You can use it anywhere. Also you can use some parameter ( class, message ):

Option name Possible values Default value
class
give a specific definition
using class
any type of html class name none
message
displayed in the notification
any type of text Notification message

For Example:

[ep_notification class="" message=""]Content[/ep_notification]

Preview:

Page Title Shortcode :

[ep_page_title]

If you use Page Title shortcode , you will get current page title. You can use it anywhere. Also you can use class parameter.

Option name Possible values Default value
class
give a specific definition
using class
any type of html class name none

For example:

[ep_page_title class="my-class"]

Preview:

Page Title Preview Image.

Page URL Shortcode :

[ep_page_url]

If you use Page URL shortcode , you will get current page URL. You can use it anywhere. Also you can use class parameter.

Option name Possible values Default value
class
give a specific definition
using class
any type of html class name none

For example:

[ep_page_url class="my-class"]

Preview:

Page URL Preview Image.

Post Date Shortcode :

[ep_post_date]

If you use Post Date shortcode , you will get post date. You can use it anywhere. Also, you can use class parameter.

Option name Possible values Default value
class
give a specific definition
using class
any type of html class name none

For example:

[ep_post_date class="my-class"]

Preview:

Post Date Preview Image.

Site Title Shortcode :

[ep_site_title]

If you use Site Title shortcode , you will get WordPress Site title. You can use it anywhere. Also you can use class parameter.

Option name Possible values Default value
class
give a specific definition
using class
any type of html class name none

For example:

[ep_site_title class="my-class"]

Preview:

Site Title Preview Image.

Site URL Shortcode :

[ep_site_url]

If you use Site URL shortcode , you will get WordPress Site URL. You can use it anywhere. Also you can use class parameter.

Option name Possible values Default value
class
give a specific definition
using class
any type of html class name none

For example:

[ep_site_url class="my-class"]

Preview:

Site Url Preview Image.

Tag List Shortcode :

[ep_tag_list]

If you use tag list shortcode , you will get WordPress Site all tags. You can use it anywhere. Also you can use class parameter.

Option name Possible values Default value
class
give a specific definition
using class
any type of html class name none

For example:

[ep_tag_list class="my-class"]

Preview:

Tag List Preview Image

Tooltip Shortcode :

[ep_tooltip]Content[/ep_tooltip]

If you use tooltip shortcode , you will get tooltip here. You can use it anywhere. Also you can use below property –

Option name Possible values Default value
class
give a specific definition
using class
any type of html class name none
position
set the tooltip position
top - (Aligns the tooltip to the top)
top-left - (Aligns the tooltip to the top left)
top-right - (Aligns the tooltip to the top right)
bottom - (Aligns the tooltip to the bottom)
bottom-left - (Aligns the tooltip to the bottom left)
bottom-right - (Aligns the tooltip to the bottom right)
left - (Aligns the tooltip to the left)
right - (Aligns the tooltip to the right)
top-center
tooltip_text
displayed text in the notification
any type of text This is Tooltip

For Example:

[ep_tooltip class="" position="" tooltip_text=""]Content[/ep_tooltip]

Preview:

Tooltip Text Preview Image.


Up to 50% OFF

Missed The Black Friday offer this year? Get up for flat 50% discount right now.