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
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.
{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.
ELEMENTS & COMPONENTS
Single Images
Discover how to customize the size, position and behavior of images per breakpoint.
ELEMENTS & COMPONENTS
Custom Menus
Explore how to set up and manage site menus, then customize them at each breakpoint.
.png)
ELEMENTS & COMPONENTS
Multi-state box
Learn how to display different pieces of content, one state at a time, using Multi-state boxes.
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.
▶
LESSONS & EXERCISES
Title
Learn how to work with sections—the building blocks of your site.
▶
VIDEO LIBRARY
Title
Get to know where you control size, position and behavior of all elements.
▶
LESSONS & EXERCISES
Title
Learn how to take precise control over the positioning of elements using grid.
▶
Ready to start creating?
Top searches
People are searching for
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 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.
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.