Customize The Design Of Your Website

Design. It’s one of the most exciting parts of building a website. Customizing the look (i.e. the vibe) can really bring the content to life. You can have the most exciting and important pieces of information throughout your website, but if you don’t present it in an eye-catching and pleasing way, people will scan past it all and miss out on valuable, life-changing next steps.

Nucleus provides a plethora of design options from colors to fonts to animations - and more! These design options allow you to not just have creative freedom, but also to best represent your church to the rest of the world in an effective manner.

In this guide, we'll cover the following topics. Click on any one to jump ahead.

Consult Your Church’s Brand Guide

Unless you’re the only creative director at your church and you’ve been given the go ahead to redo all your church’s branding (namely colors and fonts), it’s best to always consult your church’s brand guide when designing your church’s website.

A brand guide helps make sure that every piece of media you create - whether printed or digital - “gels” together with colors and fonts from the same approved palette and pairings. Your website is no different. If your church has a brand guide, use the colors and fonts laid out there. Not only will this make it easier and quicker for you to design your website, but it will make sure that your website looks beautiful and is cohesive with other media material your church produces.

Don’t have a brand guide? No worries! There are plenty of online resources to help make sure the colors and fonts you choose look great together.

For creating a custom color palette, try coolors.co to generate up to 5 unique colors and easily copy the hex codes for each individual color into your Nucleus design settings.

For finding great font pairings, check out typewolf.com or fontsinuse.com to see what other websites are using. Depending on if the fonts used in those examples are paid fonts, you might not be able to find an exact match within Nucleus’ collection of typography. However, you can always use Google to search for free fonts similar to the one you saw on typewolf.com or fontsinuse.com. And those free fonts you might be able to find in Nucleus’ typography database 😎

Collect Your Branding Assets & Images

To make creating and designing your website as easy as possible, it’s best to obtain all of your church’s branding assets and images in one go. That way you can contain all of those files within a single digital folder and keep everything nice and organized. (Obviously, if you prefer the chaotic lifestyle, be blessed and feel free to skip this step 🙈)

Your church’s branding assets include (but may not be limited to):

  • Your church’s logos. (Try to obtain a dark and light version of the main logo. Some churches also have an alternative version of their logo, which can be helpful to include in the Footer of your website.)
  • Any specific pictures/images that have been approved and curated specifically for your church’s website. (But building a new website also presents an opportunity to take all brand new photos for your website too!)
  • Your church’s colors. (Having the hex codes of each color is easiest, but you can also use RGB or HSL attributes to select your colors in Nucleus.)
  • Your church’s fonts. (While you can’t upload your own fonts, knowing what fonts your church uses will be super helpful later on.)

Start With Basic Design Elements (And Then Come Back Later)

Designing a website is super exciting! It can also steal hours and hours away from creating  your actual website 😅

Because it’s so easy to get lost in tweaking and adjusting the tiniest of changes to design elements, we recommend doing a minimal amount of design edits before building your website. Then move onto creating pages, adding content, creating your navigation menus, etc. And then come back to your Design Panel to edit all the elements available there (including going back and adjusting the ones you already took care of in this step).

To get started, go to your Design Panel in Nucleus Web. Click here for a quick link.

Upload Your Logos & Showcase Navigation Menus

First on the list is your logos. Your logos can exist in both your Header and Footer of your website (though you don’t have to display them at all if you don’t want to).

If you clicked the link above, you should already be on Header in the left sidebar of your Design Panel. If not, click here.

Select Turn On/Off Content, then check off Church Name or Logo, and then Apply Changes.

Now you should be able to upload (or drag & drop) both a light version and a dark version of your church’s logo.

Note: If you’re looking for best logo practices (i.e. what type of image file to use, what dimensions to use, etc.), we’ve put together a guide here. While these instructions are particularly helpful for uploading a logo in The Launcher, those tips apply to Web as well.

