shortcodes ultimate
shortcodes example & code

Basic Code Wrapper – Prismatic

https://prismjs.com/examples.html

<pre><code class="language-javascript">
CODE
</code></pre>

pick a language – wrap code in it

“language-markup” / “language-html” / “language-mathml”

PLUGINS::
Adding tags to page – tags are added to body_class so they style the prism area as well

  1. rainbow-braces
  2. line-numbers
  3. match-braces
  4. no-brace-hover

<pre><code class="language-javascript">
var myObject = {
    property1: "something",
    property2: 5,
    property3: true
}; 


{{{{{{{{}}}}}}}}
[[[[[[[[]]]]]]]]
((((((((((()))))))))))

[                 ]
&lbrack; and &rbrack;

</code></pre>












RESOURCES

    • TOPRESOURCESHEADONE
    • EntryOne
    • EntryTwo
    • EntryThree
      • TOPRESOURCESHEADTWO
      • SubListEntryOne
      • SubListEntryTwo
      • SubListEntryThree
      • SubListEntryFour

[su_top_resources]
<!-- ||||||||||||||||||| TopOfPageResources -->

<div class="TOPResources EditusIgnore">
<h2>RESOURCES</h2>
<ul class="topr-list">
<li class="TRSubHead">TOPRESOURCESHEADONE</li>
<li>EntryOne</li>
<li>EntryTwo</li>
<li>EntryThree</li>
<li class="topr-presublist-li">
<ul class="topr-list-sub">
  <li class="TRSubHead">TOPRESOURCESHEADTWO</li>
  <li>SubListEntryOne</li>
  <li>SubListEntryTwo</li>
  <li>SubListEntryThree</li>
  <li>SubListEntryFour</li>
</ul><!-- endtopr-list-sub -->
</li><!-- endsubtable -->
</ul>
</div>

<!-- ||||||||||||||||||| ENDTopOfPageResources -->
   
https://getshortcodes.com/docs-category/shortcodes/

Heading – su_heading

Heading text

[su_heading style="default" size="13" align="center" margin="20" id="" class="EditusIgnore"]Heading text[/su_heading]



Tabs – su_tabs

TabbbbbbbbbTabbbbbbbbTabbbbbbbbb
Tabbbbbbbbbbcontent
Tabbbbbbbbbbcontent
Tabbbbbbbbbcontent


[su_tabs style="default" active="1" vertical="no" mobile="stack" anchor_in_url="no" class="EditusIgnore"]
[su_tab title="Tabbbbbbbb" disabled="no" anchor="" url="" target="blank" class="EditusIgnore"]
Tabbbbbbbbcontent
[/su_tab]
[su_tab title="Tabbbbbbb" disabled="no" anchor="" url="" target="blank" class="EditusIgnore"]
Tabbbbbbbbbcontent
[/su_tab]
[su_tab title="Tabbbbbbb" disabled="no" anchor="" url="" target="blank" class="EditusIgnore"]
Tabbbbbbbbcontent
[/su_tab]
[/su_tabs]



Spoiler – su_spoiler

Spoiler title
Hidden content

[su_spoiler title="Spoiler title" open="no" style="default" icon="plus" anchor="" anchor_in_url="no" class="EditusIgnore"]Hidden content[/su_spoiler]



Accordion – su_accordion

Accordion title
Hidden content
Accordion title
Hidden content
Accordion title
Hidden content


[su_accordion class="EditusIgnore"]
[su_spoiler title="Accordion title" open="no" style="default" icon="plus" anchor="" anchor_in_url="no" class="EditusIgnore"]Hidden content[/su_spoiler]
[su_spoiler title="Accordion title" open="no" style="default" icon="plus" anchor="" anchor_in_url="no" class="EditusIgnore"]Hidden content[/su_spoiler]
[su_spoiler title="Accordion title" open="no" style="default" icon="plus" anchor="" anchor_in_url="no" class="EditusIgnore"]Hidden content[/su_spoiler]
[/su_accordion]

Divider – su_divider

