Step 1: Open and Prepare Pages
Open your About page in a new tab and click “Edit with Elementor.”
Open your Home page in Elementor in another tab so you can copy sections.
Step 2: Copy Header Section from Homepage
-
On the Home page, right-click the top header section and select “Copy.”
-
On the About page, right-click and “Paste” the section.
-
Delete the image and button containers.
-
Drag the text block to the right side.
-
Remove the shape divider: Style > Shape Divider > Bottom > None.
-
Adjust padding: Advanced > Top: 180px, Bottom: 350px.
-
Justify text container: Layout > Justify Content > End.
-
Adjust margin on text block: Advanced > Unlink > Bottom: -17px.
Step 3: Add an Image Carousel
-
Add a new Flexbox container below the header.
-
Drag in the Image Carousel widget.
-
Add images (e.g., pizza, pasta).
-
Set Image Size to: Full.
-
Slides to Show: 3. Slides to Scroll: 1.
-
Navigation: None.
-
Autoplay: Yes. Speed: 3000ms.
-
Style > Vertical Align: Center.
-
Spacing > Custom: 80.
-
Adjust container margin: Advanced > Unlink > Top: -226px.
Step 4: Create Welcome Section
-
Add a new Flexbox container with direction set to Row.
-
Inside, add two containers.
-
Drag in a Heading block (H2): e.g., “Welcome to Pizza Town.”
-
Add a Text Editor block with business info or placeholder text.
-
Adjust top margin: Container > Advanced > Top: 40px.
Step 5: Add a Values Section with Icons
-
Copy the two-icon section from the Home page.
-
Paste into a new Flexbox container on the About page.
-
Add a new container beside it to make three columns.
-
Adjust width: Text Column = 50%, Icons = 25% each.
-
Add heading: “Our Pride and Joy.”
-
Add text: Prompt Service, Friendly Staff, Quality Products.
-
Copy subheading from Home for consistency.
-
Add a CTA button: “Get in Touch.”
-
Style it: Gradient (yellow to orange), White text, No border.
Step 6: Add Image Blocks
-
In each image container (25% width), set background images.
-
Style > Background > Classic > Upload Image.
-
Position: Center Center. Repeat: No Repeat. Size: Cover.
-
Style > Border Radius: 30px.
Step 7: Add Team Section
-
Add new Flexbox container with direction Down.
-
Drag in a Heading block: “We’ve got an entire team dedicated to supporting you.”
-
Center align. Adjust width (e.g., 70%). Margin top: 40px.
-
Add container for team grid. Set direction to Row Horizontal.
-
Inside it, add four containers.
-
For each:
-
Add a portrait image container.
-
Add Heading (H5): “John Doe”
-
Add Subtitle (H6): “Founder & CEO”
-
Add Text Editor with bio.
-
-
Font: Rubik for name and title.
-
Subtitle color: Yellow. Size: 18px.
-
Add a Spacer: 250px height.
-
Image containers: Border Radius: 30px.
-
Layout > Gaps: 10.
-
Duplicate team card 3 times.
Step 8: Add Bottom CTA (Let’s Chat)
-
Copy the Let’s Chat section from Home.
-
Paste into a new Flexbox container at the bottom of the About page.
-
Style the Gradient Background (Yellow to Orange).
-
Add Background Overlay: geometric pattern.
-
Padding: 60px. Border Radius: 30px.
-
Margin Top: 0px.
-
Text and Button Color: White.
-
Button Hover: White border, White text.
Step 9: Set Full Width for Image & CTA Sections
-
Select both containers.
-
Layout > Width: Full Width.
-
Advanced > Padding: Right: 40px, Left: 40px.
Step 10: Make Tablet & Mobile Responsive
Tablet:
-
Adjust padding, margins, font sizes, and alignments.
-
Stack columns vertically: Layout > Column Vertical.
-
Reduce image sizes and padding.
-
Adjust Team Grid to two columns.
Mobile:
-
Stack all columns vertically.
-
Set Full Width for images and containers.
-
Adjust Padding to at least 20px on sides.
-
Set Team images to 100% width, 200px height.
-
Adjust Spacers and Text widths.
-
Publish when finished.
Homework & Action Items
Open your site on a tablet, mobile phone, and a laptop browser window at half size. Note anything that looks off and adjust them.
Click on every button, link and menu item to make sure those are working properly.
Make sure no text is pressed up against the edge of the screen, and that there’s at least 20px of padding on the mobile sides.
- Make sure you’re saving along the way!