Use code STATCH for an additional 10% off! 💥

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]


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=&#8221;my-accordion&#8221;]<br />
[accordion_item title=&#8221;Accordion Title&#8221; parent_id=&#8221;my-accordion&#8221;]Your text here[/accordion_item]<br />
[accordion_item title=&#8221;Accordion Title&#8221; parent_id=&#8221;my-accordion&#8221; open=&#8221;true&#8221;]Your second accordion text[/accordion_item]<br />
[accordion_item title=&#8221;Accordion Title&#8221; parent_id=&#8221;my-accordion&#8221;]Your third accordion text[/accordion_item]<br />
[/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=&#8221;true&#8221; heading=&#8221;Warning&#8221;] 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=&#8221;http://yourdomain.com/example.mp3&#8243;]]

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=&#8221;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=&#8221;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=&#8221;three-up&#8221;] [block_grid_item] [image src=&#8221;http://placehold.it/300&#215;200&#8243; alt=&#8221;Place Alt Text Here&#8221; type=&#8221;thumbnail&#8221;] [/block_grid_item] [block_grid_item] [image src=&#8221;http://placehold.it/300&#215;200&#8243; alt=&#8221;Your alt text&#8221; type=&#8221;thumbnail&#8221;] [/block_grid_item] [block_grid_item] [image src=&#8221;http://placehold.it/300&#215;200&#8243; alt=&#8221;Your alt text&#8221; type=&#8221;thumbnail&#8221;] [/block_grid_item] [/block_grid]]

Four up

[[block_grid type=&#8221;four-up&#8221;] [block_grid_item] [image src=&#8221;http://placehold.it/300&#215;200&#8243; alt=&#8221;Place Alt Text Here&#8221; type=&#8221;thumbnail&#8221;] [/block_grid_item] [block_grid_item] [image src=&#8221;http://placehold.it/300&#215;200&#8243; alt=&#8221;Your alt text&#8221; type=&#8221;thumbnail&#8221;] [/block_grid_item] [block_grid_item] [image src=&#8221;http://placehold.it/300&#215;200&#8243; alt=&#8221;Your alt text&#8221; type=&#8221;thumbnail&#8221;] [/block_grid_item] [block_grid_item] [image src=&#8221;http://placehold.it/300&#215;200&#8243; alt=&#8221;Your alt text&#8221; type=&#8221;thumbnail&#8221;] [/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=&#8221;Kevin Hart&#8221; type=&#8221;right&#8221;]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=&#8221;square&#8221; size=&#8221;regular&#8221; href=&#8221;#fakelink&#8221; title=&#8221;example&#8221;]Square Button[/button]]

Round Button

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

Pill Button

[[button shape=&#8221;pill&#8221; size=&#8221;regular&#8221; href=&#8221;#fakelink&#8221; title=&#8221;example&#8221;][/button]]

Transparent Button

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

Marketing Button

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

Tooltip Button

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

Popover Button

[[button shape=&#8221;rounded&#8221; size=&#8221;regular&#8221; href=&#8221;#fakelink&#8221; title=&#8221;I&#8217;m a Popover!&#8221; info=&#8221;popover&#8221; info_place=&#8221;top&#8221; info_trigger=&#8221;hover&#8221; info_content=&#8221;Popover text goes here&#8221;]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=&#8221;left&#8221; title=&#8221;Headline goes here&#8221; message=&#8221;Your call to action text goes here&#8221; button_text=&#8221;Button text&#8221; href=&#8221;#fakelink&#8221;]]


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]</p>
<h1>You look great today</h1>
<p>You&#8217;re special :)!</p>
<p>[/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=&#8221;1/2&#8243;]Your first piece of content goes here[/column]][[column type=&#8221;1/2&#8243; last=&#8221;true&#8221;]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=&#8221;0&#8243; num_end=&#8221;65&#8243; num_suffix=&#8221;+&#8221; num_speed=&#8221;1000&#8243; num_color=&#8221;#151515&#8243; text_above=&#8221;X Theme&#8221; &#8220;text_below=&#8221;Shortcodes&#8221;]]


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=&#8221;left&#8221; level=&#8221;h1&#8243; looks_like=&#8221;h1&#8243;]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


[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.
[[share title=&#8221;Share this Post&#8221; facebook=&#8221;true&#8221; twitter=&#8221;true&#8221; google_plus=&#8221;true&#8221; linkedin=&#8221;true&#8221; pinterest=&#8221;true&#8221; reddit=&#8221;true&#8221; email=&#8221;true&#8221;]]


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=&#8221;left&#8221; level=&#8221;h3&#8243; looks_like=&#8221;h5&#8243; icon=&#8221;film&#8221;]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=&#8221;40px&#8221;]]


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=&#8221;arrow-right&#8221;]Item 1[/icon_list_item] [icon_list_item type=&#8221;check&#8221;]Item 2[/icon_list_item] [icon_list_item type=&#8221;envelope&#8221;]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=&#8221;trophy&#8221;]]


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=&#8221;http://unsplash.it/500/500&#8243; alt=&#8221;Your alt text&#8221;]]


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=&#8221;#fakelink&#8221; title=&#8221;Tool tip text&#8221; info=&#8221;tooltip&#8221; info_place=&#8221;top&#8221; info_trigger=&#8221;hover&#8221;]Place your content here[/extra]]

Popover

[[extra href=&#8221;#fakelink&#8221; title=&#8221;Popover text&#8221; info=&#8221;popover&#8221; info_place=&#8221;top&#8221; info_trigger=&#8221;hover&#8221;] 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=&#8221;http://placehold.it/500&#215;500&#8243; alt=&#8221;Your alt text&#8221;]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=&#8221;http://placehold.it/500&#215;500&#8243; alt=&#8221;Your alt text&#8221;]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=&#8221;Steve Ballmer&#8221; type=&#8221;right&#8221;]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=&#8221;1&#8243;]]


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=&#8221;.your-class&#8221; deeplink=&#8221;true&#8221; opacity=&#8221;0.4475&#8243; prev_scale=&#8221;0.35&#8243; prev_opacity=&#8221;0.35&#8243; next_scale=&#8221;0.35&#8243; next_opacity=&#8221;0.35&#8243; orientation=&#8221;horizontal&#8221; thumbnails=&#8221;true&#8221;]]


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=&#8221;Basic&#8221; currency=&#8221;$&#8221; price=&#8221;39&#8243; interval=&#8221;Per Month&#8221;]<br />
[icon_list]<br />
[icon_list_item type=&#8221;check&#8221;]All Widgets[/icon_list_item]<br />
[icon_list_item type=&#8221;check&#8221;]All Wadgets[/icon_list_item]<br />
[icon_list_item type=&#8221;check&#8221;]All Wedgets[/icon_list_item]<br />
[icon_list_item type=&#8221;times&#8221; style=&#8221;color: red;&#8221;]Wodgets[/icon_list_item]<br />
[icon_list_item type=&#8221;times&#8221; style=&#8221;color: red;&#8221;]Gizmos[/icon_list_item]<br />
[/icon_list]<br />
[button shape=&#8221;rounded&#8221; href=&#8221;#example&#8221; title=&#8221;example&#8221;]Sign Up Today![/button]<br />
[/pricing_table_column]]</p>
<p>[[pricing_table_column title=&#8221;Pro&#8221; currency=&#8221;$&#8221; price=&#8221;49&#8243; interval=&#8221;Per Month&#8221;]<br />
[icon_list]<br />
[icon_list_item type=&#8221;check&#8221;]All Widgets[/icon_list_item]<br />
[icon_list_item type=&#8221;check&#8221;]All Wadgets[/icon_list_item]<br />
[icon_list_item type=&#8221;check&#8221;]All Wedgets[/icon_list_item]<br />
[icon_list_item type=&#8221;times&#8221; style=&#8221;color: red;&#8221;]Wodgets[/icon_list_item]<br />
[icon_list_item type=&#8221;times&#8221; style=&#8221;color: red;&#8221;]Gizmos[/icon_list_item]<br />
[/icon_list]<br />
[button shape=&#8221;rounded&#8221; href=&#8221;#example&#8221; title=&#8221;example&#8221;]Sign Up Today![/button]<br />
[/pricing_table_column]]</p>
<p>[[pricing_table_column title=&#8221;Business&#8221; currency=&#8221;$&#8221; price=&#8221;99&#8243; interval=&#8221;Per Month&#8221;]<br />
[icon_list]<br />
[icon_list_item type=&#8221;check&#8221;]All Widgets[/icon_list_item]<br />
[icon_list_item type=&#8221;check&#8221;]All Wadgets[/icon_list_item]<br />
[icon_list_item type=&#8221;check&#8221;]All Wedgets[/icon_list_item]<br />
[icon_list_item type=&#8221;times&#8221; style=&#8221;color: red;&#8221;]Wodgets[/icon_list_item]<br />
[icon_list_item type=&#8221;times&#8221; style=&#8221;color: red;&#8221;]Gizmos[/icon_list_item]<br />
[/icon_list]<br />
[button shape=&#8221;rounded&#8221; href=&#8221;#example&#8221; title=&#8221;example&#8221;]Sign Up Today![/button]<br />
[/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=&#8221;slide&#8221; slide_time=&#8221;1500&#8243; slide_speed=&#8221;600&#8243; slideshow=&#8221;true&#8221; random=&#8221;false&#8221; control_nav=&#8221;false&#8221; prev_next_nav=&#8221;false&#8221;] [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=&#8221;responsive-heading&#8221; type=&#8221;center&#8221; level=&#8221;h2&#8243;]Check It Out, I&#8217;m Responding![/custom_headline]]<br />
[[responsive_text selector=&#8221;.responsive-heading&#8221; compression=&#8221;1.5&#8243; min_size=&#8221;36px&#8221; max_size=&#8221;78px&#8221;]]


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=&#8221;http://yourdomain.com/video.mp4&#8243; poster=&#8221;http://yourdomain.com/image.jpg&#8221;]]

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=&#8221;Lego Assembling Skills&#8221; percent=&#8221;90%&#8221;]]


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=&#8221;two-up&#8221;]<br />
[tab_nav_item title=&#8221;Click Me!&#8221; active=&#8221;true&#8221;]<br />
[tab_nav_item title=&#8221;No, Click Me!&#8221; active=&#8221;&#8221;]<br />
[/tab_nav]][[tabs][tab active=&#8221;true&#8221;] Your Content [/tab]]<br />
[[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=&#8221;Table of Contents&#8221; type=&#8221;left&#8221;]<br />
[[toc_item title=&#8221;1. Introduction&#8221; page=&#8221;1&#8243;]]<br />
[[toc_item title=&#8221;2. More Information&#8221; page=&#8221;2&#8243;]]<br />
[[toc_item title=&#8221;3. Even More Information&#8221; page=&#8221;3&#8243;]][/toc]]<br />


[cs_gb id=5856]

Scroll to Top