With several dozen of the best looking Shortcodes around, we wanted to give you a sample of the many high-end Shortcodes built into X. We’ve grouped some together so this isn’t a super long post, however for a complete list with demos and examples of each, be sure to head over to our Shortcodes page.
[custom_headline type=”left” style=”margin-top: 45px;” level=”h2″ looks_like=”h5″ accent=”true”]Image Frame, Tooltips, Popovers & 3D Button [/custom_headline]
[image src=”/media/x-popover-tooltip-example.jpg” float=”left” type=”thumbnail” link=”true” href=”#example” alt=”Example” title=”Check Me Out!” info=”tooltip” info_place=”top” info_trigger=”hover”] Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. [extra href=”#example” target=”_blank” info=”tooltip” info_place=”top” info_trigger=”hover” title=”Yeah, tooltip time!”]Donec sed[/extra] odio dui. Maecenas faucibus mollis interdum. [extra href=”#example” target=”_blank” info=”tooltip” info_place=”right” info_trigger=”hover” title=”Yeah, tooltip time!”]Cras justo odio[/extra], dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. [extra href=”#example” target=”_blank” info=”tooltip” info_place=”left” info_trigger=”hover” title=”Yeah, tooltip time!”]Curabitur blandit[/extra] tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. [extra href=”#example” target=”_blank” info=”tooltip” info_place=”bottom” info_trigger=”hover” title=”Yeah, tooltip time!”]Cum sociis[/extra] natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
[button style=”margin-bottom: 1.313em;” href=”#example” title=”I told you so!” circle=”true” info=”tooltip” info_place=”top” info_trigger=”hover” block=”true”]You Can Even Add Popovers and Tooltips to Me![/button]
[image src=”/media/x-popover-tooltip-example.jpg” float=”right” type=”thumbnail” link=”true” href=”#example” alt=”Example” title=”Check Me Out!” info=”popover” info_place=”top” info_trigger=”hover” info_content=”Enter in some more information here.”] Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucib Lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus [extra href=”#example” target=”_blank” info=”popover” info_place=”top” info_trigger=”hover” info_content=”Place a little extra content in here for informational purposes.” title=”Yeah, popover time!”]vel augue[/extra] laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, [extra href=”#example” target=”_blank” info=”popover” info_place=”right” info_trigger=”hover” info_content=”Place a little extra content in here for informational purposes.” title=”Yeah, popover time!”]egestas eget quam[/extra]. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. [extra href=”#example” target=”_blank” info=”popover” info_place=”left” info_trigger=”hover” info_content=”Place a little extra content in here for informational purposes.” title=”Yeah, popover time!”]Curabitur blandit[/extra] tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. [extra href=”#example” target=”_blank” info=”popover” info_place=”bottom” info_trigger=”hover” info_content=”Place a little extra content in here for informational purposes.” title=”Yeah, popover time!”]Cum sociis[/extra] natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere.
[custom_headline type=”left” style=”margin-top: 45px;” level=”h2″ looks_like=”h5″ accent=”true”]Table of Contents & Icon List[/custom_headline]
[toc 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]
The Table of Contents shortcode available in X offers up some incredible SEO benefits to your standard posts and pages. It’s easy enough to paginate individual posts or pages in WordPress using the <!--nextpage--> code in the editor, but it doesn’t provide any real engaging way for your visitors to know what they’re in for as they click through to the next post. That’s where the Table of Contents shortcode comes in.
Simply add this to each of your “pages” after your <!--nextpage--> breaks and input the titles of each section in your article. What you’re left with is a thoroughly engaging, easy to navigate post structure that has been proven to increase visitor retention and keep their attention (all things Google loves).
You can easily add the Table of Contents shortcode to the left or right of your post content, or have it go full width, which is great for placing at the bottom of your posts to remind visitors of what sections are left. Click through on the table of contents shortcode above to go through to the next page and see the shortcode in action!
[icon_list]
[icon_list_item type=”chevron-sign-right”]This[/icon_list_item]
[icon_list_item type=”chevron-sign-right”]is[/icon_list_item]
[icon_list_item type=”chevron-sign-right”]a[/icon_list_item]
[icon_list_item type=”chevron-sign-right”]icon[/icon_list_item]
[icon_list_item type=”chevron-sign-right”]list[/icon_list_item]
[icon_list_item type=”chevron-sign-right”]Chose from over 300 icons. [/icon_list_item]
[/icon_list]
[custom_headline type=”left” style=”margin-top: 45px;” level=”h2″ looks_like=”h5″ accent=”true”]Responsive Visibility, Pricing Tables, Content Bands, & Entry Share[/custom_headline]
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. Want to put a video on desktop but only text on tablet and mobile? No problem. Go ahead and resize your browser window to see how different messages are displayed below for different screen sizes (Note: We also used another one of our Shortcodes, Responsive Video, to make the video look great and respond for the desktop message).
[visibility type=”visible-desktop”]
[alert type=”muted” heading=”Desktop Message”]I’m only for the larger screens. Since there’s more room, I can take a little more space. Resize me!
[gap size=”1em”]
[x_video style=”margin-bottom: 0;” embed=’‘][/alert]
[/visibility]
[visibility type=”visible-tablet”]
[alert type=”muted” heading=”Tablet Message”]I’m only for the medium sized screens. There a little less room here, so try and shorten things up a bit, but don’t worry, you don’t have to fret too much over the length of your message just yet.[/alert]
[/visibility]
[visibility type=”visible-phone”]
[alert type=”muted” heading=”Phone Message”]I’m only for the smallest screens. Try and keep things short and sweet here.[/alert]
[/visibility]
[gap size=”40px”]
[pricing_table columns=”3″][pricing_table_column title=”Basic” currency=”$” price=”39″ interval=”Per Month”][icon_list][icon_list_item type=”ok”]All Themes[/icon_list_item][icon_list_item type=”ok”]All Plugins[/icon_list_item][icon_list_item type=”ok”]PSDs[/icon_list_item][icon_list_item type=”remove” style=”color: red;”]HTML Templates[/icon_list_item][icon_list_item type=”remove” style=”color: red;”]24/7 Support[/icon_list_item][/icon_list][button shape=”rounded” href=”#example” title=”Example”]Sign Up Today![/button]
[/pricing_table_column][pricing_table_column featured=”true” featured_sub=”Featured” title=”Plus” currency=”$” price=”59″ interval=”Per Month”][icon_list][icon_list_item type=”ok”]All Themes[/icon_list_item][icon_list_item type=”ok”]All Plugins[/icon_list_item][icon_list_item type=”ok”]PSDs[/icon_list_item][icon_list_item type=”ok”]HTML Templates[/icon_list_item][icon_list_item type=”remove” style=”color: red;”]24/7 Support[/icon_list_item][/icon_list][button shape=”rounded” size=”x-large” href=”#example” title=”Example”]Sign Up Today![/button]
[/pricing_table_column][pricing_table_column title=”Premium” currency=”$” price=”89″ interval=”Per Month”][icon_list][icon_list_item type=”ok”]All Themes[/icon_list_item][icon_list_item type=”ok”]All Plugins[/icon_list_item][icon_list_item type=”ok”]PSDs[/icon_list_item][icon_list_item type=”ok”]HTML Templates[/icon_list_item][icon_list_item type=”ok”]24/7 Support[/icon_list_item][/icon_list][button shape=”rounded” href=”#example” title=”Example”]Sign Up Today![/button]
[/pricing_table_column][/pricing_table]
[gap size=”40px”]
[content_band style=”color: #333;” bg_color=”#ffddea” border=”both”][container][custom_headline style=”margin-top: 0;” level=”h4″ looks_like=”h3″]Cool Headline[/custom_headline]
Great for a call to action or important information, these Content Bands will help you be truly creative with how your content is presented.
[/container][/content_band]
[content_band bg_pattern=”/media/x-bg-maze.png” border=”both”][container][custom_headline style=”margin-top: 0;” level=”h4″ looks_like=”h3″]Cool Headline[/custom_headline]
Great for a call to action or important information, these Content Bands will help you be truly creative with how your content is presented.
[/container][/content_band]
[content_band style=”color: #fff;” bg_image=”/media/x-bg-flowers.jpg” border=”both”][container][custom_headline style=”margin-top: 0; color: #fff;” level=”h4″ looks_like=”h3″]Cool Headline[/custom_headline]
Great for a call to action or important information, these Content Bands will help you be truly creative with how your content is presented.
[/container][/content_band]
[share facebook=”true” twitter=”true” google_plus=”true” pinterest=”true” reddit=”true” email=”true”]
[custom_headline type=”left” style=”margin-top: 45px;” level=”h2″ looks_like=”h5″ accent=”true”]Over Three Dozen Shortcodes Included When You Buy X Today[/custom_headline]
While just a sample, hopefully this give you a small window into how we think about Shortcodes. Instead of just creating the basic ones (which we did and you have access to them as well), we wanted to take it a step further by providing some really useful business and marketing oriented solutions like Table of Contents and Responsive Visibility. As a customer of X, you not only get instant access to our entire Shortcode library, you’ll also have access to all future Shortcodes we develop for future releases.
About Author
