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 plug­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.

Columns

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 column.

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 column. From here you can add what con­tent you desire in each column like textimages or even oth­er short­codes.

You can have mul­ti­ple rows of columns on one page with dif­fer­ent column 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.

Button

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 the­me (we real­ly hate those pesky default browser 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.

Icon

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.

Tabs

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.

Separator

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

Slider

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).

The­se 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.

Addi­tion­al Read­ing:

Updated on May 8, 2017

Was this article helpful?

Related Articles