J ShortCodes is a WordPress plugin that gives you an easy way to add beautiful, useful and customized visual elements to any wordpress theme, blog or website.
Just add shortcode into any page, post or even sidebar of your website – and off you go!
J Buttons
[jbutton color="orange" size="large" rounded="yes"]cute[/jbutton] |
[jbutton size="xsmall" color="red"]of any[/jbutton] |
[jbutton color="blue" rounded="yes"]shape[/jbutton] |
[jbutton color="pink" icon="love"]with standard icon[/jbutton] |
Find out more …
J Boxes
[jbox title="Boxes are just great"]...[/jbox]
Boxes are just great Boxes gives you an easy and visually appealing way to present chunks of content anywhere on your website. Box may contain optional title, optional custom icon and main content area with text. |
[jbox color="red" title="Call to action boxes"]...[/jbox]
Call to action boxes Call to action box may deliver some exciting message + great looking call to action button! Click Here |
[jbox color="blue" title="Box with icon" icon="/_IMAGES/gleb_60x.png" border="5" radius="35" shadow="9"]...[/jbox]
Box with icon You may add icon to any box and change it’s color to make it look cool. Boxes offers a nice and easy way to present pieces of information, tips and features of your product or service.
jbox shortcodes even allows you to customize thickness of border, radius of corners and amount of shadow. |
[jbox color="green" title="Feature boxes" icon="/_IMAGES/apple_60x.png"]...
Feature boxes Create any number of feature boxes, highlight details of your specific product or service and add custom icon to achieve desired effect.
Add action button to guide visitor to learn more information and follow through with an action. You may use plain text or HTML to fill jbox with content.
Buy it now |
[jbox jbox_css="border:6px solid #7c7c7c;padding-left:2em;" vgradient="#dfdfdf|#ffffff" title="Yet another box with custom gradient, border and shade" radius="10" radius="50" shadow="15"] ... [/jbox]
Yet another box with custom gradient, border and shade You may customize many aspects of your box, set custom border style or colors via jbox_css or even set your own custom color gradient via vgradient parameter. |
Find out more …
J Columns
[jcolumns] column 1 content [jcol/] column 2 content [/jcolumns]
jcolumns shortcode allows you to add extra column layouts on any page, post or even sidebar widget without need of special support from your theme and without messing with PHP code.
J Shortcodes are simple to use yet flexible. | jcolumns shortcode works with any WordPress theme, on any page. You may even nest J Shortcodes inside of each other, adding extra elements inside each column. J Shortcodes even allows you to create your own layouts! |
[jcolumns inbordercss="1px dotted gray"] column 1 content [jcol/] column 2 content [jcol/] column 3 content [/jcolumns]
jcolumns shortcode allows you to split any post, page or widget on any number of columns and fill each column with your content separately.
Columns may be of equal width or custom width. | If you want columns to be of equal width – you just need to fill in each column content and insert [jcol/] separator after each column. The rest happens automatically.
jcolumns has an easy way to specify the width of each column | For columns of a different widths use model parameter like this: [jcolumns model="1,2,1"] |
[jcolumns inbordercss="2px solid gray"] column 1 content [jcol/] column 2 content [jcol/] column 3 content [jcol/] column 4 content [/jcolumns]
To create table with 4 equal columns just create content for each column and separate them with [jcol/] marker | This is column 2 content. This is column 2 content. This is column 2 content. This is column 2 content. | This is column 3 content. This is column 3 content. This is column 3 content. This is column 3 content. This is column 3 content. | This is column 4 content. This is column 4 content. This is column 4 content. |
[jcolumns model="4,2,1" inbordercss="3px double gray"] column 1 content [jcol/] column 2 content [jcol/] column 3 content [/jcolumns]
model=”4,2,1″ says: Make second column half width of the first one, and make third column quarter width of the first one. Numbers: “4,2,1″ of model parameter define desirable ratio between columns. | This is second column and it is half width of the first one | This is third column and it is quarter width of the first one |
[jcolumns model="1,2,3,2,1" inbordercss="1px solid gray" outbordercss="4px solid #666666" topbordercss="4px solid #666666" bottombordercss="4px solid #666666"] column 1 content [jcol/] column 2 content [jcol/] column 3 content [jcol/] column 4 content [jcol/] column 5 content [/jcolumns]
This is more fancy model, with first and last columns defined as smallest. | This is column 2 content. This is column 2 content. This is column 2 content. This is column 2 content. | Custom style is set for inner and all outer borders. jcolumns shortcode also allows to align column content horizontally and vertically, set amount of gap width between columns as well as set custom CSS style for columns. | This is column 4 content. This is column 4 content. This is column 4 content. | This is column 5 content. This is column 5 content. |
Find out more …