- This feature aligns with the Public Affairs branding guidelines.
Full-width color bands allow site builders to add a band of color with text to the top of your home page or Landing pages. The styles and layouts match the design of the Berkeley homepage.
Important Notes:
- Color bands will ONLY work on home pages and the "landing page" content type! Do not use with other content types.
- You might notice a temporary display issue after adding a new Color Band. If this happens, hitting "refresh" on your browser window should fix the issue. This display issue won't show up to anybody visiting your site. If any display issues persist after a browser refresh, please email web-platform@berkeley.edu.
To add a branded color band, follow these instructions.
Create a Landing Page
Create a new Landing page. For best display we recommend unchecking "Show breadcrumbs" and "Show page title." You can optionally add the page to a menu (if so, add a "Menu link title" and select a parent item).
From here, when you select "Customize this page," you should see a Hero region (see "Add the Color Band widget," below). If you don't, select "Change Layout" at the bottom of the page, then select "Hero Layouts" from the drop-down:
Select one of the Hero layouts, then click Save. NOTE: No matter which layout you choose, there will be a hero region available at the top of the page. The other layout regions will be available underneath the hero region.
Add the Color Band widget
Click "Customize this page" at the bottom of the page, then click the "plus" button in the Hero region to add a new widget.
From the "Add Existing Content" area, select "Berkeley Hero Widgets".
For "Color Band," click "Add".
Hero widgets are designed to be displayed in Hero regions; they should not be added to other regions. Additionally, other types of widgets are not designed to be displayed in Hero regions. Widgets placed into inappropriate regions may not display properly.
Configure the Color Band
Under Content Settings, select desired Color Scheme.
In the "Text" field, add your text, then click "Save."
Color Band Examples
There are 12 Berkeley Brand colors available for full-width Color Band widgets.
