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.

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 type of button: regular, primary or text and customize its size: regular, small, or large.  For custom styling, you can add a CSS class and/or id.

Adding a button using PixCodes

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.

Separator

This shortcode will help you add a nice formatted divider to go with your beautiful theme. You can choose between two colors (Gray and White) and three separator types (Line, Flower, Line with Flower).

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

Additional Reading:

Updated on September 15, 2020

Can't find what you’re looking for? Ask a human.

We're a small team of real people providing real help. Send us an email at hello@pixelgrade.com and we will give you a helping hand.