[su_divider top="yes" text="Go to top" anchor="#" style="default" divider_color="#999999" link_color="#999999" size="3" margin="15" class="EditusIgnore"]



Spacer – su_spacer (empty – adjust height)


[su_spacer size="20" class="EditusIgnore"]



Highlight – su_highlight

 Highlighted text 
[su_highlight background="#DDFF99" color="#000000" class="EditusIgnore"]Highlighted text[/su_highlight]



Label – su_label

Label
[su_label type="default" class="EditusIgnore"]Label[/su_label]



Quote – su_quote

Quote

[su_quote style="default" cite="" url="" class="EditusIgnore"]Quote[/su_quote]

PullQuote – su_pullquote

Pellentesque in est eget erat pellentesque condimentum nec quis neque. Aliquam gravida pellentesque pellentesque. Ut molestie justo nec urna placerat dapibus. Duis vestibulum hendrerit orci vel rhoncus. Vivamus tortor tellus, tincidunt condimentum turpis ac,
Pullquote
gravida volutpat eros. Vivamus eget felis elit. Integer rhoncus libero vel molestie accumsan. Duis vitae iaculis lectus. Etiam eleifend pretium sollicitudin. In sed turpis non nunc dictum consequat vitae sed dui. Proin luctus mauris et quam dapibus, vitae fringilla orci dignissim. Curabitur scelerisque neque a urna consequat, quis tempor eros cursus.


DropCap – su_dropcap

D
[su_dropcap style="default" size="3" class="EditusIgnore"]D[/su_dropcap]



Columns – su_row / su_column

Column content
Column content

[su_row class="EditusIgnore"]
[su_column size="1/2" center="no" class="" style="background: #cccccc;" ]Column content[/su_column]
[su_column size="1/2" center="no" class="" style="background: #dddddd;"]Column content[/su_column]
[/su_row]



Button – su_button

Button text
[su_button url="https://clickety-clack.click" target="self" style="default" background="#2D89EF" color="#FFFFFF" size="3" wide="no" center="no" radius="auto" icon="" icon_color="#FFFFFF" text_shadow="none" desc="" download="" onclick="" rel="" title="" id="" class="EditusIgnore"]Button text[/su_button]

buttons linking buttons styles
urlButton link

Default value: Site URL
targetButton link target

Default value: self
styleButton background style

Possible values:
default
flat
ghost
soft
glass
bubbles
noise
stroked
3d

Default value: default
backgroundButton background color

Possible values: #HEX color
Default value: #2D89EF
colorButton text color

Possible values: #HEX color
Default value: #FFFFFF
sizeButton size

Possible values: Number from 1 to 20
Default value: 3
wideSet this option to yes to make the button fullwidth

Possible values: yes or no
Default value: no
centerIs button centered on the page

Possible values: yes or no
Default value: no
radiusButton border radius. Automatic calculation of the radius is based on the button size

Possible values:
auto
round
0 (Square)
5 (5px)
10 (10px)
20 (20px)

Default value: auto
iconYou can upload a custom icon for this button or use a built-in one

Possible values: Fork Awesome icon name with icon: prefix or image URL.
Example values: icon: star, http://example.com/icon.png

The list of available Fork Awesome icons
icon_colorColor of the vector icon used in the icon option. This color won’t be applied to uploaded images.

Possible values: #HEX color
Default value: #FFFFFF
text_shadowButton text shadow

Possible values: CSS text-shadow shorthand property
Default value: none
descA short description below the button text. This option is not compatible with icon.
downloadA non-empty download attribute tells the browser that the button URL should be downloaded when a user clicks on the button. The value of the attribute will be the name of the downloaded file. The download attribute is not supported in IE or Edge (prior version 18) and in Safari (prior version 10.1). Browser compatibility.
onclickA custom JavaScript code for the onclick HTML attribute.
relA custom value for the rel HTML attribute.

Example values: nofollow, lightbox
titleA custom value for the title HTML attribute.
idA custom value for the id HTML attribute.
classAdditional CSS class name(s) separated by space(s)



