Recommended Process:

1. From the top gray bar, click on New > Page
2. On the next screen give the page a title. If the page will be a sub-page, in the right side column go to the title "Parent Page". In the input field start typing the name of the parent page and a list will pop up for you to select the page. Selecting a parent page will mean that the URL path will be https://yourdomain.org/parent-page/name-of-page
3. Click on the blue button that says "Launch Blackbaud Builder" under the title of the page.
4. Once in the builder, click the plus button in the upper right corner. Go to the Templates tab.
5. Click on a template to apply to the page as a starting point. If you want to see what a template looks like, hover over the template name and click on the wrench icon. It will open the template in a new page for you to view and edit if needed). If you're not sure which template to apply, at least apply either "Internal Page Starting Point - No Image" or "Internal Page with Hero Image".
6. Now go to the Saved tab (next to the Templates tab) and look to see if there are any saved rows or modules that will get you close to what you'd like to put on the page. You can always click them and drag them onto the page to see what they look like and then delete them.
7. From there, begin editing the page. If you need new rows and modules, click the plus button and click and drag the rows and modules you need onto the page.
8. Save or Publish occasionally to save your progress by clicking the blue Done button.
9. If you ever need to undo changes you've made, go to the top left menu and click on History.
10. Once the page is pretty much done, go to the top left menu and choose "Responsive Editing". Check the site at each of the responsive sizes by clicking on the icons at the top. Things to look for:
    • Do any columns widths need to be adjusted to look better? (often the case on tablet view) If so, go to Column settings and adjust the width.
    • Do any fonts look too big or small? If so, edit the module and change the typography.
    • Do I want to hide/reveal anything on mobile? If so, edit the row or module, go to the Advanced tab, choose the sizes you want the content to display with the dropdown menu next to "Break Point". 
11. Publish the page when done

To save you time and keep the design consistent, please use Templates and items in the Saved tab.

If you create a page that you think would make a good template, go to the upper left menu and click on "Save Template."

If you create a row, column, or module that you think could be a good starting point to use on another page, click the wrench to edit, then click the "Save As" button. Give it a name and decide if it should be global or not.

Global or not global?

Global means the element will be the same across the entire site. So if you save a row as global you can place it on multiple pages throughout the site and when you edit that row, those changes will be applied to every instance of that row throughout the site.

Not global means you are really just saving the set up and style of that element to save you time and keep things consistent. You can save a button, place it on another page and not have to worry about editing the styling, but you can update the text and link and it will not effect other instances of that button.

Editing an Existing Template or Saved Element

Hover over the item and click on the wrench icon. This will open the template or row or module in a new tab for you to edit. 

Note: Editing a template does not affect pages that used that template as a starting point in the past. Templates are just starting points to save time and are different then templates in other content management systems. 

General Size Information:

All images should be 72dpi. Exact width and heights are not needed, but aim for between 800-1600px wide to avoid images looking pixelated. DO NOT USE THE LARGEST IMAGE SIZE POSSIBLE. This will make your page load slowly. Use can use a free tool like https://tinypng.com/ to resize images. Images ARE compressed upon upload, but uploading a photo straight from a camera/phone that is over 1MB will still slow down your site.

Post Featured Images:

These images are set to be cropped to landscape (6:4). You do not need to crop images outside the system because it will crop them for you, but if you do not like the auto-cropping, you may need to crop outside of WordPress. In that case, crop to 1200px x 800px.

Accessibility:

DO NOT PUT TEXT IN IMAGES. Yes, even for events. Don't do it. The information about the event will already be on the page in real text, so just choose a nice image to go along with it, not a graphic full of text.

Every image needs ALT text. You can add this in the right column of the image options when you upload an image. You can also add alt text from the Media Library by clicking on the image and adding it in the right column. 

Tips:

Use the Image module whenever possible. Don't just put images inside the Text Editor module. The image module gives you much more control over cropping, size, and styling.

There are default typography settings in place that we recommend you do not change unless you have a good reason. Reasons to edit typography could be:

• Needing to change the font size to avoid awkward line break
• Needing to make something bold to make it stand out from other things. (The default for headlines is NOT bold)
• An event or campaign that requires a different font

Defaults:

All text is set to be dark blue-gray - #2d3349

Pagraph Text:

Paragraph font is Brother 1816. Font size is set to 20 or 21. 

Headings:

All headings are Barlow Condensed. H1 and H2 should be left at normal weight. H3 is commonly set to be bold. H4-H6 can be bold if needed.

H1 is set to 85px on Desktop.

H2 is set to 58px on Desktop.

H3 is set to 40px on Desktop. H3 can be set to bold.

H4 is set to 32px on Desktop.

H5 is set to 26px on Desktop.

H6 is set to 20px on Desktop.

Only colors in the ALS style guide and on als.org are included in your color choices. If you have a need for a new color, please reach out to Blackbaud for it to be added.

Do not change text or headline colors unless there is a VERY good reason.

Approved background colors for rows are white, very light gray, the turquoise blue commonly used for buttons and call to action rows, and navy blue. Red should not be used for large, full backgrounds and instead be used for smaller elements.

See notes about Accessibility for advice on choosing colors.

There are several things you can control in regard to accessibility:

1. Make sure every image has alternative text.
   You can do this in bulk by going to the Media Libary, clicking on an image, adding alt text in the right sidebar, then clicking the arrows in the upper right corner to go to the next image. 
2. Make sure text colors and backgrounds have enough contrast.
   There is a minimum ratio of contrast that text must have in order to pass ADA compliance. You can check contrast using this online tool: https://webaim.org/resources/contrastchecker/ 
   For example, the main blue found in the ALS style guide (#159FDA) with white text or vice versa, does not pass the contrast ratio. The blue that als.org and we are using for links and buttons (#007a93) does pass the contrast ratio.
3. Don't put text in images.
   All text should be real text that can be read by screen readers, not hidden in images. You CAN place real text over a background image using the page builder tools, you just have to make sure there is enough contrast between the text and background to be legible.

On each page in your site, click on "Edit Page" from the top gray bar or go to Pages from the Dashboard menu, hover over the page and click the "Edit" link.

The Edit Page screen contains the site title as well as the SEO options. By default, the SEO title is Page Title | Site Title and it tries to pick up the first bit of text on the page as the description. THIS IS NOT ALWAYS WANT YOU WANT.

1. Add a more custom SEO page title.
   For example what was "What We Do | The ALS Association ## Chapter", could be rewritten as "What The ALS ## Chapter Does to Help People with ALS."  Notice I dropped the "Association" - this is to save characters as titles can only be 60 characters. Having a title that catches the attention of someone searching should be the focus - not making sure each one is consistent and always has the full written-out name. Google actually prefers to see unique titles and not the same format with the site name over and over.
2. Add a custom description.
   Rarely is the first bit of text it auto finds just right. Continuing to use the What We Do page as an example, the default it picks up is "The ALS Association symbolizes the hopes of people everywhere that Amyotrophic Lateral Sclerosis will one day be a disease of the past, conquered by the dedication of thousands who have worked cea…" 
   What would be better is something like "We provide care services for people with ALS living in *Location*. We also advocate for and fund ALS research to find better treatments and a cure." Be sure to drop in your location when you can - this will help you stand out from als.org and all the other chapters.
3. Add a Focus Keyphrase.
   Add the primary focus that you're writing about. Think about what search string might make people arrive at this page for inspiration. More info about keyphrases can be found here: https://aioseo.com/docs/using-the-focus-keyphrase-to-analyze-your-content/?utm_source=WordPress&utm_campaign=proplugin&utm_medium=documentation&utm_content=useKeyphrasesTooltip

Make sure to Publish your changes when you're done editing the page.