Scouting Tech: Building Your Unit Website with New Google Sites

This tutorial teaches Scouters how to develop a Unit website utilizing
New Google Sites.

A Scout is a lot of things, as we all know. They’re all 12 Points of the Scout Law and so much more; and if this year is any indication of our enduring Scout Spirit, then I’d say with confidence that a Scout is also both resilient and flexible. In fact, resiliency seems to be the theme of 2020. Each of us has found a way to stay engaged and involved despite the hurdles and hardships, and as we face down what promises to be a difficult and possibly detrimental recruiting season, it’s important to remember that a good Scout is always prepared.

I type that knowing many units are struggling to retain their leadership team, much less recruit brand new Scouts into the fold. Let’s all take a moment to look back at the Cub Scouting program and tell ourselves it’s time to do your best, not just sometimes but all the time, and that your best is different from anyone else’s best… and that’s okay.

Recruitment is always a wild time of year, and this one promises to be nothing less than a skill-building opportunity. To that end, I’d like to be as helpful as possible and offer up some guidance on creating a virtual representation of your unit that will attract new families and keep them informed and engaged throughout your very new, very different Scouting Year. A public website should be on your list of recruitment basics, and I want to show you how to do it as simply as possible.

Though our original Pack website was built using Classic Google Sites, I’ve since come to love New Google Sites and feel like it’s perfect for Scouting Units. New Google Sites utilizes the entire Google Suite of online programs, making it easy to drop documents, images, and even calendars into your site with very little effort. You can also use basic editing shortcuts like CTRL+V to paste, CTRL+Z to undo, etc. It also allows you to drag and drop sections from one place to another as opposed to deleting and re-creating content, which is a total dream!

To learn how to build your unit’s website using Classic Google Sites, make sure you navigate over to that post now!

Get A Pack Google E-mail Account

You’ll want to create a Google e-mail (Gmail) account for your Pack, even if you already have an existing email for communication purposes. You’ll use this account to login to Google Sites, and since it’s not your personal e-mail address, it can be passed on to the next leader to fill the webmaster role. Share the account information with your Committee Chairperson and Cubmaster!

Consider Your Basics

Make a list of what you consider to be the basics you want to share on your website. You’ll need to describe your Pack, focusing on the program you offer and how that sets you apart from other local Packs, and your meeting schedule. You’ll also need to provide a way for potential families to communicate with you, be that a Google Form or a simple paragraph providing your contact information. Do you want to link your social media accounts to your website? Maybe share newsletters or announcements? Think about what you would want to see on a Units website as a potential member.

Using that list of basics, create a simple wireframe of your site. A wireframe is essentially a blueprint of your site, a schematic or skeletal view of how information will be organized on your site jotted down on paper. Think of it like a flow chart of information! Remember that we’re supposed to Keep It Simple in Scouting.

If you open our Pack website at www.Pack521.com, you should be able to see how this wireframe ultimately became a website.

Create A Google Site

To create a Google Site, make sure you are logged into your unit’s Google account before navigating to Google Sites. The banner at the very top will have a section for creating a new site. You can choose one of the templates (clicking “Template Gallery ^ v” will expand that section and show additional options) or start with a blank site.

TEMPLATES are great for novice webmasters and provide you with a lot of pre-fab structure that will make for a beautiful Scout Unit website. You would simply replace the stock images with your own, drop in text, and have a site in a few short hours.

BLANK SITES are easy for everyone and ideal for those webmasters who really want to customize a great site. Even blank sites have layout themes, so you aren’t starting from scratch. For this post, I’m using a Blank Site.

>> A working copy of my template website can be found at https://sites.google.com/site/pack521va/ . I will refer to this often throughout this post.

Name Your Site

Your site will open and look remarkably, well, blank. To start customization, hover over the “Untitled Site” text and update it with your Unit’s information. For instance, my template site is entitled “Cub Scout Pack 521, Virginia”. This title will appear on the browser tab and Google search results, so make sure it’s meaningful but not too long.

Page Title and / or Header Graphic

The page you are currently seeing is, by default, your homepage. If you click the “Pages” tab on the far-right window, you’ll see that it’s even called home. You can hover over the three vertical dots next to “Home” to change the name of this page, but it will remain the first page of your website, where visitors will be directed if they find you in a search engine.

You can click the “Your page title” text to edit it. This is a great opportunity to welcome guests to your page from the word go. Something meaningful like “Welcome to Pack 521” is a great start! If you have a header graphic that you’d prefer to use, which includes text, you can delete the page title text block entirely and, instead, change the header type and upload an image from your device. I opted to remove the text and upload an image on my template site.

