• Created by Unknown User (agoodwil), last modified by Unknown User (mschamin) on 2019-10-23

To make the Page Header row.

Step-by-step guide

With the ability to use images, big block text, multiple call-to-action buttons and iconography, Page Headers provide a flexible way to set the tone and voice for your entire page.

Page Headers will typically always be placed as the first row on your page when you start building your layout.


I. Creating a Page Header

  1. Page Headers are actually a type of Media.  From your Drupal dashboard, hover over CONTENT in the top menu bar and then click on ADD MEDIA.


       2.  From the available Media list, scroll down and select SINGLE PAGE - PAGE HEADER.


      3.  The Page Header media type is one of the more flexible media types available and therefore will have a wide array of options to choose from.  Options marked with a red * are required. 

Main Configuration Options

Name:  This is the name of your specific Page Header media and will not be displayed to the end-user.

Title:   The title will be visible to the public and serves as your main heading for this section.

Image:  The image will be displayed on the right-hand side of the Page Header section.  For best results, please follow these guidelines:

  • Your image should be cropped to a 500px x 500px square.
  • The file size for your image may not exceed 256 KB.  However, for delivering web content as fast as possible you would ideally like to compress your image so it is around 100 kb or less.
  • For the fastest web content delivery, it is recommended that you use a .jpg or .jpeg file type. 


Alt Text:  Alt Text, or Alternative Text, is a required field once you upload an image.  The Alt Text is what will be read by a screen reader for individuals who may be visually impaired and unable to see your image.  Please provide a brief, but accurate description of your image.

Image Filter: The image filter will provide a gold, grey or washed out filter over your image.  This option automatically defaults to ‘None’.

Block Text:  The block text is a very large and decorative heading for your page.  It will always appear to the left of your main image.

Accent Color Block:  The accent color block is a decorative block in gold or grey that you can place on the left or right edge or your Page Header.  This option automatically defaults to ‘None’.

Main CTA Button:  The CTA (Call To Action) button will appear underneath your Section Title.  Typically a call to action serves as the main action you would want a user visiting your page to take.   Examples might be “Apply Now!” Or “Donate”.  In the URL field, you may enter a web link such as ”https://www.uccs.edu” or connect a page you've already created for your site by just typing the page name. 



Main Content Options

Main Content Position:  You may place your main content in either the left column (under the Block Text) or the right column (under your main image).

Main Content Title:  As an option, you may give your content a title.

Title/Icon Color:  Choose between gold, grey or black (default) for your Main Content Title and any iconography you decide to you use. 

Main Body:    The Main Body editor is a user-friendly content editor.  You can simply type your content in or copy and paste it from another document.  You also have the ability to make parts of the text bold, italicized or placed in a list format.



Icons

Icons:  Add decorative icons next to your Main Body content from https://fontawesome.com/.  Simply search the Font Awesome website for an appropriate font that matches your content theme and place the code in the icon field as shown below.  You do not need to use the HTML <i> tag or classes provided by Font Awesome.

*Note, per UCCS brand identity guidelines, only the “Light Pro” Font Awesome icon styles should be used.



II. Create your page and add your new Page Header media

  1. At this stage, we need to create a page and insert our Page Header Media into it.   From your Drupal dashboard, hover over CONTENT in your top menu bar and then click on ADD CONTENT.


      2. From the available Content list, scroll down and select UCCS SINGLE PAGE 2018


      3. Give your new page a title and under CONTENT ROW use the drop-down to click and select “Add Single Page - Page Header”


       4. In the “Header Media” box, under “Use Existing Media” you may start typing the name of the Page Header media you created and a selection list will appear of all name matches.  Simply click on the media you want to use.


      5. Once your media has been selected, click PUBLISHED  and SAVE  in the bottom left corner to save your progress and view your work!


      6. Marvel at your creation!


Content by label

There is no content with the specified labels