Collective Website Style

Guide to Creating a Collective Style Website

The Collective Style website layout is modern and organised, offering sectioned content blocks ideal for structured storytelling. Here's how to build it step-by-step:

Step 1: Create a New Website

1. Go to the Websites section in your Hail account via the left-hand menu.
2. Click Create.

3. Type in a Web Address – this is your website's unique URL.

   ⚠️ Important: The web address is permanent and cannot be changed later. 💡 You can replace this with a custom domain once the site is published.

4. Choose your Website Style – select Collective from the dropdown.

5. Click Create to begin building your site.

   ✅ If you're editing an existing site, select it from your library and click Edit.

Step 2: Add a Hero Image

1. Under the Style section at the top, select Images.
2. Click + Add Image to upload or select a high-quality header image.

3. You can edit the title or description of the image by clicking on it.

   📸 Tip: This image anchors your site—choose one that’s bold and thematic.

Step 3: Set the Website Title

1. Enter your Website Title (e.g., “Wellbeing Portal in the image above”).
2. Toggle “Show Title” on/off based on your design preference.

Step 4: Write Your Welcome Message

1. In the Main Text Block, write your introduction or welcome statement.

   Use the formatting toolbar to add: headings, bold/Italic, lists, links etc

2. 📌 In Collective style, this text appears right beneath your title and hero image—keep it engaging but concise.

Step 5: Add a Noticeboard (Optional)

1. Scroll to the Noticeboard section.
2. Use the dropdown to select a Noticeboard block you’ve already created in Hail. 💡 Create a Noticeboard add your notices to it. Follow this guide to create a Noticeboard and notices.

Step 6: Add a Block

1. Scroll to the Blocks section.
2. Click on the dropdown list to select a Block you have already created here. This section is great for Icon Blocks, Promo Blocks - a good place to display important information your community might be looking for
3. You can also edit your existing Blocks by selecting the 'edit icon' next to the Block name.

Step 7: Add Articles

1. Under the Articles section, click + Add Article(s).
2. Choose up to 20 articles.
3. You can rename the Section Title (e.g. “Latest Stories”, “Our Blog”).

4. Set a Display Number (3, 6, 9) and customise the order (e.g. sorted by date or drag to a custom order).

   🖼️ These appear in visually engaging rows.

Step 8: Choose Publications

1. Click + Add Publication(s).
2. Select up to 20 publications to be shown in a horizontal carousel.
3. Customise the Section Title (e.g. “Newsletters”, “Recent Updates”).

• 🔄 Keep this updated—older publications won’t rotate automatically.

Step 6: Add a Block

1. Scroll to the Blocks section.
2. Click on the dropdown list to select a Block you have already created here. This section is great for Sponsors, image galleries.
3. You can also edit your existing Blocks by selecting the 'edit icon' next to the Block name.

Step 10: Add a Video (Optional)

1. Scroll to the Video section.
2. Upload or embed a video to add multimedia richness to your site. 🎥 Videos are great for showcasing events or welcome messages.

Step 11: Customise Website Settings

Located in the right-hand 'Website Settings' menu:

• Alert: Set urgent messages for site visitors. This appears on the top of the screen above your navigation.
• Website Logo: Upload your logo if you would like it to be different from your default logo.
• Translate: Enable to support multiple languages.
• Google Calendar: Toggle the calendar on or off. You can also add a Google calendar link if you have one that is different from your global settings.
• Facebook / Instagram Feed: Link social media here for the feed to appear on your website.
• Website Contacts: Add website contacts here to overwrite the default contacts you have listed in your global settings. If you are happy to display global contacts, toggle this option off.
• SEO Settings: Improve visibility on search engines.
• Custom Code: For advanced users to add custom HTML/CSS.

Step 12: Set Up Navigation (Quick-links)

1. At the very top of the page, click Navigation for this website.
2. Add, edit, or remove navigation links.

3. Toggle visibility for the top menu bar on/off.

   💡 For help setting up quick-links, visit the Navigation guide.

Step 13: Save and Preview

• Click the green Save button at the top right.

  🧠 Tip: Save your work frequently!

• Click Preview to see what your site will look like before going live.

✅ Quick Collective Style Tips:

• Clean and Structured: Emphasise layout, balance, and clear sectioning.
• Modular Content: Take advantage of block-based design to layer different types of content.
• Visual Hierarchy: Use bold headings, hero images, and spacious layout to guide the reader.