Time to Complete Module: 1 hour
Last updated: March 13, 2025
IN THIS MODULE

Each module in this guide includes instructions for building a specific page based on a sample design created by our Wix expert (Portfolio Website, Digital Agency, Local Business). You can switch to an alternative version of this module by clicking a different design in the left sidebar under “Alternative Designs.“
5.1 Hero Section


- We’ll replace it with another good-looking but somewhat more abstract shape.
- Set the background color to match the section’s background (#633C28 HEX) and the shape color to the same green as the previous shape (#5C7452 HEX).

- Undock all margins from the repeater and set all margins to 0.
- Set the repeater’s width to 1080px.
- Set the horizontal and vertical gap of the repeater to 30px.
- Add three more items, so there are six in total.
- Remove the background from the repeater’s items.


- Delete the vector art from the stack.
- Using the gridlines, move the stack to the center and bottom of the item.

- Scale the image so its width matches the item.
- Drag the image into the text stack.

- Lock the aspect ratio for the image.
- Set the width of the heading text to 100%.
- Set the width of the paragraph to 100%. Make sure it’s undocked from all sides.
- Set the bottom padding of the image to 20px scale.




Update: The Wix Studio interface has recently been updated. Now, instead of a single “Docking, margins, and padding” menu, there are separate menus for each. The docking menu no longer appears as the diagram shown in the “before” image. Instead, you can edit each individual margin and its docking under the “margins” menu. Functionality remains the same.
Step 13: Set all containers to the same width.- Using the size menu, check the stack width on the top row. In our case, it’s 1160px.
- Set the width for the repeater below to the same width.
- Align the heading text to the left.
- Align the paragraph text to the left.
Adapt for Tablet and Mobile Views
Step 1: Adapt for tablet view. On tablet view:- Change the number of items per row to 2.
- Set the horizontal gaps of the repeater to 20px.
- Set the vertical gaps of the repeater to 40px.
- Set the bottom padding of the images to 20px.
- Set the number of items per row to 1.
- Set the vertical gaps of the repeater to 30px.
- Set the font size of the heading to 22px.
- Set the bottom padding of the images to 20px.
- Set the bottom padding of the headings to 10px.
- Select the text stack on the top row, open the “More Actions” menu, and then “Arrange.” Move the text stack to the front of the vector art.

- Set the bottom padding of the text stack to 30px.
- Narrow the bottom paragraph’s width so it doesn’t overlap with the shape.

- Set the top margin of the paragraph text to 0.
5.2 Testimonials Section

5.3 Blog Section


- Open the “More Actions” menu and set the blog section as a global section.
- Rename the section to “Blog.”
- Use the “Layers” menu to drag the blog section to the bottom of the page.
Adapt for Tablet and Mobile Views
Since we’ve already optimized this section for mobile viewing, there’s not much more we need to do here.5.4 Contact Form

5.5 Instagram Section