Google displays the center of your header graphic, and because it’s responsive, what you see will depend on the kind of device it’s being displayed on. Your header graphic will display differently on a smart phone versus a tablet or PC… and it will display differently on your PC if you have a full screen versus a split screen. That makes it tricky to customize your header graphic. You can save a copy and use this template on Google Drawing to design your header graphic. Note that the white area will likely not appear on your Google Site when you upload it to your template. Once you’ve completed your image, you can save it as a png and download it to your device. Return to your site and upload it by clicking on the “Change Image” > “Upload” button. You can also upload it to your Google Drive and navigate to it using the same “Change Image” button. Google Sites will automatically apply a filter that edits your image to make the text overlayed on it (like the navigational items we’ll add later), but this can be removed by hovering over the image and clicking the three stars on the bottom-right of the image to “Remove Readability Adjustment.”

If you’d like to go a step further and brand your header graphic with official Scouts BSA images and colors, you’ll want to open the BSA Brand Identity Guide and Brand Center.

Homepage Content

The basics of a good home page are:

• clear navigation
• announcements and reminders
• eye-catching imagery or videos
• a calendar

To add announcements and reminders, click the “Insert” tab on the right-hand navigational pane. There, you can choose a layout for your announcements. I chose the first layout option for my template site because it gave me space for announcements AND an image or video. From here, I selected the text block at the top to create a section title… for instance, “Pack Announcements.” In the secondary block, I formatted this as a bulleted list to help separate announcements, and used text formatting like bolding and italicizing. To edit the image, just click on the + icon to upload an image from your device or Drive, or embed a YouTube video, calendar, or map! How cool is that??

Announcement Banners appear at the top of your page and highlight a special event or call to action. This would be great for redirecting potential families to recruitment materials! To add an Announcement Banner, just click on the gray gear at the top right of your screen to open Settings. Select “Announcement Banner” to edit the message, add a link and format to suit your design!

Eye-catching imagery or videos are a great way to get attention, especially when they’re right at the top of your home page. Scouts BSA provides us with an awesome marketing center full of hundreds of beautiful downloadable, licensed images and videos. Everything from Cub Scouts catching fish to Venturing action shots. Bookmark the BSA Brand Center’s Marketing Library and keep that resource handy at all times. Don’t forget to check out the Brand Guidelines to make sure you’re using the right logo and colors. This BSA Digital Design System is my favorite of all helps these days – it’s ease of use makes it a trusted tool in my design arsenal.

My Pack synced up their ScoutBook calendar with their Google Calendar, and embedded that calendar on their Google Site. To learn how to sync your ScoutBook and Google Calendars, read my post entitled Scouting Tech: Syncing Your ScoutBook and Google Calendars.

To add this calendar to your Google Site, choose “Calendar” from the “Insert” tab on the right-hand navigational pane. Choose your calendar and “Insert” to confirm. You can easily drag your calendar to resize it however you’d like, and by clicking the gray gear icon that appears when your calendar is selected, you can customize its settings. By default, the View Mode is set to “Agenda,” but can be changed to “Month” or “Week” using the drop-down. Click “Done” to save your settings.

You can easily add a Footer by clicking the “+ Footer” button that appears when you hover over the bottom of your page. This is the perfect spot for posting a brief tagline and your email address and other quick contact information. When you type out a Gmail address, it will automatically create a hyperlink!

Changing Your Color Theme

By clicking on the “Themes” tab on the right-hand navigational pane, you’ll see a series of themes that will change the appearance of your site. By default, your suite is set to “Simple,” but can be changed to several other themes with a simple click. I chose “Level” for my template site and used the color-picker to choose my theme color. The blue Scouts BSA branded adventure banner at the bottom of my header graphic is the color #003a7a. If you use the same image as part of your header graphic, you can paste that value into the color-picker to match. I set the background of my Pack Announements section to match by hovering over that section and choosing the color pallet “Section Background” icon and choosing Emphasis 2. Play around with these settings to personalize your website to your liking!

Adding Google Drive Files and a “Filing Cabinet”

The Classic Google Sites include a Filing Cabinet page type that is no longer available in the New Google Sites. Having a place for visitors to find important documents is key, so let’s learn how to use Google Drive to get this done. Consider thoughtful file directories for items you want to share with visitors to your site. For instance, “Den Leader Documents” and “Parent Documents.” Create folders in your Google Drive to organize your files, then drop your files into those folders! It’s really as easy as that.

To share Google Drive Files with site visitors, you’ll first create a new page using the “Pages” tab on the right-hand navigational pane. Click the blue + at the bottom of your screen and name your new page. On my template site, I created a page for “Forms & Guides“, which I used to house documents that I’d uploaded to my Google Drive. The header graphic and theme you choose will move over to all new pages of your website, which saves you a lot of time. My Forms & Guides page was easy to create. I created a page title by clicking the “Insert” tab at the right-hand navigational pane and clicking “Text Box.” I resized and formatted it to suit my page, choosing Emphasis 1 from the “Section Background” settings for that section. Click “Drive” from the “Insert” tab and navigate to one or your folders… for instance, “Den Leader Documents,” as mentioned above. Click “Insert” and resize your window to suit your preferences. Repeat that process for all of the folders you want to include on your website. You’ll see that, by default, your folders are dropped in as List View by default. You can change this to Grid View to see previews of each file as opposed to the file name and details by clicking the gray gear Settings icon that appears when you hover over your embedded folder.

Adding Links to Social Media

To include your Facebook and Twitter pages on your website, click the “Pages” tab on your right-most navigation pane and hover over the + icon at the bottom of the page. An option to add a “New Link” appears. Name your new link something logical, like “Facebook” or “Twitter” and paste your link to those sites below. By default, the new link will open in a new tab, but if you’d like for it to open in the existing tab, you can un-check that box before clicking “Done.”

Sanity Check!

Still with me? Put ‘er there!

Get up – stretch – do a little dance – get some water – take care of yourself – rejoice, because you’ve got yourself a basic website! Let’s dig a little deeper.

Additional Page Ideas

For new families, learning about Scouting and getting to know the countless units in your area can be a daunting task. Make it easy for them by laying out Den Information, introducing your Leadership Team, and telling them About Your Pack or Troop.

I created a Den Information Google Doc that I saved to my Google Drive, then added to the Den Information page of my template site. I like that it can be printed from there as opposed to trying to print the entire page of the website.

Your Leadership Team is the heart of your organization, so consider introducing them to the public on your new site. Include photos (in uniform, of course) to let Scouts see who it is they’ll be learning from this year, and have each leader write out a brief bio that explains their connection to Scouting, their leadership role, and what they like to do outside of Scouting.

An About Us page is an invaluable tool for introducing your organization to the community. Show off your awards and special recognition (like your Journey To Excellence status), as well as links to your social media accounts, information about the schools you serve and your sponsoring organization, contact information, and your Scouting history! You can even include links to your Council and District sites as well as other resources that might be helpful to your site visitors, like Scout Shop information.

You can easily develop a Google Form to capture information from perspective Scouts, then drop it into your new Site using the “Insert” tab and selecting “Google Forms” from the available options. It will embed your form into your page and allow families to submit the forms to you directly from your site!

Be-A-Scout Online Unit Application

In the best interest of easing recruiting, add a link to your unit’s registration/application page through My.Scouting.org. If you aren’t sure what your link is, visit beascout.scouting.org and search for your unit. Right-click on the blue “Apply Now” button that appears under your unit listing and select “Copy Link Address.” On your Google Site, click the “Pages” tab hover over the + icon and choose “New link.” Paste your link into the appropriate field, then name your link something logical like “Apply Now!” Your new link will appear in your navigation.

Navigation Details

You’ll notice that, with every new page or link you create, your navigation menu updates automatically across all pages. By default, your navigation menu appears horizontally across the top right-hand side of your site. You can click the gray gear for that section’s Settings and select “Side” from the mode drop-down. This creates a vertical menu that is hidden on the left-hand side of your site and can be accessed by clicking the three lines that now appear next to your site title. On the “Pages” tab, you can drag your pages and links into the order you prefer, which will be reflected in your navigation menu.

You’re Ready To Publish

Your site is just about ready – all that’s left to do now is publish it! Google Sites makes this as simple as clicking a button. You’ll find a purple “Publish” button on the top right-hand side of your screen. When you click it for the very first time, a “Publish to the web” window will appear, which will allow you to make some minor tweaks before going live. A default web address will populate based on the name you gave your site. You can use what was provided or click inside of that text box and make changes. You can also manage who views your site. By default, any published site will be Public to anyone on the web, and should remain that way. You can also check a box to request that public search engines do NOT display your site – I caution against checking that box as it will limit who can find you online. Don’t forget to confirm that you would like to Publish your page.

A “Your site has been published successfully” message will pop-up from the bottom of your page! CONGRATULATIONS, GUYS! YOU HAVE A SITE! You can quickly view your published site by clicking the drop-down arrow next to the “Publish” button and selecting “View Published Site“.

Custom Website Domain

You can purchase a personalized domain and forward it to point to your new Google Site. For instance, our Google Site URL is https://sites.google.com/site/pack521va/. That’s a lot to remember and print on flyers and other promotional materails. But http://www.Pack521.com is shorter, logical, and easier for a busy mom or dad to remember.

We purchased the Pack521.com domain through GoDaddy. To do this, you’ll need to create an account, then visit their domain name search page and look for your desired domain. The search will let you know if it is available and give you pricing plan information for the .com extension as well as many other available extensions. We chose .com and registered it for two years for right around $30.00

Follow these directions on support.google.com for step-by-step instruction on setting your custom website domain to redirect to your new Google Site.

This step might also require a 24-hour or so stand up period where GoDaddy processes the new domain forwarding. By the next day you should be able to type your domain name into your browser address bar and it will forward to your Google Site like magic!

Okay, Now You Really Are Done!

This is a LOT to digest, but I hope that I’ve made it as straight forward as possible and saved you some first-timer missteps along the way. Do you have a Pack or Troop website? What provider did you use? Have you used Google Sites or Domain Forwarding through a vendor like GoDaddy? Share your website in the comments below!

Yours in Scouting,
Rebekah