Top

Pixel Shortcodes

  1. General usage
Buy

General usage

What are shortcodes?

Shortcodes are simple text blocks used within the page or post editor of your WordPress admin dashboard to generate and display content.


Float comes packaged with a variety of shortcodes. For the full collection of Float shortcodes with a shortcode generator, see the Pixel Shortcodes add–on.


Below is a reference of Float's pre–packaged shortcodes, displayed with their optional attributes. 

Media attributes

Media attributes that require an image or video (e.g. img="12") use the ID of an upload from your media library, and not the URL.


To get the ID of the image or video you wish to use, navigate to your media library and select the image. Look up the URL of the image edit page, and you'll get something like:

<your-domain>/wp-admin/upload.php?item=5802

The image ID will be displayed as item=5802. Just take that number (5802 in this case) and use it in a shortcode:

[po_section img="5802"]
Insert content 
[/po_section]

Alternatively, you can install a plugin like Show IDs, which will reveal the IDs for media, posts, pages, etc.

The Pixel Shortcodes add–on completes your theme's shortcode eco–system with a full suite of premium shortcodes and a shortcode generator. The shortcode generator can be used to generate shortcodes with a combination of optional attributes.

Below is a reference of the Pixel Shortcodes' shortcodes, displayed with their optional attributes. For more information about the attributes of each shortcode, view the shortcode generator.

Media attributes that require an image or video (e.g. videoimg="12") use the ID of an upload from your media gallery. 

True boolean attributes are represented by the value 1 (e.g. parallax="1"). For false, simply remove the attribute. For, attributes that require an icon, see Icons.

View the WooCommerce documentation for a list of WooCommerce shortcodes.

Section

The section shortcode is a great tool for arranging content into sections with varying colour, image and video backgrounds. Image backgrounds can be standard, fixed or parallax, and all backgrounds have light and dark styles.

[po_section class="section" id="1" full="1" bg="light" bgcolor="#ffffff" img="11" fixed="1" parallax="1" speed="400" align="20" video="14" videoimg="13" padding="large" top="80" bottom="80"]
Insert content 
[/po_section]
  • bg: standard, light, dark.

Column

The column shortcode works in combination with the section shortcode to achieve a fluid grid system used to create a variety of page layouts. Columns scale up to 12 and can be offset to achieve specific layouts. You can add different attribute values for different screen sizes. Features an appear delay and animation option. Can contain any content.

For more information on the column grid system, see Bootstrap
[po_section]
[po_column class="column" width="4" type="sm" offset="2" push="4" pull="6" width2="4" type2="xs" offset2="2" push2="4" pull2="6" width3="6" type3="md" offset3="0" push3="4" pull3="6" width4="12" type4="lg" offset4="2" push4="4" pull4="6" animation="move-left" delay="400" top="20" bottom="20" side="10" last="1" last_s="1" last_sm="1" last_s_sm="1" last_md="1" last_lg="1" visible_xs="1" hidden_xs="1" visible_s="1" hidden_s="1" visible_sm="1" hidden_sm="1" visible_md="1" hidden_md="1" visible_lg="1" hidden_lg="1" remove_lineheight="1"]
Insert content
[/po_column]
[/po_section]
  • type: xs, s, sm, md, lg.
  • animation: fade-in, move-up, move-left, move-right, bounce-in, pull-up.

Buttons

Our customisable buttons allow users to scroll to specific sections within the current page, link to another page on same website or link to an external website. Button colours automatically adjust to the backgrounds they're placed on. Supports new window or tab opening.

[po_button style="block" square="1" width="full" large="1" text="Button text" link="#section_id" new="1" center="1" right="1" color="1" font_size="20"]
  • style: outline, block, icon.
  • width: standard, full.

Social

Share your social media profiles using site–wide or individual profile details. Icons can be standard or large in size and colours automatically adjust to the backgrounds they're placed on.

[po_social size="large" type="email, twitter, facebook, googleplus, pinterest, youtube, vimeo, linkedin, github, foursquare, instagram, flickr, rss" email="#" twitter="#" facebook="#" googleplus="#" pinterest="#" youtube="#" vimeo="#" linkedin="#" github="#" foursquare="#" instagram="#" flickr="#" rss="#"]
  • size: standard, large.

Mailbag

The Mailbag shortcode allows you add a MailChimp powered subscription form to your footer (within the Footer Columns post type).

[po_mailbag action="#" placeholder="Email address" btn_text="Subscribe"]

Posts

