Designing site pages
You can design your site pages to display dynamic content from your Wild Apricot database, or custom content that you add directly using the content editor. You can add custom HTML to embed external content or third-party widgets. You can set up your pages so that all pages share certain content and a similar appearance, or you can make each page completely different. Content and layout can be automatically inherited by all pages, or just the pages you choose.
For instructions on adding pages and modifying page settings, see Managing site pages.
How pages are assembled
The foundation of each site page is the page template on which it is based. A page derives its layout from the template, and inherits any content that appears on the template. You can, for example, set up your page header and footer in a template so that it is automatically included on every page that uses the template. Each template, in turn, is based on a particular master layout which provides shared graphical elements and defines the areas – called placeholders – where content can be added.
You can set up multiple templates, each with its own layout and shared content. Each page can be based on a different template, and multiple pages can share the same template.
Within both the page and page template, you can divide the page into sections and subsections using layouts. Layouts divide content areas into cells where you can drag and drop gadgets. All content added to a page or page template is inserted as a gadget.
The physical appearance of each page is also affected by the currently selected website theme which determines the overall look of your site. Among other things, the theme you choose controls your site's default site background and color theme, the available text styles, and the orientation of your site menu.
For experienced website designers and developers, Wild Apricot provides additional tools for advanced customization and fine-tuning of your Wild Apricot site pages.
Entering edit mode
To begin modifying a page, follow these steps:
- Click Site pages under the Website menu.
- Click the page you want to modify within the page list.
- Click the Edit button.
Alternatively, you could hover over the page you want to modify then hover over its info icon and click the Edit option.
Once in edit mode, you can add, remove, and modify the gadgets appearing on the page. All content, whether dynamic content drawn from your Wild Apricot database or custom content you add yourself, is added as gadgets. Gadgets can be placed into, above, or below layouts. For content gadgets, you can directly modify the content using the content editor. For all gadgets, you can control aspects of its appearance and behavior by adjusting the gadget settings and other related settings.
A functional preview of the page you are modifying appears in the preview area on the right.
When you are finished modifying the page and its contents, click Save to save your changes. Your changes will be reflected in the preview version of the page.
Controlling page layout
Though the overall layout of a page is inherited from its page template – along with any content appearing on the template – you can further refine the page layout by adding layouts. Using layouts, you can divide the sections of a page or page template into multiple rows and columns. Cells within each layout act as containers where content in the form of gadgets can be added.
While editing a page or page template, you can add a layout by clicking the Layouts icon to display the list of available layouts. Within the list, you drag the layout you want to insert from the list, and drop it on the desired location.
Within a page, you can insert layouts before or after layouts inherited from the page template...
...or directly into a placeholder if no layouts were added to the placeholder in the page template.
When you begin dragging a layout, possible destinations for the layout appear in blue. When you drag a layout above or below an existing layout, a prompt will appear indicating where you can drop the layout, either after or before the existing layout.
Within a page template, you can insert one or more layouts into a placeholder, but not before or after one. When a placeholder is empty, a Drop gadget or layout here prompt will be displayed. When you drag a layout over an empty placeholder, the placeholder turns green, indicating that you can drop the gadget into the placeholder.
For more information, see Layouts.
Adding page content using gadgets
Designing site pages – or page templates – involves adding and modifying gadgets. Gadgets can be used to display both custom content and dynamic content. Dynamic content displays information from your Wild Apricot's database (or an external database), or a form you can use to update information in your Wild Apricot database. Custom content is content you add using the content editor. Custom content includes text, pictures, tables, links, and custom HTML, and can be added to a content gadget or directly to an email, email template, or event description.
Each page can combine multiple layouts and gadgets, though certain gadgets – known as singular gadgets – cannot be added to a page containing another singular gadget, or to a page template or system page.
Once you have opened a page for editing, you can add a gadget by clicking the Gadgets icon to display the list of available gadgets. Within the list, you drag the gadget you want to insert from the list, and drop it on the desired location.
Gadgets can be inserted a number of locations, including:
- into a cell within a layout, either within the page or within the page template used by the page
- above or below a layout
- above or below another gadget
- into a placeholder within the page or page template
When a layout section or placeholder is empty, a Drop gadget or layout here prompt will be displayed. When you begin dragging a gadget, possible destinations for the gadget appear blue. When you drag a gadget over an empty layout section or placeholder, it turns green, indicating that you can drop the gadget there.
When you drag a gadget above or below a layout or another gadget, a prompt will appear indicating that you can drop the gadget before or after the layout.
For more information, see Gadgets.
Controlling the content of individual gadgets
For gadgets displaying dynamic content – such as a blog or event calendar – the content is automatically retrieved and displayed. For example, the information displayed by a member directory gadget is extracted from your Wild Apricot database and displayed subject to any restrictions you have set.
The appearance and behavior of the gadget can be controlled using the gadget's settings – or other related settings – but the actual content of the gadget is automatically rendered.
For content gadgets – displaying static rather than dynamic content – you add content to the gadget using the content editor. Once you have opened the content gadget for editing, you can add or modify text, picture, tables, links, and other content.
In some cases, the content of a dynamic gadget can be affected by settings other than the gadget settings. For example, whether events appear on an event calendar gadget depend on the event detail settings for each event. Where a dynamic gadget displays a form – such as a membership application gadget – the fields that appear on the form will be drawn from the fields in your Wild Apricot database. You can customize the content of these forms by adding, removing, and modifying the fields in your Wild Apricot database.
Dynamic gadgets can also be affected by the settings of other related gadgets. For example, the forum categories that are used to group multiple forums within a forum summary gadget are set within the forum gadget's settings.
For some gadgets, the visibility of the data being displayed can be restricted to certain types of members. For all gadgets, access to the page on which the gadget appears can be controlled using the page settings.
Each page, placeholder, layout, and gadget has settings that you can adjust. Using these settings, you can control that element's behavior or appearance. For example, the settings for a member directory gadget determine which member fields and records are displayed, and in what order.
When you first add a new page, layout, or gadget – or begin editing a page – the settings for that element appears in a panel along the left side of the screen.
To display the settings for another layout or gadget on the same page, position your pointer over the gadget or layout, then click the settings icon.
To display the page settings again, click the Page icon towards the top of the screen.
To maximize the page design area, you can hide the settings panel. To hide the settings panel, click the left chevron at the top of the panel.
To show the hidden panel, click the right chevron.
Previewing site pages
In most cases, the changes you make to gadgets, layouts, and page settings are automatically reflected in the preview version of the page. This allows you to assess your changes before saving them. However, some gadgets – such as the sharing buttons gadget and the Facebook Like box gadget – cannot be previewed in edit mode because they use code from third-party sources. To view the modified gadget as it will appear on your site page, you must first save your changes.
When previewing a site page in edit mode, the content will appear as it would to an administrator with your membership level. To view your site from the perspective of a visitor who is not logged in as a member or contact, simply log out of your account from either admin view or public view. For more information, see Switching between admin and public views.
Modifying system pages
You can also customize the system pages that perform routine functions such as authentication and event registration. For example, you can customize the event details page with side columns or gadgets such as the upcoming events gadget.