{"id":103339,"date":"2012-11-17T09:00:25","date_gmt":"2012-11-17T14:00:25","guid":{"rendered":"http:\/\/wpmu.org\/?p=103339"},"modified":"2013-04-17T00:12:17","modified_gmt":"2013-04-17T04:12:17","slug":"wordpress-shortcode-plugin","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/wordpress-shortcode-plugin\/","title":{"rendered":"WordPress Shortcode Plugin Provides Quality Web Elements in Seconds"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-103358\" title=\"web-elements-big\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/web-elements-big.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"546\" height=\"391\" \/><br \/>\nMost of us simply don\u2019t have the artistic talent of a professional graphic artist. I can say that with certainty. All you need to do is take a quick look around the web. Even with professionally designed WordPress themes all over the place, the minute one of us non-artist types takes a hand to our sites, the results can get ugly.<\/p>\n<p>The thing about a professional design is that all the little things seem to be just right. For example, a non-artist might think, \u201cHow hard could it be to make a good-looking price table? You just need three columns with some info and then a button at the bottom of each column.\u201d But then you try to do it, and it comes out looking like a 4-year-old\u2019s finger painting.<\/p>\n<p>The <a href=\"http:\/\/codecanyon.net\/item\/shortcode-domination-css3-graphics-for-wordpress\/2992389\" rel=\"noopener\" target=\"_blank\">Shortcode Domination<\/a> plugin is here to help you change at least some of that, giving you a number of different web elements that you can insert into any post or page in literally a matter of seconds. This is a premium plugin that sells for $18 at CodeCanyon.net; however, if have a need for what it offers, then it\u2019s well worth that price. Not only will it save you a ton of time, you\u2019ll most likely come out with a better looking site too.<\/p>\n<h2><strong>What It Offers<\/strong><\/h2>\n<p>First we\u2019ll go over the different types of web elements it offers, and then we\u2019ll give you an example of each below.<\/p>\n<p>Here are the different web elements it offers.<\/p>\n<ul>\n<li>Animated Buttons<\/li>\n<li>Columns<\/li>\n<li>Dividers<\/li>\n<li>Guarantee Boxes<\/li>\n<li>Headlines<\/li>\n<li>Highlights<\/li>\n<li>jQuery Accordions<\/li>\n<li>jQuery Tabs<\/li>\n<li>Lists<\/li>\n<li>Notifications<\/li>\n<li>Price Tables<\/li>\n<li>Sales Buttons<\/li>\n<li>Testimonials<\/li>\n<li>Tooltips<\/li>\n<li>Video Skins<\/li>\n<\/ul>\n\n<h2><strong>Easy to Use<\/strong><\/h2>\n<p>A good example to illustrate how easy it is to set something up that a non-artist would probably never be able to achieve on his\/her own is the Price Tables shortcode.<\/p>\n<p>You can take a look here at an example I did in literally seconds. Now, granted, these tables contain mostly dummy text, but entering your own text in the appropriate spaces is only a matter of a few more seconds.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-103341\" title=\"pricing-tables-example\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/pricing-tables-example.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"553\" height=\"292\" \/><\/p>\n<p>And here\u2019s a look at why it\u2019s so easy to do this. You simply fill in the blanks on the left with your information, and then you can see a preview on the right. (I\u2019ll also include a few examples of different size pricing boxes.)<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-103342\" title=\"pricing-tables\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/pricing-tables.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"553\" height=\"1157\" \/><\/p>\n<p>All the other modules are equally easy to use. Once the plugin is activated, simply click the new icon that will appear on your visual editor. From there you\u2019re taken to the dialogue box, where you can choose which module you\u2019d like to work with.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-103343\" title=\"shortcode-icon\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/shortcode-icon.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"551\" height=\"1397\" \/><\/p>\n<p>Below we\u2019ll run through a some examples from each type of element the plugin provides.<\/p>\n<h2><strong>Animated Buttons<\/strong><\/h2>\n<p>With the animated buttons, you have a choice to make them flash, bounce, pulse, shake, or swing. These buttons animate only when you mouse over them, not before.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-103344\" title=\"animated-buttons\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/animated-buttons.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"553\" height=\"274\" \/><\/p>\n<h2><strong>Columns<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-103345\" title=\"columns\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/columns.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"548\" height=\"162\" \/><\/p>\n<h2><strong>Dividers<\/strong><\/h2>\n<p>There are five different styles of dividers available. Here\u2019s an example of one of them.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-103346\" title=\"dividers\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/dividers.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"550\" height=\"318\" \/><\/p>\n<h2><strong>Guarantee Boxes<\/strong><\/h2>\n<p>If you are selling something on your site, be it a product or service, there\u2019s a good chance you\u2019ll want to offer some type of guarantee. There are number of different styles to choose from. Below are two examples.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-103347\" title=\"guarantee\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/guarantee.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"549\" height=\"583\" \/><\/p>\n\n<h2><strong>Headlines<\/strong><\/h2>\n<p>A number of the modules in this plugin seem especially designed for a splashy sales page, and the headlines module is one of them. If you aren\u2019t after a splashy sales page, there still may be a few options available for you here that are attention getting but toned down slightly.<\/p>\n<p>There are six different basic styles available. You have a choice of black, red, or blue for each, and you can also control the size.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-103348\" title=\"headlines\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/headlines.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"548\" height=\"373\" \/><\/p>\n<h2><strong>Highlights<\/strong><\/h2>\n<p>The highlights module lets you highlight text in a number of different colors. Here\u2019s a look.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-103349\" title=\"highlights\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/highlights.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"548\" height=\"83\" \/><\/p>\n<h2><strong>jQuery Accordions<\/strong><\/h2>\n<p>The accordions allow you to put content inside of a space that will open and close when the user clicks on the top areas.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-103350\" title=\"accordions\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/accordions.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"548\" height=\"175\" \/><\/p>\n<h2><strong>jQuery Tabs<\/strong><\/h2>\n<p>The <a href=\"https:\/\/wpmudev.com\/blog\/wordpress-tabs-plugins\/\" target=\"_blank\">tabs<\/a> module lets you set up different tabs for different content.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-103351\" title=\"tabs\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/tabs.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"547\" height=\"137\" \/><\/p>\n\n<h2><strong>Lists<\/strong><\/h2>\n<p>The list function lets you create a list with different types of icons out to the side of each row. The list is also surrounded by a dotted-line box. Here\u2019s a look at a few examples.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-103352\" title=\"lists\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/lists.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"548\" height=\"523\" \/><\/p>\n<h2><strong>Notifications<\/strong><\/h2>\n<p>The notifications function lets you insert an attention-getting box that will notify your visitor of some important information. Here are a few examples.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-103353\" title=\"notifications\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/notifications.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"549\" height=\"680\" \/><\/p>\n<h2><strong>Sales Buttons<\/strong><\/h2>\n<p>Like the headlines module, this module seems especially built for splashy sales pages. But you could also have a more subdued sales page and put this attention-getter at the end to make sure your visitors aren\u2019t hunting around when they\u2019re itchy to buy.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-103354\" title=\"sales-button\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/sales-button.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"549\" height=\"456\" \/><\/p>\n<h2><strong>Testimonials<\/strong><\/h2>\n<p>This module gives you attractive boxes with different styles for testimonials. Here are a few of the styles.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-103355\" title=\"testimonials\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/testimonials.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"548\" height=\"610\" \/><\/p>\n<h2><strong>Tooltips<\/strong><\/h2>\n<p>The tooltips function lets you set certain words or phrases to show a small popup tip when moused-over. Here are a few examples of the types of tips you can include.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-103356\" title=\"tooltips\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/tooltips.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"546\" height=\"854\" \/><\/p>\n<h2><strong>Video Skins<\/strong><\/h2>\n<p>Finally, there are a number of video skins that you can use to help draw attention to an important video. Here are a few examples.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-103357\" title=\"video-skins\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/video-skins.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"546\" height=\"928\" \/><\/p>\n<p>You can see examples of all the elements <a href=\"http:\/\/codecanyon.net\/item\/shortcode-domination-css3-graphics-for-wordpress\/full_screen_preview\/2992389\" rel=\"noopener\" target=\"_blank\">available here<\/a>.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Push a few buttons and get price tables, animated buttons, video skins, and more.<\/p>\n","protected":false},"author":84404,"featured_media":103340,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[4],"tags":[1081],"tutorials_categories":[],"class_list":["post-103339","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins","tag-shortcodes"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/103339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/84404"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=103339"}],"version-history":[{"count":1,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/103339\/revisions"}],"predecessor-version":[{"id":216555,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/103339\/revisions\/216555"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/103340"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=103339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=103339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=103339"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=103339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}