Next, if you’re wanting a navigation menu to be accessible in your Header, click again on Turn On/Off Content. Select Navigation and then hit Apply Changes.

Now, below your logos, you can select which navigation menu will be accessible in your Header: Main, Footer, or Sitemap. For simplicity, we recommend selecting Main, but the choice is yours.

Note: This setting is only to allow a navigation menu to be displayed. You are not actually creating your navigation menu here. To do this, you’ll need to go to your Navigation Panel. Click here for a detailed guide on creating and managing your Navigation Menu(s).

Once your logos and navigation are taken care of in your Header, it’s time to do the same in your Footer. The Footer is a great place to add an alternative version of your church’s logo if you have one. It’s also a great place to host a secondary navigation menu. Click here for a quick link, or click on Footer in the left sidebar.

Note: Everything you do in your Design Panel is autosaved, so don’t worry about confirming any changes until the very end.

Just like you did in the Header section, select Turn On/Off Content, then check off Church Name or Logo, and then Apply Changes.

And in the same way, now you should be able to upload (or drag & drop) both a light version and a dark version of your church’s logo.

Next is the navigation menu. While you have the option to turn on/off the navigation menu in your Header, the option will always exist under the Layout & Style section below.

If you want a navigation menu to be accessible in your Footer, we recommend selecting Footer for simplicity, but the choice is yours. If you’re wanting the exact same navigation menu in both your Header and Footer, choose Main instead.

Note: While we do recommend having at least one navigation menu accessible somewhere on your website, if you have one in the Header, you do not need one in the Footer. But sometimes it can be helpful to break up your navigation items so your Header menu doesn’t become too cluttered.

You’ll notice there are several other settings within the Header and Footer tabs. Feel free to explore them now, but these aren’t crucial at the moment to getting your website up and running.

Click here for a more detailed guide on customizing your Header and Footer.

Select Or Create Your Own Color Palette

Next, it’s time to work on your website’s colors. Select Colors in the left sidebar. Click here for a quick link.

By default, you’ll be using the Black & White color palette. If you don’t have church brand colors, feel free to select a different color palette we’ve curated just for you!

Unless you absolutely hate one of the colors (which we hope you don’t!), don’t worry about adjusting any of the individual colors just yet. That can wait until later. This is just to help you get a good feel for which colors affect which attributes while previewing your website as you create your pages.

If you have your own church brand colors, feel free to stick with the Black & White palette and begin adding your own colors below. Input hex codes, adjust the RGB or HSL sliders, or select a color using the color picker.

Select Or Create Your Own Font Pack

After briefly working on your colors, it’s time to move onto your website’s typography. Select Fonts in the left sidebar. Click here for a quick link.

By default, you’ll be using the Slide into my DMs, Sans font pack. While this pack is specifically tuned for Nucleus Websites, feel free to select a different font pack to start with.

If you don’t have fonts from your church brand guide, stick with one of the font packs without adjusting anything major below. (You’ll come back to this later.)

But if you do have fonts from your church brand guide, try finding them for each type of text. If you can’t find the ones you’re looking for, try searching on Google for free fonts similar to the ones from your church brand guide. (See the first section of this guide for more tips.)

Create Your Web Pages

After all of that, we recommend moving onto creating your website’s pages and homepage before coming back to designing and adjusting all the elements not covered above, and coming back to tweak everything just worked on.

We have an entire guide on how to Start With Your Homepage, with a guide on how to Construct & Edit Your Pages to follow.

But like a kid on Christmas Eve, if you’re too excited to wait, we can’t fault you 😁 Below is an in-depth look at all the design options offered in Nucleus Web.

What Next?

Phew! And that’s just scratching the surface 😉 Which just goes to show you that Nucleus Web provides you with tons of design options to help make sure your website stands out and looks great.

Feeling overwhelmed? We have an entire Getting Started section in our Help Center with even more details on getting your Nucleus 2 website up and running. Click any of the guides below to get started.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.