Hello! In this lesson, we’re going to have some fun with Campaign Site design themes.
Your site’s theme is where you can incorporate your organization’s brand and personality to make your site truly special and will make a significant difference in your site's user experience.
In the top bar of your site editor, you can access your site’s universal theme, Giving Form, and Settings. For this lesson, we’ll cover themes, so let's click to open our theme menu and
When you make changes to your theme settings, you’ll see changes applied immediately in your editor preview—talk about helpful!
Okay, so what is a heading, and what is body text? Let’s jump back into the editor to learn more….
In almost all areas where we enter text on our page, we can configure the text hierarchy, but for now, we just need to know that text assigned to a Headline will use your headline font, while non-headline text (normal paragraph text) and your buttons will use your theme’s body font.
We can go on for hours about our suggestions for using fonts to bring your campaign to life, but I’ll just leave you with a quick thought… fonts are your tone of voice—it’s the way you’re speaking to your viewers. Make sure your site’s fonts speak in a trustworthy and brand-consistent tone of voice.
Okay, let’s jump back into our theme editor and learn about our site’s color palette…
Your color palette is very powerful. This is where you can set your primary brand colors which can be applied to your page sections in dynamic variations.
To start, we’ll just need to configure three color settings…
As a quick nerdy distraction… Funraise's brand doesn’t ever use pure black. Our darkest color, used for text on white, is actually a deep blue. Subtle details are what brand trust is built on. If you have a designer on your team who can configure these details, it will have a significant impact on your site’s experience—that's why Funraise provides this level of design control.
If you don't want to get stuck in color theory, we recommend keeping your dark color as pure black and your light color as white. And of course, your accent color should match your brand’s primary color, which should be a strong bold color that can pop on a light or dark background.
With these three colors in place, we can build engaging and dynamic page sections.
There’s more we can do with themes, but before we jump into custom theme variations, let’s jump back into the editor to understand how our color palette will be used.
Pages are built with sections. Each section can be assigned a theme variation. The theme variation for a section is accessed by clicking the palette icon for the section. So for example, a header section can be assigned a theme variation that presents dark text on a light background and several button options.
If we toggle through the theme variations, we will see the section's colors change. THIS is how themes work. This simple feature enables you to build engaging pages that effectively highlight important content.
But wait, there’s more… If we click into a content block for this section, we can further customize our themes. To add a color theme to a content block, you’ll first need to raise the surface, and then select a theme variation that pops.
Okay, there’s much more where that came from, but now that we have a good understanding of how our site’s color themes can be used to build engaging page sections…. let’s jump back into our theme settings to learn more.
As we just learned, your theme comes with three variations that can be assigned to specific page sections or content blocks.
These variations are prebuilt based on your customized color palette, and in most cases, we recommend only adjusting the theme variations when needed. But it’s a powerful set of configurations if you’re feeling fancy.
Let’s jump into our first theme. Inside the theme, we can configure color settings for specific page elements, including the section background and text colors.
We can also configure the specific colors for our primary and secondary buttons. It’s good to know that this is where you can configure a button’s shape and style as well; for example, we might want to round the corners of our buttons.
But wait, what is a primary and secondary button? Great question… let’s jump back into the editor to see buttons in action.
In areas where buttons can be placed, you’ll have the option to add two buttons. This is helpful if you need one button to open a donation form and another button to open a ticketing form.
To add a button to the content block, you can click the content block edit button and configure the button visibility. Here we can see that two buttons are possible. Let’s toggle on the visibility for the second button.
It’s good to know that you can also configure the button alignment from this tab as well.
If we edit our second button, we can select the style and change it from primary to secondary—and edit the text for this button. Now we have a clearly unique secondary action. This is how you can use the primary and secondary buttons for a theme variation.
Alrighty! Now you know all about Campaign Site theme settings. See you soon!
