Your tagline goes here!|Thursday, April 24, 2014
You are here: Home » Theme Features » Shortcodes » Service box

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.

Service title Service title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac urna eget arcu imperdiet condimentum vitae sit amet velit. Donec in semper odio
Service title Service title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac urna eget arcu imperdiet condimentum vitae sit amet velit. Donec in semper odio
Service title Service title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac urna eget arcu imperdiet condimentum vitae sit amet velit. Donec in semper odio
Service title Service title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac urna eget arcu imperdiet condimentum vitae sit amet velit. Donec in semper odio
Service title Service title
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 title Service title
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.
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]
Possibilities using multiple shortcodes

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.

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.

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.

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.

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.

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.

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.

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]