top of page

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

bottom of page