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.

Adding columns using PixCodes

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.

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.

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.

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

These are all the details you need to know about our custom shortcodes to get you creating nice presentation pages, or maybe…posts? Probably not. Check out our shortcodes page to get a better feel.

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.