Service – su_service

Service title
Service description

[su_service title="Service title" icon="icon: star" icon_color="#333333" size="32" class="EditusIgnore"]Service description[/su_service]



Box content – su_box

Box title
Box content

[su_box title="Box title" style="default" box_color="#333333" title_color="#FFFFFF" radius="3" class="" id=""]Box content[/su_box]



Note – su_note

Note text

[su_note note_color="#FFFF66" text_color="#333333" radius="3" class="" id=""]Note text[/su_note]



Expand – su_expand


[su_expand more_text="Show more" less_text="Show less" height="100" hide_less="no" text_color="#333333" link_color="#0088FF" link_style="default" link_align="left" more_icon="" less_icon="" class="EditusIgnore"]
Thistextblockcanbeexpanded
[/su_expand]



Lightbox – su_lightbox

Click here to open lightbox
[su_lightbox type="iframe" src="https://mlxzzgdzt2jx.i.optimole.com/cb:yX5x.1db17/w:auto/h:auto/q:mauto/ig:avif/f:best/https://clickety-clack.click/img/sprung/png/shortcode-ultim-examples.png" mobile="yes" class="EditusIgnore"]Click here to open lightbox[/su_lightbox]



Tooltip – su_tooltip

Hover me to open tooltip
[su_tooltip title="" content="Tooltip content" position="top" background="#222222" color="#FFFFFF" font_size="16" text_align="left" max_width="300" radius="5" shadow="no" behavior="hover" class="EditusIgnore"]Hover me to open tooltip[/su_tooltip]



Private Note – su_private


[su_private class="EditusIgnore"]Private note text[/su_private]

Any content wrapped with this shortcode will only be visible to post authors (users with publish_posts capability).


Table – su_table

TD TD
TD TD

[su_table responsive="no" alternate="yes" fixed="no" class="EditusIgnore"]
TD TD
TD TD
[/su_table]
 

CSV Table – su_csv_table

needs url to csv
[su_csv_table url="" delimiter="," header="no" responsive="no" alternate="yes" fixed="no" class="EditusIgnore"]
 
link by post / page id
[su_permalink id="1" target="self" title="" rel="" class="EditusIgnore"]



Members Only – su_members

This content is for registered users only. Please login.

[su_members message="This content is for registered users only. Please %login%." color="#ffcc00" login_text="login" login_url="" class="EditusIgnore"]Content for logged members[/su_members]



Guests – su_guests

This content will be available only for non-logged visitors

[su_guests class="EditusIgnore"]This content will be available only for non-logged visitors[/su_guests]



Feed – su_feed

needs url
[su_feed url="" limit="3" target="self" class="EditusIgnore"]
 

Menu – su_menu

needs menu name
[su_menu name="" class="EditusIgnore"]



List of Sub-Pages – su_subpages


[su_subpages depth="1" p="" class="EditusIgnore"]



Siblings – su_siblings

https://yoast.com/hierarchical-post-type-seo-link-parent-child/
[su_siblings depth="1" class="EditusIgnore"]



Google Map – su_gmap


[su_gmap width="600" height="400" responsive="yes" address="" zoom="0" title="" class="EditusIgnore"]
 

[su_image_carousel source="media: 141968, 141445, 140344, 139997, 139657, 138467" limit="20" slides_style="default" controls_style="dark" crop="4:3" columns="1" adaptive="yes" spacing="yes" align="none" max_width="none" captions="no" arrows="yes" dots="yes" link="none" target="blank" autoplay="5" speed="medium" image_size="large" outline="yes" random="no" class="EditusIgnore"]
  https://getshortcodes.com/docs/image-carousel/ Source: This option defines which images will be shown in the gallery. Images can be selected manually from media library or fetched automatically from post featured images, or even filtered by a taxonomy media: 1,2,3 (Media file IDs) – DOES NOT DISPLAY SVGs posts: 1,2,3 (Post IDs) posts: recent (Recent posts) taxonomy: book/3,5 (Taxonomy term slug / term IDs)

