Atom WordPress Shortcodes


SKU: WP002-AT Category: Tags: , ,

Welcome to Atom Click & Create WordPress Shortcodes. Create amazing buttons, content boxes, icons, tabs, accordions, popups and much more with a click of a button. Our Shortcodes plugin comes with a built in preview so you can see what you going to create before you add it into your post or page. Our shortcodes can also be used in any area of your WordPress website. We also incorporated a custom function which will allow you to use our shortcodes in any widget area of your website.

What is a Shortcode

A Shortcode is a bit of code that is wrapped inside the [shortcode] brackets. It allows you to create elements that is pre-coded with a click of a button. For instance if you add the shortcode [drsc button] you will get an awesome looking button. Our Shortcodes also comes with loads of additional options. All you need to do is select the shortcode you want, setup the options for that element and we will do the rest.

All our shortcodes will start like this [drsc_shortcode_name …] … = additional settings like colours, align etc, based on the options you select when you insert the shortcode.

Using Atom Shortcodes

You can use our shortcodes in pages, posts, widget areas (text widget) and excerpts.

To insert a shortcode into a page or post all you need to do is click on the Atom Shortcodes Dropdown. Follow the steps below.

Inserting a Shortcode

  1. In The Page/Post Editor – Click on the Atom Shortcodes Dropdown List
  2. Select the Shortcode you want
  3. For most Shortcodes a Window will popup where you can set the options for the selected Shortcode
  4. After you configured your options – Click on the red “CREATE” button

Shortcode Preview

Some Shortcodes will also allow you to preview it before you Insert – Just click the green “PREVIEW” button.
Some Shortcodes do not require any additional configuration – like some of the dividers, when you click on it, the shortcode will be added immediately. There are some shortcodes which cant be previewed. Just add it to your page and test it on the website. Also note that the preview is not always a 100% correct as the files might load differently on the admin side of your website. It is always best to test the final result in the actual website.


Atom Shortcodes use RGBA colour sytem (RED, GREEN, BLUE, ALPHA). This will allow you to create see through colours using the alpha channel. For instance you can have a semi transparent icon or button on top of a background image. If you only know the #hex colour codes you can still insert the #hex colour and we will convert it to RGBA for you. Use the supplied color picker to choose any colour for your elements.


  • Boxes
    • Icon Box
    • Content Box
    • Shadow Box
    • Image Hover Box
    • Event Info Box
    • Operating Hours
    • Callout Box
  • Buttons
    • Basic Icon
    • Background Fill
    • Animated Icon
  • Dividers
    • Custom
    • Text
    • GoTo Top
    • Shadow
  • Icons
    • Fill Icon (675)
    • Line Icon (370)
    • Social Icons (80)
  • UI Elements
    • Tabs
    • Toggle
    • Accordion
  • Bootstrap Popover
  • Modal Popup
  • Tooltip
  • Typography
    • Dropcap
      • Light Round Dropcap
      • Dark Round Dropcap
      • Light Square Dropcap
      • Dark Square Dropcap
    • Custom Text Highlight
    • Label
      • New
      • Notice
      • Warning
      • Important
      • Default
  • Code
  • Animated Element
  • Animated Number Count
  • Animated Progress Bar
  • Event Flip Countdown
  • Padding Space
  • Media
    • Audio
      • Custom – HTML5
      • SoundCloud
      • MixCloud
    • Video
      • YouTube
      • Vimeo
      • DailyMotion
      • Flash
      • Custom – HTML5


There are no reviews yet.

Be the first to review “Atom WordPress Shortcodes”