top of page

Interactions & Effects

Background scroll effects.

You can use a range of background scroll effects on site sections to create interesting, dynamic behaviors that display as visitors scroll up and down. Begin by learning how to add these to sections with gradient and media backgrounds.

{Section Title}

{Section Description}

{Section Title}

{Section Description}

Intro

Anchor
Anchor

TRY IT YOURSELF

Exercise on background scroll effects.

Open Academy X from desktop to complete this exercise.

01

Add a new section. Click on the last section on the page and hit the plus at the bottom. Add a Blank section.

02

Set a background image. Click on the section you’ve just created. Next, click the Design tab in the Inspector panel. From there, click Add Image or Video and select or upload the image you want to set as the section background.

03

Apply a background scroll effect. With the section selected, click the Background Scroll Effects icon in the floating action bar. A range of options will appear. Select the Rotate option to apply it to the section background.

04

Preview the site. Hit Preview in the top right of the editor and scroll up and down the page to see the final result.

Open advanced exercise on the editor →

{No.}

{Exercise Description}

Open Academy X from desktop to complete this exercise.

Did you find this resource helpful?

Thank you for your feedback!

Next lessons.

Thumbnail indicating single images. Purple background with a shaded purple box over it and an icon in the middle.

ELEMENTS & COMPONENTS

Single Images

Discover how to customize the size, position and behavior of images per breakpoint.

Link to lesson on how to add and manage site menus on Editor X, and how to customize them at each breakpoint

ELEMENTS & COMPONENTS

Custom Menus

Explore how to set up and manage site menus, then customize them at each breakpoint.

Link to a lesson on using Multi-state boxes to display different pieces of content, one state at a time

ELEMENTS & COMPONENTS

Multi-state box

Learn how to display different pieces of content, one state at a time, using Multi-state boxes.

Link to a lesson on adding and customizing site forms to collect user information.

ELEMENTS & COMPONENTS

Forms

Learn how to use Forms to collect valuable user information on sites.

Related learning resources.

VIDEO LIBRARY

Title

Learn how to add new sections, rearrange them & flip them to vertical.

Watch Now

LESSONS & EXERCISES

Title

Learn how to work with sections—the building blocks of your site.

Start Lesson

VIDEO LIBRARY

Title

Get to know where you control size, position and behavior of all elements.

Watch Now

LESSONS & EXERCISES

Title

Learn how to take precise control over the positioning of elements using grid.

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
VIDEO TUTORIALS
Arrow down icon
External link icon
External link icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.

See all results ▶
ACADEMY MENU ▶
Search icon
bottom of page