If you are looking for new commercial opportunities from your website, or would like to promote specific content across all areas of your website, you can do that easily using the 'Display option' functionality in UnionCloud. 


This feature will put this content across website pages and system pages such as:

  • Groups
  • Events
  • Student Voice
  • Digital Rep 
  • User profile 
  • eShop
  • Volunteering


Step 1: Plan your banner image or content

Using the display option functionality in the backend tree view, you can display any section of content across your entire website, such as a banner image, a widget or any HTML!

The possibilities are endless, so consider what you are trying to achieve; adding a new space for commercial revenue? Engaging students in the latest student voice campaign? Displaying a countdown timer for your election? 


In terms of the structure, you could have a full width banner, a column container with two/three/four columns or a scrolling iframe. 


You can put content at the top, bottom, left or right of pages. Please bear in mind that the left/right option will only appear on pages that have a sidebar. 


In this example I will add a banner image along the top of the site on every page. 


Step 2: Setup the container 

  1. Sign into your website and navigate to Website > Developers Toolkit > Pages (Tree View). 
  2. Click 'Add Section' at the top.
  3. Choose 'Grid' or 'Column' depending on what you are going to put in the space.
  4. Under display option, check 'Homepage' and 'Union Content and System Pages'.
  5. Choose 'Top' 
  6. Ensure that the Title is hidden in 'Advanced options' if you don't want that to display 


Step 3: Move the container

Navigate back to the Tree View and locate your new container.


In this example, we will place a banner at the top of the site below the navigation across all pages. Click and drag in the directional arrow to move the new container to just below the navigation (menu) container.


Step 4: Create your content


Click the cog next to your new container and select 'Add Page'.


In this section, add your banner image, alt text and link: 



Step 5: Style with CSS

By default, the banner was not center aligned so some custom CSS was required. 


I took the div ID of the container and added the below CSS to centre align the image. 

div#promotion-banner-column-content {
min-height: auto;
display: flex;
align-items: center;
justify-content: center;
}


Now the banner ad appears across the whole site just underneath the navigation.