Time to Complete Module: 1 hour 30 minutes
Last updated: 13 March 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.“
3.0 Adding a New Page
Since this is our first time adding a new page, let’s see exactly how we do it. The process will be the same for every page we add later on. Step 1: Go to the pages menu.- Click on the icon that looks like a rectangle with some horizontal lines on the left-side menu. It should be just below the “Layers” menu.

- On the pages menu, click on the plus symbol next to the search bar to create a new page.

- You will see two options: “Page” and “Dynamic Page.” We’ll select “Page” for this one.

- You’ll be redirected to a blank page. A new name will also appear below “Home” on the “Main Pages” list. Rename the new page. For this example, we’ll use “About.”

3.1 Hero Section

- Using the “Pages” menu, head back to the homepage.
- Select the hero section and then right-click on it or select the three dots on the pop-up menu to open the “more actions” menu.

- Copy the section. Ensure you’re selecting the entire section, not just an element or container.
- Head back to the “about” page and paste the section. If the section appears beneath the default blank section for the page, delete the blank section.

- Align the heading text to the left.
- Align the text underneath the heading to the left.
- Dock the text underneath the heading to the left and set its left margin to 0.


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.
- Dock the button to the left as well and set the left-side margin to 0

- Replace the heading with something that fits the section better.
- Replace the text under the heading with a brief paragraph about your business.
- Delete the video on the bottom row of the section.
- Drag a high-quality photo to the bottom row.
- Set all margins for the photo to 0.
- Set the image’s height and width to 100%.
- On the “Add Elements” menu head over to “Decorative,” “Basic Shapes,” and then select “More Basic Shapes.”

- We’ll use the search bar to find the perfect vector art for our flower shop.

- Move the vector art to the right-side of the top row.
- Change the vector art’s color to a dark green (#5C7452 HEX).
- Change the shape’s responsive behavior to “Scale Proportionally.”

- Set the shape’s width to 150px.
- Dock the shape to the right and set the right-side margin to 50px scale.
Adapt for Tablet and Mobile Views
Step 1: Adapt for tablet view. On tablet view:- Stretch the edges of the paragraph under the heading to match the width of the stack.

- Dock the vector art to the bottom and set the bottom margin to 0.

- Set the vector art’s width to 100px
- Set the width and height of the vector art to 80px.
- Set the right-side margin for the vector art to 10px.
3.2 “Our Story” Section

- Add an image and set its location in grid cells to the right-side column.
- Set the image’s height and width to 100%.
- Head back to the homepage and copy the text stack from the “Our Story” section.

- Paste the stack on the left-side column.
- Delete the “Read more” text link from the stack.
- Set the top and bottom margins for the stack to 70px scale.
- Set the left and right side margins to 0.
- Set the stack’s width to 520px.
- Change the paragraph text for the copy for this section.
Adapt for Tablet and Mobile Views
Step 1: Adapt for tablet view. On tablet view:- Change the section’s layout to 1×2.

- Set the vertical gap to 30px.
- Set the bottom row’s behavior to a 400px scale.

- Set the text stack’s width to 720px.
- Set the top row’s behavior to auto.

- Set the top margin for the top row to 70px scale.
- Set the top and bottom padding for the text stack to 0.
- Set the top margin for the entire section to 70px.
- Set the vertical gap for the section to 30px.
- Set the height of the bottom row to 250px.

3.3 Testimonials Section

- Click on the section and then select the three dots icon to open the “More Actions” menu.

- Go to “Set as Global” and then select “Section.”

- Change the name of the section to “Testimonials.”

- Head back to the “About” page.
- Click on the icon of a triangle with circles at each vertex to open the “Global Sections” menu.

- Select “Add to page” next to the “Testimonials” section.

- The section will automatically get added to the top of the page.
- Click on the icon with two squares overlapping to open the “Layers” menu.

- On the “Layers” menu, drag the “Testimonials” section to the bottom of the page just above the footer.

Adapt for Tablet and Mobile Views
Since we’re using a section that we’ve already optimized for tablet and mobile views, we don’t have to do any work to adapt it again.3.4 Blog Section

- Toggle “Apply max width” off for this section.

- Set the vertical gap to 50px.
- Set the top and bottom margins to an 80px scale.
- Set all margins to 0.
- Align the text to the center.
- Replace the text for this section’s heading.
- Set the top row’s behavior to auto.
- Head to the “Add Elements” menu and then “Blog.” Then select “Add to Site.”

- You’ll get automatically redirected to the “Blog” page. Return to the “About” page.
- Head back to the “Add Elements” menu, head to “Blog,” and then drag a post list into the bottom row.

- You’ll see a “looks like you don’t have any posts to show” text.
- Set all margins for this element to 0.
- Set the element’s width to 1080px.
- Click on the blog element and then “Manage Posts” on the pop-up menu.

- You’ll get redirected to the blog dashboard.
- The dashboard will show a “no published posts yet” message. Select “Create New Post.”

- At the moment, we’ll simply add a heading with no text to this post since we’ll just use it as a placeholder.

- Add an image somewhere on the body of the posts.
- Select “Publish” in the upper-right corner.

- Create two more placeholder blog posts.
- Click on the blog posts element and select “Settings” on the pop-up menu.
- Select “Display,” then toggle off “Writer name” and “Publish date.”

- Still in the “Settings” menu, head to “Layout.” Under “Layout settings” select “Set posts per row” under “Cards per row.”

- Set the spacing between posts to 20.
- Head to “Design” and then “Posts.” Change the text color on hover to a dark green (#5C7452 HEX).

- Head back to the “Design” menu and then “Ratings.” Change the “filled star opacity & color” to the same green.
Adapt for Tablet and Mobile Views
Step 1: Adapt for tablet view. On tablet view:- Set the width for the blog element to 720px.
- Set the top and bottom margins for the entire section to 70px.
- Set the top and bottom padding for the entire section to 70px.
- Select “Settings” on the pop-up menu for the blog posts element. Toggle “Enable mobile settings” on.

- Toggle “Writer Name” off.
- Head to “Layout” on the “Settings” menu. Then, toggle mobile settings on as well.

- Set the vertical gap for the entire section to 30px.
- Toggle advanced size settings off for the heading on the top row. Set the text box width to 320px.
3.5 Contact Section

- Remember to rename it to “Contact” for future reference.
Adapt for Tablet and Mobile Views
We’ve already optimized this section for tablet and mobile views.3.6 Instagram Section

- Remember to rename it to “Instagram” for future reference.