Wix Studio Sandbox
Preview to see how this design looks on mobile
To see the instructions, switch to desktop.
Recreate this section with grid
Use our Sandboxes to experiment with tools and features from the Studio Editor and get a sense of what’s possible with the platform.
Follow the steps in this Sandbox to recreate a section with grid.
5-10 mins
Scroll down to get started
%20(1)_gif.gif)
Lay out the section
PART 1/3
Work Here
Set up the section
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 it to black
Under the Design tab in the Inspector panel,
b.
c.
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
Set up the grid
2
a.
In the middle of the blank section click on the 3-cell grid layout
b.
Click to select the bottom right cell of the grid. From the floating menu, click the Split Vertically icon
c.
At the very top of the Inspector panel, select Section to edit the section again
d.
Scroll down in the Inspector panel to Layout. Set the Gaps to 4px* both horizontally and vertically
The changes you made in Part 1 carry over to the next section
Once you’re finished, scroll down to Part 2 ↓
Style and add content
PART 2/3
Style the left cell
1
a.
In the section below, select the big grid cell to the left side
b.
Under the Design dropdown in the Inspector panel, set the background color to light gray
Add content to the left cell
2
a.
Drag the title text below into the left grid cell, and place it at the top of the cell
b.
Next, drag the paragraph element and place it underneath the title text
c.
Finally, drag the button to the bottom of the left grid cell
d.
Adjust the size of all the elements so they fit the width of the cell
Style the bottom right cell
3.
a.
Click the small grid cell to the bottom right to select it
change the cell’s background color to light green
From the Inspector panel under Design,
b.
c.
Select the “CONTACT US” element below and drag it into the bottom right grid cell. Place it in the center and use the handles to adjust the size
Assets for use
NEXT-GEN
GAMING
Transformative gaming with refined wireless controls and hi-def visuals for a powerful, immersive experience. Experience innovative gameplay and endless possibilities.
Finish off with animations
PART 3/3
Add a loop animation
1
To save you some time, we added more design elements in the section below.
a.
Select the “CONTACT US” element at the bottom right
In the Inspector panel, click the icon to open the Interactions tab
b.
Under Loop, click +Add
c.
d.
Choose the Spin animation. You’ll see a preview of it on the canvas
Add a hover animation
2
a.
Click on the yellow cell at the bottom of the grid
In the Interactions tab under Hover, click +Add
b.
c.
Choose the Color animation. Then click Adjust animation at the bottom of the panel
d.
Change the Fill color to light green
When you’re done, click preview at the top right to see how it looks
NEXT-GEN
GAMING
Transformative gaming with refined wireless controls and hi-def visuals for a powerful, immersive experience. Experience innovative gameplay and endless possibilities.
UPDATES
SEE ALL
Bug fixes and new features
Update N. 12
SEP 12
Check out the section below to see the final design.
NEXT-GEN
GAMING
Transformative gaming with refined wireless controls and hi-def visuals for a powerful, immersive experience. Experience innovative gameplay and endless possibilities.
UPDATES
SEP 12
Update N. 12
Bug fixes and new features
SEE ALL
Get proficient at using the Studio Editor and find other skill-sharpening resources in the Wix Studio Academy.
Be sure to click “preview” before starting a new Sandbox.
Try out more Sandboxes