Designing a Header (aka Banner, Logo, Flag) is something you can do yourself, or you can hire us to do it for you. To do it yourself, you'll need to create an image and upload it to your site.
Designing Your Header with FLEX Pro
If your website has been converted to FLEX Pro, the number of design elements and options available to you when customizing your header area will significantly increase.
To start taking advantage of these new tools, go to your SNO Design Options page under the Appearance tab on the left navigation bar in the WordPress dashboard. Click on the Site Designer section of the SNO Design Options page and direct your attention to the Header Design portion of the page.
Once you’re here, you will see the current structure of your header, broken down into content blocks. At this point, you can either make adjustments to those pre-existing blocks, or delete them and start from scratch.
Here are some general tips and pointers to get started:
- Your header is made up of two different types of spaces: Horizontal areas (rows) and vertical areas (columns). Rows can be added by clicking “Add Row.” Columns can be created by clicking on the gear icon to the right of a row, and then clicking “Add column.”
- To increase the height of a row or the width of a column, simply place your cursor on the side of that space and drag to resize the area in real time.
- If you see a “Legacy” label attached to a content block, that means there is a newer element available that encapsulates the functionality of that older element. You’ll want to swap those out for their updated replacements.
- If you would like consistent design styles applied to multiple content blocks within the same row, set the background color of each element to “Transparent,” click the gear icon on the right of the row, and click “Edit Row Settings.”
- Use the purple toggle bar above the header designer to create different versions of your header that are optimized for tablet or mobile devices.
Adding Your Header with FLEX Pro
Here are some tips and pointers for graphic headers:
- Create the graphic header in PhotoShop or any image-editing software (Gimp is a great free program www.gimp.org and there are others online). The maximum width for your new header is 1400 pixels, and the height can be up to 300 pixels.
- Your header will look best if you create it with a transparent background and save it as a .PNG file. That way the gradient/color in the background of the header will show through. Save your header image as a .png file in order to ensure transparency. You can also build your background in PhotoShop and save the file as a .jpg (.png and .gif work as well).
- To see the exact dimensions of the space for your graphic header image, go to your SNO Design Options -> Site Designer. From there, hover over the element labeled “Site Header - Graphic” -> click on the gear in the corner. This will open up an overlay for the graphic element, which will include a blue box with the approximate dimensions of the space at the top.
- All images can be 72 DPI/PPI (dots per inch/pixels per inch) if that's something you care about. File sizes should be under 15mb.
Need help designing a header? Consider the Logo Design and Web Header Add-On.
Creating Custom Headers
In addition to your site’s default header design, you can create and design up to five custom headers. These custom headers can be assigned to a story template, or they can be applied to individual stories as needed.
Note that each new custom header design you create will include a desktop, tablet, and mobile version that you will be able to design and customize.
For more information on custom headers, check out this support resource.
Text Header
Your site comes preloaded with a text header that displays the name of your news publication and the tagline that’s set on the General Options page (under the Settings menu on the left side of the WordPress Dashboard). If you would like to change the styling of this header the Header section of the SNO Design Options page is where you would do so. You can show or hide the text’s drop shadow, choose the title and tagline alignment, color, and background.
Header Tagline
By default the tagline of your website reads, “The student news site of Your School.” To change this, just head to the Dashboard and click on Settings and then General. On the screen that appears, you can change the tagline (or name of your website) and click Save when you are done. DO NOT change anything else on this page! Your website will break if you change the URL or other settings on this page.
Designing Your Header without Using FLEX Pro
If your website has not been converted to FLEX Pro, we highly recommend you do so first. The number of design elements and options available to you when customizing your header area will significantly increase after converting.
For directions on converting to FLEX Pro, click here.