Using Shortcodes for Custom Elements

Here is where the beau­ty lies. We’ve tak­en that extra mile and craft­ed an advanced, but sim­ple to use short­codes plu­g­in that will allow you to give struc­ture to your pages and posts. To ensure ease of use, every­thing is visu­al, nice­ly packed in a modal win­dow acces­si­ble from the Word­Press edi­tor. Every­thing starts with the funky P but­ton.


The main short­code that will be the work­horse of your pages is the Columns short­code. This enables you to divide the con­tent into a mul­ti­tude of columns via a sim­ple and intu­itive slid­er inter­face. Sim­ply choose how many columns do you want and then drag the slid­ers to select the pro­por­tions of each col­umn.

Once you are done, hit the Insert but­ton and we will gen­er­ate for you the short­code, with some dum­my con­tent for each col­umn. From here you can add what con­tent you desire in each col­umn like textimages or even oth­er short­codes.

You can have mul­ti­ple rows of columns on one page with dif­fer­ent col­umn con­fig­u­ra­tions, but we urge you to take the time and think things over, so you don’t clut­ter your pages with too much con­tent.


To fur­ther empha­size your call to action or links, you can use this But­ton short­code to get a beau­ti­ful but­ton that is in line with the rest of the theme (we real­ly hate those pesky default brows­er but­tons). Sim­ply input the but­ton link and label and you are good to go. You can also choose the size of your but­ton: smallmedi­um or big. For cus­tom styling, you can add a CSS class and/or id.


Because icons are cool, we’ve made it easy for you to add icons using the famous Enty­po icons. This will allow you choose between two back­ground styles (a rec­tan­gle or cir­cle) and three sizes (smallmedi­um and large) — every­thing so that it matched your website’s style.


Use the Tabs short­code to group some of your con­tent in your pages or posts under cer­tain tabs. For each tab, you can spec­i­fy the tab title, an icon (using the FontAwe­some library) and the HTML con­tent. If you don’t want icons sim­ply leave that field emp­ty.

You can define as many tabs as you want using the New Tab but­ton.


Using this short­code you’ll be able to cre­ate a nice appeal­ing quote with a smallmedi­um or big Text Size along with four input fields for Text, Author, Author Link and Author Title.


This short­code will help you add a nice for­mat­ted divider, to go with your beau­ti­ful theme, be it either a Reg­u­lar or a Dot­ted sep­a­ra­tor.


Use the Slid­er short­code to insert small slid­ers in your con­tent to show­case your tes­ti­mo­ni­als, for exam­ple. You can cre­ate as many slides as you like using the New Slide but­ton. Also, you can define the arrows style (ArrowsBul­letsArrows, and Bul­lets or None) and the tran­si­tion ani­ma­tion between slides (Move/Drag or Fade).

These are all the details you need to know about our cus­tom short­codes to get you cre­at­ing nice pre­sen­ta­tion pages, or maybe…posts? Prob­a­bly not. Check out our short­codes page to get a bet­ter feel.

Progress Bar

This will let you use a sim­ple num­ber to rep­re­sent the length in pix­els or a per­cent­age val­ue (like 96%), by using the Title, Mark­ers and Progress input fields.

Team Member

Present your crew in a nice man­ner by tak­ing advan­tage of these awe­some options, like the Pro­file ImageDescrip­tionSocial Media Links etc

Addi­tion­al Read­ing:

This article applies to Border, Bucket, Heap, Lens, Mies, and Rosa as they share the same underlying structure.

Updated on May 8, 2017

Was this article helpful?