Customize Your Header

All typical pages on a website consist of a few basic components: your Header, your Body, and your Footer. While you are more than welcome to create your entire Nucleus website without having your Header visible (and not just for specific pages), your Header helps establish your website, introduces your church’s branding, and provides context for the rest of the page you’re viewing.

To begin, click on Design in Nucleus Web. Click here for a quick link.

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

• Consult Your Church’s Brand Guide
• Components Of A Nucleus Header
• Upload Your Church’s Logo
• Best Logo Practices
• Assign A Navigation Menu To Your Header
• Assign A Featured Action (CTA) To Your Header
• Customize The Style Of Your Header Menu
• Select Your Header’s Behavior: Sticky Or Non-Sticky
• Preview Your Website

Consult Your Church’s Brand Guide

Unless you’re the only creative director at your church and you’ve been given the authority to use whatever colors or logos as you please, 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, fonts, and images from the same approved palette and pairings. Your website is no different. If your church has a brand guide, use the colors, fonts, and approved logos 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.

Components Of A Nucleus Header

The Nucleus Header is composed of two basic elements:

• Your church’s logo (or name)
• Your navigation menu

While there are several options and settings to consider while designing your Header, they all revolve around those two elements.

To start designing your Header, click on Design in Nucleus Web. You should automatically land on your Header settings.

While managing the design of your Header, you can choose to turn on or off certain items:

Select which ones you want to showcase and then click Apply Changes. (This guide will showcase options for every single item.)

Manage Your Church Name Or Logo

To help with branding and context for your website, uploading a logo can be extremely helpful. You can upload both a light version and a dark version of your logo.

Simply drag and drop an image from your device to each respective location. Or simply click + Add Image and a file browser for your device will appear and you can select to upload an image that way.

If you don’t have a logo or would prefer to showcase just your church’s name instead, simply click Church Name.

Then, type the name you want to appear.

Whether you select to showcase a logo or your church’s name, this will appear in the top left corner of your website.

Best Logo Practices

While Nucleus does its best to present whatever logo you upload in the best way possible, there are some general guidelines to uploading logos that will be super helpful to ensure your logos look great no matter what.

When choosing which logo to upload, it’s best to upload a .png file, not a .jpg file. A .png file allows for an invisible layer to be saved, whereas a .jpg file will interpret any invisible layer as white. (See below for example.)

If you need to change the format of your current logo from a .jpg to a .png, you can quickly Google “convert jpg to png” and use any one of the search results. Or, if you need to remove the background from your logo, check out Adobe Express. It’s free and Adobe is a trusted company when it comes to all things visual.

While Nucleus allows you to upload up to a maximum of 50 MB, we recommend using a compressed or smaller file size. If you’re working with a large file size, before uploading the logo to your Launcher, you can always compress it using TinyPNG.

Assign A Navigation Menu To Your Header

Under the Navigation section, you can select which navigation menu you want to assign in your website’s Header.

As a summary, Nucleus Web affords you the ability to create three distinct navigation menus:

• Main (Header)
• Footer
• Sitemap

You can add different items to each menu, allowing you to create unique navigation menus.

From there, you can assign which navigation menu you want to showcase in different places on your website, namely your Header and/or Footer.

So here, you can choose which navigation menu you want to showcase in your Header. Unless you’ve made things complicated for yourself, the likely option is to select Main.

To learn more about how to create and manage your Navigation Menus, click here.

When you have a Navigation Menu showcased in your Header, it will always appear in the top right.

While viewing your website, you can enter in/out of the menu by clicking on the toggle switch.

Assign A Featured Action (CTA) To Your Header

Below this, you can select to have a single featured action or CTA (that’s “call-to-action” in case you were wondering 😉) showcased at the bottom of your navigation menu.

To add a featured action, click on + Add an Action.

From there, you can choose to have it default as a Sign In button to easily allow people to use their login credentials for their personal My Nucleus account.

