Advert/Highlight boxes

Advert boxes

Advert boxes should be used to highlight content within panels as an alternative to the content carousel.

For example, most of the school pages have an advert box that links the user to the university open days.

School of Architecture and Design landing page with right-hand advert box

One thing to note about using an advert box like this is that the image is dropped on mobile view. It can come out very large on a mobile so we just ditch it. That just leaves the heading/link and text, which can look rather weak as an advert. So once you’ve used it we’d recommend checking how it looks on a mobile with the preview option.

Have you considered using a standard CTA?

If you really want an image, and really want it to show on mobile, then you could use the empty-panel/free-boxes/1-box-only as that does show on mobile. You know, you could…

How to use the advert boxes

Assuming you’re fine with the above (yes, you do need to read it), then place a 2third-1third template in the usual way (drag the window shaped icon into the page panel). The advert box is in the CTAs folder and called 1third-with-image.

Placing a one third with image box

Delete the ‘Image – 260 wide’ ext and insert an image in the usual way. The width is fixed but you can adjust the height as desired.

Delete ‘Content’ and insert a heading (keep it short). Press return and insert a small amount of copy.

Now add a link to the image. Add the same link to the heading. Now apply the heading style to the heading copy. This will create the red link arrow.

You can create advert boxes with an image or without an image.

Advert boxes with and without an image

Advert box for video

If you can’t embed a video for some reason, create an advert box with a video icon over the image to link to the page with the video on, rather than create a CTA. Contact the web team for the Photoshop file to allow you to do this or to ask for it to be created for you.

An example of an advert box with a video icon overlayed

Highlight boxes

Another right-hand column option is to use a highlight box. This is intended to highlight information rather than linking to another page. The highlight box is in the CTAs folder and called key-facts-box.

Screenshot showing highlighted area

The all caps heading style in the box is created by attributing a Heading 3 style (or below) from the Format drop-down menu. If your heading is long enough to go over one line then you will lose the top yellow line of the highlight box. So, that’s like totally your fault then.