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.

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?