Every page on your course website consists of one or more sections and most of these sections have common design settings you can customize.
You can set the background color of a section and/or upload a custom graphic to use as the background image.
Select your course on the My Courses screen and navigate to the Website Editor.
If you hover over any section in the Website Editor you'll see an animated dashed border appear to highlight it.
An Edit Section button will also appear along the left hand side.
In this example we'll change the background color of the course summary section on the website's home page.
Click the Edit Section button to open the Design & Layout menu.
The Design & Layout menu always opens on the left and has options specific to the context of what you're currently editing.
Depending on which website section you're editing you'll see different options on this menu but almost all sections will have a group for editing the Background. If the background group isn't already expanded click the arrow to expand it.
Click the color swatch next to the Background Color option to open the color picker widget. Then choose a new color.
After making a change the website preview pane updates right away and a blue Save Bar appears across the top of the screen.
Click Save Changes to apply your color change and reload the preview pane.
Or click Discard to undo your changes and revert back to your prior settings.
You can also upload an image to set as the background of a website section.
For this example we'll navigate to the Teacher Bio page in the website editor and upload an image for the top title section of the page.
As described above, hover over the desired section and click the Edit Section button on the right hand side.
On the Design Options menu click the Upload File button under the Background Image option.
For best results we recommend uploading a background image that is at least 2000 pixels wide so it displays well on large screens. It's also a good idea to pre-crop your image to an aspect ratio similar to the shape of the section. In this particular example the section is much wider than tall so a background image similar in shape will look best.
After uploading your background image the additional options pointed out in the screenshot below will appear. These let you to set the background position, size, etc.
Notice how the section title overlay text "Teacher Bio" is hard to read against the background image. One way to fix this is to adjust the opacity of the background image to make it semi-transparent and then set a background color that bleeds through.
For this example we set the background color (behind the image) to black and reduced the opacity of the image to make it semi-transparent. This darkens the section and makes the overlayed section title easier to read. It also makes the background image less distracting so the text content on the rest of the page stands out more.
This looks better but the "Teacher Bio" text is still hard to read. We can fix that by making it white.
Save the changes you made above.
Then hover over the "Teacher Bio" text and click the Edit Text button. This text is an H3 tag (heading) so we'll set the Headings Color to white (#ffffff). The heading color set here will override the top level default heading color for this text placement only.
