Transcript
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.
Editing web pages is easy with Wild Apricot. You don’t need to do any coding, and you don’t need experience designing websites. But if you do have advanced web design skills, you can edit the HTML code directly, and tweak the CSS, JavaScript, and overall site design.
The traditional web design process involves installing web design software on your desktop computer, building your website, then uploading files to a server through FTP or some other mechanism. With Wild Apricot, there’s no software to download, no files to upload. Everything is done directly through your web browser, whether it’s Firefox, Google Chrome, Internet Explorer or Safari, on Windows or on a Mac.
Let’s start by taking a look at how the web pages are structured on Wild Apricot sites. Each page consists of a header, a footer, a menu, and a content area. Typically, you’d use the same header and footer on all your pages, so you just have to set them up once and not worry about them again. The menu is generated automatically using whatever pages you add to your website. So really the main thing that you have to worry about is the content area. This is where you would add your text, your pictures, links, etc. As well, you can easily change the layout of each page without any coding.
So let’s dive in and begin customizing a site. We begin by going to our Wild Apricot site and logging in as an Administrator.
To view or edit the web pages on your Wild Apricot site, click the Web Pages tab along the top.
You now see a working version of your Wild Apricot site. You can click the menu options to jump from one page to another.
The overall look of your site depends on which theme you choose. To change the theme, click Site look and feel under the Web pages tab, then click Theme. Wild Apricot provides a number of professionally designed themes in a variety of styles and colors. The themes are grouped into theme packs according to their layout and design. Feel free to experiment with the themes until you find the one you like. You can always switch back without losing any other changes you have made to the site. Let’s choose a different theme to show how it changes the look and layout of the site. Once I click Finish, the site is immediately updated.
Now, let’s customize the header and footer. Under Site look and feel, click on Page Header.
You can control the height of the header and choose a background image for the header.
You can add text or pictures to the header, and control the format of the text using the toolbar options that appear at the top. Updating the page footer works in the same way.
If your organization has its own logo, you can add the logo to the page header. It will appear on top of the header background. To add a logo, click Logo under Site look and feel then choose the graphic file containing your logo.
To edit any web page on your website display it within Web pages then click the Edit button towards the top of the page to enter edit mode. Now that you’re in edit mode, a toolbar appears at the top. Using the toolbar options, you can format text, insert pictures, tables, links, and macros, and change the page layout, among other things.
To add text, you click where you want the text to appear and start typing. To remove existing text, select it and press Delete on your keyboard to remove it or start typing to overwrite it. You can format the text using the buttons on the toolbar.
Instead of changing the appearance of text one piece at a time, you can apply predefined text styles. For fancy looking headings with special effects like 3D and drop shadows, you can apply ArtText styles.
To insert a picture, click where you want the picture to appear then click the Picture button in the toolbar. You can choose a picture that is already in your account or upload a new picture from your computer or network. You can insert JPG, PNG, or GIF files.
You can set the size of the picture on the page, choose whether you want a border, and where the picture appears relative to the surrounding text. Choosing an image size does not resize the original image. It just determines how the picture appears on the page. Regardless of the size option you choose, the larger the picture you insert, the longer your web page will take to load. For optimal loading speed, keep pictures smaller than 1000 pixels wide or high.
You can also add gadgets to your page. Gadgets are used to display information appearing on other pages in your site. The list of recent blog entries is an example of a gadget. And now, we'll add another -- a clickable list of recent forum posts. Other gadgets include a list of upcoming events and a donation goal meter.
To change the page layout, click the Layouts button and select a different layout. Layouts divide the page into independent sections.
Within each section, you can insert invisible tables -- tables with no borders -- to create advanced page layouts. To insert a table, click the Table button in the toolbar then click Create Table. You specify the number of rows and columns you want, choose a background color, and set the border width and color. After inserting the table, you click inside the cells and start adding your content. To turn the borders of invisible tables on or off, click the Outline Tables button.
By clicking the Link button, you can insert links -- to a web site, another page in your site, a section within the same page, or to an email address. You can also insert links to documents like PDF files, Word documents, or PowerPoint presentations by clicking the Document button.
If you know HTML, you can click the HTML button and control the content and appearance of the entire page using HTML code.
You can, at any time, click the Undo icon in the toolbar to undo your last editing change.
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.
Once you save your changes, they will be immediately applied to your website. After saving your changes, you can revert to the previously saved version of the page by clicking the Undo button
Adding and removing pages
So far, we’ve looked at editing an existing page, and updating the overall look and feel of the site. Now, I want to show you how to add and remove pages.
To manage pages on your site, click Page Management under the Web pages tab. Here, we have a list of all the pages on your site, and the settings for each page. The settings are represented by icons, and the meaning of the icons is explained in the legend in the upper right corner.
The first column of page setting icons indicates the page type. There are two types of web pages: content and functional. Content pages simply display content, including text, pictures, links, etc., and are represented by the C icon. Functional pages perform a specific function such as blogs, forums, event registration, and membership registration, and are represented by the F icon.
Beside the page type icons are the access icons. These indicate the type of users who can view the page. A globe icon indicates that anyone can view the page, while the members icon indicates that access is restricted to certain membership levels or selected member groups. A page with a red X can only be accessed by a site administrator.
So, your site can display different sets of pages depending on whether the visitor is a member or not, and what their membership level is.
Let’s demonstrate by adding a page. We're going to add a Email Subscription page. This page allows people to sign up to receive emails from your organization. We’ll click the Add New Page button and then we’ll choose a name for this page. Let’s call it Subscribe. If we want the page to have an easy to remember address, we could enter "subscribe" as the custom URL.
We now choose whether it’s a content page or a functional page. If it’s a content page, we have a lot of different options for the layout of the page. You can have multiple columns of different widths, heights, and orientations. In this case, we're going to create a functional page.
Under Access, we’re going to set it to Anybody. You might want to leave new pages as Admin only so you can finish setting the page up before it goes live.
To restrict the page to members only, or to certain membership levels, you need to create a functional page with the Restricted Access Section type, if there isn’t one already. For the Restricted Access Section page, you choose who you want to restrict access to. Then you move the pages you want to restrict under the Restricted Access Section page. In this way, the pages become subpages or children of the restricted access section page and automatically inherit its access restrictions
To change the order of the pages in your site menu, just drag and drop them to new locations within Page Management.
To remove a page, click it within the list then click Delete. When you are done making changes, click Save all changes.
To add content from your Wild Apricot site to other non-Wild Apricot websites, you can embed a Wild Apricot widget by copying the embed code and pasting it into the other site's HTML.
Now, let’s take a look at the website now as it would appear to a visitor or a member. There are two ways you can do this. If you click the To public view option in the upper right corner, you’ll see the site as it would appear to a member at your membership level.
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.
Let’s take a look at some of the other functional pages that you can have. This is what an events page might look like. Here is a Membership Application page. Here is the subscription page we added. And here we have the members only section with the Forum page.
So let’s just flip back now to admin view and let’s take a look at some slightly more advanced customizations you can make to your web pages.
Back under Site look and feel, click Colors and Styles. Here, you can change the colors and fonts of a number of elements that appear throughout your site, like the menu, login fields, header and footer, etc.. For example, you can change the color of hyperlinks, or the point size of headings. In this case, we’re going to change the color of the menu options. Once I select a different color, the change appears 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 and developers, Wild Apricot provides two 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. In this case, we're going to add code to change the background image for the site.
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.
Here, we're going to use theme overrides to change the Login link to a set of login boxes.
After activating theme overrides, you download a copy of the theme files, modify them, and upload your changes to change the behavior of the theme. Once you rebuild the theme, your customizations take effect.
You also have the ability to add JavaScript to your website. Using JavaScript, you can provide customized functionality to your entire site. You could, for example, add code from Google Analytics to track website traffic.
You can set the meta tags for your site. Meta-tags are tags identifying and describing your website, and are important in getting your website recognized and ranked by search engines.
In the Raw Headers box, you enter HTML code to be inserted on every page in the <head> tag. You can insert code to redirect a page, insert widgets for social media sites such as Facebook, or add a favorites icon – also known as a favicon, shortcut icon, or website icon – to the page tab and address bar for your site.
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 only use a custom domain name 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. You can find links to help and support in admin view in the upper right corner of the screen.
Thank you for listening. I hope this was helpful.