[su_custom_gallery source="media: 141968, 141445, 140344, 139997, 139657, 138467" limit="20" link="none" target="self" width="90" height="90" title="hover" class="EditusIgnore"]



Posts List – su_posts

[su_posts template="templates/default-loop.php" id="" posts_per_page="3" post_type="post" taxonomy="category" tax_term="" tax_operator="IN" author="" meta_key="" offset="0" order="DESC" orderby="date" post_parent="" post_status="publish" ignore_sticky_posts="no"]

Built In Templates: /wp-content/plugins/shortcodes-ultimate/includes/partials/shortcodes/posts/templates/
  1. Description
  2. Options
  3. Pagination
  4. Built-in templates
    1. Default template
    2. Teasers
    3. Single post template
    4. List
  5. Template editing
  6. Creating custom templates
  7. Adding custom template paths

Post Example

CORS
breakdown / fixes

T.O.C.Basic Code Wrapper – PrismaticSimple ResponsivenessBasic FlexboxMLA Gallery Codesfilter – can also be used for standard category / ptags in posts / pagesdisplay single pdf – largeVersion OneVersion TwoRESOURCESHeading – su_headingTabs – su_tabsSpoiler

Owner / User / Group – for 644 Permissions

T.O.C.Basic Code Wrapper – PrismaticSimple ResponsivenessBasic FlexboxMLA Gallery Codesfilter – can also be used for standard category / ptags in posts / pagesdisplay single pdf – largeVersion OneVersion TwoRESOURCESHeading – su_headingTabs – su_tabsSpoiler




Dummy Text – su_dummy_text

Vivamus in lectus interdum, sagittis diam sit amet, scelerisque mi. Sed non urna sapien. Praesent bibendum urna id enim posuere luctus. Sed venenatis libero et elit auctor iaculis eget sit amet dui. Nam ac luctus sapien, nec commodo magna. Etiam erat dui, dapibus eget arcu nec, elementum dapibus nisl. In mollis ipsum in quam mollis, vitae bibendum lacus tincidunt. Nunc sit amet elit non purus condimentum volutpat ac et ante. Mauris facilisis felis sit amet nisl finibus, ut finibus velit congue. Nam id felis ac nulla facilisis laoreet. Cras id consequat leo. Fusce lacinia tortor non tellus ullamcorper euismod. Nullam efficitur interdum dui id hendrerit.


[su_dummy_text what="paras" amount="1" cache="yes" wrapper="yes" class="EditusIgnore"]



Dummy Image – su_dummy_image

Dummy image
[su_dummy_image width="500" height="300" theme="any" class="EditusIgnore"]



Animate – su_animate

Animated content

[su_animate type="bounceIn" duration="1" delay="0" inline="no" class="EditusIgnore"]Animated content[/su_animate]

Wrapper – any content will be animated
Animation Choices

[su_spoiler title="Animation Choices" open="no" style="default" icon="plus" anchor="" anchor_in_url="no" class="EditusIgnore"]
  Animation duration (seconds) Number from 0 to 20
