Weekend Website Bootcamp

Create Your Footer

26 minutes

Step 1: Set Up the Footer Template

  • Go to Unlimited Elements > Header & Footer Builder.

  • Click Add New.

  • Title it Footer, set the type to Footer, and choose Display on Entire Website.

  • Click Publish, then open it in Elementor.

Step 2: Build the Footer Container Structure

  • Drag a container onto the canvas.

  • Set the background color to a gray tone from your brand palette.

  • Inside that container, add 4 inner containers side-by-side:

    • Go to the parent container and set the direction to horizontal (row).

Each container will represent a column:

  1. Logo, description, and social icons

  2. Quick Links

  3. Get in Touch

  4. Newsletter sign-up

Step 3: Style and Add Content to the First Column (Logo + Social)

  • Add your logo image (195px wide, aligned left).

  • Add text for a brief description (14px font size).

  • Add social icons:

    • Shape: Circle

    • Colors: Black icons on white background

    • Hover Color: Orange

    • Size: 15px

    • Alignment: Left

  • Remove default spacing by setting container gap to 0.

  • Add 10px top margin to the text if needed for spacing.

Step 4: Add Quick Links in the Second Column

  • Add a text heading: “Quick Links” (16px, semi-bold).

  • Add 50px top padding to align with the logo.

  • Drag in an Icon List Widget and delete the extra list items.

  • Fill out links:

    • About

    • Services

    • Projects

    • Contact

  • Remove icons from each list item.

  • Style the links:

    • Font size: 14px

    • Color: Black

    • Hover Color: Orange

  • Reduce spacing by setting gap to 0 and adjusting bottom margin of the heading if needed.

Step 5: Add Contact Info in the Third Column

  • Duplicate the Quick Links column.

  • Rename the heading to “Get in Touch”.

  • Use an Icon List Widget with:

    • Phone: Use tel:0000000000 as the link for mobile tap-to-call.

    • Email: Use mailto:info@company.com as the link.

  • Bold the “P” or “E” in each line to visually distinguish.

Step 6: Add Newsletter Form in the Fourth Column

  • Duplicate the column again and move it to the last position.

  • To add a form:

    • Go to Plugins > Add New > Search for WPForms and install it.

    • Create a new form titled “Newsletter Sign Up”.

    • Use the Newsletter Signup Template.

    • Remove the Name field—keep only Email.

    • Add placeholder text “Email” and hide the label.

    • Save the form.

    • Under Settings > Notifications, add the email address you want form submissions to go to.

    • Go to WPForms > Settings > General > Set Form Styling to Base Styling Only.

  • Copy the shortcode for the form.

  • Return to the Elementor footer template.

  • Add a Shortcode Widget in the fourth column and paste the form shortcode.

  • Set the container gap to 0 again.

Step 7: Add Copyright and Privacy Policy

  • Add a new container underneath the footer columns.

  • Adjust layout direction to column vertical so it stacks below.

  • Paste an existing list widget into this new container.

  • Add 3 list items:

    • Copyright

    • Privacy Policy

    • (Optional) Terms of Service

  • Add the proper links or remove links if not needed.

  • Write your copyright like this:
    © 2025 Your Company Name

Homework & Action Items

  • Customize your footer text, links, and styles to match your brand.
  • Test the newsletter form and make sure the emails are going to the right place.
  • Add a published Privacy Policy to your site using WordPress’s default draft as a base.
  • Double-check how the footer looks on mobile and make any layout adjustments.

You did great.

We can take it from here.

Thanks for purchasing the course and giving it a try! As a thank you, we’re offering you 20% off a 10-page website build. We’ll get it up for you within a week. Let’s chat about it!