Or you can select Other Action, which allows you to create a button that links to a variety of different types of destinations.

Each type that you choose will have its own unique set of information required to input (for more information on each type, click here), but no matter what type you choose, don’t forget to also type in the button text.

The best language to use is call to action language, like “Learn More” or “Get Started” or “Contact Us”.

Once you’re happy with your selections, click Add New Action.

While designing the Footer, you will have the ability to add more than one featured action. That’s what the two lines beside the action you just created is for: to click and drag up/down the order of actions. But since you can only add one featured action in the Header, there is no need to do this.

Customize The Style Of Your Header Menu

Below this, there are a number of options to stylize your Header menu.

If you’ve chosen to display a logo instead of your church’s name (as discussed above here), the first item you’ll see is the ability to have a different image appear in the top left corner when you open the menu.

By default, your logo is set to display. But if you want a different image to display, simply click Custom under Choose Menu Logo.

Simply drag and drop an image from your device. Or simply click + Add Image and a file browser for your device will appear and you can select to upload an image that way.

Below this (or the first option you’ll see if you have it set to display your church’s name instead of a logo) are the four color palette options for your menu. Simply click on one of the options provided.

These options are automatically generated based on the color palette selected/created here in the Colors section of the Design Panel.

To learn more about how to manage the colors on your website, click here.

Below this, you can upload an image to display beside your menu when it’s opened. This image will display on desktop or on a wide enough screen on a mobile device.

Simply drag and drop an image from your device. Or simply click + Add Image and a file browser for your device will appear and you can select to upload an image that way.

Once uploaded, you might want Nucleus to favor a particular spot on the image. Clicking Edit Image, select Set Focal Point. (This is also where you can replace or delete the image.)

Now, click anywhere on the image. The white circle (the focal point) will appear there. Once you’re happy with where the focal point of your image is, click Save Focal Point.

Now, no matter the screen size, as long as the image displays, Nucleus will choose to focus on that point on the image.

Associated with this image, you can choose to customize the Image Scaling and the Image Tiling.

You may want to test a few of these options and preview the changes to see which option you prefer.

For instance, if you’ve uploaded a smaller dimensioned image, you might want to try out the image scaling options.

If you’ve uploaded an abstract image, you may want to try out one of the image tiling options.

Select Your Header’s Behavior: Sticky Or Non-Sticky

Lastly, you can decide if you want your Header to scroll up and disappear along with all the other content as you move down a page on your website; or you can decide to have a sticky Header, which means no matter how far down a web page you are, you’ll be able to access your Header Menu.

By default, your Header isn’t sticky. To make it “stick” to the top of your website, click the toggle switch under Sticky Header.

Once selected, if you’ve chosen to display a logo instead of your church’s name (as discussed above here), you can opt for a different image to display.

Simply click Custom under Choose Sticky Nav Logo.

Simply drag and drop an image from your device. Or simply click + Add Image and a file browser for your device will appear and you can select to upload an image that way.

Preview Your Website

In all places where you can create and edit your web pages or design options, Nucleus operates with an autosave feature. At any point in time, you can choose to preview your website to see how your changes in your Dashboard are affecting your website as a visitor to your site would see it.

Simply click Preview in the top right corner.

This will open a new tab in your browser and will take you to your Nucleus Web preview URL.

Most of your changes in the Header section will affect your Menu, so you might need to click the toggle in the top right corner to open your Menu and see any changes you’ve made there.

To go back to your Dashboard, click on the appropriate tab in your browser.

Note: Clicking on the Preview button will always open a new tab, so unless you close out each preview tab opened, you’ll end up with several tabs opened with different iterations of how you’ve changed the design of your website.

What Next?

Once you’ve designed your Header, it’s a great idea to move along to designing your Footer. Not only will the design options feel familiar, your website’s Footer is another super important aspect of your website.

• Customize Your Footer
• Modify Your Website's Colors
• Select Your Website's Fonts