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.
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, click Custom. This will open settings below the image preview.
Here you can change the scaling and tiling settings of your images.
Below this, you can choose how the color overlay appears on top of your image through blend modes, color fade, fade intensity, and even adjust how clear your image shows through the color (media opacity).
If you'd rather choose a custom color for the overlay rather than following what the default color would be (which is typically determined by the color option selected by your section's color palette), click Custom and enter a hex code or use the color picker to select a unique color.
As you make adjustments to the treatment of your image, you can see the changes in real time above in the Media Preview box above.
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: