Step 1: Open and Copy From the About Page
Navigate to Pages in WordPress and open the Services page in Elementor.
Also open the About page in Elementor to copy elements from.
Right-click on the About page header section and choose Copy.
Paste it into the Services page.
Step 2: Adjust Header Structure
Set the layout direction of the main container to Column Vertical.
Go to Advanced settings:
Keep Top Padding: 180px
Change Bottom Padding: 100px
Step 3: Modify Headings and Descriptions
Copy and paste the small heading from the About page.
Update the text to read “Our Services”.
Center-align all headings and text.
Change the main header to “Perfectly Crafted Solutions”.
Change the text color to black or a light yellow for visibility.
Remove unnecessary nested containers to reduce page bloat.
Step 4: Create Featured Services Section
Add a new Flexbox container with Column Vertical direction.
Insert a heading titled “Featured Services”, set as H2.
Add Top Margin: 40px
Step 5: Design the First Featured Service Block
Add a new container with a background image (Pizza).
Set background image:
Position: Center Center
Attachment: Scroll
Repeat: No Repeat
Display Size: Cover
Add a nested container inside:
Set Width: 500px
Set Padding: 40px
Style the nested box:
Background Color: White (with opacity adjusted to #F0F0F0D1)
Border Radius (Bottom Left): 30px
Add H3 heading, smaller header (e.g., “Available Mondays”), and service description text.
Align container to End and set Gap to 10px
Assign the class background-blur in Advanced > CSS Classes
Step 6: Duplicate and Adjust for Second Featured Service
Duplicate the entire container.
Replace the image with a new one (e.g., Fruit).
Align content to Start.
Adjust Border Radius (Bottom Right): 30px
Change heading to “New Customers Only”
Step 7: Create Services Grid
Add a container with Row Horizontal layout.
Copy the featured service text elements (title, label, description).
Paste into each column.
Set Gap to 10px
Label the service (e.g., “Service”) and assign a price (e.g., $50).
Duplicate the container to create more service columns.
Add Top Margin: 40px
Step 8: Add Final CTA Section
Copy the CTA from the About page.
Paste into the Services page.
Set Background Type to Classic with a light Gray color.
Adjust background overlay:
Opacity: 0.33
Update text colors:
Headings: Yellow or Black
Button: Yellow background with white text
Step 9: Optimize for Tablet and Mobile
Click the Tablet Portrait view:
Adjust padding: Top = 60px, Right = 40px, Left = 45px
Adjust padding on text blocks and feature blocks: 30-40px as needed
Fix border radius where needed
Click the Mobile view:
Ensure all elements stack correctly
Set proper spacing between containers
Adjust text sizes and padding for small screens
Use 100% width for full-bleed elements
Step 10: Finalize and Save
Hide the Elementor panel and preview everything.
Ensure spacing, responsiveness, and styling look consistent.
Publish the page.
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!