Provides a set of easy-to-use shortcodes for creating columns, buttons, tabs, icons, and much more.
This plugin provides a full set of easy-to-use shortcodes for creating columns, buttons, tabs, icons, and much more. It's been designed especially for use in responsive themes, but should work fine in any theme, whether responsive or not. It's also fully Retina-display ready, and search engine optimized. The plugin is designed to be fast, easy, and lightweight, and does not bring along any massive frameworks like Bootstrap that slow down your site.
The plugin currently supports the following items, with more on the way:
- Clear floats
- Icon (via Font Awesome)
The plugin includes the latest version of the complete Font Awesome icon set, so you can use any of the 470+ icons in buttons, titles, and anywhere in your theme that is shortcode-enabled.
View a live demo: http://demos.wpcmsdev.com/easy-responsive-shortcodes/
We know that everyone wants the best possible search engine results for their site, so we've built this plugin with SEO in mind. For example, the tabs, toggles, and accordion items are output in the HTML markup using actual HTML headings, with the associated content right below each heading. This provides the most logical structure for your content, and yields the best search engine results. However, most other shortcode plugins output the titles grouped together in the page's code as an HTML list, with the titles separate from the contents. That's bad for SEO. Why should you have to experience an SEO penalty for using advanced features like tabs and accordions on your site? We've also been careful not to hide any content using
display: none in the bundled CSS, which can have negative SEO effects as well.
There will be an editor button added to your post editor toolbar, allowing you to quickly insert the example code of any of the shortcode elements into your editor window.
Finally, we've included a LESS CSS source file, so if you're into that type of thing, you can easily change the plugin's colors to your liking merely by adjusting a few LESS variables and re-compiling.
Q: What are the available colors that I can use for the color parameters?
A: You can use the following colors:
Here is the syntax for each of the shortcodes, along with an example. In addition to the parameters listed below, each shortcode can accept a "class" parameter, allowing you to give any element a unique CSS class.
Required parameters are marked with an asterisk.
Accordion Item Parameters:
- title*: The title of the accordion item.
[accordion] [accordion_item title="Accordion Item 1 Title"] Accordion item 1 content goes here. [/accordion_item] [accordion_item title="Accordion Item 2 Title"] Accordion item 2 content goes here. [/accordion_item] [accordion_item title="Accordion Item 3 Title"] Accordion item 3 content goes here. [/accordion_item] [/accordion]
- color: The alert box color.
- icon: The alert box icon.
[alert color="red" icon="exclamation-circle"] Alert text goes here. [/alert]
- title: The title of the box.
[box title="Box Title"] Box text goes here. [/alert]
- color: The button color.
- rel: The button rel attribute, i.e.
- target: The button target, i.e.
_blankto open the link in a new window.
- title: The button title attribute (tooltip).
- url*: The button URL.
[button color="red" url="http://domain.com"]Click Me![/button]
- button_color: The call-to-action button color.
- button_icon: The call-to-action button icon.
- button_icon_position: The call-to-action button icon position (left/right).
- button_text: The call-to-action button text.
- button_url: The call-to-action button URL.
- color: The call-to-action box color.
layout: The call-to-action box layout style (horizontal/vertical)
If the horizontal layout style is chosen, the call-to-action will be displayed in two columns, with the button to the right of the call-to-action text. If the vertical layout style is chosen, the call-to-action button will be displayed below the call-to-action text.
[call_to_action color="red" button_text="Go Now!" button_url="http://domain.com" button_color="black"] Call-to-action text goes here. [/call_to_action]
- width: The column width.
Here is the list of available column widths:
Make sure that the total width of your columns makes up one whole.
Unlike many other shortcode plugins, you do not need to use any type of "last" indicator on the last column. This plugin is smart enough to figure that out for you.
[columns] [column width="one-third"] Column 1 text goes here. [/column] [column width="one-third"] Column 2 text goes here. [/column] [column width="one-third"] Column 3 text goes here. [/column] [/columns]
- color: The color of the highlight.
- text_color: The color of the highlighted text.
[highlight color="yellow" text_color="red"]Highlighted text content goes here.[/highlight]
- color: The icon color.
id*: The Font Awesome icon ID, i.e. "soccer-ball".
See the list of all available icons. Note that you do not need to include the "fa-" prefix in your icon ID.
[icon id="soccer-ball" color="orange"]
- title*: The tab title.
[tabs] [tab title="Tab 1 Title"] Tab 1 text goes here. [/tab] [tab title="Tab 2 Title"] Tab 2 text goes here. [/tab] [tab title="Tab 3 Title"] Tab 3 text goes here. [/tab] [/tabs]
- title*: The toggle title.
[toggle title="Toggle 1 Title"] Toggle 1 text goes here. [/toggle] [toggle title="Toggle 2 Title"] Toggle 2 text goes here. [/toggle] [toggle title="Toggle 3 Title"] Toggle 3 text goes here. [/toggle]
- Fixed the
- Initial release.
Install like any other plugin:
- Go to Plugins > Add New, search for "Easy Responsive Shortcodes", and install.
- Or: Download the plugin's ZIP file, Go to Plugins > Add New > Upload, and upload the plugin.
- Or: Download the plugin's ZIP file, unzip it, and upload it using FTP to
See the FAQ for usage instructions.
Editor button, example code generator menu with documentation link
Highlight and icon