A Complete List of X Theme Shortcodes

I couldn't find a great resource for the all the X Theme Shortcodes, so I created one.

All X Theme shortcodes have their own unique styling depending on their active stack. However, across the board, they have quite the same similarities.

You can use these X Theme Shortcodes for all the stacks. For the sake of the length of this page, I did not list all different variants — playing around with these is up to you (explore the “Shortcode options” tab).

Don’t be afraid of using shortcodes in Cornerstone, you can come up with some pretty unique designs that way.

To make it easier for you, I’ve created a neat copy / paste button. Pretty sweet huh?

BTW: Developing a lot of sites with X? Download this 24 page shortcode cheat sheet and stick it onto your desk for easy reference!

Download the list

Accordion

Adds a responsive accordion drop-down for sharing larger pieces of content.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • parent_id: match the ID of the parent accordion to keep only one accordion item open at a time.
  • title: title of the accordion item.
  • open: set to “true” to leave open on page load.

[[accordion id="my-accordion"]
[accordion_item title="Accordion Title" parent_id="my-accordion"]Your text here[/accordion_item]
[accordion_item title="Accordion Title" parent_id="my-accordion" open="true"]Your second accordion text[/accordion_item]
[accordion_item title="Accordion Title" parent_id="my-accordion"]Your third accordion text[/accordion_item]
[/accordion]]


Alert

Different types of alerts – adds a colored box. Every alert type comes with their own color as shown below.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “muted,” “warning,” “info,” “success,” or “danger.”
  • close: set to “true” to add a close button to your alert.
  • heading: add the heading of your alert here.

[[alert close="true" heading="Warning"] Insert your text here [/alert]]


Audio

Adds a minimal audio player. Host your own audio or embed audio from a different source (e.g. SoundCloud).

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • mp3: add link to .mp3 file.
  • oga: add link to .oga file.

Self-hosted audio

[[x_audio_player mp3="http://yourdomain.com/example.mp3"]]

Embedded audio

[[x_audio_embed] *Your iframe embed* [/x_audio_embed]]


Author

X Theme author shortcode adds a responsive author box, showing author name, Gravatar and author description.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • title: enter a title for the shortcode.

