Getting Started with Websites

This is a quick start-up guide on Wild Apricot’s website module - for a general overview of Wild Apricot see Getting Started with Wild Apricot

Our aspiration is to provide powerful website management capabilities for people to build and manage their websites even if they do not have advanced knowledge of web technologies or web design expertise.With that in mind, Wild Apricot provides simple point and click tools and does not make you learn web programming or HTML coding. Wild Apricot also includes more advanced tools for professional web designers and adventurous learners - see CSS customization and Theme Overrides.

In technical terms, the Wild Apricot website module provides a hosted CMS (Content Management System). Instead of creating website pages manually on your desktop one by one and then uploading them to your webserver, Wild Apricot provides you with a way to do all of that directly online, in your browser - add and manage pages, customize website look and feel, tweak SEO settings and so on.

Website Customization Breakdown

You can think of web pages in Wild Apricot as being made of various layers/elements that can be accessed through appropriate tools. This approach helps to keep your web pages uniform instead of editing all the minute details of each page individually, which can easily lead to wildly different looks between site pages.

1. Website Background - The background of your website depends on your selected Theme , but you can also modify it via CSS
2. Page Header, Footer & Logo - to customize the common header of your pages (i.e,header background & logo). (And common footer is handled in the same way)
3. Pictures & Files - You can insert pictures and files using the Pictures and Document buttons
4. Page Layout - to change the columns and rows on a particular page see Layout options.
5. Text & Link Styles - you can change the appearance of your text (i.,e size, color, weight,etc) with Colors and Styles and CSS for more advanced users
6. Menu Items - the menu is generated automatically from the web pages you create on your site (see Page management)
7. Custom Themes - if you're an experienced website designer or developer Wild Apricot also allows you to customize your selected Theme, or even create your own themes from scratch - see Theme Overrides

Simple Checklist for Setting up a Website

We will assume that you have already opened an account - which comes with a free website address like yourname.wildapricot.org

Although there isn't one mandatory order to setting up your website, here's a sample checklist on how you can go about setting up your website:

• Explore website themes and select the one you like the most (aka design template) - see Themes
• Customize site Header and Footer (areas that appears at the top and bottom of all your pages - for example you can place your logo and organization name in your header.
• Fine-tune website look and feel if necessary using Color and Styles function
• Create Pages (initially you can just create empty placeholder pages and go back and edit them one by one), including interactive pages integrated with other Wild Apricot modules - and set appropriate permissions (Public, certain Members, only administrators)
• Edit and format Pages, add files and pictures
• Set up visitors/traffic tracking (e.g., Google Analytics)
• Optimize your Site for Search Engines (SEO)
• Set up your Wild Apricot website to use your own custom domain (e.g. www.mydomain.org)

Here is a visual illustration of the initial steps:

Adding and Managing Web pages

With Wild Apricot you don’t have to worry about file names for your pages (i.e, Home.html) or other technical details. Click on a button to add a page, (see How to add web pages) and simply give it the name for the website menu. You can always rename, move, or delete it via Page Management screen.
Since your website editor is built right into your actual website, their is no ‘uploading’ step to publish your changes (e.g., Dreamweaver, Frontpage, FTP). Instead you just click Save and your changes will be instantly published. (If you want to keep your page as a draft until it is finished, set its permissions as 'Admin only')

Editing Web Pages

Editing and formatting your webpage is very simple - just go to the page in question and click on the Edit button, You will see commonly used formatting tools (similar to Microsoft Word and other editing software) for your layout, text and tables, as well as Wild Apricot specific tools for inserting pictures, links and documents.
You can also extend your web pages by inserting 3rd party gadgets, for example insert a form, slideshow, video, poll - see Custom HTML ,Forms and Videos
For in-depth instructions on web page editing, see Editing web pages

Setting up Interactive database-driven web pages linked to other Wild Apricot modules

The most powerful aspect of your Wild Apricot website is that it is automatically integrated with all the other modules in your Wild Apricot account (e.g., Events, Members,etc) - so you can display content and integrate functions from those modules on your web pages.
For example, instead of keeping a manual list of upcoming events on your home page, you can add an Events Gadget which will automatically list upcoming events and link them to event details pages and online registration forms.

Here are some examples of interactive pages you can add to your Wild Apricot website with a few clicks:

• Event Calendars
• Membership Directories
• Membership Forms
• Subscription Forms (e.g. for newsletter signup)
• Donations Forms
• Forums
• Blogs with Comments
• Photo Galleries

Website Migration Checklist: moving your old website to a Wild Apricot website

Generally speaking you will need to take the various elements that make up your page and then recreate/copy them into Wild Apricot using appropriate functions. Here is a suggested checklist to follow:

• Pick the starting website theme which is the closest match to your desired design
• Analyze your old website to determine the common areas of your website (Header, Menu, Footer, any site-wide Javascript like Google Analytics) vs. the content on individual web pages
• Insert the contents of your header into the header area (see page header)
• Copy the contents of your footer into the footer section (seefooter)
• Copy javascript into Global Javascript if applicable
• Copy all the files (pictures/attachments) from your old site into Wild Apricot
• Recreate all of the pages in Wild Apricot (see page management)
• Copy the contents of individual pages from your old site to the new one. Review and polish the formatting as necessary. Adjust the links to pictures and attachments to use the copies on Wild Apricot
• Recreate interactive pages (e.g., Member Directories, Event Calendars, etc.) and set them up using the appropriate Wild Apricot module (i.e, events, members,etc)
• Polish the overall look and feel via Colors and Styles function or CSS customization
• Review all the pages
• Switch over your domain to point to the Wild Apricot website

Using your own Domain (aka Website Address or URL)

After having started your trial you may want to change the free website URL you were given to a different one or to a custom URL(aka domain) that you may own - see Custom Domains

Additional Resources

Website Traffic Tracking - for information on using Google Analytics or other traffic tracking solutions to your site: see Using Google Analytics with Wild Apricot
Website Search Engine Optimization (SEO) - for information on optimizing your site for search engines so new visitors can find your site better see: Search Engine Optimization (SEO) Tools - Page Title and Meta Tags