Column colour blocks | Staff | Imperial College London

<!DOCTYPE html> <html class="no-js" lang="en-GB"> <head> <title>Column colour blocks | Staff | Imperial College London</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />  <script type="text/javascript" src="https://cdn-ukwest.onetrust.com/consent/6d9efb9d-b605-406f-b8b3-c9644859d064/OtAutoBlock.js" ></script><script src="https://cdn-ukwest.onetrust.com/scripttemplates/otSDKStub.js" type="text/javascript" charset="UTF-8" data-domain-script="6d9efb9d-b605-406f-b8b3-c9644859d064" ></script> <script type="text/javascript">function OptanonWrapper() { }</script>  <link rel="preconnect" href="https://pxl-imperialacuk.terminalfour.net"> <link rel="dns-prefetch" href="https://pxl-imperialacuk.terminalfour.net">  <meta name="SectionType" content="website">  <meta name="twitter:dnt" content="on"> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@imperialcollege"> <meta name="twitter:title" content="Column colour blocks"> <meta name="twitter:description" content="How to add Column colour blocks to a t4 page."> <meta name="twitter:image" content="https://www.imperial.ac.uk/T4Assets/favicon-196x196.png"> <meta name="fb:app_id" content="674884772674087"> <meta property="og:title" content="Column colour blocks" /> <meta property="og:type" content="website" /> <meta property="og:image" content="https://www.imperial.ac.uk/T4Assets/favicon-196x196.png" /> <meta property="og:image:type" content="image/png" /> <meta property="og:image:secure_url" content="https://www.imperial.ac.uk/T4Assets/favicon-196x196.png" /> <meta property="og:image:width" content="200" /><meta property="og:image:height" content="200" /><meta property="og:url" content="https://www.imperial.ac.uk/staff/tools-and-reference/web-guide/t4-site-manager/content-types/colour-blocks/" /> <meta property="og:description" content="How to add Column colour blocks to a t4 page." /> <meta property="og:locale" content="en_GB" /> <meta property="og:site_name" content="Imperial College London" /> <meta name="description" content="How to add Column colour blocks to a t4 page."> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0" />  <link rel="preload" href="/assets/website/fonts/icons/fonts/imperial-icons.woff?vrmf2d" as="font" type="font/woff" crossorigin> <link rel="preload" href="/assets/website/fonts/imperial-sans/ImperialText-VF.woff2" as="font" type="font/woff2" crossorigin> <link href="/assets/website/stylesheets/css/screen.2.0.4.css" media="all" rel="stylesheet" type="text/css" /> <link href="/assets/website/stylesheets/css/print.2.0.4.css" media="print" rel="stylesheet" type="text/css" /> <link rel="icon" type="image/svg+xml" href="/assets/website/images/favicon/favicon.svg"> <link rel="alternate icon" href="/assets/website/images/favicon/favicon.ico"> <link rel="icon" href="/assets/website/images/favicon/favicon-32.png" sizes="32x32"> <link rel="icon" href="/assets/website/images/favicon/favicon-57.png" sizes="57x57"> <link rel="icon" href="/assets/website/images/favicon/favicon-76.png" sizes="76x76"> <link rel="icon" href="/assets/website/images/favicon/favicon-96.png" sizes="96x96"> <link rel="icon" href="/assets/website/images/favicon/favicon-128.png" sizes="128x128"> <link rel="icon" href="/assets/website/images/favicon/favicon-192.png" sizes="192x192"> <link rel="icon" href="/assets/website/images/favicon/favicon-228.png" sizes="228x228"> <link rel="shortcut icon" href="/assets/website/images/favicon/favicon-196.png" sizes="196x196"> <link rel="apple-touch-icon" href="/assets/website/images/favicon/favicon-120.png" sizes="120x120"> <link rel="apple-touch-icon" href="/assets/website/images/favicon/favicon-152.png" sizes="152x152"> <link rel="apple-touch-icon" href="/assets/website/images/favicon/favicon-180.png" sizes="180x180"> <meta name="msapplication-TileColor" content="#C8D8E4"> <meta name="msapplication-TileImage" content="/assets/website/images/favicon/favicon-144.png"> <meta name="msapplication-config" content="/assets/website/images/favicon/browserconfig.xml" /> <script src="/assets/website/js/lib/jquery3.min.js" id="jquery3"></script> <script defer src="/assets/website/js/build/application.2.0.4.min.js" type="text/javascript"></script> <script defer src="//cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>  <link rel="canonical" href="https://www.imperial.ac.uk/staff/tools-and-reference/web-guide/t4-site-manager/content-types/colour-blocks/" /> </head> <body class="theme-9"> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NDH95W87" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':聽new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],聽 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=聽'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);聽})(window,document,'script','dataLayer','GTM-NDH95W87');</script> <a class="skip-to" id="skip-to-content" href="#content">Skip to main content</a> <a class="skip-to" id="link-to-accessibility" href="/about-the-site/accessibility/">View accessibility support page</a> <header class="header"> <div class="header__inner"> <a class="header__logo" href="/" aria-label="Homepage"> <svg width="727" height="80" viewBox="0 0 727 80" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M301.453 0V80H353.346V66H316.622V46H350.152V32.4H316.622V14H353.346V0H301.453Z" fill="currentcolor" /> <path d="M238.397 12.9177H227.22V39.8776H238.397C247.142 39.8776 253.566 35.6376 253.566 26.3953C253.566 16.8 247.142 12.9177 238.397 12.9177ZM239.196 52.8H227.22V80H212.052V0H239.196C256.219 0 269.533 7.72706 269.533 26.4C269.533 44.8 256.121 52.8 239.196 52.8Z" fill="currentcolor" /> <path d="M485.079 0V14H503.84V66H485.079V80H537.77V66H519.009V14H537.77V0H485.079Z" fill="currentcolor" /> <path d="M434.191 24.8C434.191 34.4377 428.602 37.4777 419.022 37.4777H406.248V12.9177H419.022C429.419 12.9224 434.191 16.8 434.191 24.8ZM450.158 24.8C450.158 6.12706 437.384 0 420.619 0H391.08V80H406.248V50.4H419.022C419.722 50.4 420.417 50.3859 421.107 50.3624L436.562 80H453.37L436.224 47.1906C444.565 43.4777 450.158 36.3435 450.158 24.8Z" fill="currentcolor" /> <path d="M604.324 14.1929L615.238 49.4777H593.406L604.324 14.1929ZM594.345 0L567.999 80H583.966L589.409 62.4H619.235L624.678 80H640.645L614.299 0H594.345Z" fill="currentcolor" /> <path d="M674.889 0V80H726.914V66H690.058V0H674.889Z" fill="currentcolor" /> <path d="M151.908 0L132.747 47.04L113.587 0H92.0312V80H106.402V20.1882L124.764 62.4H140.731L159.093 20.1882V80H173.463V0H151.908Z" fill="currentcolor" /> <path d="M0 0V14H18.7613V66H0V80H52.6912V66H33.93V14H52.6912V0H0Z" fill="currentcolor" /> </svg> </a> <div class="header__buttons"> <search class="header__search"> <form action="/search/"> <label class="sr-only" for="search">Search</label> <input placeholder="Search" type="search" id="search" name="q" /> <button type="submit" value="Search" aria-label="Submit search"> <svg role="img" aria-hidden="true" focusable="false" class="icon icon--m"> <use xlink:href="/assets/website/images/svg/icons.svg#search"></use> </svg> </button> </form> </search> <button class="header__search-toggle toggler" data-targets=".header__search--mobile"> Search <svg role="img" aria-hidden="true" focusable="false" class="icon icon--m"> <use xlink:href="/assets/website/images/svg/icons.svg#search"></use> </svg> </button> <button class="header__nav-open" aria-label="Open navigation overlay">Menu<span></span></button> </div> <nav class="header__nav-fallback"> <ul class="cluster cluster--pad-m"> <li><a href="/study/">Study</a></li><li><a href="/research-and-innovation/">Research</a></li><li><a href="/faculties-and-departments/">Faculties</a></li><li><a href="/latest-news-events/">News and events</a></li><li><a href="/about/">About</a></li><li><a href="/get-involved/">Get involved</a></li><li><a href="/giving/">Giving</a></li> <li><a href="/search">Search</a></li> </ul> </nav> <search class="header__search header__search--mobile"> <form action="/search/"> <label class="sr-only" for="search">Search</label> <input placeholder="Search" type="search" id="search" name="q" /> <button type="submit" value="Search" aria-label="Submit search"> <svg role="img" aria-hidden="true" focusable="false" class="icon icon--m"> <use xlink:href="/assets/website/images/svg/icons.svg#search"></use> </svg> </button> </form> </search> </div> <div id="#overlay" role="dialog" aria-modal="true" aria-labelledby="overlay-title" class="hidden"> <h2 class="sr-only" id="overlay-title">Website navigation</h2> <div class="container"> <div class="header__drawer"> <button class="header__nav-close" aria-label="Close navigation overlay">Close<span></span></button> <a class="header__drawer__logo" href="/" aria-label="Homepage"> <svg width="727" height="80" viewBox="0 0 727 80" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M301.453 0V80H353.346V66H316.622V46H350.152V32.4H316.622V14H353.346V0H301.453Z" fill="currentcolor"/> <path d="M238.397 12.9177H227.22V39.8776H238.397C247.142 39.8776 253.566 35.6376 253.566 26.3953C253.566 16.8 247.142 12.9177 238.397 12.9177ZM239.196 52.8H227.22V80H212.052V0H239.196C256.219 0 269.533 7.72706 269.533 26.4C269.533 44.8 256.121 52.8 239.196 52.8Z" fill="currentcolor"/> <path d="M485.079 0V14H503.84V66H485.079V80H537.77V66H519.009V14H537.77V0H485.079Z" fill="currentcolor"/> <path d="M434.191 24.8C434.191 34.4377 428.602 37.4777 419.022 37.4777H406.248V12.9177H419.022C429.419 12.9224 434.191 16.8 434.191 24.8ZM450.158 24.8C450.158 6.12706 437.384 0 420.619 0H391.08V80H406.248V50.4H419.022C419.722 50.4 420.417 50.3859 421.107 50.3624L436.562 80H453.37L436.224 47.1906C444.565 43.4777 450.158 36.3435 450.158 24.8Z" fill="currentcolor"/> <path d="M604.324 14.1929L615.238 49.4777H593.406L604.324 14.1929ZM594.345 0L567.999 80H583.966L589.409 62.4H619.235L624.678 80H640.645L614.299 0H594.345Z" fill="currentcolor"/> <path d="M674.889 0V80H726.914V66H690.058V0H674.889Z" fill="currentcolor"/> <path d="M151.908 0L132.747 47.04L113.587 0H92.0312V80H106.402V20.1882L124.764 62.4H140.731L159.093 20.1882V80H173.463V0H151.908Z" fill="currentcolor"/> <path d="M0 0V14H18.7613V66H0V80H52.6912V66H33.93V14H52.6912V0H0Z" fill="currentcolor"/> </svg> </a> <div class="header__pane-switchers"> <button class="header__pane-switcher" data-tab-id="site-nav">Key links</button> <button class="header__pane-switcher" data-tab-id="section-nav">This section</button> </div> <div class="header__pane header__pane--global" id="site-nav"> <a class="header__skip-link" href="#section-nav">Skip to section navigation</a> <nav class="header__nav header__nav--global" aria-labelledby="global-nav-title"> <h3 class="sr-only" id="global-nav-title">Global site navigation</h3> <ul> <li> <a href="/study/">Study</a> <ul> <li><a href="/study/courses/">Course search</a></li> <li><a href="/study/apply/">Apply</a></li> <li><a href="/study/fees-and-funding/">Fees and funding</a></li> <li><a href="/study/student-life/">Student life</a></li> <li><a href="/study/visit/">Visit</a></li> <li><a href="/study/help-centre/">Help centre</a></li> <li><a href="/study/request-info/">Request info</a></li> <li><a href="/study/international-students/">International students</a></li> <li><a href="https://www.imperial.ac.uk/business-school/executive-education/">Executive education</a></li> <li></li> <li><a href="/study/visit/summer-schools/">Summer schools</a></li> </ul> </li><li> <a href="/research-and-innovation/">Research</a> </li><li> <a href="/faculties-and-departments/">Faculties</a> <ul> <li><a href="/engineering/">Faculty of Engineering</a></li> <li><a href="/medicine/">Faculty of Medicine</a></li> <li><a href="/natural-sciences/">Faculty of Natural Sciences</a></li> <li><a href="https://www.imperial.ac.uk/business-school/">Imperial College Business School</a></li> <li><a href="/admin-services/">Administrative and support services</a></li> </ul> </li><li> <a href="/latest-news-events/">News and events</a> <ul> <li><a href="https://www.imperial.ac.uk/news/">News</a></li> <li><a href="/whats-on/">What's on</a></li> <li><a href="/be-inspired/stories/">Imperial Stories</a></li> <li><a href="/be-inspired/festival/">Great Exhibition Road Festival</a></li> <li><a href="/be-inspired/magazine/">Imperial Magazine</a></li> <li><a href="/be-inspired/lates/">Imperial Lates</a></li> <li><a href="/students/graduation/">Graduation</a></li> </ul> </li><li> <a href="/about/">About</a> <ul> <li><a href="/about/leadership-and-strategy/president/">President</a></li> <li><a href="/about/leadership-and-strategy/provost/">Provost</a></li> <li><a href="/about/leadership-and-strategy/strategy/">Imperial Strategy</a></li> <li><a href="/about/leadership-and-strategy/provost/academic-strategy/">Academic Strategy</a></li> <li><a href="/about/global/">Imperial Global</a></li> <li><a href="/about/sustainability/">Sustainable Imperial</a></li> <li><a href="/about/governance/">Governance</a></li> <li><a href="/visit/campuses/">Campuses</a></li> <li><a href="https://profiles.imperial.ac.uk/">Our academics</a></li> <li><a href="/jobs/">Jobs at Imperial</a></li> </ul> </li><li> <a href="/get-involved/">Get involved</a> <ul> <li><a href="/giving/">Giving</a></li> <li><a href="/be-inspired/schools-outreach/">Schools outreach</a></li> <li><a href="/be-inspired/global-summer-school/">Imperial Global Summer School</a></li> <li><a href="/be-inspired/societal-engagement/">Societal engagement</a></li> <li><a href="/be-inspired/volunteering/">Volunteering and outreach</a></li> </ul> </li><li> <a href="/giving/">Giving</a> </li> </ul> </nav> <nav aria-labelledby="user-nav-title" role="navigation"> <h3 class="sr-only" id="user-nav-title">User links navigation</h3> <ul class="header__user-links"> <li><a href="/staff/">For staff</a></li> <li><a href="/students/">Current students</a></li> <li><a href="/for-business/">Imperial for business</a></li> <li><a href="/be-inspired/schools-outreach/">For schools</a></li> <li><a href="/alumni/">Alumni</a></li> </ul> </nav> </div> <div class="header__pane header__pane--section" id="section-nav"> <nav class="header__nav header__nav--section" aria-labelledby="section-nav-title"> <a class="header__nav__breadcrumb" href="/staff/tools-and-reference/"> <span>Tools and reference</span> </a> <h3 class="header__nav__title" id="section-nav-title"><a href="/staff/tools-and-reference/web-guide/">Web guide</a><span class="sr-only"> navigation</span></h3> <ul> <li><span class="currentbranch0"><a href="/staff/tools-and-reference/web-guide/t4-site-manager/">Terminalfour content management system (T4 CMS)</a></span> <ul class="multilevel-linkul-0"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/new-sections-and-redesigns/">Requesting new sections of the website or redesigning existing sections in T4 </a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/add-a-section/">Adding a new section (page)</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/edit-a-section/">Editing a section (page)</a> <ul class="multilevel-linkul-1"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/edit-a-section/reorder-navigation/">Reorder the pages in your navigation</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/moving-sections/">Moving sections (pages)</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/templates/">Page layouts (templates)</a></li> <li><span class="currentbranch1"><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/">Adding and updating content (content types)</a></span> <ul class="multilevel-linkul-1"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/list/">A-Z list of content types </a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/adding-a-content-type/">Adding a content type</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/general-content/images/">Adding images to your content</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/updating-content/">Updating an existing content type</a> <ul class="multilevel-linkul-2"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/updating-content/restore/">Restore a previous version of the content</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/moving-and-duplicating/">Moving and duplicating content</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/reordering-content/">Reordering content on your pages</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/accordions/">Accordions</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/banners/">Banners</a> <ul class="multilevel-linkul-2"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/banners/banner-bottom-block/">Banner - bottom block</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/banners/landing-page/">Landing page banner with call to action links</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/blog-feed/">Blog feed</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/call-to-action-box/">Call to action box</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/carousels/">Carousels</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/celcat/">Celcat calendar</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/column-blocks/">Column blocks (link lists)</a> <ul class="multilevel-linkul-2"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/column-blocks/3-column-block/">3 Column block</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/column-blocks/4-column-block/">4 Column block</a></li> </ul> </li> <li><span class="currentbranch2"><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/colour-blocks/">Column colour blocks</a></span> <ul class="multilevel-linkul-2"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/colour-blocks/2-column-colour-block/">2 Column colour block</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/colour-blocks/3-column-colour-block/">3 Column colour block</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/colour-blocks/2-column-general-content-block/">2 column general content block</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/colour-blocks/3-column-general-content-block/">3 column general content block</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/data-harvesting/">Data harvesting/Student CRM forms</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/display-external-feed/">Display external feed</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/eventbrite/">Eventbrite</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/flexible-content/">Flexible content blocks</a> <ul class="multilevel-linkul-2"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/flexible-content/flexible-content-benefits/">Benefits of using flexible content blocks</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/flexible-content/fixed-widths/">Using fixed column widths</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/flexible-image-text-cards/">Flexible image and text cards</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/flickr-album/">Flickr album</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/forms/">Forms and surveys</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/general-a-z-lists/">General A-Z lists</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/general-content/">General content</a> <ul class="multilevel-linkul-2"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/general-content/images/">Using images in your content</a> <ul class="multilevel-linkul-3"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/general-content/images/sizes/">Image sizes for each content type</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/general-content/images/adding-images/">Adding images to your content</a> <ul class="multilevel-linkul-4"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/general-content/images/adding-images/using-existing-images-in-the-media-library/">Using existing images in the Media Library</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/general-content/images/adding-images/adding-new-images-to-the-media-library/">Adding new images to the Media Library</a></li> </ul> </li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/general-content/documents/">Adding documents: pdfs, Word, zip etc.</a> <ul class="multilevel-linkul-3"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/general-content/documents/document-link/">Adding a link to a document in your content</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/general-content/documents/editing-documents/">Editing and removing existing documents</a></li> </ul> </li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/google-calendar/">Google Calendar</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/maps/">Google Maps and Street View</a> <ul class="multilevel-linkul-2"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/maps/google-map/">Google Map (embed)</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/maps/street-view/">Street View (embed)</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/highlight-box/">Highlight box</a> <ul class="multilevel-linkul-2"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/highlight-box/call-to-action-button/">Call to action button</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/highlight-box/colour-block/">Colour block</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/highlight-box/document-download/">Document download button</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/highlight-box/video/">Video</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/icon-cards/">Icon cards</a> <ul class="multilevel-linkul-2"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/icon-cards/list/">All icon cards available</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/image-grid/">Image grid</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/infogram/">Infogram</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/issuu/">Issuu</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/key-facts/">Key facts</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/feature-item/">Landing page feature item</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/landing-page-text-with-featurelinks/">Landing page text with feature/links</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/lead-paragraph/">Lead paragraph</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/local-footer/">Local footers</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/logo-grid/">Logo grid</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/mailchimp/">MailChimp</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/news-and-events/">News and events</a> <ul class="multilevel-linkul-2"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/news-and-events/feed/">News and events feed</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/news-and-events/news-listing/">News listing</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/news-and-events/event-listing/">Event listing</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/news-and-events/event-summary/">Event summary</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/news-and-events/landing-page-news/">Landing page news story</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/news-and-events/manual-latest-news-block/">Manual latest news block</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/people-lists/">People lists and grids</a> <ul class="multilevel-linkul-2"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/people-lists/list/">People list</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/people-lists/grid/">People grid</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/people-lists/landing-grid/">Landing page people grid</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/prezi/">Prezi</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/quote-block/">Quote block</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/research-publications/">Research publications</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/slideshows/">Slideshows</a> <ul class="multilevel-linkul-2"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/slideshows/full-width-landing/">Slideshow - full width landing</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/slideshows/slideshow-tall/">Slideshow - tall</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/slideshows/slideshow-short/">Slideshow - short</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/social-metadata/">Social Metadata</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/soundcloud/">SoundCloud</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/tabs/">Tabs</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/umap/">uMap</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/videos/">Adding videos</a> <ul class="multilevel-linkul-2"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/videos/video-3-column/">Video - 3 column</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/videos/video-with-text/">Video with text</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/highlight-box/video/">Video in a highlight box</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/videos/video-playlist/">Video playlist</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/videos/video-general-content/">Video with general content</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/widgets-and-items/">Widgets and items</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/wufoo/">Wufoo</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/hiding-and-deleting/">Deleting and hiding content and sections (pages)</a> <ul class="multilevel-linkul-1"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/hiding-and-deleting/sections/">Hiding and deleting sections (pages)</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/general-content/documents/">Adding documents: pdfs, Word, zip etc.</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/restrict-access/">Restricting viewing access of your pages and documents</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/viewing-pages/">Previewing pages before they go live</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/publishing/">Publishing your pages (making them live)</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/jargon-buster/">Jargon glossary</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/logging-in-error/">Error when logging into T4 (401 error) - how to resolve</a></li> </ul> </li><li><a href="/staff/tools-and-reference/web-guide/tools/">Digital tools and services</a> <ul class="multilevel-linkul-0"> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/">Terminalfour (T4) Site Manager</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/qualtrics/">Qualtrics survey tool</a> <ul class="multilevel-linkul-1"> <li><a href="/staff/tools-and-reference/web-guide/tools/qualtrics/creating-a-survey/">Creating a form / survey</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/qualtrics/publishing-forms/">Publishing a form / survey</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/qualtrics/reports/">Extracting survey data and reports</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/qualtrics/decommissioning/">Decommissioning your form and survey</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/qualtrics/survey-help/">Qualtrics surveys - further help</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/qualtrics/accessibility-qualtrics/">Accessibility on Qualtrics site</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/tools/analytics-dashboards/">Analytics dashboards</a> <ul class="multilevel-linkul-1"> <li><a href="/staff/tools-and-reference/web-guide/tools/analytics-dashboards/interpret-dashboard-data/">Guidance on your dashboard data</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/tools/asset-library/">Asset Library</a> <ul class="multilevel-linkul-1"> <li><a href="/staff/tools-and-reference/web-guide/tools/asset-library/search/">Searching for assets</a> <ul class="multilevel-linkul-2"> <li><a href="/staff/tools-and-reference/web-guide/tools/asset-library/search/search-tips/">Search tips</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/asset-library/search/saved-searches/">Saved searches</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/tools/asset-library/downloading-assets/">Downloading assets</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/asset-library/lightboxes/">Using lightboxes</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/asset-library/uploading/">Uploading images</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/asset-library/guest-access/">Requesting guest access to the Asset Library</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/asset-library/accessibility-statement/">Accessibility on the Asset Library site</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/tools/blogs/">College blogs</a> <ul class="multilevel-linkul-1"> <li><a href="/staff/tools-and-reference/web-guide/tools/blogs/how-to/">Blogs - getting started with WordPress</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/blogs/terms-of-use/">Terms and conditions </a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/blogs/accessibility/">Accessibility statement for Imperial blogs</a></li> </ul> </li> <li><a href="/admin-services/ict/training-and-resources/inclusive-technology/">Inclusive Technology</a></li> <li><a href="/admin-services/ict/self-service/connect-communicate/sharing-and-collaboration-tools/sharepoint-online/">SharePoint</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/digital-signage/">Digital signage</a> <ul class="multilevel-linkul-1"> <li><a href="/staff/tools-and-reference/web-guide/tools/digital-signage/large-screen-guidelines/">Main Entrance large screen guidelines</a></li> </ul> </li> <li><a href="/admin-services/ict/self-service/connect-communicate/sharing-and-collaboration-tools/wikis/">Wikis</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/social-media/">Social media</a> <ul class="multilevel-linkul-1"> <li><a href="/be-inspired/social-and-multimedia/directory/">Social networks</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/tools/news/">News website</a> <ul class="multilevel-linkul-1"> <li><a href="/staff/tools-and-reference/web-guide/tools/news/creating-articles/">Creating news articles</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/tools/events-website/">Events website</a> <ul class="multilevel-linkul-1"> <li><a href="/staff/tools-and-reference/web-guide/tools/events-website/events-authors/">Instructions for events authors</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/events-website/feed-generator/">Using the feed generator</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/events-website/things-to-consider/">Approaches to consider</a></li> </ul> </li> <li><a href="/admin-services/communications/what-we-do/internal-communications/email-newsletters/using-poppulo/">Poppulo (email newsletters)</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/search/">Search Engine</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/workspace-on-box/">Workspace on Box for public file sharing</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/mobile-apps/">Mobile apps</a></li> </ul> </li><li><a href="/staff/tools-and-reference/web-guide/training-and-events/">Digital skills training</a> <ul class="multilevel-linkul-0"> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/">Web skills materials</a> <ul class="multilevel-linkul-1"> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/">Accessible content guidance</a> <ul class="multilevel-linkul-2"> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/headings/">Using clear and effective headings</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/images/">Text alternatives for images</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/links/">Writing descriptive links</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/tables/">Using tables</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/documents/">Publishing accessible documents online</a> <ul class="multilevel-linkul-3"> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/documents/ms-office/">Creating accessible Office documents</a> <ul class="multilevel-linkul-4"> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/documents/ms-office/image-alt-text/">Add alternative (alt) text to images</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/documents/ms-office/add-a-document-title-to-your-documents/">Add a document title to your documents</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/documents/ms-office/hyperlinks/">Make hyperlinks accessible</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/documents/ms-office/heading-styles/">Use heading styles properly</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/documents/ms-office/formatting-tables/">Formatting tables</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/documents/ms-office/checking-accessibility/">Checking the accessibility of your document</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/documents/ms-office/accessible-charts/">Making accessible charts</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/documents/ms-office/powerpoint/">Creating accessible PowerPoint presentations</a></li> </ul> </li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/video-audio/">Creating accessible video and audio</a> <ul class="multilevel-linkul-3"> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/video-audio/descriptive-transcripts/">Provide a descriptive transcript for your videos</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/video-audio/podcasts/">Making accessible Podcasts (audio) </a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/video-audio/social-media/">Accessibility for social media</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/surveys/">Writing accessible surveys</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/checklist/">Accessible content checklist</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/writing-for-web/">Writing for the web</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/analytics-dashboards/">Analysing online traffic with Google Analytics dashboards</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/blogging/">Blogging</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/images/">Images</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/seo/">Increasing the visibility of your website (SEO)</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/social-media/">Social Media</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/events/">Creating events</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/writing-news/">Writing news articles </a> <ul class="multilevel-linkul-2"> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/writing-news/content-guidance/">Content guidance</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/top-tips/">Top tips</a> <ul class="multilevel-linkul-2"> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/top-tips/accordions/">Accordions</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/top-tips/a-z-lists/">A-Z lists</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/top-tips/bullet-points-and-numbered-lists/">Bullet points and numbered lists</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/top-tips/call-to-action/">Writing calls to action</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/top-tips/carousels/">Carousels</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/top-tips/headings/">Headings</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/top-tips/sidebars/">Sidebar content</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/top-tips/tabbed-content/">Tabbed content</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/top-tips/documents/">Uploading documents online</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/top-tips/using-tables/">Using tables</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/top-tips/collecting-personal-data/">Collecting personal data</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/top-tips/writing-surveys/">Writing Surveys</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/user-testing/">User testing techniques </a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/ga/">Google Analytics </a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/accessibility-course/">Digital Accessibility online course</a></li> <li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/">T4 website CMS training</a></li> <li><a href="/staff/tools-and-reference/web-guide/tools/events-website/events-authors/">Events website training</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/training-stats/">Online training feedback and stats</a> <ul class="multilevel-linkul-1"> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/training-stats/accessibility/">Accessibility training feedback</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/training-stats/pwp/">PWP training feedback</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/training-stats/t4-training-stats/" class="">T4 V8 training overview stats</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/training-stats/t4-training-feedback/">T4 V8 training feedback</a></li> </ul> </li> </ul> </li><li><a href="/staff/tools-and-reference/web-guide/policies-and-guidance/">Policies and standards</a> <ul class="multilevel-linkul-0"> <li><a href="/staff/tools-and-reference/web-guide/policies-and-guidance/new-websites/">Creating a new website</a></li> <li><a href="/staff/tools-and-reference/web-guide/policies-and-guidance/comments/">Web and social media comments policy</a></li> <li><a href="/staff/tools-and-reference/web-guide/policies-and-guidance/url-policy/">URL policy</a></li> <li><a href="/staff/tools-and-reference/web-guide/policies-and-guidance/accessibility-standards/">Meeting our accessibility standards</a> <ul class="multilevel-linkul-1"> <li><a href="/staff/tools-and-reference/web-guide/policies-and-guidance/accessibility-standards/teaching-videos/">Video standards for online teaching and learning </a></li> <li><a href="/staff/tools-and-reference/web-guide/policies-and-guidance/accessibility-standards/regulations/">Digital accessibility regulations</a></li> <li><a href="/staff/tools-and-reference/web-guide/policies-and-guidance/accessibility-standards/exemptions/">Exemptions</a></li> <li><a href="/staff/tools-and-reference/web-guide/policies-and-guidance/accessibility-standards/testing-tools/">Accessibility testing tools</a></li> <li><a href="/staff/tools-and-reference/web-guide/policies-and-guidance/accessibility-standards/glossary/">Digital accessibility glossary</a></li> <li><a href="/staff/tools-and-reference/web-guide/policies-and-guidance/accessibility-standards/faqs/">Digital accessibility FAQs</a></li> <li><a href="/staff/tools-and-reference/web-guide/training-and-events/materials/accessibility/">Accessible content guidance</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/policies-and-guidance/domains-urls-hosting/">Website domain and hosting requests</a> <ul class="multilevel-linkul-1"> <li><a href="/staff/tools-and-reference/web-guide/policies-and-guidance/domains-urls-hosting/subdomains/">Policy for subdomain requests for imperial.ac.uk</a></li> </ul> </li> <li><a href="/about-the-site/use-of-cookies/">Use of cookies</a></li> <li><a href="/staff/tools-and-reference/web-guide/policies-and-guidance/web-governance/">Web governance</a> <ul class="multilevel-linkul-1"> <li><a href="/staff/tools-and-reference/web-guide/policies-and-guidance/web-governance/homepage/">Imperial homepage governance</a></li> </ul> </li> </ul> </li><li><a href="/staff/tools-and-reference/brand-style-guide/">Brand and style guide</a></li><li><a href="/staff/tools-and-reference/web-guide/projects/">Projects</a> <ul class="multilevel-linkul-0"> <li><a href="/staff/tools-and-reference/web-guide/projects/website-redesign/">Imperial website redesign project</a> <ul class="multilevel-linkul-1"> <li><a href="/staff/tools-and-reference/web-guide/projects/website-redesign/timeline/">Project timeline</a></li> <li><a href="/staff/tools-and-reference/web-guide/projects/website-redesign/discovery-and-consultation-phase/">Discovery and consultation phase</a></li> <li><a href="/staff/tools-and-reference/web-guide/projects/website-redesign/design-phase/">Design phase</a></li> <li><a href="/staff/tools-and-reference/web-guide/projects/website-redesign/content-development/">Content development</a></li> <li><a href="/staff/tools-and-reference/web-guide/projects/website-redesign/faqs/">Frequently asked questions</a></li> </ul> </li> <li><a href="/staff/tools-and-reference/web-guide/projects/imperial-profiles/" class="">Imperial Profiles project</a> <ul class="multilevel-linkul-1"> <li><a href="/staff/tools-and-reference/web-guide/projects/imperial-profiles/faqs/" class="">Frequently asked questions</a></li> </ul> </li> </ul> </li><li><a href="/staff/tools-and-reference/web-guide/contact-us/">Contact us</a></li>  </ul> </nav> </div> </div> </div> </div> </header> <main id="page"> <div class="show-no-js"> <div class="container"> <p class="step-1">In this section</p> <nav class="nav-fallback"> <ul class="nav-fallback__parent"> <li> <a class="lwi" href="/staff/tools-and-reference/web-guide/"> Web guide </a> </li> </ul> <ul class="cluster cluster--pad-m"><li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/colour-blocks/2-column-colour-block/">2 Column colour block</a></li><li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/colour-blocks/3-column-colour-block/">3 Column colour block</a></li><li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/colour-blocks/2-column-general-content-block/">2 column general content block</a></li><li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/colour-blocks/3-column-general-content-block/">3 column general content block</a></li></ul> </nav> </div> </div> <div class="container content-template" id="content"> <nav class="page-area-heading"> <a href="/staff/tools-and-reference/web-guide/">Web guide</a> </nav> <div class="page-heading lg-8 sm-12"> <div class="breadcrumbs"> <ul> <li><a href="/">Imperial Home</a></li> <li><a href="/staff/">Staff</a></li><li><a href="/staff/tools-and-reference/">Tools and reference</a></li><li><a href="/staff/tools-and-reference/web-guide/">Web guide</a></li><li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/">Terminalfour content management system (T4 CMS)</a></li><li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/">Adding and updating content (content types)</a></li><li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/colour-blocks/">Column colour blocks</a></li> </ul> </div> <h1>Column colour blocks</h1> </div> <div class="row row--space-between flow-opposite top" id=""> <aside class="col lg-3 md-4 sm-12"> <div class="section-sidebar"> <button class="section-sidebar__button" aria-expanded="false" aria-controls="section-sidebar-content"> <h2 class="section-sidebar__heading">In this section</h2> <svg role="img" aria-hidden="true" focusable="false" class="icon icon--m"> <use xlink:href="/assets/website/images/svg/icons.svg#chevron-down"></use> </svg> </button> <div class="section-sidebar__content" id="section-sidebar-content"> <ul class="section-sidebar__list flow-2xs"><li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/colour-blocks/2-column-colour-block/">2 Column colour block</a></li><li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/colour-blocks/3-column-colour-block/">3 Column colour block</a></li><li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/colour-blocks/2-column-general-content-block/">2 column general content block</a></li><li><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/colour-blocks/3-column-general-content-block/">3 column general content block</a></li> </ul> </div> </div> </aside> <div class="col lg-8 sm-12" role="main" id="primary-content">  <div class="module flow-m"> <div class="row wysiwyg"> <p><span>The column colour blocks are used to display a group of content blocks in two or three columns. These blocks can be added to landing and standard pages. These are often used for featuring certain content or as prominent links to sub-sections, to help your visitors navigate your pages.</span></p> <p><span>If you have more than one area on a page which you want to draw your users attention to, you can have more than one block group on a page.</span></p> <p>There are four main types of colour blocks. For each of these, you can display them with the dark theme (default) or without colour (<strong>light theme activated</strong>). You can also include a related image at the top of these blocks.</p> <h2>Choose the type of column colour block you want to add</h2> <p><em>The blocks below are using two 2 Column colour blocks. The first two items use the dark theme and the third and fourth items have the light theme selected.</em></p> </div> <div class="row equal-height-columns"> <h2 class="sr-only">Column colour blocks</h2> <div class="col lg-6"> <div class="media-item full secondary reverse equal-height"> <a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/colour-blocks/2-column-colour-block/"> <div class="content"> <h3 class="title">2 Column colour block</h3> <p>Adds two blocks with images (optional), heading, short paragraph of text and a single (optional) link to an internal/external page or a Media Library document.</p> <p> <span class="link primary">Learn how to add a 2 column colour block</span> </p> </div> </a> </div> </div> <div class="col lg-6"> <div class="media-item full primary reverse equal-height"> <a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/colour-blocks/3-column-colour-block/"> <div class="content"> <h3 class="title">3 Column colour block</h3> <p>Adds three blocks with images (optional), heading, short paragraph of text and a single (optional) link to an internal/external page or a Media Library document.</p> <p> <span class="link primary">Learn how to add a 3 column colour block</span> </p> </div> </a> </div> </div> </div>   <div class="row equal-height-columns"> <h2 class="sr-only">General content blocks</h2> <div class="col lg-6"> <div class="media-item full light-secondary reverse equal-height"> <a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/colour-blocks/2-column-general-content-block/"> <div class="content"> <h3 class="title">2 column general content block</h3> <p>Adds two blocks with images (optional) and text area where you can include multiple links, bulleted and numbered lists.</p> <p> <span class="link primary">Learn how to add a 2 column general content block</span> </p> </div> </a> </div> </div> <div class="col lg-6"> <div class="media-item full light-primary reverse equal-height"> <a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/colour-blocks/3-column-general-content-block/"> <div class="content"> <h3 class="title">3 column general content block </h3> <p>Adds three blocks with images (optional) and text area where you can include multiple links, bulleted and numbered lists.</p> <p> <span class="link primary">Learn how to add a 3 column general content block</span> </p> </div> </a> </div> </div> </div>  <div class="row wysiwyg"> <h2><span>Alternative: </span>Flexible content blocks</h2> <p><span>The column colour blocks are very easy to add and great if you want to add similar content in columns to your pages. If you want a bit more flexibility in the type of content you add to the columns then you may want to consider flexible content blocks instead. For example you may want the first column to be a colour block and then add a news article or a block of text in subsequent columns. </span></p> <p><span>Flexible content blocks are a little more work to set up initially, but are very easy to manage after that and offer you a lot more options for the type of content you want to display in the columns.</span></p> <p><strong><a href="/staff/tools-and-reference/web-guide/t4-site-manager/content-types/flexible-content/">Learn more about flexible content blocks</a></strong></p> </div> </div> <section class="supplementary-content row"> <div class="supplementary-content__sizer col"></div> </section>  </div> </div> </div> </main> <footer class="footer" role="contentinfo"> <section class="footer__main"> <h2 class="sr-only">Useful Links</h2> <div class="container"> <div class="row row--gap-on-collapse"> <nav class="col lg-3 sm-12"> <div class="flow-s"> <h3 class="step--1">Popular links</h3> <ul> <li><a href="/admin-services/ict/self-service/digital-education-services/digital-education-platforms/blackboard/">Blackboard</a></li> <li><a href="/admin-services/ict/contact-ict-service-desk/">Contact the Service Desk</a></li> <li><a href="/jobs/">Jobs</a></li> <li><a href="/admin-services/library/">Library services</a></li> <li><a href="https://email.imperial.ac.uk" target="_blank" rel="noopener">Outlook email online</a></li> </ul> </div> </nav> <nav class="col lg-3 sm-12"> <div class="flow-s"> <h3 class="step--1">Faculties</h3> <ul> <li><a href="/engineering/">Engineering</a></li> <li><a href="/medicine/">Medicine</a></li> <li><a href="/natural-sciences/">Natural Sciences</a></li> <li><a href="https://www.imperial.ac.uk/business-school/" target="_blank" rel="noopener">Imperial College Business School</a></li> </ul> </div> </nav> <nav class="col lg-3 sm-12"> <div class="flow-s"> <h3 class="step--1">Directories</h3> <ul> <li><a href="/admin-services/">Admin and support services </a></li> <li><a href="/multidisciplinary-research/">Networks and Centres </a></li> <li><a href="/a-z-research/">Research groups </a></li> <li><a href="https://profiles.imperial.ac.uk/" target="_blank" rel="noopener">Search all staff</a></li> </ul> </div> </nav> <nav class="col lg-3 sm-12"> <div class="flow-s"> <h3 class="step--1">Partners</h3> <ul> <li><a href="https://ahsc.org.uk/" target="_blank" rel="noopener">Imperial College Academic Health Science Centre </a></li> <li><a href="https://imperialcollegehealthpartners.com/" target="_blank" rel="noopener">Imperial College Health Partners </a></li> <li><a href="https://www.imperial.nhs.uk/" target="_blank" rel="noopener">Imperial College Healthcare NHS Trust </a></li> <li><a href="https://www.imperial-consultants.co.uk/" target="_blank" rel="noopener">Imperial Consultants</a></li> </ul> </div> </nav> </div> </div> </section> <section itemscope itemtype="http://schema.org/CollegeOrUniversity"> <h2 class="sr-only">College Information</h2> <div class="container"> <div class="footer__common"> <div class="row"> <div class="col lg-3 sm-12"> <div class="footer__contact flow-s"> <a href="#" class="footer__brand"> <span class="sr-only" itemprop="name">Imperial College London</span> <svg width="727" height="80" viewBox="0 0 727 80" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M301.453 0V80H353.346V66H316.622V46H350.152V32.4H316.622V14H353.346V0H301.453Z" fill="currentcolor"/> <path d="M238.397 12.9177H227.22V39.8776H238.397C247.142 39.8776 253.566 35.6376 253.566 26.3953C253.566 16.8 247.142 12.9177 238.397 12.9177ZM239.196 52.8H227.22V80H212.052V0H239.196C256.219 0 269.533 7.72706 269.533 26.4C269.533 44.8 256.121 52.8 239.196 52.8Z" fill="currentcolor"/> <path d="M485.079 0V14H503.84V66H485.079V80H537.77V66H519.009V14H537.77V0H485.079Z" fill="currentcolor"/> <path d="M434.191 24.8C434.191 34.4377 428.602 37.4777 419.022 37.4777H406.248V12.9177H419.022C429.419 12.9224 434.191 16.8 434.191 24.8ZM450.158 24.8C450.158 6.12706 437.384 0 420.619 0H391.08V80H406.248V50.4H419.022C419.722 50.4 420.417 50.3859 421.107 50.3624L436.562 80H453.37L436.224 47.1906C444.565 43.4777 450.158 36.3435 450.158 24.8Z" fill="currentcolor"/> <path d="M604.324 14.1929L615.238 49.4777H593.406L604.324 14.1929ZM594.345 0L567.999 80H583.966L589.409 62.4H619.235L624.678 80H640.645L614.299 0H594.345Z" fill="currentcolor"/> <path d="M674.889 0V80H726.914V66H690.058V0H674.889Z" fill="currentcolor"/> <path d="M151.908 0L132.747 47.04L113.587 0H92.0312V80H106.402V20.1882L124.764 62.4H140.731L159.093 20.1882V80H173.463V0H151.908Z" fill="currentcolor"/> <path d="M0 0V14H18.7613V66H0V80H52.6912V66H33.93V14H52.6912V0H0Z" fill="currentcolor"/> </svg> </a> <meta itemprop="url" content="https://www.imperial.ac.uk/"> <meta itemprop="image" content="https://www.imperial.ac.uk/ImageCropToolT4/imageTool/uploaded-images/homepage-default-social--tojpeg_1523872141375_x1.jpg"> <meta itemprop="logo" content="https://www.imperial.ac.uk/assets/website/images/logo/imperial-600.png"> <meta itemprop="sameAs" content="https://en.wikipedia.org/wiki/Imperial_College_London"> <div class="address"> <h3 class="sr-only">Address</h3> <p itemscope itemtype="http://schema.org/PostalAddress" itemprop="address"> <span itemprop="name">Imperial College London</span><br /> <span itemprop="streetAddress">South Kensington Campus</span><br /> <span itemprop="addressLocality">London</span> <span itemprop="postalCode">SW7 2AZ</span>, <span itemprop="addressCountry">UK</span><br /> <span itemprop="telephone">tel: +44 (0)20 7589 5111</span> </p> </div> </div> </div> <div class="col lg-9 sm-12"> <div class="footer__info flow-s" id="footer-info"> <div class="footer__social cluster cluster--pad-m"> <a href="https://www.facebook.com/imperialcollegelondon" target="_blank" itemprop="sameAs"> <span class="sr-only">Facebook</span> <svg role="img" aria-hidden="true" focusable="false" class="icon icon--m"> <use xlink:href="/assets/website/images/svg/icons.svg#facebook"></use> </svg> </a> <a href="https://twitter.com/imperialcollege" target="_blank" itemprop="sameAs"> <span class="sr-only">X, formerly known as Twitter</span> <svg role="img" aria-hidden="true" focusable="false" class="icon icon--m"> <use xlink:href="/assets/website/images/svg/icons.svg#twitter"></use> </svg> </a> <a href="https://www.youtube.com/user/imperialcollegevideo" target="_blank" itemprop="sameAs"> <span class="sr-only">YouTube</span> <svg role="img" aria-hidden="true" focusable="false" class="icon icon--m"> <use xlink:href="/assets/website/images/svg/icons.svg#youtube"></use> </svg> </a> <a href="https://www.linkedin.com/edu/imperial-college-london-12598" target="_blank" itemprop="sameAs"> <span class="sr-only">LinkedIn</span> <svg role="img" aria-hidden="true" focusable="false" class="icon icon--m"> <use xlink:href="/assets/website/images/svg/icons.svg#linkedin"></use> </svg> </a> <a href="https://instagram.com/imperialcollege" target="_blank" itemprop="sameAs"> <span class="sr-only">Instagram</span> <svg role="img" aria-hidden="true" focusable="false" class="icon icon--m"> <use xlink:href="/assets/website/images/svg/icons.svg#instagram"></use> </svg> </a> <a href="https://www.tiktok.com/@imperialcollege" target="_blank" itemprop="sameAs"> <span class="sr-only">TikTok</span> <svg role="img" aria-hidden="true" focusable="false" class="icon icon--m"> <use xlink:href="/assets/website/images/svg/icons.svg#tiktok"></use> </svg> </a> </div> <nav> <h3 class="sr-only">Site Information</h3> <ul class="footer__meta"> <li><a href="/sitemap/">Sitemap</a></li> <li><a href="/about-the-site/accessibility/">Accessibility</a></li> <li><a href="/admin-services/finance/purchasing/related-policy-statements/modern-slavery/">Modern slavery statement</a></li> <li><a href="/about-the-site/privacy/">Privacy notice</a></li> <li><a href="/about-the-site/use-of-cookies/">Use of cookies</a></li> <li><a href="/about-the-site/incorrect-content/">Report incorrect content</a></li> <li class="hide-sm"><a class="t4Edit-page" href="https://t4-cms.imperial.ac.uk/terminalfour/page/section#edit/276935/contents">Log in</a></li> </ul> </nav> <p class="footer__copyright">© 2024 Imperial College London</p> </div> </div> </div> </div> </div> </section> </footer> </body> </html>

CINXE.COM

Column colour blocks | Staff | Imperial College London