Section Design Settings: Colors
Designing your webpages begins with designing each individual section that creates the page. You can choose to make all sections on a page look and feel cohesive, or you can shake things up to bring attention to any particular section.
There are several design elements to consider. This guide will cover the color options you can use to meld your section with the rest of your page, or give your section a bit of pizazz 🎨
Don't want to read through the entire guide? Skip ahead to any one of these topics:
Pre-determined Color Palettes
Depending on your church's brand guide, along with how you want your overall page to be experienced, you might want to adjust a particular section's colors. Changing a section's colors can help make that particular section stand out amongst the rest of the sections on your page. It can also help visually break up the information presented on your page, to help with readability and allow people to scan through your page easier.
To adjust a section's colors, while editing a section, click Change Colors near the top.
Here, you will see 4 different palettes to choose from. While you won't be able to truly see what each color palette will look like until you view the preview url for your page, each palette will give you an excellent preview of what to expect in terms of background, text, and button colors.
As stated above, any changes here will not be visible in the section editor itself. To see what your changes will look like on your website, click the Close button at the bottom, or click the X button in the top right corner. Then click Preview in the top right corner.
This will open a new tab in your browser to preview the entire page you're working on. Because Nucleus autosaves your work, now any time that you make changes in the editor, the preview page that's open in the new tab will continually refresh automatically as well.
Note: While you cannot customize every color aspect of an individual section, you can customize the section's background to branch out from your overall web colors determined in your web design settings (see below). To do this, simply click Adjust Background while editing a section. For a more in-depth guide on customizing a section's background, click here.
Web Color Design Settings
You might be wondering, if there are only 4 color options offered for each section you build, where is Nucleus pulling the information from to present these palettes?
In order to make web building simpler and to ensure that, no matter what page you create (or who is in charge of managing individual pages), every page will match your overall brand colors and design settings.
To manage your overall web colors, you will need to go to Web > Design > Colors. Click here for a quick link.
Note: You will need the correct Web Admin permissions in order to access this. If you do not have permission to access this page, please reach out to your Account Owner to request access.
Here, you will be able to start by choosing a standard color palette.
Once you've selected a color palette, you can begin customizing it. (You can even save your own custom color palette!)
There are 8 different types colors to adjust. Nucleus will take all 8 colors and incorporate them throughout your website.
You can input your own hex code, or use the color spectrum to choose a color. From there, you can choose between HSL and RGB colors, as well as adjust hue, saturation, and lightness.
Once you've made all your changes, scroll up to the top and you can save your colors as a new palette. (You'll need to give it a name and a short description.)
Any changes you make will be autosaved, but you won't be able to view your changes without viewing your actual website. To view your changes, click Preview in the top right corner of the editor.
This will open a new tab in your browser to preview the entire page you're working on. Because Nucleus autosaves your work, now any time that you make changes in the editor, the preview page that's open in the new tab will continually refresh automatically as well.
Feel free to go back and forth between your color design settings and your preview url until you're happy with your changes. Then, you can either save your changes without publishing them just yet (click the Exit button in the top left corner), or if you're eager to have your changes go live, click the Publish button in the top right corner.
Further Reading
Section color settings are just one facet of customizing your section. Check out the following guides to learn about all the other various design settings for a section: