Hustle In Progress

A Complete List of X Theme Shortcodes

Heads up 🤓

This article was posted on Apr 23, 2018 and might be out of date.

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

[cs_gb id=5856]

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!

[button class=”cp_lm_02 x-btn btn-upgrade”]Download the list[/button]

[line]

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.

[x_code class=”language-less” id=”shortcode-1″][[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]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-2″][[alert close=”true” heading=”Warning”] Insert your text here [/alert]][/x_code]

[line]

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_code class=”language-less” id=”shortcode-3″][[x_audio_player mp3=”http://yourdomain.com/example.mp3″]][/x_code]

Embedded audio

[x_code class=”language-less” id=”shortcode-4″][[x_audio_embed] *Your iframe embed* [/x_audio_embed]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-5″][[author title=”About Me”]][/x_code]

[line]

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

[x_code class=”language-less” id=”shortcode-6″][[author title=”About Me”]][/x_code]

[line]

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

[x_code class=”language-less” id=”shortcode-7″][[block_grid type=”three-up”] [block_grid_item] [image src=”http://placehold.it/300×200″ alt=”Place Alt Text Here” type=”thumbnail”] [/block_grid_item] [block_grid_item] [image src=”http://placehold.it/300×200″ alt=”Your alt text” type=”thumbnail”] [/block_grid_item] [block_grid_item] [image src=”http://placehold.it/300×200″ alt=”Your alt text” type=”thumbnail”] [/block_grid_item] [/block_grid]][/x_code]

Four up

[x_code class=”language-less” id=”shortcode-8″][[block_grid type=”four-up”] [block_grid_item] [image src=”http://placehold.it/300×200″ alt=”Place Alt Text Here” type=”thumbnail”] [/block_grid_item] [block_grid_item] [image src=”http://placehold.it/300×200″ alt=”Your alt text” type=”thumbnail”] [/block_grid_item] [block_grid_item] [image src=”http://placehold.it/300×200″ alt=”Your alt text” type=”thumbnail”] [/block_grid_item] [block_grid_item] [image src=”http://placehold.it/300×200″ alt=”Your alt text” type=”thumbnail”] [/block_grid_item] [/block_grid]][/x_code]

[line]

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!

[x_code class=”language-less” id=”shortcode-9″][[blockquote cite=”Kevin Hart” type=”right”]I took my daughter to the father-daughter dance, and I cried like a little baby.[/blockquote]][/x_code]

[line]

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

[x_code class=”language-less” id=”shortcode-10″][[button shape=”square” size=”regular” href=”#fakelink” title=”example”]Square Button[/button]][/x_code]

Round Button

[x_code class=”language-less” id=”shortcode-11″][[button shape=”rounded” size=”regular” href=”#fakelink” title=”example”][icon type=”film”]Round Button[/button]][/x_code]

Pill Button

[x_code class=”language-less” id=”shortcode-12″][[button shape=”pill” size=”regular” href=”#fakelink” title=”example”][/button]][/x_code]

Transparent Button

[x_code class=”language-less” id=”shortcode-13″][[button type=”transparent” shape=”square” size=”regular” href=”#fakelink” title=”example”]Transparent Button[/button]][/x_code]

Marketing Button

[x_code class=”language-less” id=”shortcode-14″][[button shape=”rounded” size=”regular” href=”#fakelink” circle=”true” block=”true” title=”example”]Marketing Button[/button]][/x_code]

Tooltip Button

[x_code class=”language-less” id=”shortcode-15″][[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]][/x_code]

Popover Button

[x_code class=”language-less” id=”shortcode-16″][[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]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-17″][[callout type=”left” title=”Headline goes here” message=”Your call to action text goes here” button_text=”Button text” href=”#fakelink”]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-18″][[clear]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-19″][[code]

You look great today

You’re special :)!

[/code]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-20″][[columnize]Add a long paragraph of text here[/columnize]][/x_code]

[line]

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

[x_code class=”language-less” id=”shortcode-21″][[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]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-22″][[content_band]Your content here[/content_band]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-23″][[counter num_start=”0″ num_end=”65″ num_suffix=”+” num_speed=”1000″ num_color=”#151515″ text_above=”X Theme” “text_below=”Shortcodes”]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-24″][[custom_headline type=”left” level=”h1″ looks_like=”h1″]Your Headline[/custom_headline]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-25″][[dropcap]Y[/dropcap]]our text here[/x_code]

[line]

[cs_gb id=5856]

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.

[x_code class=”language-less” id=”shortcode-26″][[share title=”Share this Post” facebook=”true” twitter=”true” google_plus=”true” linkedin=”true” pinterest=”true” reddit=”true” email=”true”]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-27″][[feature_headline type=”left” level=”h3″ looks_like=”h5″ icon=”film”]Check out my YouTube[/feature_headline]][/x_code]

[line]

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

[x_code class=”language-less” id=”shortcode-28″][[gap size=”40px”]][/x_code]

[line]

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

[x_code class=”language-less” id=”shortcode-29″][[highlight]This is highlighted text[/highlight]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-30″][[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]][/x_code]

[line]

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_code class=”language-less” id=”shortcode-31″][[x_icon type=”trophy”]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-32″][[image src=”http://unsplash.it/500/500″ alt=”Your alt text”]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-33″][[line]][/x_code]

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

[x_code class=”language-less” id=”shortcode-34″][[map]Your google maps iframe here[/map]][/x_code]

[line]

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

[x_code class=”language-less” id=”shortcode-35″][[extra href=”#fakelink” title=”Tool tip text” info=”tooltip” info_place=”top” info_trigger=”hover”]Place your content here[/extra]][/x_code]

Popover

[x_code class=”language-less” id=”shortcode-36″][[extra href=”#fakelink” title=”Popover text” info=”popover” info_place=”top” info_trigger=”hover”] Place your content here [/extra]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-37″][[promo image=”http://placehold.it/500×500″ alt=”Your alt text”]Your text here.[/promo]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-38″][[promo image=”http://placehold.it/500×500″ alt=”Your alt text”]Your text here.[/promo]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-39″][[protect]Your hidden content here.[/protect]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-40″][[pullquote cite=”Steve Ballmer” type=”right”]I have never, honestly, thrown a chair in my life.[/pullquote]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-41″][[recent_posts count=”1″]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-42″][[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”]][/x_code]

[line]

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

[x_code class=”language-less” id=”shortcode-43″][[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]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-44″][[slider animation=”slide” slide_time=”1500″ slide_speed=”600″ slideshow=”true” random=”false” control_nav=”false” prev_next_nav=”false”] [slide]Example[/slide] [slide]Example[/slide] [slide]Example[/slide] [/slider]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-45″][[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”]][/x_code]

[line]

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_code class=”language-less” id=”shortcode-46″][[x_video_player m4v=”http://yourdomain.com/video.mp4″ poster=”http://yourdomain.com/image.jpg”]][/x_code]

Embedded video

[x_code class=”language-less” id=”shortcode-47″][[x_video_embed]*Your iframe code*[/x_video_embed]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-48″][[visibility] Place your content here. [/visibility]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-49″][[skill_bar heading=”Lego Assembling Skills” percent=”90%”]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-50″][[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]][/x_code]

[line]

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.

[x_code class=”language-less” id=”shortcode-51″][[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]]
[/x_code]

[line]

[cs_gb id=5856]

3 comments

Chris Schwartze

Hey, what’s up! I’m Chris and I’m based in Enschede, The Netherlands. I have a long history of music production, marketing, web design, and development.

facebook advertising ebook

scrap · noun · a small piece of something that is left over after the greater part has been used.

beeketing-ebook-2

Check out Urban Masterclass—online platform for hiphop/R&B artists.

Join over 2480+ hustlers

Get actionable content in your inbox

Get email notifications for new posts