Section Design Settings: Media
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 customize the treatment on any images added to a section.
Don't want to read through the entire guide? Skip ahead to any one of these topics:
Wait - What Images?
That's a great question. The Media settings of a section do not affect any images you upload to the background of your section (as outlined in this guide).
Instead, the Media settings will affect any images added to the sections that specifically have a dedicated slot for displaying one or more images, namely Layout 1, 2, & 3 (and Layout 6 if it's an Info Section).
You can then use the Media settings to adjust the treatment to any images uploaded to the available slots in the section editor.
But first you'll want to add your image(s) to your section before treating it. Once you've chosen your section layout, exit out and scroll down below the text fields of your section.
Click + Add Image to open your device's file browser and select a photo. (Or you can drag and drop an image from your device into the respective image slot.)
Every photo has a focal point. By default, it will be directly in the center, but you should always change it to ensure the focus of the image is always visible, no matter the size of screen your webpage is being viewed from.
Style Your Media Treatment
To adjust the treatment to any images added to a section, while editing a section, click Style Media near the top.
By default, the treatment of your images will use your media preset.
Note: Throughout your website, there are various places where images can be used. To ensure you have the same look and feel no matter where images are displayed, you can set a preset in your overall Web Design settings here. (You will need the correct administrator permissions to access this.)
Most times, you will likely want to stick with the default preset for your images, but if you have a particular style you want for your photos on this particular section, this is where you can edit the treatment of your photos for this particular section.
First, if you scroll down to the bottom, you'll be able to see an example of your media and how it is currently being treated.
You might be wondering: if there is a color already chosen above it, why isn't there any color showing overlaid on the photo. That's a great question!
If you scroll up to the top again, click + Show Media Style Controls. This will open up some options where you'll notice everything is set to None. As soon as you make any changes here, you can scroll down to the preview to see how these changes will affect any images you have included in this section.
Here you can change the scaling and tiling settings of your images, as well as the blend mode and fade that the color (chosen below) will display. You can also choose how clear or opaque the image appears.
By default, the color chosen will match your default color palette created in your Design Settings here. Feel free to adjust the color here to your liking.
Don't forget, as you make adjustments to the treatment of your image, you can see the changes in real time at the bottom in a large photo container.
If you have more than one image added to your section (determined by which layout you've selected), you can click directly on the preview box, and it will cycle through all your images.
And in the event that you regret all the changes you've made, you can always reset to the preset options 😁
As much as the preview box is super helpful, the best way to know how your images will look in the full context of your section is to preview your entire page. To do this, 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
Media treatment 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: