Using Shortcodes for Custom Elements
Here is where the beauty lies. We’ve taken that extra mile and crafted an advanced but simple to use shortcodes plugin called PixCodes that will allow you to give structure to your pages and posts. To ensure ease of use, everything is visual, nicely packed in a modal window accessible from the WordPress editor. Everything starts with the funky P button.
Before diving further, make sure you have the PixCodes plugin installed and activated. To check if you have it, go to the Plugins section of your website or click on the Pixelgrade tab, scroll down to the Manage plugins section and make sure it’s installed and activated.
Columns
The main shortcode that will be the workhorse of your pages is the Columns shortcode. This enables you to divide the content into many columns via a simple and intuitive slider interface. Simply choose how many columns you want and then drag the sliders to select each column’s proportions.
Once you are done, hit the Insert button, and we will generate the shortcode with some dummy content for each column. From here, you can add what content you desire in each column, like text, images, or even other shortcodes.
You can have multiple rows of columns on one page with different column configurations, but we urge you to take the time and think things over, so you don’t clutter your pages with too much content.
Button
To further emphasize your call to action or links, you can use this Button shortcode to get a beautiful button in line with the rest of the theme (we hate those pesky default browser buttons). Click on the P button from your editor, select the Button option, add the button link and label (the text displayed in the button), and you are good to go.
You can also choose the size of your button: small, medium, or big. For custom styling, you can add a CSS class and/or id.
Icon
Because icons are cool, we’ve made it easy to add icons using the famous Entypo icons. This will allow you to choose between two background styles (a rectangle or circle) and three sizes (small, medium, and large)—everything you need to match them to your website’s style.
Tabs
Use the Tabs shortcode to group some of your content in your pages or posts under individual tabs. You can specify the tab title, an icon (using the FontAwesome library), and the HTML content for each tab. If you don’t want icons, simply leave that field empty. You can define as many tabs as you wish using the New Tab button.
Quote
Using this shortcode, you’ll create a nice appealing quote with a small, medium, or big text size along with four input fields for Text, Author, AuthorLink, and Author Title.
Separator
This shortcode will help you add a nice formatted divider to go with your beautiful theme, be it either a Dotted or a Striped separator.
Slider
Use the Slider shortcode to insert small sliders in your content to showcase your testimonials, for example. You can create as many slides as you like using the New Slide button. You can also define the style of the arrows (Arrows, Bullets, Arrows, and Bullets or None) and the transition animation between slides (Move/Drag or Fade).
Average Score
This shortcode works only if you click on Enable Review Score (screenshot) available at the end of the blog post. Once you enable it, it will reveal a Score Breakdown section to add your scoring label, score, and weight. In the Average Score Box, you can choose the placement of the average score: before content, after content, or using the shortcode. By selecting the shortcode option, you can use the P button to add the average score anywhere in your blog post.