Animation delay (seconds) Number from 0 to 20
INLINE: (yes or no) This parameter determines what HTML tag will be used for animation wrapper. Turn this option to YES and animated element will be wrapped in SPAN instead of DIV. Useful for inline animations, like buttons
Animations flash (flash) bounce (bounce) shake (shake) tada (tada) swing (swing) wobble (wobble) pulse (pulse) flip (flip) flipInX (flipInX) flipOutX (flipOutX) flipInY (flipInY) flipOutY (flipOutY) fadeIn (fadeIn) fadeInUp (fadeInUp) fadeInDown (fadeInDown) fadeInLeft (fadeInLeft) fadeInRight (fadeInRight) fadeInUpBig (fadeInUpBig) fadeInDownBig (fadeInDownBig) fadeInLeftBig (fadeInLeftBig) fadeInRightBig (fadeInRightBig) fadeOut (fadeOut) fadeOutUp (fadeOutUp) fadeOutDown (fadeOutDown) fadeOutLeft (fadeOutLeft) fadeOutRight (fadeOutRight) fadeOutUpBig (fadeOutUpBig) fadeOutDownBig (fadeOutDownBig) fadeOutLeftBig (fadeOutLeftBig) fadeOutRightBig (fadeOutRightBig) slideInDown (slideInDown) slideInLeft (slideInLeft) slideInRight (slideInRight) slideOutUp (slideOutUp) slideOutLeft (slideOutLeft) slideOutRight (slideOutRight) bounceIn (bounceIn) bounceInDown (bounceInDown) bounceInUp (bounceInUp) bounceInLeft (bounceInLeft) bounceInRight (bounceInRight) bounceOut (bounceOut) bounceOutDown (bounceOutDown) bounceOutUp (bounceOutUp) bounceOutLeft (bounceOutLeft) bounceOutRight (bounceOutRight) rotateIn (rotateIn) rotateInDownLeft (rotateInDownLeft) rotateInDownRight (rotateInDownRight) rotateInUpLeft (rotateInUpLeft) rotateInUpRight (rotateInUpRight) rotateOut (rotateOut) rotateOutDownLeft (rotateOutDownLeft) rotateOutDownRight (rotateOutDownRight) rotateOutUpLeft (rotateOutUpLeft) rotateOutUpRight (rotateOutUpRight) lightSpeedIn (lightSpeedIn) lightSpeedOut (lightSpeedOut) hinge (hinge) rollIn (rollIn) rollOut (rollOut)



MetaData – su_meta


[su_meta key="" default="" before="" after="" post_id="" filter=""]

Option name Possible values Default value
key Meta key name Any text value – none –
default This text will be shown if data is not found Any text value – none –
before This content will be shown before the value Any text value – none –
after This content will be shown after the value Any text value – none –
post_id You can specify custom post ID. Leave this field empty to use an ID of the current post. Current post ID may not work in Live Preview mode Any text value – none –
filter You can apply custom filter to the retrieved value. Enter here function name. Your function must accept one argument and return modified value. Name of your function must include word filter. Example function: function my_custom_filter( $value ) {return 'Value is: ' . $value;} Any text value – none –



User Data – su_user

display a user data, like login or email, including meta fields
[su_user field="display_name" default="" before="" after="" user_id="" filter=""]



Post Data – su_post

shortcodes ultimate | shortcodes example & code *
[su_post field="post_title" default="" before="" after="" post_id="" post_type="post" filter=""]

Option name Possible values Default value
field Post data field name ID (Post ID) post_author (Post author) post_date (Post date) post_date_gmt (Post date GMT) post_content (Post content) post_title (Post title) post_excerpt (Post excerpt) post_status (Post status) comment_status (Comment status) ping_status (Ping status) post_name (Post name) post_modified (Post modified) post_modified_gmt (Post modified GMT) post_content_filtered (Filtered post content) post_parent (Post parent) guid (GUID) menu_order (Menu order) post_type (Post type) post_mime_type (Post mime type) comment_count (Comment count) post_title
default This text will be shown if data is not found Any text value – none –
before This content will be shown before the value Any text value – none –
after This content will be shown after the value Any text value – none –
post_id You can specify custom post ID. Post slug is also allowed. Leave this field empty to use ID of the current post. Current post ID may not work in Live Preview mode Any text value – none –
post_type Post type of the post you want to display the data from Post type slug(s) separated by comma(s) post
filter You can apply custom filter to the retrieved value. Enter here function name. Your function must accept one argument and return modified value. Name of your function must include word filter. Example function: function my_custom_filter( $value ) {return 'Value is: ' . $value;} Any text value – none –



Template – su_template – NON-FUNCTIONING


[su_template name=""]

Use template file name (with optional .php extension). If you need to use templates from theme sub-folder, use relative path. Example values: page, page.php, includes/page.php


QRCode – su_qrcode


[su_qrcode data="https://clickety-clack.click" title="" size="200" margin="0" align="none" link="" target="blank" color="#000000" background="#ffffff" class="EditusIgnore"]

