Service box
Create service boxes with title, text and any custom icon with only one shortcode. Boxes scale according to width and selected icon size.
[divider]
[spacer size=”15″]
[column size=”1-4″ last=”0″ style=”0″][service title=”Service title” icon=”http://www.mnkystudio.com/promotion/wp-content/uploads/2011/08/lamp_active.png”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac urna eget arcu imperdiet condimentum vitae sit amet velit. Donec in semper odio [/service][/column]
[column size=”1-4″ last=”0″ style=”0″][service title=”Service title” icon=”http://www.mnkystudio.com/promotion/wp-content/uploads/2011/08/information.png”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac urna eget arcu imperdiet condimentum vitae sit amet velit. Donec in semper odio [/service][/column]
[column size=”1-4″ last=”0″ style=”0″][service title=”Service title” icon=”http://www.mnkystudio.com/promotion/wp-content/uploads/2011/08/pie-chart_graph.png”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac urna eget arcu imperdiet condimentum vitae sit amet velit. Donec in semper odio [/service][/column]
[column size=”1-4″ last=”1″ style=”0″][service title=”Service title” icon=”http://www.mnkystudio.com/promotion/wp-content/uploads/2011/08/credit_card_back.png”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac urna eget arcu imperdiet condimentum vitae sit amet velit. Donec in semper odio [/service][/column]
[column size=”1-2″ last=”0″ style=”0″][service title=”Service title” icon=”http://www.mnkystudio.com/promotion/wp-content/uploads/2011/08/lamp_active.png”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac urna eget arcu imperdiet condimentum vitae sit amet velit. Donec rutrum turpis sed felis malesuada at ornare turpis porta. Ut vulputate lacinia nunc, eu tincidunt sem volutpat nec. Quisque nec sapien est. Nam ultrices placerat faucibus. In sed vehicula erat. Phasellus turpis erat, vestibulum sed pellentesque at, convallis a leo. [/service][/column]
[column size=”1-2″ last=”1″ style=”0″][service title=”Service title” icon=”http://www.mnkystudio.com/promotion/wp-content/uploads/2011/08/credit_card_back.png”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac urna eget arcu imperdiet condimentum vitae sit amet velit. Donec rutrum turpis sed felis malesuada at ornare turpis porta. Ut vulputate lacinia nunc, eu tincidunt sem volutpat nec. Quisque nec sapien est. Nam ultrices placerat faucibus. In sed vehicula erat. Phasellus turpis erat, vestibulum sed pellentesque at, convallis a leo. [/service][/column]
[spoiler title=”Get full code”]
[column size="1-4" ][service title="Service title" icon="http://../lamp_active.png"] Content [/service][/column] [column size="1-4" ][service title="Service title" icon="http://../information.png"] Content [/service][/column] [column size="1-4" ][service title="Service title" icon="http://../pie-chart_graph.png"] Content [/service][/column] [column size="1-4" last="1" ][service title="Service title" icon="http://../credit_card_back.png"] Content [/service][/column] [column size="1-2" ][service title="Service title" icon="http://../lamp_active.png"] Content [/service][/column] [column size="1-2" last="1" ][service title="Service title" icon="http://../credit_card_back.png"] Content [/service] [/column]
[/spoiler]
Possibilities using multiple shortcodes.
[divider]
[column size=”1-3″ last=”0″]
Sample Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id nulla vel lorem dapibus fringilla eget non felis. Vestibulum gravida, nibh non rutrum ultricies, est nunc porttitor lectus.
[/column]
[column size=”1-3″ last=”0″]
Sample Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id nulla vel lorem dapibus fringilla eget non felis. Vestibulum gravida, nibh non rutrum ultricies, est nunc porttitor lectus.
[/column]
[column size=”1-3″ last=”1″]
Sample Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id nulla vel lorem dapibus fringilla eget non felis. Vestibulum gravida, nibh non rutrum ultricies, est nunc porttitor lectus.
[/column]
[column size=”1-4″ last=”0″]
[frame align=”left”]
[/frame]
YOUR TITLE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id nulla vel lorem dapibus fringilla eget non felis. Vestibulum gravida, nibh non rutrum ultricies, est nunc porttitor lectus.
[/column]
[column size=”1-4″ last=”0″]
[frame align=”left”]
[/frame]
YOUR TITLE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id nulla vel lorem dapibus fringilla eget non felis. Vestibulum gravida, nibh non rutrum ultricies, est nunc porttitor lectus.
[/column]
[column size=”1-4″ last=”0″]
[frame align=”left”][/frame]
YOUR TITLE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id nulla vel lorem dapibus fringilla eget non felis. Vestibulum gravida, nibh non rutrum ultricies, est nunc porttitor lectus.
[/column]
[column size=”1-4″ last=”1″][frame align=”left”][/frame]
YOUR TITLE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id nulla vel lorem dapibus fringilla eget non felis. Vestibulum gravida, nibh non rutrum ultricies, est nunc porttitor lectus.
[/column]
[spoiler title=”Get full code”]
[column size="1-3" ] <img align="center" src="http://www.yourdomain.com/image.png" alt="" width="150" height="150" /> <h4 style="text-align: center;">Sample Title</h4> <p style="text-align: center;">Content</p> [/column] [column size="1-3" ] <img align="center" wp-image-3746" src="hhttp://www.yourdomain.com/image.png" alt="" width="150" height="150" /> <h4 style="text-align: center;">Sample Title</h4> <p style="text-align: center;">Content</p> [/column] [column size="1-3" last="1"] <img align="center" src="http://www.yourdomain.com/image.png" alt="" width="150" height="150" /> <h4 style="text-align: center;">Sample Title</h4> <p style="text-align: center;">Content</p> [/column] Second Row [column size="1-4" last="0"] [frame align="left"]<img src="http://www.yourdomain.com/image.png" alt="" />[/frame] <span style="color: #99cc00;"><strong>YOUR TITLE</strong></span> Content [/column] [column size="1-4" last="0"] [frame align="left"]<img src="http://www.yourdomain.com/image.png" alt="" />[/frame] <span style="color: #99cc00;"><strong>YOUR TITLE</strong></span> Content [/column] [column size="1-4" last="0"] [frame align="left"]<img src="http://www.yourdomain.com/image.png" alt="" />[/frame] <span style="color: #99cc00;"><strong>YOUR TITLE</strong></span> Content [/column] [column size="1-4" last="1"][frame align="left"]<img src="http://www.yourdomain.com/image.png" alt="" />[/frame] <span style="color: #99cc00;"><strong>YOUR TITLE</strong></span> Content [/column]
[/spoiler]