Set up a website and open the Website builder

The Website builder lets you create a responsive public site using your Activity Messenger pages, forms, registrations, bookings, products, blog posts, and media. Start by choosing the site-wide defaults that will keep the website consistent, then continue to the visual builder.

# Before you start

Your organization must have the Website module enabled. You also need permission to edit the website. Organization managers can manage websites, domains, and access settings; website editors can open the builder and edit its content.

The Website builder is different from the legacy Microsite / Client Portal editor. Use the Website menu for the new builder.

# Open the setup screen

1. Open Website in the main navigation.
2. Select Manage websites if you need to choose between multiple sites.
3. Find the website you want to configure.
4. Select Setup, or select Editor and then Set up your Website if setup is not complete.

For a newly created website, Activity Messenger opens the setup screen automatically.

# Choose the website basics

Navigation

Choose the navigation that best matches the site:

• Top left nav places the logo and page links on the left and actions on the right.
• Top right nav places the logo on the left and groups page links and actions on the right.
• Centered top nav centers the brand and keeps compact actions on the right.
• Left side nav uses a persistent left rail for a more portal-like website.

You can change the navigation later under Site settings.

Subdomain

Enter the Activity Messenger subdomain visitors will use. For example, entering programs creates an address similar to programs.activitymessenger.com using the host shown on screen.

Choose the subdomain carefully. Changing it later releases the old subdomain and can break links, bookmarks, QR codes, and messages that use the old address.

Section spacing

Choose the default spacing between sections:

• Spaced separates sections clearly.
• Narrow uses a more compact gap.
• Wall to wall joins sections without an outer gap.

Individual pages can override the website default.

Language

The primary language is based on the organization's website language. Turn on Bilingual to create English and French content. Bilingual mode adds both language fields throughout the builder and can show a language switch in the header.

Active link style

Choose how the current page appears in navigation: Pill, Underline, or Bar.

Favicon

Optionally upload a PNG or ICO favicon. This image appears in the browser tab for this website. You can later remove the custom favicon and return to the default icon.

# Set typography and brand colors

Choose a Body font family for paragraphs and controls and a Display font family for headings.

If you select a custom font, enter the CSS font-family value. You may also provide an external font stylesheet URL, such as a trusted Google Fonts stylesheet. Confirm that you are allowed to load the external font and that it remains readable on mobile devices.

Under Website color swatches, add the colors your editors should reuse. These swatches become quick choices in website color pickers. You can keep up to 24 unique colors.

# Choose the default section style

Website defaults give new and existing sections a consistent starting point. Configure:

• title color;
• body text color;
• accent color;
• background color;
• heading size;
• body size;
• button shape;
• button hover effect; and
• card shadow strength.

These are defaults, not permanent locks. An editor can override supported values on an individual section. When a section uses the site default, changing the site default updates its appearance without editing that section again.

Use the on-screen preview to check the navigation, fonts, colors, button, and card style together.

# Continue to the builder

Select Continue to builder. Activity Messenger saves the website settings, turns on design mode, and opens the visual editor.

Once the builder opens:

1. add or edit the home-page sections;
2. create the other pages and navigation structure;
3. preview desktop, tablet, and mobile layouts;
4. complete both languages if the website is bilingual; and
5. publish each page when it is ready.

# Example

A community program website could use Top right nav, the subdomain programs, Spaced sections, bilingual mode, and a rounded button style. Its brand blue and accent orange can be saved as swatches. Editors can then create landing-page sections with those defaults and override only a special campaign section when needed.

# Important behaviour

• Setup choices can be changed later under Site settings.
• A website's primary language controls the source language used by Translate site.
• Turning on bilingual mode does not translate existing content automatically. Review and complete both languages.
• Section defaults apply only where the section has not set its own override.
• External font URLs contact another service when the site loads. Use only trusted, permitted sources.
• Changing a public subdomain can break existing links.

# Related articles

• Edit and publish with the Website builder
• Manage website pages, navigation, and SEO
• Design the website header, footer, and global styles
• Manage website domains, passwords, and multiple sites