How Do I Create Featured Content, Card or Product Boxes?

Usage

Featured content, card or product blocks or boxes can be created using the [box] shortcode. This shortcode can be generated by the shortcode tool  in the text editor.  Card Box Features allow you to display card style pictures and links in a box or card style format on your home page and inner landing pages.  These are best used for “semi-permanent” features with no excerpt. You may have up to 4 evenly distributed columns.


Boxes come in two flavors:

By using either card or product boxes, you are creating featured content. 

Product Boxes 

These is used to feature specific services or programs that your department offers.


Recommendations

Minimum Image Size: 3 Column – 260 X 174 (1.5 W/H ratio); 4 Column: 180 X 120 (1.5 W/H ratio)

Example Code 

[row][column][box type="product" title="Product Style Example 1" id=3336][/box][/column][column][box type="product" title="Product Style Example 2" id=3342][/box][/column][column][box type="product" title="Product Style Example 3" id=3347][/box][/column][/row]


Card Boxes 

Use this to create either a text box to feature some important text or with an image and a link to create a link to a page deeper within your site.

Recommendations

Title Size: 26px 

Minimum Image Size: 3 Column – 300 X 200 (1.5 W/H ratio)

Example Code 

[row][column][box type="card" title="Card Style Example 1" attachment_id=2644][/box][/column][column][box type="card" title="Card Style Example 2" attachment_id=2650][/box][/column][column][box type="card" title="Card Style Example 3" attachment_id=2654][/box][/column][/row]


ShortcodeAttributes
[row]class=”featured” places dashed lines between featured items
[column]no attributes
[box]type= product, card

id = id of post to be featured in box

title = alternative title for feature; if none is specified and an id is provided, the title of the id’d page will be used.

attachment_id  used to specify a different image then the id’d articles feature image.

href = url of link to open; use instead of the id attribute

target = target window if url attribute used


To add text to a box, just put your text between the tags, e.g.

[box type="card" title="Card Style Example 1" attachment_id=2644]Your text here.[/box]


Feedback and Knowledge Base