Wix Studio Sandbox
Preview to see how this design looks on mobile
To see the instructions, switch to desktop.
Recreate this sticky scrolling section
Follow the steps below to build this section with a sticky scroll and get a sense of what’s possible with Wix Studio.
5-10 mins
Scroll down to get started
Set up the section
PART 1/5
Set the background color
1
a.
Scroll down to the blank section below this one and click to select it. You can edit the section from the Inspector panel to the right
click on the Background color tile and change the color to dark green
Under the Design tab in the Inspector panel,
b.
Add section padding
2
a.
With the section selected, scroll down in the Inspector panel to Position. Under Docking, margins and padding, click any side of the padding box. Change the value to 3% and click on the link icon to apply equal padding to all sides of the section
Place the title
3
a.
Select the title below and drag it into the section. Place it to the top left
The changes you made in Part 1 carry over to the next section.
Once you’re finished, scroll down to Part 2 ↓
Assets for use
Iconic Collection
Position the first element
PART 2/5
a.
Click to select the section below. At the top of the Inspector panel under Size, set the height to 1200px*
b.
Click on the container to the right. From the blue breadcrumbs below the floating menu, click Container to make sure it’s selected
leaving a gap of at least its total height
Drag the container using the top-left icon to place it below the title,
c.
d.
From the top of the Inspector panel, use the blue icon to align the container to the left
Assets for use
Iconic Collection
Nature inspired, gentle, relaxed
Gentle Curves
Position the second element
PART 3/5
a.
Click to select the section below. At the top of the Inspector panel under Size, set the height to 1600px*
b.
Select the container to the right and drag it into the section. Place it directly below the container you placed in the last step
c.
From the top of the Inspector panel, use the blue icon to align the container to the horizontal center
Assets for use
Iconic Collection
Nature inspired, gentle, relaxed
Gentle Curves
Balanced, clean, sculptural, zen
Tranquil Lines
Position the third element
PART 4/5
a.
Click to select the section below. At the top of the Inspector panel under Size, set the height to 2100px*
b.
Select the container to the right and drag it into the section. Place it directly below the container you placed in the step above
c.
Use the blue alignment icon at the top of the Inspector panel to align the container to the right
Assets for use
Iconic Collection
Nature inspired, gentle, relaxed
Gentle Curves
Balanced, clean, sculptural, zen
Tranquil Lines
Muted, natural, calming, revitalizing
Earth Tones
Set up the sticky scroll
PART 5/5
Set the title’s position
1
Set the position of each element
2
a.
In the section below, select the title. Scroll down to Position in the Inspector panel. Under Position type, change it to Sticky
b.
Next to Offset, set the offset value to 3%
a.
Select the first container. Scroll down to Position in the Inspector panel and change the Position type to Sticky
b.
Set the Offset value to 30%
c.
Repeat steps a and b for the other two containers
Click Preview to see how the effect turned out
Iconic Collection
Nature inspired, gentle, relaxed
Gentle Curves
Balanced, clean, sculptural, zen
Tranquil Lines
Muted, natural, calming, revitalizing
Earth Tones
Check out the section below to see the final design.
For more Sandboxes, go to the Wix Studio Academy.
Nature inspired, gentle, relaxed
Gentle Curves
Balanced, clean, sculptural, zen
Tranquil Lines
Muted, natural, calming, revitalizing
Earth Tones
Iconic Collection