Simple Editor
Click Page Header.
The top, blank panel shows the page header that you will build. Below this panel are tools you can use to build your header, including the ability to insert text boxes and images, and to select an element and delete it.
Below this panel are settings that apply to the whole header, including support for a background image or color and the ability to explicitly define the height.
Start by selecting a background image or specifying a background color.
When you click Set Background Image, you will see the standard web graphics selector that allows you to select an image already uploaded or to upload a new one. Once the image is uploaded and selected, you can specify the type of Tiling that is most appropriate for the image. The image will immediately appear in the top-most area. A red “X” will also appear to allow you to remove the background image.
When you click Background Color, the standard color selector will appear. You can select a color in one of three ways: pick a web-safe color or one from your selected color scheme from the drop-down list; enter the hex code for any color; or select a color from the wheel. Once you have done so, the color name or hex code will appear in the box. You will also see a red “X” to remove the background color.
You can also specify an explicit height for your page header. If you upload an image, the height of the image is used; you can adjust it lower to crop the image or higher to allow room for other elements.
(At the bottom of the page header panel is a drag handle that allows you to make the panel taller or shorter. When you do this, the explicit height box will show the new height.)
When you click Insert Text Box, you will see the following options:
A blank text box will appear in the top left corner of the page header.
Click inside the text box to drag it to the desired position. Click the drag handle in the lower right corner to make the text box bigger or smaller.
Then you can use the Text Tools to specify the actual text (including line breaks if necessary), the font in which it should be displayed (including any custom fonts added to your website), the size in pixels, the color, whether a shadow should be applied, whether the text box should be a link back to the home page, and whether a border should be displayed.
There is also a Class option to specify a custom style to be applied to this text. Custom styles are defined in the Custom CSS option of the Site Editor.
You can place as many text boxes as you want, in different positions and sizes. Each successive box will be placed “above” the previous one in “Z” axis order. Use the Move Forward and Move Back options to change the “Z” axis order for the selected text box.
Click Insert Image to insert an image into your page header. You will see the standard web graphics selector, which allows you to select an already uploaded image or upload a new one. The image will be placed in the header and can be dragged to the desired position.
Click the drag handle in the lower right corner to resize the image. By default, the aspect ratio is not maintained; X and Y dimensions will change at different rates depending on how you drag the handle. To maintain the aspect ratio, press and hold the [Shift] key on your keyboard as you drag the handle.
When you place an image, you will see the following options:
Specify Alt. Text for each image is to be displayed for users who have images turned off or for disabled users who access the website via a “reader” application. As with text boxes, you can also make the image a link to the Home page, display a border, or specify a class.
You can place as many images as you want, either tiled or overlapping. If images are saved with transparent sections, any image below (including the background image) will show through the transparent section. Images will appear “above” the background and intermingle in “Z” axis order with text elements. Use the Move Forward and Move Back options to change “Z” axis order.
Advanced Editor
For experienced website developers, the advanced content editor is also available. Click the Switch to Advanced Editor button to display the same editor that’s used in other parts of your website. If you have added text boxes or images using the Simple Editor, these will be displayed in the Advanced Editor and their HTML code can be further modified.
The Advanced Editor includes the full set of design and formatting tools, as well as HTML and Preview modes.
In both editors, click Save to save your changes and hide the Header Editor tools, or Cancel to return without saving. Remember that you are still in Preview mode so your changes are only visible to you. To make them permanent, click Apply, or click Revert to abandon your changes and revert to the original design before you started making changes.
Note that if you switch back and forth between the simple and advanced editors, making changes in both, we may not be able to display some changes correctly. The best approach is to decide in advance which editor to use and then to stick with this decision.
For Mobile Devices
Note that ClubExpress allows you to create a separate page header that is shown when someone accesses your website using a mobile device (such as a smartphone or tablet.) We strongly encourage you to create this separate page header, since the standard one will most likely not display optimally on a mobile device.