Custom Elements

Let’s dive deeper into crafting your content and explore the tools Pile provides in this respect. We will focus on highlighting certain letters, words or entire phrases, adding embellishments, organizing passages into columns, and so on.
You can see it all in action on the Text Styles page on our demo.

Custom Text Styles

In addition to the regular styles provided with the WordPress editor (like various headings, paragraphs, quotes), we’ve added one extra dropdown select with a few custom formats.
Simply highlight the text you want to be styled and select the custom format from the Custom Elements dropdown. This will wrap it with some extra HTML (you can see this in the Text mode of the editor).

• Description Text — This is aimed at highlighting a summary sentence of either the whole article or a subsection;
• Dropcap — This is used to greatly enlarge the first letter of a sentence;
• Highlight — Use this format to bring emphasis to a single word or a group of them;
• Two Columns — This is aimed at splitting the text of a paragraph (or a group of paragraphs) into two columns (think newspaper style). The text will automatically be distributed between the two columns, keeping them in balance.

Helper CSS Classes

You can take things even further with some helper CSS classes applied to the HTML elements. Note that you need to switch to the Text mode of the WP Editor.
For example, you might want to visually “mark” a certain H1 heading into becoming the de-facto 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 headings a special treatment (think red bullets) by adding the class to them, like so:

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

Shortcodes

Thanks to the free recommended PixCodes plugin, you get a series of easy to use shortcodes right into the WP content editor (look out for the colorful P button).
Let’s quickly go through each available shortcode:

• Columns — Use this shortcode to bring rows and columns layouts into your content; you can easily control the number of columns of each row and their width with the help of an interactive slider;
• Button — This shortcode will help you in adding consistently styled buttons (i.e. call-to-action buttons), with options such as label, URL link, and custom CSS classes;
• Icon — Easily get access to the entire Font Awesome icon collection, with the added benefits of controlling the background shape, size, URL link, and custom CSS classes;
• Tabs — This shortcode will allow you to group various content under tabs, each with their own label and option icon;
• Separator — A simple helper shortcode to keep your horizontal separators consistent across your site, though you can choose from a couple of different styles;
• Slider — Similar to the Tabs shortcode, the slider will allow you to group content into a slideshow with options such as navigation style or transition type.