Step 1: Add a Hero Container
Drag a new container onto your page.
In the container settings:
Go to the Advanced tab.
Unlink padding and add:
Top padding:
250pxBottom padding:
150px
Step 2: Set the Background Image & Gradient
Go to the Style tab.
Under Background, select Classic:
Upload and insert your chosen background image.
Set:
Position: Center Center
Attachment: Scroll
Repeat: No Repeat
Size: Cover
Scroll down to Background Overlay:
Type: Gradient
Color 1: A soft yellow
Color 2: A warm orange
Opacity: Around 0.8
Angle: Adjust to your liking (e.g., 120°)
Step 3: Add a Shape Divider
Still in the container settings, go to the Style tab.
Scroll to the Shape Divider section.
Add one on the bottom.
Type: Tilt or any preferred shape.
Flip the shape and increase height for impact.
Step 4: Create Two Columns for Layout
Inside the hero container, drag in a row with two nested containers.
Set the outer container to Row Horizontal.
Step 5: Add Text Content (Left Column)
In the left inner container, add a Heading widget:
Text: “Enticing and Energetic Headline Goes Here”
Style:
Tag: H1
Text Color: White
Add a Text Editor widget below it:
Text: “This is a short description that supports your headline.”
Style:
Text Color: White
Font Size: 19px
Step 6: Add Call-to-Action Buttons
Below the text, add another horizontal container for buttons.
Add a Button:
Text: “About Us”
Link:
/aboutStyle:
Background: White
Text: Black
Text Transform: Uppercase
Letter Spacing: 0.6
Width: Auto
Hover: Background Black, Text White
Duplicate the button and update:
Text: “Services” or “Contact”
Background: Transparent (opacity 0)
Border: 1px solid White
Text Color: White
Hover: White background, black text
Add spacing:
Wrap each button in a container.
Add margin or padding between the buttons (e.g., 10px gap).
Step 7: Add a Featured Image (Right Column)
In the right inner container, add an Image widget.
Choose your image (e.g., a styled food photo).
Style:
Width: 420px
Object Fit: Cover
Position: Center Center
Border Radius:
Top Left: 80px
Bottom Right: 80px
Box Shadow:
Blur: 44
Spread: -26
Vertical: 15
Step 1: Add a Welcome Section Below
Below the hero container, add a new column container.
Add a Text Editor:
Text: “About Company” or similar
Style:
Text Color: Gold
Align: Center
Typography:
Weight: Medium
Transform: Uppercase
Letter Spacing: 1.8
Add a top margin of
60px
Add a Heading (H2) below:
Text: “We help people eat better with real ingredients.”
Align: Center
Add a Text Editor:
Text: A short paragraph about your business or mission.
Align: Center
Adjust spacing:
Use margin and padding controls to ensure the text flows cleanly from the hero section.
Step 1: Create a New Section with a Row Layout
Click the ➕ icon in Elementor and choose a flexbox container with a row direction.
This will be the main wrapper for your services section.
Step 2: Add Two Columns
Drag a container into the row.
Duplicate it so you have two equal containers side by side.
Step 3: Design the First Column with Text Content
Click into the first container.
Go to Style > Background Type and choose a color (something on-brand).
Add a heading block (make it an H3) and a text editor block underneath.
Change the text color to white in both elements.
Add padding to the container:
Go to Advanced > Padding and set it to 30px.
Round the corners:
Go to Style > Border Radius and set it to 30px.
Step 4: Design the Second Column with a Background Image
Click into the second container.
Go to Style > Background Type > Image and upload/select your image.
Adjust:
Position: Center Center
Attachment: Scroll
Repeat: No-repeat
Size: Cover
Add 30px border radius under Style > Border.
Step 5: Add Service Buttons to the Image Column
Click the ➕ icon in the image container and add a container.
Inside that, add two nested containers.
Right-click the main container and choose “Add Container” to ensure correct nesting.
Step 6: Adjust Layout and Direction
Select the container holding the two nested containers.
Set the direction to row under Layout > Direction.
Step 7: Style Service Label
Drag a Text Editor block into the first nested container.
Label it something like “Service One”.
Style it under Typography:
Size: 20px
Line Height: 1.4em
Letter Spacing: -0.5
Weight: Normal
Text Color: White
Step 8: Add and Style Icon
Drag an Icon block into the second nested container.
Replace the icon with an arrow icon.
Under Style, change the color to white.
Rotate the icon 45 degrees under Transform > Rotate.
Add a hover animation: “Grow” under Hover > Animation.
Align the icon right under Style > Alignment.
Under Content, link the icon to your services page.
Step 9: Center and Balance Content
Select the container holding both the label and the icon.
Under Layout > Align Items, choose Center.
Adjust margin under Advanced:
Bottom margin: -15px (to balance the spacing).
Select the icon again and reduce its size under Style > Size.
Step 10: Add Padding to Service Button
Click on the container holding the text and icon.
Go to Advanced > Padding and set to 20px.
Step 11: Add Custom CSS
Click Publish.
Go to Pages > Home and open it in a new tab.
Click Customize > Additional CSS.
Paste the following CSS code, and click Publish.
.background-blur {
backdrop-filter: blur(10px);
}
Step 13: Adjust Spacing for the Image
Go back to the image container.
Under Advanced, unlink padding and set:
Top: 300px
Right/Bottom/Left: 10px
Step 14: Duplicate and Update Services
Right-click the full container holding the two columns and duplicate it twice.
Update each:
Swap in new images.
Change the label text (e.g., “Service 2”, “Service 3”).
Adjust container widths:
Go to Content Width > Full Width
Under Advanced > Padding, set 40px left/right
Under Advanced > Margin, unlink and set Top: 60px
Step 15: Space Content in the First Text Column
Click the first container (with headline and paragraph).
Under Layout > Justify Content, choose:
Space Between to push heading to top and text to bottom.
Step 1: Add a New Section
-
Click the ➕ icon to add a new Flexbox container section.
-
Set the layout to Row under Layout > Direction.
-
Go to the Advanced tab.
-
Unlink the margin values and set the Top Margin to 160px.
-
Unlink the padding values and set Top and Bottom Padding to 80px.
Step 2: Add a Background Image
-
With the section selected, go to the Style tab.
-
Under Background Type, select Classic.
-
Upload or select your background image.
-
Set the following background settings:
-
Position: Center Left
-
Attachment: Scroll
-
Repeat: No-repeat
-
Step 3: Add Two Side-by-Side Containers
-
Add a container inside the section.
-
Right-click and Duplicate it.
-
You now have two containers side-by-side:
-
The left container will hold your content.
-
The right container will act as spacing to balance the layout visually.
-
Step 4: Style the Left Container
-
Click into the left container.
-
Go to Style > Background > Classic.
-
Set the background color to:
#FFF1CD. -
Go to Advanced > Padding.
-
Keep values linked and set Padding to 65px.
Step 5: Add and Style the Heading
-
Drag a Heading widget into the left container.
-
Change the heading tag to H3.
-
Add a short title that introduces what this section is about (e.g. “More Ways We Help”).
Step 6: Add Supporting Text
-
Drag in a Text Editor widget below the heading.
-
Add a short paragraph describing your additional offerings or benefits.
Step 7: Add an Icon List
-
Search for Icon List and drag it beneath the paragraph.
-
Delete two of the default items—keep just one.
-
Click into the list item and update the text.
-
Click the duplicate icon to add as many items as you need.
Step 8: Style the Icon List
-
Go to Style > List and increase space between items for readability.
-
Go to Style > Icon:
-
Set the icon color to your brand’s orange.
-
Set the icon size to
20px.
-
Step 9: Adjust Spacing on the Text
-
Click into the Text Editor widget above the icon list.
-
Go to Advanced > Margin.
-
Unlink the values and set the Bottom Margin to -17px to close the space.
Step 10: Adjust the Background Image Size
-
Select the main section container (with the background image).
-
Scroll to Background > Size and set it to Custom.
-
Change the width to 74%.
-
This allows the beige container to slightly overlay the background, giving the section a nice dimensional feel.
-
Step 1: Add a New Section
-
Click the ➕ icon to add a new Flexbox container section.
-
Set the layout to column (vertical direction).
-
This section should sit flush with the one above it, so no top margin is needed.
Step 2: Add a Gradient Background
With the section selected, go to the Style tab.
Under Background Type, select Gradient.
Set:
First color: Gold
Second color: Orange
Angle: 176°
Step 3: Add a Patterned Background Overlay
Scroll down to Background Overlay in the Style tab.
Under Background Type, choose Classic.
Upload and insert the pattern image associated with this lesson.
Set the image properties:
Position: Center Center
Attachment: Scroll
Repeat: No-repeat
Size: Cover
Step 4: Add Padding for Spacing
Go to the Advanced tab for the section.
Unlink padding values.
Set Top and Bottom Padding to 100px.
Step 5: Add and Style the Heading
Drag in a Heading widget.
Leave the tag as H2.
Change the text to something like: “Words from Our Customers”.
Go to Style > Text Color and set it to white.
Set Alignment to center.
Step 6: Add Supporting Text
Drag in a Text Editor widget beneath the heading.
Add a short description about how much you value feedback or your customer relationships.
Go to Style > Alignment and set it to center.
Step 7: Add a Container for the Testimonials
Drag a new Flexbox container into the section.
Inside that, add one inner container (this will become your first testimonial).
You’ll duplicate this later to create more.
Step 8: Style the Testimonial Box
Click into the testimonial container.
Go to Style > Background Type > Classic, and set the background to white.
Go to Style > Border Radius, and set it to 30px.
Go to Advanced > Padding, unlink values, and set it to 30px all around.
Step 9: Add the Testimonial Text
Inside the testimonial box, drag in a Text Editor widget.
Paste in your testimonial or placeholder text.
Step 10: Add and Style the Customer Image and Name
Drag in an Image Box widget.
Upload a square image for the customer.
Change the title text to something like “John Doe”.
Delete the description field.
Change the Title Tag from H3 to Paragraph (P).
Go to Style > Image:
Position: Left
Vertical Alignment: Middle
Size: Set to Pixels, then enter
40pxBorder Radius: 50 (to make it a circle)
Go to Style > Content > Title:
Set the font size to 15px
Go to Advanced > Margin for the Image Box:
Unlink values and reduce bottom spacing as needed.
Step 11: Adjust Layout Gaps
Click into the testimonial container.
Go to Layout > Gap, and set it to 0 to reduce space between elements.
Step 12: Duplicate Testimonials
Right-click the entire testimonial container and select Duplicate.
Do this once or twice to create 2–3 testimonial blocks.
Click into the container that holds all of them and set the layout to Row so they sit side-by-side.
Step 13: Adjust Overlay Opacity
Click back into the main section container (not the testimonials).
Go to Style > Background Overlay.
Scroll to Opacity, and lower it to
0.12so the pattern is subtle and doesn’t interfere with your text.
Step 1: Copy an Existing Section
-
Scroll to the top of the page and locate the section you’d like to reuse (like your “About Company” section or any CTA you’ve already styled).
-
Right-click on the section and select Copy.
Step 2: Paste the Section into the Bottom of the Page
Scroll to the bottom of your homepage.
Right-click inside the blank area beneath your testimonials or previous section.
Select Paste to insert the copied section.
Step 3: Update the Headline
Click on the Heading widget in your newly pasted section.
Change the text to something short and inviting, like:
“Let’s Chat” or “Ready to Get Started?”
Step 4: Edit the Supporting Text
Click into the Text Editor widget under the heading.
Write a short, warm message—something like:
“We’d love to learn about your business and how we can support your goals. Reach out today to start the conversation.”
Step 5: Add a Button
-
Scroll up to your earlier section where you already created a button.
-
Right-click the About Us button and select Copy.
-
Scroll back down to your CTA section, right-click underneath the text editor, and choose Paste.
Step 6: Style the Button
-
Click into the button to edit it.
-
Go to the Style tab:
-
Change the Background Color to your brand’s yellow.
-
Set the Border Type to None.
-
Change the Text Color to White (or another legible contrast).
-
-
You can keep the existing hover settings unless you want something different.
Step 7: Update the Button Text and Link
-
Go to the Content tab of the button.
-
Change the text to: “Get in Touch”.
-
Under Link, type in
contactand select your Contact page when it appears.
Brand Kit not displaying properly?
- Navigate back to the WordPress Dashboard > Elementor > Settings.
- Check the boxes to Disable Default Colors and Disable Default Fonts.
- Click Save.
Homework & Action Items
- Drop some headings, buttons, and text into your Dev page and preview them.
- Try changing one color in the Global Color settings and watch it update across all widgets that use that color.
- Up next: We’ll start building out your real Home page, putting your brand kit into action. To get the most out of the next set of lessons, please make sure you’ve played with the Containers and Style settings in your Dev page.