Page header customization
The top part of each webpage on your Wild Apricot website is called 'Page header' - it is common across all of your webpages.
When you open a new Wild Apricot account, the page header contains a placeholder logo and the name of your organization (you can change it in Settings / Organization details):
Also, depending on your selected theme (See 1. Website customization - themes), the Page header might contain a login box.
You can easily customize Page headers. Login into your account and go to Settings / Visual look and feel / Page header. Your initial view will be so-called 'basic mode' of customization:
In this mode you can:
- Easily change the text of the header (edit Title field)
- Upload your own logo (it will be automatically resized)
- Adjust header hight to a specified value. You can also use [Auto-fit] button to automatically fit the height of the header based on the current elements in the header.
- Change header background. We have created dozens of backgrounds you are free to choose from - or you can upload your own background picture.
- Recommended header backgrounds match your theme colors.
- Click on the logo or text in the header and drag it to any position you want!
For additional options, click on the advanced mode link:
Your toolbar will now give you all the additional options and tools - same ones as when you edit a webpage (See Editing web pages).
One important distinction between this screen and page editing screen is how the elements are positioned. In regular page editing, elements are positioned automatically, similar to how you write a document with Microsoft Word. In page header editing (advanced mode), you can put any element (text, picture, link etc.) in any place you want - this is called 'absolute positioning'. Start by clicking on any place in your page header. Your cursor will start blinking in that place. Start typing text - it will appear right there. Now you can select text, apply colors, styles, change font size etc:
To move this block of text around, click on it to select it, then click and drag on the four-way arrows handle:
You can insert and move around pictures in the same way.
Also, you can use alignment buttons to automatically align your currently selected object (text or picture) horizontally and vertically
Vertical alignment options:
Horizontal alignment options:
Finally, for the most advanced users there is an HTML button to access HTML code directly and there is also CSS customization, e.g. Sample 2. Customize header background
Examples of customized page headers from our clients:
