Custom Elements

Let’s dive deep­er into craft­ing your con­tent and explore the tools Pile pro­vides in this respect. We will focus on high­light­ing cer­tain let­ters, words or entire phras­es, adding embell­ish­ments, orga­niz­ing pas­sages into columns, and so on.
You can see it all in action on the Text Styles page on our demo.

Custom Text Styles

In addi­tion to the reg­u­lar styles pro­vid­ed with the Word­Press edi­tor (like var­i­ous head­ings, para­graphs, quotes), we’ve added one extra drop­down select with a few cus­tom for­mats.
Sim­ply high­light the text you want to be styled and select the cus­tom for­mat from the Cus­tom Ele­ments drop­down. This will wrap it with some extra HTML (you can see this in the Text mode of the edi­tor).

  • Descrip­tion Text — This is aimed at high­light­ing a sum­ma­ry sen­tence of either the whole arti­cle or a sub­sec­tion;
  • Drop­cap — This is used to great­ly enlarge the first let­ter of a sen­tence;
  • High­light — Use this for­mat to bring empha­sis to a sin­gle word or a group of them;
  • Two Columns — This is aimed at split­ting the text of a para­graph (or a group of para­graphs) into two columns (think news­pa­per style). The text will auto­mat­i­cal­ly be dis­trib­uted between the two columns, keep­ing them in bal­ance.

Helper CSS Classes

You can take things even fur­ther with some helper CSS class­es applied to the HTML ele­ments. Note that you need to switch to the Text mode of the WP Edi­tor.
For exam­ple, you might want to visu­al­ly “mark” a cer­tain H1 head­ing into becom­ing the de-fac­to page title — you can do this by adding the page-title class to the h1 tag, like so:

<h1 class="page-title">Page Title</h1>

You could also give H4 head­ings a spe­cial treat­ment (think red bul­lets) by adding the class to them, like so:

<h4 class="em">Two Column Layout</h4>


Thanks to the free rec­om­mend­ed Pix­Codes plu­g­in, you get a series of easy to use short­codes right into the WP con­tent edi­tor (look out for the col­or­ful P but­ton).
Let’s quick­ly go through each avail­able short­code:

  • Columns — Use this short­code to bring rows and columns lay­outs into your con­tent; you can eas­i­ly con­trol the num­ber of columns of each row and their width with the help of an inter­ac­tive slid­er;
  • But­ton — This short­code will help you in adding con­sis­tent­ly styled but­tons (i.e. call-to-action but­tons), with options such as label, URL link, and cus­tom CSS class­es;
  • Icon — Eas­i­ly get access to the entire Font Awe­some icon col­lec­tion, with the added ben­e­fits of con­trol­ling the back­ground shape, size, URL link, and cus­tom CSS class­es;
  • Tabs — This short­code will allow you to group var­i­ous con­tent under tabs, each with their own label and option icon;
  • Sep­a­ra­tor — A sim­ple helper short­code to keep your hor­i­zon­tal sep­a­ra­tors con­sis­tent across your site, though you can choose from a cou­ple of dif­fer­ent styles;
  • Slid­er — Sim­i­lar to the Tabs short­code, the slid­er will allow you to group con­tent into a slideshow with options such as nav­i­ga­tion style or tran­si­tion type.

This article applies to Pile, as they share the same underlying structure.

Updated on April 12, 2017

Was this article helpful?