Display blog and portfolio posts within your content using our posts shortcode. Customise number of posts and columns, post order and categories to display. Choose to display in a minimal style or as a carousel. See the Pixel Portfolio add–on to add a portfolio to Float.

[po_posts type="portfolio" columns="3" category="design" number="10" order="DESC" orderby="name" minimal="1"]
  • type: blog, portfolio.
  • columns: 2, 3, 4, 5.
  • order: ASC, DESC.
  • orderby: none, ID, author, title, name, date, modified, rand, comment_count.

Type 

The Type shortcode allows you to configure multiple typography attributes within a block of text.

[po_type style="button" tag="p" size="16" setsize="large" font="Arial" color="#000000" lineheight="2" spacing="2" top="20" bottom="20" btntext="Button" btnlink="#" align="right"]
Insert content
[/po_type]
  • style: standard, sideline, button.
  • tag: h1, h2, h3, h4, h5, h6, p, span.
  • setsize: standard, large.
  • align: left, right.

Wrap

The Wrap shortcode is an optional way to center a section of your content into the center of the page on large screens. Without the wrap, the content is full width. 

[po_section]
[po_wrap]
[po_column]
...
[/po_column]
[/po_wrap]
[/po_section]

Snippet

Insert core WordPress snippets into your content such as post title or post ID.

[po_snippet type="title"]

  • type: title, id

Accordions

Too much content on one page? Use the accordion shortcodes to add expandable, collapsable and responsive list items that reduce content overload. Can contain any content and comes in minimal and standard styles.

[po_accordion style="minimal"]
[po_accordion_item id="1" header="This is a header" size="18"]
Insert content
[/po_accordion_item]
[/po_accordion]
  • style: standard, minimal.

Tabs

Use the tab shortcodes to improve page organisation by dividing content into meaningful sections that occupy less space. Tabs can contain any content and comes in left, vertical and standard styles.

[po_tabs class="tabs" align="left" animation="1"]
[po_tab header="Tab 1"]
Tab 1 content
[/po_tab]
[po_tab header="Tab 2"]
Tab 2 content
[/po_tab]
[/po_tabs]
  • align: standard, left, vertical.
  • type: standard, menu.

Lightboxes

Display images and videos within a dynamic lightbox. Images can be zoomed and displayed in fullscreen mode. YouTube and Vimeo videos are supported. Lightboxes can be launched from a button, link or image thumbnail, which lazy loads for quicker page speed, and can display text or an icon.

[po_lightbox_carousel auto="1" speed="400" columns="6" dot_overlay="1"]
[po_lightbox type="button" button_type="square" button_style="block" button_width="full" img="12" size="full" text="Text label" icon="1" video_url="https://vimeo.com/12345"]
[/po_lightbox_carousel]
  • type: standard, button, link.
  • button_type: round, square.
  • button_style: outline, block.
  • button_width: standard, full.
  • size: thumbnail, medium, medium_large, large, full.

Progress Bars

Add linear or circular animated progress bars to your content. Colors and size can be modified, and progress bars can contain an animated value percentage or an icon.

[po_progress type="circular" title="Title" icon="coffee-cup" value="88" empty="#f1f1f1" size="180" percentage="1"]
  • type: standard, circular.

Clients

Display client logos on your pages using our Client shortcode. Column numbers can be customised, and logos can optionally be linked to an external website, as well as being displayed within a carousel.

[po_client_container columns="6" auto="1" speed="2000" dot_overlay="1"]
[po_client img="11" size="large" padding="10" animation="bounce-in" delay="400" link="#"]
[/po_client_container]
  • size: thumbnail, medium, medium_large, large, full.
  • animation: fade-in, move-up, move-left, move-right, bounce-in, pull-up.

Count

Add an animated counter to your content with a simple shortcode. Enter to and from values, an icon and/or a title. Colours automatically adjust to the backgrounds they're placed on.

[po_count from="0" to="2000" speed="400" title="The title" icon="toothbrush" icon_delay="1000"]

iBox

Our iBox shortcode creates a variety of animated icon, character and image boxes with various layouts. Great for highlighting features. Button colours automatically adjust to the backgrounds they're placed on. Animation delays are customisable.

[po_ibox title="The title" img="11" character="3" outline="1" outline_color="#dd3333" icon="bag" icon_delay="1000" icon_color="#dd9933" title_delay="1200" text_delay="1400" style="left" text="iBox text"]
  • style: top, top-left, left, title.

Maps

Add Google Maps to your content with our map shortcode. Display in standard, light, dark or a hue of your choice. Alternatively, choose a terrain, hybrid or satellite map type. Add a custom marker to further customise your map.

