Website Help Center

How to Use Section Transitions

Section transitions are decorative curves, angles, waves, or other graphic shapes that help one part of your website flow visually into the next. On your Site Before Night website, this effect can be created with an image section that is styled to blend into the section directly above it.

What makes the transition work?

The transition graphic becomes the visual edge between two sections. To make it look intentional instead of like a separate image sitting on the page, you match the transition section's background image or background color to the section above it.

Add the transition image

Start by inserting an image section exactly where you want the decorative transition to appear.

Choose the location

Scroll to the area of the page where you want the transition between sections.

Add a new section

Select +Add New Section at that location in the website editor.

Choose an Image section

Select Image, then choose Add to Site.

Select the transition graphic

Choose the transition image from your image library.

Important: This technique assumes the transition graphic you want to use is already available to select in your image library. If you do not see an appropriate transition image, avoid substituting an unrelated graphic just to complete the steps.

Step 5

Choose the transition layout

With the new image section selected, choose the Full Width Copy Above Photo layout option. This is the layout used by the source technique to position the decorative transition across the width of the section.

Step 6

Match the background to the section above

Set the transition section's background image and/or background color to match the section immediately above it. If the upper section uses a photo as its background, use that same background image here. If it uses a solid background color, match that color instead.

Step 7

Turn on parallax when using a background image

If you are using a background image for the transition section, enable Parallax Scrolling.

Once the transition, background, and parallax setting are in place, select Save.

Tips for a smoother-looking transition

Match the background carefully

The transition works best when the new image section visually continues the section immediately above it.

Keep the graphic decorative

The transition should help separate content without distracting visitors from your headline, services, buttons, or other important information.

Check the live page

After saving, review the transition in context and make sure the section boundary looks natural with the content above and below it.

Common questions

What is a section transition?

It is a decorative graphic used between website sections to create a shaped edge such as a curve, wave, angle, or other visual separator.

Why does the background need to match?

Matching the background makes the transition image appear connected to the section above instead of looking like an unrelated image block.

Do I always need Parallax Scrolling?

The source method calls for Parallax Scrolling when a background image is being used. A transition that relies only on a background color does not require that image-specific step.

What if I cannot find the transition image or the expected controls?

Your available editor controls and image library should determine what you can safely change. If something shown in this tutorial is not available in your editor, use Site Before Night's technical-help resources rather than changing advanced settings or code.

Keep working on your website

Visit the Website Help Center for more ordinary editing tutorials. If an editor control is missing or something is not working as expected, use our technical-help resources.

Visit the Website Help Center Website Technical Help