Overview of the Extra Shortcodes add-on

This article is outdated, please see an appropriate User Guide:

As of writing this, the Extra Shortcodes add-on adds 17 new shortcodes (including 2 complement shortcodes). The full list of shortcodes and their descriptions are presented below.

Table of contents

  1. Splash Screen
  2. Exit Popup
  3. Panel
  4. Photo Panel
  5. Icon Panel
  6. Text With Icon
  7. Progress Pie
  8. Progress bar
  9. Member
  10. Section / Parallax section
  11. Pricing tables
  12. Testimonial
  13. Icon
  14. Content slider
  15. Shadow

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

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

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

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

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

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

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

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

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

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

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.

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

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

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.

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.

Helpful?
🤝 Thank you!