Section Design Settings: Background
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 how to adjust a section's background(s). (There are more settings here than meets the eye 😉)
Don't want to read through the entire guide? Skip ahead to any one of these topics:
Primary & Secondary Backgrounds
Adjusting the background of a section can be an important customization that is often overlooked. While the content of a section is obviously important, the background of a section can determine if someone is able to read or "digest" the content easily. (For instance, if you have a lot of text in a section, adding a busy image in the background could make it difficult to read the information presented.)
By default, the background of a section will be determined by the color palette you've selected in your settings. To adjust the background of your section, click Adjust Background near the top.
You'll notice right away that there are two backgrounds: Primary & Secondary. Your secondary background is only available when you've chosen the Inset Layout design setting (as discussed in this guide).
With one of the inset options enabled, you will be able to configure two backgrounds, as visualized in the settings preview.
Customize A Background's Color
To customize the color of either the Primary or Secondary background of your section, click Actions to begin editing your desired background.
Note: You can also easily swap your Primary and Secondary backgrounds as well.
While editing a background, scroll down to the very bottom to view a preview of that particular background. Right above this, you can adjust the color of the background, using the same controls as you use to set your overall Web colors.
If you change the color and you wish you hadn't, you can always reset your changes.
Note: Adjusting the color here allows you to go outside the set color boundaries enabled in your Web design settings here in your Dashboard. If you don't have an eye for design, it might be best to leave this or reset back to default settings 😁
To get a better understanding of what the background will now look against the other background (if enabled) as well as the text and button colors, scroll up to the top and click Back to all.
Add A Video Or Image To A Background
To add a video or image to either the Primary or Secondary background of your section, click Actions to begin editing your desired background. (Adding a video or image will replace the solid background color.)
Note: You can also easily swap your Primary and Secondary backgrounds as well.
While editing a background, select to add either a video or image.
Then, paste the full video url or upload an image (by either clicking + Add Image or dragging and dropping an image into the editor).
After uploading an image, be sure to set the focal point to ensure no matter what size of browser your webpage is being viewed from, that portion of the image will always remain visible.
Once you add a video or image, you will be able to toggle it "on" or "off". If you add both an image and video, Nucleus will display the image first as a fallback image until the video loads and begins playing and looping.
To further edit or add treatments to the media in your background, click + Show Media Style Controls. This will display up to 6 different treatments (with "Image Scaling" and "Image Tiling" being specific to a background image).
As you adjust any settings here, you will be able to preview in real time what your background will look like if you scroll down to the preview area of the editor.
You'll notice that the color displays as an overlay on top of your media. This is intentional, to help keep the actual information of the section at the forefront and ensure that it's as easy to read and "digest" as possible.
To get a good sense of what your background will look like in the context of the rest of your section's content, scroll up and click Back to all.
Now, you can see the media displayed behind the pretend content over top.
To truly see what your section now looks like, 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.
Further Reading
Section background 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: