Hi, I’m Picky Apricot Steve Andrews and in this webinar, I’m going to show you how to set up and customize your Wild Apricot website.
How Wild Apricot web pages are structured
The overall look and feel of your Wild Apricot website is determined by your website theme.
To change the theme, select the Theme option under the Website menu. The themes are grouped into theme packs according to their layout and design.
Within the theme gallery, click the theme you want to use then click the Apply selected theme button.
After you apply the selected theme, you will be asked to confirm your selection. Then, you will be taken to a site page where selected theme can be previewed. From here, you can make the change permanent or revert back to your previous website theme.
When you switch to a different theme, permanent changes are made to your web pages. Switching back to the previous theme may not restore your site to its previous appearance.
Each page on your site is based on a particular page template. The page inherits its layout from the template, along with any content that's been added to the template. Typically, you'd have your page header and footer on a template so that they automatically appear on all pages that use the template.
To add or modify page templates, click Page Templates under the Website menu. You can set up multiple templates and use different templates for different pages. Here, we have one template for member-only pages, one with little content for landing pages, and one for regular site pages. Using page templates allows you to promote consistency between pages while providing flexibility.
You can create your own page templates or modify the existing ones. To modify a page template, you use the same approach as when designing site pages.
In this case, we will customize the standard template used as the basis for public site pages.
Any content you add to the template will automatically appear on all pages that are based on that template.
We're going to change the organization name, tag line, and logo by modifying the content gadget in which they appear.
Gadgets are used to display all content on your site, whether static content such as text or a picture, or dynamic content such as a site menu, a registration form, or a list of upcoming events.
To modify a content gadget, you click within the gadget. Along the top of the screen, the content editor toolbar appears. You can use the toolbar options to add or modify text, pictures, tables, and other custom content.
Here's we'll change the site name and modify the text attributes. Now we'll change the tag line.and make the text a little more interesting using ArtText. ArtText allows you to create fancy looking text with special effects like 3D and drop shadows.
Finally, we'll replace the logo. To modify or replace a picture, you hover over the picture then click its Settings icon. We can replace the logo with a picture that is already in our account or we can upload a new picture. You can set the size of the picture, choose whether you want a border, and decide where you want the picture to appear relative to the surrounding text.
Within the page template, placeholders define the areas where content can be added. You cannot add or remove placeholders, but you can adjust the settings of individual placeholders, including height and margins.
Page templates are based on theme-specific master layouts, which provide a broad outline of the page, along with graphical elements that define the theme.
After we save our changes, they will be automatically applied to all the page that use the template.
Adding a new page
To add or modify the pages that appear on your site, click Sites pages under the Website menu.
Here, we see a list of your site pages – those that appear in your site menu, and those that don't.
Let's go ahead and add a page. The settings for the new page appear along the left.
The page name you specify will appear as the menu option for this page. If we want the page to have an easy to remember address, we could enter a custom URL. Under Page template, you choose the template to be used as the basis for the page. We'll continue to use the standard template which we modified earlier.
You can use the Position settings to control the position of the page within the site menu. Using the Not in menu setting, you can exclude a page from your menu, like a landing page for example. Under Access level, you can restrict access to the page to certain membership levels or member groups, or to site administrators only. Here, we'll enable access for everyone.
To add content to the new page, you drag and drop gadgets onto the page. Gadgets are the building blocks of Wild Apricot pages. A large selection of gadgets is available. The gadget you'll be using the most often is the content gadget, used to add text, graphics, tables, and any other custom content you choose.
To enter text in a content gadget, you click within the gadget and start typing. Instead of formatting the text yourself, you can select text styles with predefined formatting.
If we wanted to subdivide a section of the page, we could add a layout. Layouts split content areas into cells where you can drag and drop different gadgets.
Here, we're going to add a two-column layout. After adding the layout, you can drag and drop gadgets into the layout cells. In the first column, we'll add a Facebook Like box gadget. In the second column, we'll add a gadget to display links to our profiles on different social networks.
You can, at any time, adjust the column widths of the layout simply by dragging. You can also control column width from the layout settings.
Other layout settings include the ability to set a background color or image, and specify the layout height.
Like layouts, gadgets have settings you can use to control its appearance and content. For some gadgets, you can choose a gadget style to display the gadget with a title bar and border.
For maximum flexibility, you can ignore the layout cells and drop a gadget above or below the layout, or above or below another gadget.
After we save the new page, it appears within the list of site pages under the Menu Pages heading.
Though we set the position of the page within its page settings, we can also control the order of pages within the menu from the Reorder pages screen. Here, you can drag and drop pages to the desired location within the menu and create multi-level menus by making a page a subpage of another page.
Modifying an existing page
To modify an existing page, you click on it within the Sites page list then click the Edit button.
On the Events page, we're going to add a column recognizing our sponsor. First, we'll add a two-column layout then move the existing events calendar gadget to the first column, and add a content gadget to the second column.
Within the content gadget, we'll add the sponsor's logo and name. To insert a picture within a content gadget,you click where you want the picture to appear then click the Image button within the toolbar. After selecting the image, we'll set the size.
Now, we'll add the sponsor's name and make the text and graphic appear centered within the column.
For more precise control over positioning within a content gadget, you can use layers. Layers allow you to position content anywhere you want and even overlap other content.
If you've formatted a chunk of text just the way you want, you can copy and paste the text style or text attributes to another chunk of text or to an entire paragraph. Depending on how the original chunk of text was formatted and how you select the text to be formatted, you can copy the style of the text or just its attributes.
You can turn a piece of text or a picture into a hyperlink by clicking the Insert Link option. You can link it to a web site, another page in your site, a section within the same page, or to an email address. Instead of a text link, you can insert a button that jumps to whatever page or website you choose.
Like layouts, content gadgets can have a background color or background image. You can also choose a gadget style to give the gadget a border and title bar, and enter the text to appear on the title bar.
If you know HTML, you can click the HTML button and edit the HTML of the content gadget. If all you want to do is embed a widget from another website or a YouTube video, you click the Snippet icon and enter the embed code.
To undo your last editing change, you click the Undo icon in the toolbar.
Each time you save a change to a page or a page template, a separate version is saved. You can view and restore the previous versions of any page or template.
Deleted pages can also be restored. Instead of deleting a page or template, you move it to the trash. From the trash, you can preview the deleted page or template, and restore it or empty the trash.
Now, let’s take a look at the website as it would appear to a visitor or a member. There are two ways you can do this. If you click the Public view option in the upper right corner, you’ll see the site as it would appear to a member at your membership level.
Here we have the new page we added, and multi-level menu we created.
To see the site as it would appear to a visitor – someone who is not logged in to the site – click Logout. You can then navigate the site as a visitor would, or log in as a member at a different membership level.
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.
Since the actual content of the event details page would vary depending on the event, a blue box appears in place of the details when editing the system page.
You can add gadgets to a system page. but you cannot modify or delete the system gadget – the gadget that performs the main function of the system page. You can, though, move the system gadget within the page.
You can customize the look and feel of your site by changing the Colors and Styles settings.
Here, you can change the colors and fonts of a number of elements that appear throughout your site, like the menu and login fields. For example, you can change the color of hyperlinks, or the point size of headings.
You can also specify a background color or image for your entire site, or just sections within your site. In this case, we’re going to change the color of H2 headings.
Once I make a change, it is reflected in the page preview on the right. The change won’t be applied to the actual site until I click on Save.
For experienced website designers, Wild Apricot provides two methods for advanced site customization: CSS customization, and theme overrides.
By customizing the CSS code, a web designer can tweak the appearance and behavior of the site. For example, you could insert code to remove the author's name from forum updates.
Using theme overrides, experienced web developers can customize existing Wild Apricot themes or create new ones. Theme overrides involves replacing or overriding theme files – the files that control the appearance of your current theme.
After activating theme overrides, you download a copy of the theme files, modify them, and upload your changes. Once you rebuild the theme, your customizations take effect.
Another way to customize your site is to customize your domain name. You can change the first part of your free Wild Apricot domain name or pay a site registrar to set up a custom domain name to be used in place of wildapricot.org. A custom domain name requires some setup both within Wild Apricot and with your registrar. You can use a custom domain name only if you have a paid Wild Apricot account.
You can provide secure access to your website using traffic encryption. Traffic encryption is available for all Wild Apricot domains (sites that use wildapricot.org). You can make secure access optional, or you can choose to automatically redirect visitors to a secure URL. You can redirect visitors always, or just when filling out Wild Apricot forms. Online payments on Wild Apricot will always be encrypted.
We’ve seen how easily you can set up web pages in Wild Apricot, and touched on some of the ways you can customize your Wild Apricot site. For more information, see Wild Apricot’s online help or contact our support department.
Thank you for listening. I hope this was helpful.