[[author title="About Me”]]


Block Grid

Block grids give you an evenly split images or text within the grid.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “two-up,” “three-up,” “four-up,” or “five-up.”

[[author title="About Me”]]


Block Grid

Block grids give you an evenly split images or text within the grid.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “two-up,” “three-up,” “four-up,” or “five-up.”

Three up

[[block_grid type="three-up"] [block_grid_item] [image src="http://placehold.it/300x200" alt="Place Alt Text Here" type="thumbnail"] [/block_grid_item] [block_grid_item] [image src="http://placehold.it/300x200" alt="Your alt text" type="thumbnail"] [/block_grid_item] [block_grid_item] [image src="http://placehold.it/300x200" alt="Your alt text" type="thumbnail"] [/block_grid_item] [/block_grid]]

Four up

[[block_grid type="four-up"] [block_grid_item] [image src="http://placehold.it/300x200" alt="Place Alt Text Here" type="thumbnail"] [/block_grid_item] [block_grid_item] [image src="http://placehold.it/300x200" alt="Your alt text" type="thumbnail"] [/block_grid_item] [block_grid_item] [image src="http://placehold.it/300x200" alt="Your alt text" type="thumbnail"] [/block_grid_item] [block_grid_item] [image src="http://placehold.it/300x200" alt="Your alt text" type="thumbnail"] [/block_grid_item] [/block_grid]]


Blockquote

This X Theme shortcode adds a responsive quote and cite.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: accepts any text.
  • cite: “left,” “right,” or “center.”
  • Mix and match shortcodes as seen above!

[[blockquote cite="Kevin Hart" type="right"]I took my daughter to the father-daughter dance, and I cried like a little baby.[/blockquote]]


Buttons

These X Theme button shortcodes are no joke. There are literally over 50 different shapes, sizes and colors. Endless possibilities.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: real, flat, or transparent.
  • shape: square, rounded, or pill.
  • size: mini, small, regular, large, x-large, or jumbo.
  • float: “left” or “right.”
  • block: set to “true” to make buttons go full width.
  • circle: set to “true” to add a marketing circle around your button.
  • icon_only: set to “true” if you are only using an icon in the button with no text.
  • href: input the URL you want your button to link to.
  • title: input the content for the title attribute of your button.
  • target: set to “blank” if you would like your button link to open in a new window.
  • info: “popover” or “tooltip.”
  • info_place: top, left, right, or bottom.
  • info_trigger: hover, click, or focus.
  • info_content: if you have selected a popover, place in your additional content here.

Square Button

[[button shape="square" size="regular" href="#fakelink" title="example"]Square Button[/button]]

Round Button

[[button shape="rounded" size="regular" href="#fakelink" title="example"][icon type="film"]Round Button[/button]]

Pill Button

[[button shape="pill" size="regular" href="#fakelink" title="example"][/button]]

Transparent Button

[[button type="transparent" shape="square" size="regular" href="#fakelink" title="example"]Transparent Button[/button]]

Marketing Button

[[button shape="rounded" size="regular" href="#fakelink" circle="true" block="true" title="example"]Marketing Button[/button]]

Tooltip Button

[[button shape="rounded" size="regular" href="#fakelink" title="I'm a Popover!" info="tooltip" info_place="top" info_trigger="hover" info_content="Tooltip text goes here"]Popover button[/button]]

Popover Button

[[button shape="rounded" size="regular" href="#fakelink" title="I'm a Popover!" info="popover" info_place="top" info_trigger="hover" info_content="Popover text goes here"]Popover button[/button]]


Call out

Big call to action with a headline, text and button.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “left,” “center,” or “right.”
  • title: enter in your title for the callout.
  • message: enter in your message for the callout.
  • button_text: enter in your text for the button.
  • buttonicon: enter in the unique identifier of the icon you want to use for your selection.
  • circle: set to “true” to add a marketing circle around your button.
  • href: enter in your URL you would like the button to go to.
  • target: “blank” will open links in a new window.

[[callout type="left" title="Headline goes here" message="Your call to action text goes here" button_text="Button text" href="#fakelink"]]


Clear

The clear property specifies on which sides of an element floating elements are not allowed to float. (Source)

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.

[[clear]]


Code markup

Gives you the ability to add markup to your website. (e.g. raw HTML, CSS, Javascript). Just like this page.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.

[[code]
<h1>You look great today</h1>
&nbsp;

You're special :)!

[/code]]


Columnize

Split any amount of content into a left and right side.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.

[[columnize]Add a long paragraph of text here[/columnize]]


Columns

X Theme column shortcode splits up pieces of content in different columns. These X Theme shortcodes take up the entire page width, make sure to explore different options!

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “1/1,” “1/2,” “1/3,” “2/3,” “1/4,” “3/4,” “1/5,” “2/5,” “3/5,” “4/5,” “1/6,” or “5/6.”
  • last: set to “true” to remove the margin on the last column so that it floats properly.
  • fade: set to “true” to prompt the column to fade in as a user scrolls down the website.
  • fade_animation: “in,” “in-from-top,” “in-from-left,” “in-from-right,” or “in-from-bottom.”
  • fade_animation_offset: if the fade_animation is anything other than “in,” set the offset of the fade in animation (e.g. “45px,” “10em,” “5%,” et cetera).

[[column type="1/2"]Your first piece of content goes here[/column]][[column type="1/2" last="true"]Your second content piece of goes here[/column]]


Content Band

With the the content band shortcode, it’s incredibly simple to add custom, one of a kind elements to your pages and posts with hardly any work at all. (Source)

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • border: “top,” “left,” “right,” “bottom,” “vertical,” “horizontal,” or “all.”
  • bg_color: add in any color (i.e. “red,” “#fff,” “transparent,” et cetera) to be used as the background for the band.
  • bg_pattern: insert the URL to an image to be used as a repeatable pattern for the band.
  • bg_image: insert the URL to an image to be used as a full width background for the band.
  • parallax: input “true” to activate the parallax background effect for background patterns and images.
  • bg_video: insert the URL to a video to be used as a full width background for the band.
  • bgvideoposter: insert the URL to an image to be used as a full width background for the band on mobile devices.
  • no_margin: input “true” to remove all margins (useful when laying out home page designs, leaving default margin is helpful in creating consistent spacing on elements like posts and standard pages).
  • padding_top: accepts any unit of measurement for the inner padding of the content band.
  • padding_bottom: accepts any unit of measurement for the inner padding of the content band.
  • inner_container: input “true” to have a container placed inside the content band.

[[content_band]Your content here[/content_band]]


Counter

X Theme counter shortcode adds a simple counter for sharing stats, and other stuff that uses numbers.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “left,” “right,” or “center.”
  • level: “h1,” “h2,” “h3,” “h4,” “h5,” or “h6.”
  • looks_like: “h1,” “h2,” “h3,” “h4,” “h5,” or “h6.”
  • accent: set to “true” to activate the custom headline accent.

[[counter num_start="0" num_end="65" num_suffix="+" num_speed="1000" num_color="#151515" text_above="X Theme" "text_below="Shortcodes"]]


Custom Headline

X Theme counter shortcode adds a simple counter for sharing stats, and other stuff that uses numbers.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “left,” “right,” or “center.”
  • level: “h1,” “h2,” “h3,” “h4,” “h5,” or “h6.”
  • looks_like: “h1,” “h2,” “h3,” “h4,” “h5,” or “h6.”
  • accent: set to “true” to activate the custom headline accent.

[[custom_headline type="left" level="h1" looks_like="h1"]Your Headline[/custom_headline]]


Dropcap

Large capital letter at the beginning of a text block.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.

[[dropcap]Y[/dropcap]]our text here


Entry Share

This X Theme shortcode adds various social sharing buttons

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • title: enter a title for the shortcode.
  • facebook: input “true” to activate share link.
  • twitter: input “true” to activate share link.
  • google_plus: input “true” to activate share link.
  • linkedin: input “true” to activate share link.
  • pinterest: input “true” to activate share link.
  • reddit: input “true” to activate share link.
  • email: input “true” to activate share link.

[[share title="Share this Post" facebook="true" twitter="true" google_plus="true" linkedin="true" pinterest="true" reddit="true" email="true"]]


Feature Headline

Adds a Font Awesome Icon + Custom Headline.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “left,” “right,” or “center.”
  • level: “h1,” “h2,” “h3,” “h4,” “h5,” or “h6.”
  • looks_like: “h1,” “h2,” “h3,” “h4,” “h5,” or “h6.”
  • icon: input the name of the icon you would like to use for your headline.

[[feature_headline type="left" level="h3" looks_like="h5" icon="film"]Check out my YouTube[/feature_headline]]


Gap

Gap shortcode allows you to add vertical spacing between different elements on your page.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • size: accepts any unit of measurement, including negative values

[[gap size="40px"]]


Highlight Text

Allows you to highlight certain parts of text in color.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: input “dark” to choose an inverted style

[[highlight]This is highlighted text[/highlight]]


Icon List

Creates an icon list. (View icon cheatsheet here).

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: enter in the unique identifier of the icon you want to use for your bullet.

[[icon_list] [icon_list_item type="arrow-right"]Item 1[/icon_list_item] [icon_list_item type="check"]Item 2[/icon_list_item] [icon_list_item type="envelope"]Item 3[/icon_list_item] [/icon_list]]


Icon

Retina-ready icons. (View icon cheatsheet here). You can change the X Theme icon size by assigning a class to the shortcode and change the font-size.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: enter in the unique identifier of the icon

[[x_icon type="trophy"]]


Image

This X Theme shortcode adds an image. But wait, there are a ton of options, make sure to try them all.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “rounded,” “circle,” or “thumbnail.”
  • float: “left” or “right.”
  • src: the path to your image.
  • alt: alt text for your image.
  • link: input “true” to wrap the image in an anchor tag.
  • href: the URL that you want the image to link to.
  • title: the title of the link.
  • target: input “blank” to have the link open in a new window.
  • info: “popover” or “tooltip.”
  • info_place: “top,” “right,” “bottom,” or “left.”
  • info_trigger: “hover,” “click,” or “focus.”
  • info_content: extra content for the popover.

[[image src="http://unsplash.it/500/500" alt="Your alt text"]]


Line

A simple line shortcode.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.

[[line]]


Google map

X Theme shortcode map displays the almighty famous Google Map.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • no_container: input “true” to remove the container styling.

[[map]Your google maps iframe here[/map]]


Popovers & Tooltips

These X Theme shortcodes add a popover or tooltip on any specific element.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • href: input the URL you want the link to go to.
  • title: title for the link. Doubles as the title for the tooltips and popovers.
  • target: input “blank” to have the link open in a new window.
  • info: “popover,” or “tooltip.”
  • info_place: “top,” “right,” “bottom,” or “left.”
  • info_trigger: “hover,” “click,” or “focus.”
  • info_content: place your extra content for the popover here.

Tooltip

[[extra href="#fakelink" title="Tool tip text" info="tooltip" info_place="top" info_trigger="hover"]Place your content here[/extra]]

Popover

[[extra href="#fakelink" title="Popover text" info="popover" info_place="top" info_trigger="hover"] Place your content here [/extra]]


Promo

X Theme Promo shortcode adds an image, text and call to action button.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • image: enter in the URL to the image you want to feature.
  • alt: enter in the alt text for the image.

[[promo image="http://placehold.it/500x500" alt="Your alt text"]Your text here.[/promo]]


Prompt

Thick border box, custom headline, text and a call to action.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “left,” “right,” or “center.”
  • title: enter in the title of your prompt here.
  • message: enter in the message of your prompt here.
  • buttontext: enter in the text for your button here.
  • buttonicon: enter in the unique identifier of the icon you want to use for your selection.
  • circle: set to “true” to add a marketing circle around your button.
  • href: URL where you want your button to link to.
  • target: input “blank” if you want the link to open in a new window.

[[promo image="http://placehold.it/500x500" alt="Your alt text"]Your text here.[/promo]]


Protected Content

Hide content that you don’t want others to see. Same idea as changing the visibility in a post or page to private.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.

[[protect]Your hidden content here.[/protect]]


Pullquote

A quote pulled to the left.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “left,” “right,” or “center.”
  • cite: enter in the citation of the original quote here.

[[pullquote cite="Steve Ballmer" type="right"]I have never, honestly, thrown a chair in my life.[/pullquote]]


Recent Posts

X Theme recent post shortcode shows your latest blog article — make sure to play with different variations!

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “post” or “portfolio.”
  • count: “1,” “2,” 3,” or “4.”
  • category: to filter your posts by category, input the slug of your desired category; also accepts multiple category slugs separated by a comma to display posts in any of those categories, or multiple category slugs separated by a plus sign to display posts that have all of those categories.
  • offset: input a number to select the initial offset of posts.
  • orientation: “horizontal” or “vertical.”
  • noimage: input “true” to remove the image from the shortcode.
  • fade: set to “true” to enable fade effect as users scroll down your site.

[[recent_posts count="1"]]


Responsive Lightbox

X Theme lightbox shortcode is a JavaScript library that displays images and videos by filling the screen, and dimming out the rest of the web page. (Source).

Options

  • selector: the selector used to activate the lightbox. Best use comes from adding a class on the links of all images you want to use, for example, “my-lightbox.” Next, you would simply write “.my-lightbox” in this field (the included period denotes a class selection).
  • deeplink: set to “true” to allow for deeplinking. Deeplinking provides direct individual links to each lightbox image.
  • opacity: opacity of the background. Acceptable values rage anywhere between 0 and 1.
  • prev_scale: the scale of the previous image. Acceptable values range anywhere between 0 and 1.
  • prev_opacity: the opacity of the previous image. Acceptable values range anywhere between 0 and 1.
  • next_scale: the scale of the next image. Acceptable values range anywhere between 0 and 1.
  • next_opacity: the opacity of the previous image. Acceptable values range anywhere between 0 and 1.
  • orientation: “horizontal,” or “vertical.”
  • thumbnails: set to “true” to allow thumbnail navigation.

[[lightbox selector=".your-class" deeplink="true" opacity="0.4475" prev_scale="0.35" prev_opacity="0.35" next_scale="0.35" next_opacity="0.35" orientation="horizontal" thumbnails="true"]]


Responsive Pricing Table

This X Theme shortcode adds a clean pricing table.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • columns: “1,” “2,” “3,” “4,” or “5.”
  • featured: input “true” to activate the column as the featured item.
  • featured_sub: enter a sub headline for your featured item.
  • title: select a title for your column.
  • currency: select the currency symbol to use for your pricing table (i.e. “$,” “£,” “¥,” et cetera).
  • price: set the price of the column.
  • interval: set the interval for when payment is due (i.e. “per month,” “yearly,” et cetera).

[[pricing_table_column title="Basic" currency="$" price="39" interval="Per Month"]
[icon_list]
[icon_list_item type="check"]All Widgets[/icon_list_item]
[icon_list_item type="check"]All Wadgets[/icon_list_item]
[icon_list_item type="check"]All Wedgets[/icon_list_item]
[icon_list_item type="times" style="color: red;"]Wodgets[/icon_list_item]
[icon_list_item type="times" style="color: red;"]Gizmos[/icon_list_item]
[/icon_list]
[button shape="rounded" href="#example" title="example"]Sign Up Today![/button]
[/pricing_table_column]]

[[pricing_table_column title="Pro" currency="$" price="49" interval="Per Month"]
[icon_list]
[icon_list_item type="check"]All Widgets[/icon_list_item]
[icon_list_item type="check"]All Wadgets[/icon_list_item]
[icon_list_item type="check"]All Wedgets[/icon_list_item]
[icon_list_item type="times" style="color: red;"]Wodgets[/icon_list_item]
[icon_list_item type="times" style="color: red;"]Gizmos[/icon_list_item]
[/icon_list]
[button shape="rounded" href="#example" title="example"]Sign Up Today![/button]
[/pricing_table_column]]

[[pricing_table_column title="Business" currency="$" price="99" interval="Per Month"]
[icon_list]
[icon_list_item type="check"]All Widgets[/icon_list_item]
[icon_list_item type="check"]All Wadgets[/icon_list_item]
[icon_list_item type="check"]All Wedgets[/icon_list_item]
[icon_list_item type="times" style="color: red;"]Wodgets[/icon_list_item]
[icon_list_item type="times" style="color: red;"]Gizmos[/icon_list_item]
[/icon_list]
[button shape="rounded" href="#example" title="example"]Sign Up Today![/button]
[/pricing_table_column]]


Responsive Slider

Simple, lightweight image slider.

Options

  • slide_time: set the duration for each slide in milliseconds.
  • slide_speed: set the duration for each slide transition in milliseconds.
  • slideshow: input “true” to have the slides change automatically.
  • random: input “true” to have the slides appear in a random order each time.
  • control_nav: input “true” to display the control nav (shows a marker for each slide).
  • prevnextnav: input “true” to display the previous/next arrows for the slider..
  • no_container: input “true” to remove the container styling.

[[slider animation="slide" slide_time="1500" slide_speed="600" slideshow="true" random="false" control_nav="false" prev_next_nav="false"] [slide]<img src="http://yourdomain.com/image.jpg" alt="Example" />[/slide] [slide]<img src="http://yourdomain.com/image.jpg" alt="Example" />[/slide] [slide]<img src="http://yourdomain.com/image.jpg" alt="Example" />[/slide] [/slider]]


Responsive Heading

Makes your headline look great on all devices. (More info)

Options

  • selector: the selector used to activate the lightbox. Best use comes from adding a class on the links of all images you want to use, for example, “my-lightbox.” Next, you would simply write “.my-lightbox” in this field (the included period denotes a class selection).
  • compression: set any number from 0.1 on up. Adjust number to suit your needs.
  • min_size: set a minimum font size in pixels for your heading if you so desire.
  • max_size: set a maximum font size in pixels for your heading if you so desire.

[[custom_headline class="responsive-heading" type="center" level="h2"]Check It Out, I'm Responding![/custom_headline]]
[[responsive_text selector=".responsive-heading" compression="1.5" min_size="36px" max_size="78px"]]


Responsive Video

Allows you to self host video or embed YouTube, Vimeo or other service with these X Theme shortcodes.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “16:9,” “5:3,” “5:4,” “4:3,” or “3:2.”
  • m4v: input the URL to your video in .m4v format.
  • ogv: input the URL to your video in .ogv format.
  • poster: input the link to an image you would like to use as the holder image before playing the video for the first time.
  • hide_controls: set to “true” to hide the controls.
  • autoplay: set to “true” to autoplay the video.
  • no_container: input “true” to remove the container styling.

Selfhosted video

[[x_video_player m4v="http://yourdomain.com/video.mp4" poster="http://yourdomain.com/image.jpg"]]

Embedded video

[[x_video_embed]*Your iframe code*[/x_video_embed]]


Responsive Visibility

With responsive visibility, you can easily show or hide various pieces of information with different groups of visitors viewing your site on a wide array of devices.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “hidden-phone,” “hidden-tablet,” “hidden-desktop,” “visible-phone,” “visible-tablet,” or “visible-desktop.”
  • inline: set to “true” if using on a specific piece of content inside of a paragraph or other element.

[[visibility] Place your content here. [/visibility]]


Skill bar

Show off your skills. You’re good for it.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • heading: input the title of the bar here.
  • percent: enter in the percentage you want to show up for your skill bar.

[[skill_bar heading="Lego Assembling Skills" percent="90%"]]


Tabbed Content

Tabbing content is a great way to improve the UI.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “two-up,” “three-up,” “four-up,” or “five-up.”
  • float: “left,” or “right.”
  • title: enter in the title for the corresponding tab.
  • active: input “true” to provide active tab styling on page load.

[[tab_nav type="two-up"]
[tab_nav_item title="Click Me!" active="true"]
[tab_nav_item title="No, Click Me!" active=""]
[/tab_nav]][[tabs][tab active="true"] Your Content [/tab]]
[[tab] Your Content [/tab]][/tabs]]


Table of Contents

Using these X Theme shortcodes it for this page. You’re reading in tabbed content shortcode right now.

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • title: enter a title for the shortcode.
  • type: “left,” “right,” or “block.”
  • columns: if “block” is selected for the type attribute, choose between 1, 2, and 3 columns.

[[toc title="Table of Contents" type="left"]
[[toc_item title="1. Introduction" page="1"]]
[[toc_item title="2. More Information" page="2"]]
[[toc_item title="3. Even More Information" page="3"]][/toc]]