Option name Possible values Default value
data The text to store within the QR code. You can use here any text or even URL Any text value – none –
title Enter here short description. This text will be used in alt attribute of QR code Any text value – none –
size Image width and height (in pixels) Number from 10 to 1000 200
margin Thickness of a margin (in pixels) Number from 0 to 50 0
align Choose image alignment none (None) left (Left) center (Center) right (Right) none
link You can make this QR code clickable. Enter here the URL Any text value – none –
target Select link target self (Open in same tab) blank (Open in new tab) blank
color Pick a primary color #HEX color #000000
background Pick a background color #HEX color #ffffff
class Additional CSS class name(s) separated by space(s) CSS class name(s) separated by space(s) – none –
 


Scheduler – su_scheduler



[su_scheduler time="" days_week="" days_month="" months="" years="" alt=""]Scheduled content[/su_scheduler]

schedler
Option name Possible values Default value
time In this field you can specify one or more time ranges. Every day at this time the content of shortcode will be visible.Examples (click to set) 9-18 – show content from 9:00 to 18:00 9-13, 14-18 – show content from 9:00 to 13:00 and from 14:00 to 18:00 9:30-10:15 – example with minutes (content will be visible each day, 45 minutes) 9:00:00-17:59:59 – example with seconds Any text value – none –
days_week In this field you can specify one or more days of the week. Every week at these days the content of shortcode will be visible.0 – Sunday 1 – Monday 2 – Tuesday 3 – Wednesday 4 – Thursday 5 – Friday 6 – SaturdayExamples (click to set) 1-5 – show content from Monday to Friday 0 – show content only at Sunday 0, 3-5 – show content at Sunday and from Wednesday to Friday Any text value – none –
days_month In this field you can specify one or more days of the month. Every month at these days the content of shortcode will be visible.Examples (click to set) 1 – show content only at first day of month 1-5 – show content from 1th to 5th 10-15, 20-25 – show content from 10th to 15th and from 20th to 25th Any text value – none –
months In this field you can specify the month or months in which the content will be visible.Examples (click to set) 1 – show content only in January 2-6 – show content from February to June 1, 3, 5-7 – show content in January, March and from May to July Any text value – none –
years In this field you can specify the year or years in which the content will be visible.Examples (click to set) 2014 – show content only in 2014 2014-2016 – show content from 2014 to 2016 2014, 2018, 2020-2022 – show content in 2014, 2018 and from 2020 to 2022 Any text value – none –
alt In this field you can type the text which will be shown if content is not visible at the current moment Any text value – none –



Splash Screen – su_splash

Splash screen content


[su_splash style="dark" width="480" opacity="80" onclick="close-bg" url="https://clickety-clack.click" delay="0" esc="yes" close="yes" once="no" class="EditusIgnore"]Splash screen content[/su_splash]
 
Option name Possible values Default value
style Choose splash screen style dark (Dark) dark-boxed (Dark boxed) light (Light) light-boxed (Light boxed) blue-boxed (Blue boxed) light-boxed-blue (Light boxed blue) light-boxed-green (Light boxed green) light-boxed-orange (Light boxed orange) maintenance (Maintenance) dark
width Width of splash screen content Number from 100 to 1600 480
opacity Background opacity in percents Number from 0 to 100 80
onclick Choose splash screen behavior when it is clicked none (Do nothing) close (Close splash screen (click anywhere)) close-bg (Close on background click) url (Go to specified url) close-bg
url Enter url to go when splash screen is clicked (this option must selected in dropdown list above) Any text value https://getshortcodes.com
delay Specify the time in which the splash screen will be shown (in seconds) Number from 0 to 120 0
esc Close the screen by pressing Esc yes or no yes
close Show Close button yes or no yes
once Show this splash screen only once on this page yes or no no
class Additional CSS class name(s) separated by space(s) CSS class name(s) separated by space(s) – none –



Exit Popup – su_exit_popup

Exit popup content


