EHU Promo Panel block

Use this block to promote a single item or activity as large promo panel. You can choose a single image or video to accompany your message.

Examples

Panel with right-aligned image

Clearing

Aenean cursus tellus eu condimentum eleifend. Integer lacinia quam at imperdiet fringilla. Morbi ut blandit lectus. Duis sit amet diam eget dui facilisis tincidunt scelerisque pulvinar sem. Mauris mattis, nisi nec placerat vulputate, eros odio pulvinar augue, laoreet pretium leo eros sit amet lacus. In tempus odio urna, sit amet accumsan risus placerat id. Fusce congue justo vel commodo hendrerit.

Apply through Clearing now

Panel with left-aligned video

Open Days

Morbi ut blandit lectus. Duis sit amet diam eget dui facilisis tincidunt scelerisque pulvinar sem. Mauris mattis, nisi nec placerat vulputate, eros odio pulvinar augue, laoreet pretium leo eros sit amet lacus. In tempus odio urna, sit amet accumsan risus placerat id. Fusce congue justo vel commodo hendrerit. Nullam consequat augue ut molestie ultrices.

Book your place

Please note that YouTube videos need to be added using a URL that begins with https://www.youtube.com/embed/, following by the alphanumeric ID. For example, https://www.youtube.com/embed/4Vpq67GkPjc.

How to use this block

Text instructions

Text

Type “/ehu promo panel” and click to select the “EHU Promo Panel” block.
In the Block sidebar on the right-hand side, click “Media Library”.
Add your required media as follows:
- Click the “Media Library” tab, click to select a suitable image (must be 1920 x 1080px with alt text) and click “Select”.
- If you’d like to include a video instead of an image, enter the YouTube embed URL (eg “https://www.youtube.com/embed/My5r7Ie27no”) in the “Video URL” field. You can get this link by clicking ‘Share – Embed’ in YouTube.
  
  Alternatively, look for the video ID in the URL at the top of your browser and add the alphanumeric video identifier to the end of “https://www.youtube.com/embed/”.
  
  For example, with https://www.youtube.com/watch?v=7aW25AvUJQE, the embed URL would be https://www.youtube.com/embed/7aW25AvUJQE.
Under “Media align”, choose “Left” or “Right” to display your image or video on the left or right side of the panel.
Enter a suitable heading in the “Title” field.
Enter subtext that will appear beneath the title in the “Content” field.
All EHU Promo Panel blocks should include a call-to-action (CTA) link, so enter a suitable label for your button in the “CTA Text” field and a hyperlink in the “CTA Link” field. If you’re linking to a page on our website, please be sure to use a relative URL rather than an absolute one. For example “/study/” rather than “https://www.edgehill.ac.uk/study/“.
Use the “Content width” slider to determine how much of the available space your text content should take up. The default of 40 works best for most cases, but you can choose a number between 24 and 56.

Video demonstration

The EHU Promo Panel block has been updated since this video was recorded. Please refer to the text instructions above as well as the video below.

This video has no audio narration.

Return to the available blocks page

Title test

Aenean cursus tellus eu condimentum eleifend. Integer lacinia quam at imperdiet fringilla. Morbi ut blandit lectus. Duis sit amet diam eget dui facilisis tincidunt scelerisque pulvinar sem. Mauris mattis, nisi nec placerat vulputate, eros odio pulvinar augue, laoreet pretium leo eros sit amet lacus. In tempus odio urna, sit amet accumsan risus placerat id. Fusce congue justo vel commodo hendrerit.

Default

Apply through Clearing now

Brand Violet

Apply the brand-violet class to the EHU Promo Panel to update its styling. Results: Removes the background colour, adds a violet box shadow to the image, changes the Call to Action (CTA) button to violet with white text.

Apply through Clearing now

Brand purple back – Left align

Layout Setup: Add a Columns block and select the single column layout. In the Additional CSS class(es) field for the Columns block, add: brand-purple-back. Result: This sets the background to purple and the text to white. Promo Panel Integration: Insert the EHU Promo Panel inside the column you just created. In the Additional CSS class(es) field for the EHU Promo Panel, add: brand-violet Result: The panel inherits the purple background, adds a violet box shadow to the image, and changes the CTA button to violet with white text.

Apply through Clearing now

Brand purple back – Right align

Apply through Clearing now

Brand purple back – Full width

Layout Setup: Add a Columns block and select the single column layout. Set columns width to Full width. In the Additional CSS class(es) field for the Columns block, add: brand-purple-back. Result: This sets the background to purple and the text to white. Promo Panel Integration: Insert the EHU Promo Panel inside the column you just created. In the Additional CSS class(es) field for the EHU Promo Panel, add: brand-violet Result: The panel inherits the purple background, adds a violet box shadow to the image, and changes the CTA button to violet with white text.

Apply through Clearing now

Brand green

Apply the brand-green class to the EHU Promo Panel to update its styling. Results: Removes the background colour, adds a Fern green box shadow to the image, changes the Call to Action (CTA) button to Fern green with white text.

Apply through Clearing now

Brand green back – Full width

Layout Setup: Add a Columns block and select the single column layout. Set columns width to Full width. In the Additional CSS class(es) field for the Columns block, add: brand-green-back. Result: This sets the background to Forrest green and the text to white. Promo Panel Integration: Insert the EHU Promo Panel inside the column you just created. In the Additional CSS class(es) field for the EHU Promo Panel, add: brand-green Result: The panel inherits the purple background, adds a Fern green box shadow to the image, and changes the CTA button to Fern green with white text.

Apply through Clearing now

Columns classes:

brand-green-back
brand-purple-back

Promo panel classes:

brand-green
brand-purple
brand-maple
brand-violet