Overview of Extra Shortcodes add-on

As of writing this, Extra Shortcodes add-on provides 17 new shortcodes. The full list of shortcodes and their description is presented below.

Splash Screen

[su_splash_screen]

Allows to display the splash screen (pop-up window) to users. The splash screen can be displayed with adjustable delay. You can select one of 9 style options of pop-up window, adjust its width, background transparency, and action at closing of the window.

Besides, splash screen can be displayed to each user only once, at the first visiting of the page.

Exit Popup

[su_exit_popup]

Allows to display pop-up window at closing of browser tab.You can select one of 9 style options of pop-up window, adjust its width, background transparency, and action at closing of the window.

Pop-up window can be displayed only one to each user.

Panel

[su_panel]

Panel is a block with adjustable appearance, inside of which you can place any contents. The panel can contain simple text, HTML code or even other shortcodes. You can customize background colour, text colour, text alignment, block border, block shade according to your preferences.

Besides, you can make the panel clickable (as a big button) with specifing the link.

Photo Panel

[su_photo_panel]

This is the analogue of a simple panel [su_panel], but with possibility to add custom image at the top of the block.

Icon Panel

[su_icon_panel]

This is the analogue of a simple panel [su_panel], but with possibility to add a vector icon at the top of the block.

Text With Icon

[su_icon_text]

This shortcode allows to display text blocks with vector icons. You can customize text colour, as well as colour and size of the icon.

Besides, you can make the block clickable (as a big button) with specifing the link.

Progress Pie

[su_progress_pie]

This shortcode allows to show chart in the form of a pie on the page. You can adjust percent of pie filling, its size, colours, and alignment. You can also add text into the pie.

Progress bar

[su_progress_bar]

This shortcode will show the block partially filled with colour. You can choose the bar style, adjust colours of empty and filled parts of the bar, percent of filling, and display of a custom text, instead of the percents.

Member

[su_member]

Using this shortcode, you can show cards of the project or team members on the site. You can select a photo for every member/employee, change background and text colours, etc. You can also add up to three icons of social networks with links.

Section / Parallax section

[su_section] … [/su_section]

Section is a big block which can contain simple text, HTML code or other shortcodes. You can adjust section's background by filling with colour or upload of background image. Besides, you can adjust section sizes by changing the padding. You can also make the section clickable (as a big button) by adding the link to shortcode settings.

The most interesting function of the section is a possibility to create parallax effect. The parallax effect is an effect, with which the block background image does not change its position at page scrolling or moves in the opposite direction.

Pricing tables

[su_pricing_table], [su_plan]

You should use two shortcodes for creation of pricing tables. The first shortcode [su_pricing_table] serves as a container for pricing plans. Pricing plans are created with the help of [su_plan] shortcode. Appearance of each pricing plan can be adjusted individually. You can change background, text, and border colours of the pricing plan. You can also add icon or any image to the pricing plan headline.

These two shortcodes operate by analogy with tabs/tab and row/column shortcodes. This means that the first shortcode, su_pricing_table, serves as a container for the second shortcode - su_plan. Several shortcodes can be nested in the container. Example:

[su_pricing_table]
	[su_plan] ... [/su_plan]
	[su_plan] ... [/su_plan]
[/su_pricing_table]

Testimonial

[su_testimonial]

Using this shortcode you can display client reviews. The shortcode allows to add (or not to add) a photo of review's author, his/her name, and link to the site.

Icon

[su_icon]

This shortcode allows to show various icons on site pages. The icon can be selected from the list of included vector icons or uploaded. Besides, you can add the text to the icon or turn the icon into button by adding the link.

Content slider

[su_content_slider], [su_content_slide]

This is incredibly powerful and useful shortcode allowing you to create slider from almost anything. You can place simple text, HTML code or even other shortcodes in the slide. For example, you can create slider with customer reviews by placing each review in a separate slide. You can also create a carousel using row and column shortcodes in slides.

These two shortcodes operate by analogy with tabs/tab and row/column shortcodes. This means that the first shortcode  su_content_slider serves as a container for the second shortcode - su_content_slide. Several shortcodes can be nested in the container. Example:

[su_content_slider]
	[su_content_slide] ... [/su_content_slide]
	[su_content_slide] ... [/su_content_slide]
[/su_content_slider]

Shadow

[su_shadow]

Shadow shortcode allow to add a beautiful shadow to almost any block or shortcode. Just place the necessary block into this shortcode and the shadow will be added automatically. There are several shadow kinds available.