[su_exit_popup style="dark" width="480" opacity="80" onclick="close-bg" url="https://clickety-clack.click" esc="yes" close="yes" once="no" class="EditusIgnore"]Exit popup content[/su_exit_popup]



Panel – su_panel

Panel content


[su_panel background="#ffffff" color="#333333" border="1px solid #cccccc" padding="15" shadow="0px 1px 2px #eeeeee" radius="0" text_align="left" url="" target="self" class="EditusIgnore"]Panel content[/su_panel]



Photo Panel – su_photo_pane

Panel content


[su_photo_panel background="#ffffff" color="#333333" border="1px solid #cccccc" shadow="0 1px 2px #eeeeee" radius="0" text_align="left" photo="https://mlxzzgdzt2jx.i.optimole.com/cb:yX5x.1db17/w:auto/h:auto/q:mauto/ig:avif/f:best/https://clickety-clack.click/img/awsatshawneeedotcom.png" alt="" url="" target="self" class="EditusIgnore"]Panel content[/su_photo_panel]



Icon Panel – su_icon_panel

Uses FontAwesome
Panel content


[su_icon_panel background="#ffffff" color="#333333" border="1px solid #cccccc" shadow="0 1px 2px #eeeeee" radius="0" text_align="center" icon="icon: heart" icon_color="#333333" icon_size="24" url="" target="self" class="EditusIgnore"]Panel content[/su_icon_panel]



Text with Icon – su_icon_text

Uses FontAwesome
Content


[su_icon_text color="#333333" icon="icon: heart" icon_color="#333333" icon_size="24" url="" target="blank" class="EditusIgnore"]Content[/su_icon_text]



Progress Pie – su_progress_pie

75



[su_progress_pie percent="75" text="" before="" after="" size="200" pie_width="30" text_size="40" align="center" pie_color="#f0f0f0" fill_color="#97daed" text_color="#cccccc" class="EditusIgnore"]


 

Progress Bar – su_progress_bar

75

[su_progress_bar style="default" percent="75" text="" bar_color="#f0f0f0" fill_color="#97daed" text_color="#555555" animation="yes" class="EditusIgnore"]



Team Member – su_member

John DoeDesigner
Type here some info about this team member


[su_member background="#ffffff" color="#333333" border="1px solid #cccccc" shadow="0 1px 2px #eeeeee" radius="0" text_align="left" photo="http://lorempixel.com/400/300/business/" name="John Doe" role="Designer" icon_1="" icon_1_url="" icon_1_color="#333333" icon_1_title="" icon_2="" icon_2_url="" icon_2_color="#333333" icon_2_title="" icon_3="" icon_3_url="" icon_3_color="#333333" icon_3_title="" url="" class="EditusIgnore"]Type here some info about this team member[/su_member]




Section – su_section

Section content


[su_section background="#ff6600" image="" background_position="left top" fullwidth="no" parallax="yes" cover="yes" max_width="960" margin="0px 0px 0px 0px" padding="30px 0px 30px 0px" border="1px solid #cccccc" color="#333333" text_align="left" text_shadow="0 1px 10px #ffffff" url="" target="blank" class="EditusIgnore"]Section content[/su_section]



Pricing Table – su_pricing_table


  • Option 1
  • Option 2
  • Option 3
  • Option 1
  • Option 2
  • Option 3
  • Option 1
  • Option 2
  • Option 3


[su_pricing_table max_width="none" class=""]
[su_plan name="" price="" before="" after="" period="" featured="no" background="#f9f9f9" color="#333333" border="#eeeeee" shadow="0px 0px 25px #eeeeee" icon="" icon_color="#333333" icon_size="48" btn_url="" btn_target="self" btn_text="" btn_background="#999999" btn_color="#ffffff" class=""]
  • Option 1
  • Option 2
  • Option 3
[/su_plan] [su_plan name="" price="" before="" after="" period="" featured="no" background="#f9f9f9" color="#333333" border="#eeeeee" shadow="0px 0px 25px #eeeeee" icon="" icon_color="#333333" icon_size="48" btn_url="" btn_target="self" btn_text="" btn_background="#999999" btn_color="#ffffff" class=""]
  • Option 1
  • Option 2
  • Option 3
