Simple Promo Boxes

The Simple Promo Boxes snippet allows you to place rows of three promo boxes, each of which includes a title, image and link to content. The rows appear in a section over a background image, pattern or color, with a main title above the section of boxes.

The snippet starts with 6 boxes by default, but rows can be added/removed by right clicking within the snippet table and choosing to insert or delete rows.

Note: This is a 'full-width' snippet that can only be placed in a Promo Section and not in a Main Content Area.

Demos

Promo Boxes w/ Gradient Promo Boxes w/ Opacity

How to Use

1. Click on the snippet button in the toolbar, select the Boxes category and choose 'Simple Promo Boxes.'

2. Under section options, after the padding and margin settings, select a background image. A red rays background is preselected, but you can change it by clicking on the image and then clicking the insert/edit image button in the toolbar and navigating to another approved image.

You can also choose not to use an image, and instead enter a hex code in the field for Background Color (hex).

3. Text color is white by default but you can choose black or red depending on the section's background image or color.

4. Enter a title under 'Column 1' by changing the placeholder text.

5. Layout Type: Choose Gradient Text or Opacity Text (see examples below)

 

6. There are 6 rows -- each row represents a box. You can change the placeholder image by clicking on it and clicking the insert/edit image button in the toolbar, and then uploading a new image for that box. Change the placeholder title text and insert the URL of whatever page you want the box to link to.

7. Because this snippet presents boxes in rows of three, make sure your total number of boxes is divisible by three. Three rows in the snippet equals one row of three boxes on the web page.