Module 5: The Services Page

Time to Complete Module: 1 hour

Last updated: March 13, 2025

IN THIS MODULE

5.1 Hero Section 5.2 Testimonials Section 5.3 Blog Section 5.4 Contact Form 5.5 Instagram Section

Alternative Designs

Shop services optimage1 — Click the image above to preview the live page

Though it might be immediately apparent what our business is (in this case, selling flowers), we still want to give potential customers a better idea of all our different services.

We don’t want to bombard them with information, so a quick display with a brief introduction of each service should do the trick. We’ll use a simple heading and some simple text so the page doesn’t look too busy, followed immediately by our list of services.

As always, we’ll begin by creating a new page.

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 include both our service list and a brief introduction directly in the hero section. We’ll use a repeater for the service list, with each item featuring the service’s name, a brief description, and a high-quality image.

Step 1: Copy the hero section from the “About” page.

Step 2: Paste the section on the new “Services” page.

Delete the blank section above, so that the hero section is the only one on this page.

Step 3: Replace the text on the upper row with something that fits this section.

Delete the button at the bottom.

Step 4: Replace the vector art on the right side of the top column.

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).

Step 5: Delete the image on the bottom row.

Step 6: Drag a repeater into the bottom row.

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.

Step 7: Copy a text stack from the homepage.

Under the homepage, head to the “Our Story” page and copy the stack within the repeater.

Step 8: Paste the stack into a repeater item.

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

Step 9: Drag an image into the repeater item above the stack

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

Lock the aspect ratio for the image.

Step 10: Style the repeater items.

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.

Step 11: Replace the content with your own.

Step 12: Fix the repeater’s spacing.

When you add your own content, you might have a problem with the repeater’s layout, as you can see here:

To fix this issue, all you have to do is dock the stack at the top of the item.

! Docking menu update:

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.

Step 14: Change the text alignment.

After reviewing the section, we noticed the text would look better if aligned to the left. Once we adapt this section for mobile views, we’ll notice that the flower also slightly overlaps the text box on the top row. These issues are both easy enough to fix, but we include this brief explanation to show you how easy it is to make similar fixes on your site.

Align the heading text to the left.
Align the paragraph text to the left.

Step 15: Set the bottom padding for the entire section to an 80px scale.

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.

Step 2: Adapt for mobile view.

On mobile view:

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.