[po_map lat="51.501364" lng="-0.141890" zoom="15" height="500" key="#" type="sat" marker="11" marker_width="50" marker_height="55" color="#81d742"]
  • type: roadmap, sat, terrain, hybrid.
You'll need an API key to use Google Maps. Follow this guide to get your key and enter it into the "key" attribute of this shortcode: https://developers.google.com/...

Team

Display each team member with their social profiles and descriptions using our Team shortcode. Choose between a standard or circular image, customise animation delays, and set the number of columns to display.

[po_team columns="4" auto="1" speed="1000"]
[po_team_member img="11" img_delay="1000" circular="1" name="Willow Ocean" name_delay="200" position="Photographer" about="Freelance photographer for 2 years." about_delay="1000" type="email, twitter, facebook, googleplus, pinterest, youtube, vimeo, linkedin, github, foursquare, instagram, flickr, rss" email="#" twitter="#" facebook="#" googleplus="#" pinterest="#" youtube="#" vimeo="#" linkedin="#" github="#" foursquare="#" instagram="#" flickr="#" rss="#"]
[/po_team]

Testimonials

Add customer testimonials to your content with a few simple shortcodes. Testimonials are displayed within a slick carousel, with optional profile images, as well as adjustable auto and speed settings.

[po_testimonials auto="1" speed="1000"]
[po_testimonial_item text="Testimonial text" img="11" name="Person"]
[/po_testimonials]

Tiles

Use our Tiles shortcode to create various media grids in a standard or masonry layout. Each tiles can be a slider, button or standard section with a parallax or video background. Build each tile to achieve your desired effect.

[po_tiles masonry="1"]
[po_tile id="tile_id" full="1" bg="light" bgcolor="#dd9933" img="11" fixed="1" parallax="1" speed="200" align="30" video="12" videoimg="13" padding="small" top="10" bottom="10" carousel="1" height="500" category="design" number="10" order="ASC" orderby="date" arrows="1" link="#section_id" animation="move-up" delay="400"]
Insert content
[/po_tile]
[/po_tiles]
  • bg: standard, light, dark.
  • order: ASC, DESC.
  • orderby: none, ID, author, title, name, date, modified, rand, comment_count.
  • animation: fade-in, move-up, move-left, move-right, bounce-in, pull-up.

Tweets

The Tweets shortcode requires the oAuth Twitter Feed for Developers plugin (mentioned as one of the recommended plugins) and allows you to add a Twitter feed to your footer (within the Footer Columns post type).

[po_tweets number="2"]

Devices

Use the devices shortcode to add responsive device illustrations to your content. Devices include desktop, tablet and mobile and feature various device combinations and customisations. 

[po_devices phone_img="123" phone_outline="1" phone_bg="#e9e9e9" phone_outline_color="#e1e1e1" phone_shadow="1" phone_img2="123" phone_outline2="1" phone_bg2="#e9e9e9" phone_outline_color2"#e1e1e1" phone_shadow2="1" phone_img3="133" phone_outline3="1" phone_bg3="#e9e9e9" phone_outline_color3"#e1e1e1" phone_shadow3="1" placeholder_phone="124" tablet_img="123" tablet_outline="1" tablet_bg="#e9e9e9" tablet_outline_color="#e1e1e1" tablet_shadow="1" placeholder_tablet="125" desktop_img="123" desktop_outline="1" desktop_bg="#e9e9e9" desktop_outline_color="#e1e1e1" desktop_shadow="1" placeholder_desktop="126" phone_tablet="1" phone_tablet2="1" phones="1" phone_single="1"]

Pricing

Use the pricing shortcode to add customisable pricing tables to your content with seamless Easy Digital Downloads single and variable price integration. Works in combination with the Pricing feature shortcode as illustrated below.

[po_pricing name="Download" description="Purchase this product." currency="$" price="59" id="123" price_id="1" variable="1" bg="light"]
[po_pricing_feature feature="Detailed documentation"]
[po_pricing_feature feature="Fast speeds"]
[po_pricing_feature feature="Support and updates"]
[/po_pricing]
  • bg: standard, light.

Screenshots

The screenshot shortcode allows you to add simple browser screenshot illustrations to your content. Customise each screenshot's browser color, outline and shadow.

[po_screenshot img="123" placeholder="124" browser_color="#555" browser_outline="1" browser_outline_color="#555" shadow="1" class="screenshot-2" speed="1"]

Lazy

Add a lazy load image to your content.

[po_lazy img="123" placeholder="124" class="image-1"]

Powered by Pixelsmile