[/su_plan] [su_plan name="" price="" before="" after="" period="" featured="no" background="#f9f9f9" color="#333333" border="#eeeeee" shadow="0px 0px 25px #eeeeee" icon="" icon_color="#333333" icon_size="48" btn_url="" btn_target="self" btn_text="" btn_background="#999999" btn_color="#ffffff" class=""]
  • Option 1
  • Option 2
  • Option 3
[/su_plan] [/su_pricing_table]



Testimonial – su_testimonial

Testimonial text

[su_testimonial name="" photo="" company="" url="" target="blank" border="yes" class="EditusIgnore"]Testimonial text[/su_testimonial]




Icon – su_icon

Uses FontAwesome

[su_icon icon="" background="#eeeeee" color="#333333" text_color="#333333" size="32" shape_size="16" radius="256" text_size="16" margin="0px 20px 20px 0px" url="" target="blank" class="EditusIgnore"][/su_icon]



Content Slider – su_content_slider



[su_content_slider style="default" effect="slide" arrows="yes" pages="no" autoplay="5" autoheight="yes" class="EditusIgnore"]
[su_content_slide class="EditusIgnore"]Slide content[/su_content_slide]
[su_content_slide class="EditusIgnore"]Slide content[/su_content_slide]
[su_content_slide class="EditusIgnore"]Slide content[/su_content_slide]
[/su_content_slider]




Shadow – su_shadow


[su_shadow style="default" inline="no" class="EditusIgnore"][/su_shadow]

- VERTICAL SHADOW - 


[su_shadow style="vertical"]
[su_box title="openssl@3" style="default" box_color="#333333" title_color="#FFFFFF" radius="3" class="" id=""]
<p>Info</p>
[/su_box]
[/su_shadow]

  Nest [su_shadow] around content shadow
Box title


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque imperdiet purus. Curabitur pretium, purus nec venenatis vestibulum, quam massa maximus nisi, dignissim pharetra dolor urna et arcu. Nulla erat nisl, elementum sit amet nibh non, hendrerit rutrum ex. Nunc eget nisl nec augue euismod faucibus sit amet viverra felis. Nullam risus ipsum, accumsan nec neque eget, viverra gravida justo. Proin consectetur blandit diam non mattis. Sed eget nulla vel tellus sollicitudin consequat. Donec quis blandit arcu.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur non lectus accumsan, cursus libero maximus, vulputate mi. Nunc vulputate ullamcorper mauris id placerat. Mauris ut ipsum enim. Sed sodales magna vitae dui egestas, sed dictum nisi ullamcorper. Nulla porta nisl in ligula congue molestie. Cras faucibus mollis mauris vel dignissim.

Donec rhoncus est erat, ut cursus purus finibus id. Fusce quis mi sem. Donec id tellus sollicitudin, lobortis nisl nec, sodales neque. Fusce facilisis dui cursus, pellentesque neque sed, porttitor dolor. Sed vel urna nec ante ullamcorper rutrum. Phasellus sed libero interdum, convallis massa vitae, dictum lectus. Donec tempor, massa in semper dapibus, purus justo aliquam mi, in porttitor enim purus a eros. Suspendisse non nisi vel neque ultrices placerat iaculis ut leo. Integer risus nisi, facilisis vitae felis sit amet, lobortis consequat augue. Phasellus facilisis convallis vulputate. Praesent in purus a est bibendum consectetur. Phasellus vestibulum dui a velit vulputate sagittis. Morbi hendrerit urna eget magna pretium tempor. Vivamus ut tincidunt odio.




[su_shadow style="default" inline="no" class="EditusIgnore"]
[su_box title="Box title" style="default" box_color="#333333" title_color="#FFFFFF" radius="3" class="" id=""]
Box content
[/su_box]
[/su_shadow]

 
Scroll to Top