A few weeks ago, I was helping someone set up their website. The goal was simple: build a clean, professional website from scratch using only free tools. We already had the domain ready, and the plan was to use Elementor Free, along with a few smart plugins, to create something solid, without spending a dime on premium themes or builders.
It felt like the perfect opportunity to document the whole process — every step, every plugin, every click, and turn it into a full-blown tutorial for beginners.
Why? Because when I first got into WordPress, I spent hours (okay, days) trying to figure out what to do next. I watched YouTube videos, read blog posts, and still got stuck in the loop of trial and error.
If that sounds like you right now, trust me, I get it.
That’s why I’ve created this detailed guide: to walk you through the entire process, with real screenshots and explanations that actually make sense. No fluff. No complicated jargon. Just what you need to get your first WordPress website up and running.
Who This Is For:
- You’re a complete beginner trying to build a site on your own
- You’ve heard about WordPress but have no idea where to start
- You’re using Elementor Free and want to get the most out of it (including how to build a custom header and footer without Elementor Pro)
- You want a simple, step-by-step process — no coding, no confusion
What We’ll Cover (With Screenshots!):
- Starting From cPanel
- How I installed WordPress using cPanel’s Softaculous tool
- Setting up the database, admin login, and getting into the WordPress backend
- Installing Elementor and Getting Set Up
- Why I chose Elementor Free and how I connected my account
- My go-to Elementor setup tricks
- Must-Have Free Plugins I Used
- UpdraftPlus for backups
- Simple Custom CSS & JS for adding custom code (no child theme drama)
- Ultimate Addons for Elementor Lite — this one’s a game-changer
- Google Site Kit for SEO, analytics, and performance insights
- (…plus a few more)
- Building the Header and Footer (Without Elementor Pro!)
- Using the Ultimate Addons plugin to unlock header/footer building
- Designing a clean, custom header and footer that works across pages
- Designing the Homepage With Elementor Free
- How I structured the layout
- Creating sections like the Hero, About, Services, Contact, etc.
- Making it look good on mobile too
- Final Touches
- Tweaking permalinks, setting up backups, configuring SEO basics
- Checking for mobile responsiveness
- Getting ready to go live
Let’s Get Into It
This guide is going to be quite long, but it’s meant to be your step-by-step companion. Whether you’re building a portfolio, blog, or business site, just follow along, take your time, and use the screenshots for guidance.
Let’s start from the very beginning — how I installed WordPress from cPanel.
Step 1: Installing WordPress From cPanel (The Foundation)
Alright, here’s where it all begins.
We already had the domain purchased and connected to the hosting, so the next step was getting WordPress installed, and for that, I used cPanel, which most web hosting providers offer.
Honestly, the first time I opened cPanel, it felt like walking into a cockpit, so many buttons everywhere. But don’t worry, I’ll show you exactly what to click.
Step-by-Step: Installing WordPress Using Softaculous in cPanel
1. Log in to your cPanel
Your hosting provider should have sent you the login link and details. Once you’re in, scroll down until you see something called Installatron Applications Installer or Softaculous Apps Installer (or just search for “Softaculous” using the search bar at the top).
2. Click on the WordPress icon
Inside the Installatron Applications Installer or Softaculous section, you’ll see the WordPress logo. Click it. This will open the WordPress installer page.
3. Click on “Install Application”
This brings up the actual installation form. Don’t get overwhelmed, it’s mostly just filling in basic info.
4. Fill out the installation details:
- Choose Protocol: If you have SSL already set up, choose https://, otherwise, select http://.
- Choose Domain: Select the domain where you want WordPress installed.
- In Directory: Leave this blank if you want WordPress on the main domain (like yourdomain.com). If you write something here (e.g., “blog”), your site will install at yourdomain.com/blog.
- Create your admin username and password: This part is super important. Choose something secure and memorable (and avoid using “admin” as the username — it’s too common and risky).
- Just go through the form and fill it out, and if you are confused on what to input in any of the fields, you can always Google or research about the best information to use
5. Click “Install” and wait
in a few seconds, your new WordPress site will be live!
What’s Next?
Once the installation is complete, you’ll see a link to log in to your WordPress dashboard — it’ll look something like this: yourdomain.com/wp-admin
Go ahead and click that. Log in using the username and password you just created.
And just like that… You’re inside your WordPress dashboard! Welcome to your new website.
Next, I’ll show you how I installed Elementor Free, connected my account, and got the page builder ready to use.
Step 2: Installing Elementor and Getting Set Up
After getting WordPress installed and accessing the dashboard, the next big step was choosing the right page builder. For me, the answer was simple: Elementor.
Why I Chose Elementor Free
I went with the free version of Elementor for a few reasons:
- Beginner-friendly: Elementor’s drag-and-drop interface makes designing pages incredibly easy — no need for coding knowledge.
- Lightweight but powerful: Even without the Pro version, you get a solid set of widgets and layout controls.
- Flexible: I could build almost every section I needed on the homepage using just the free version.
Another reason I stuck with the free version is because of a plugin called Ultimate Addons for Elementor – Lite. It unlocks advanced layout features like custom headers and footers, which are usually exclusive to Elementor Pro. This was a game-changer for me, especially since I wanted to keep costs low without compromising on design quality.
Connecting My Elementor Account
After installing Elementor from the WordPress plugin directory (Plugins > Add New > Search “Elementor”), I activated it and connected my account to unlock template kits and updates. It’s a simple one-click connection, just log into your Elementor account when prompted, and you’re in.
My Go-To Elementor Setup Tricks
Here are a few things I always do right after installing Elementor:
- Set the default page layout to “Elementor Canvas” – this gives me a blank slate to design with no distractions.
- Disable default colors and fonts in Elementor settings – so I can control everything through global styles or custom CSS.
- Install the Ultimate Addons plugin – to get access to features like header and footer builder, modal popups, and extra widgets.
- Use the Navigator tool (bottom-left panel in Elementor) – it helps organize and navigate between sections, especially on long pages.
- Save sections as templates – so I can reuse headers, hero sections, or calls-to-action on other pages without starting from scratch.
With these in place, I was ready to start building out the rest of the site.
Step 3: Must-Have Free Plugins I Used
As I started building the site, I quickly realized that the right set of plugins could make or break the workflow. I wanted to keep things lightweight but still powerful — so I handpicked a few free plugins that I now consider must-haves for every WordPress project.
UpdraftPlus – For Backups
This was the very first plugin I installed after Elementor.
Why? Because anything can go wrong, and having a reliable backup system is non-negotiable.
With UpdraftPlus, I could schedule automatic backups and even connect them to Google Drive. So if I ever messed something up, I knew I had a clean version to restore.
Simple Custom CSS & JS – For Custom Code (Without the Child Theme Drama)
Sometimes you just need to add a little custom CSS or JavaScript to get something working exactly the way you want. Instead of diving into theme files or creating a child theme, I installed Simple Custom CSS & JS.
It lets you safely add custom styles and scripts right from the dashboard, and keeps your changes safe even when the theme updates. Huge time-saver.
Ultimate Addons for Elementor Lite – A Total Game-Changer
This one deserves a special shoutout.
Elementor Free doesn’t come with a theme builder, so things like custom headers and footers are normally off-limits. But with Ultimate Addons for Elementor Lite, I was able to create and assign a custom header and footer without upgrading to Pro.
It also adds some really handy widgets like advanced buttons, modals, and infoboxes that help your pages stand out, all for free.
Google Site Kit – For SEO, Analytics & Performance Insights
I wanted to track performance, search traffic, and user behavior, but I didn’t want to install a bunch of separate plugins for Google Analytics, Search Console, PageSpeed Insights, etc.
Google Site Kit brought everything together in one clean dashboard inside WordPress. I could see SEO metrics, performance reports, and even AdSense info, all without leaving my admin panel.
These tools helped me streamline the build process, avoid unnecessary headaches, and set the site up for long-term success.
Step 4: Building the Header and Footer (Without Elementor Pro!)
One of the biggest limitations of using Elementor Free is that it doesn’t come with a theme builder, meaning you can’t create a custom header or footer… unless you upgrade to Pro.
But here’s the good news: I found a completely free workaround using the Ultimate Addons for Elementor Lite plugin.
Once I installed and activated Ultimate Addons for Elementor Lite, a new option appeared on the WordPress dashboard sidebar called UAE. When you hover over it, you’ll see a few options:
- Dashboard
- Header & Footer Builder
- Settings
Let’s walk through how I used this to create a custom Header:
Step-by-Step: Creating the Header
- Click on “Header & Footer Builder”
This is where you can create your header and footer templates. - Create a new template
- Give it a name (I called mine “main header”).
- Under “Type of Template”, choose Header.
- Under “Display On:”, select Entire Website — so the header appears on all pages.
- For User Role, select All — so everyone can see it, whether logged in or not.
- Check the box that says: Enable Layout for Elementor Canvas Template.
- Click the blue “Edit with Elementor” button
This opens up the Elementor editor where you can now design your header just like any other section of your website.
Adding Navigation Links
In most headers, you’ll want to include links like:
- Home
- About
- Blog
- Contact
To make those links work, you’ll need to create those pages first:
- Go to your WordPress dashboard
- Click on Pages > Add New
- Create the pages you want (e.g., Home, About, Blog, Contact)
- Publish them
Creating a Navigation Menu with Your Pages
Before your “Nav Menu” widget in Elementor can display anything, you need to create and assign a menu in the WordPress backend. Here’s how to do it:
Step 1: Go to Menus
- From your WordPress dashboard, go to Appearance > Menus.
- You’ll see an option to create a new menu. Click that
3. Give your menu a name — something like Main Menu (this name won’t be shown to users; it’s just for your reference).
Step 2: Add Your Pages to the Menu
- On the left, you’ll see a list of pages you’ve already created (e.g., Home, About, Blog, Contact).
2. Check the boxes next to the pages you want to add to the menu.
3. Click “Add to Menu”.
Step 3: Arrange the Menu Items
- Drag and drop the menu items to reorder them the way you want (e.g., Home should usually come first).
Step 4: Set the Display Location (Optional but Helpful)
- Some themes require you to assign the menu to a location (like Primary Menu).
- Check the box that says “Primary Menu” or “Header Menu”, depending on your theme.
Step 5: Save the Menu
- Don’t forget to click the “Save Menu” button.
Connect It in Elementor
Now when you go back to UAE > Header (main header ) and click on “Edit with Elementor”, and you drag in the Nav Menu widget, you’ll be able to select the menu you just created (e.g., Main Menu) from the dropdown list.
You can now style your nav menu, adjust spacing, change alignment, and make it match your site’s design.
Designing a Clean, Custom Header and Footer
I kept the header minimal and functional — with a logo on the left and navigation links on the right. Thanks to Elementor’s drag-and-drop tools, it was super easy to customize the spacing, colors, and mobile responsiveness.
Adding a Logo and Navigation Menu to the Header
To create a clean layout with your logo on the left and navigation links on the right, here’s what I did inside the Elementor editor:
- Click the plus (+) icon in the center of the Elementor canvas.
- It’ll ask you to choose between Flexbox and Grid — choose Flexbox
3.Then select the two-column container option.
Now you have two columns:
Left Column – This will hold your logo.
Right Column – This will hold your navigation menu.
Adding the Logo
- Click inside the left column.
- From the Elementor widget panel, drag the “Image” widget into that space.
- Upload or select your logo from the media library.
Adding the Navigation Menu
- Click inside the right column.
- Drag the “Nav Menu” widget from the widget panel into that space.
- Choose the appropriate menu from the dropdown (you should already have your menu created under Appearance > Menus in WordPress).
Layout Tips
-
- Make sure to align items centred vertically within the Flexbox container.
- Use padding or margin to give your header some spacing.
- You can tweak the column widths to ensure the logo and menu look balanced.
How to Build a Custom Footer Using UAE (Ultimate Addons for Elementor)
Now that we’ve built a custom header, it’s time to complete the layout with a custom footer. The footer helps visitors navigate, connect with you, and see legal info or branding.
We’ll use the Header & Footer Builder from UAE, just like before.
Step-by-Step: Create the Custom Footer
- Go to WordPress Dashboard > UAE > Header Footer Builder
- Click Add New and name it something like Footer.
- Under Type of Template, choose Footer.
- For Display On, select Entire Website.
- For User Roles, choose All.
- Tick the checkbox: Enable Layout for Elementor Canvas Template
- Click the blue Edit with Elementor button.
Designing the Footer Structure (With Containers)
- Add a Container ? choose Flexbox Container
- Use the three-column layout:
- Left Column – Logo and description
- Middle Column – Quick links
- Right Column – Social icons
Section 1: Logo & About Text
- Drag in an Image widget to add your logo.
- Under it, drag in a Text Editor widget to add a short tagline or description about your brand.
Section 2: Quick Links
Instead of manually adding text links one by one, the Icon List widget allows you to add a clean, styled list of links with small icons beside each one.
Steps:
- In your Quick Links column, drag in the Icon List widget.
2. For each list item:
-
- Set the text to your page name (e.g., Home, About, Contact).
- Set the link to the appropriate page URL.
- Optionally, change the icon to something simple like:
Home – use a house icon
About – use a file or info icon
Contact – use a mail icon
-
3. Use the Style tab to:
-
- Change icon color
- Add spacing between items
- Adjust text and hover effects
Section 3: Social Icons
- Add a Heading: “Follow Us”
- Use the Social Icons widget to add Facebook, Twitter, Instagram, LinkedIn, etc.
Final Touch: Copyright Section
- Add another Container below the main one (you can use a single-column layout).
- Inside, drag a Text Editor widget and write: © 2025 YourCompanyName. All rights reserved.
You can also center it and reduce the font size for subtlety.
Styling Tips
- Use consistent spacing and padding.
- Keep the background color dark and text light for contrast.
- Use your brand colors for icons and link hover effects.
Step 5: Designing the Homepage With Elementor Free
Now that we’ve set up our custom header and footer, and created essential pages like Home, About, Blog, and Contact, it’s time to bring the homepage to life with a clean, professional layout, all using Elementor Free.
Structuring the Homepage Layout
Before jumping into design, I like to plan the homepage in clearly defined sections. Elementor’s Flexbox Containers make this process flexible and modern.
Here’s a layout you might want to follow for your homepage:
- Hero Section
A bold welcome message with a short intro, background image, and a clear call-to-action (CTA) button. - Services Section
A quick overview of the services you offer — usually in a 3-column layout with icons or images. - About Section
A short intro about your brand, values, or story. - Testimonials Section
Showcasing real feedback to build credibility and trust. - Call-to-Action Section
A strong prompt encouraging users to get in touch, sign up, or take the next step. - Footer
Already handled earlier with the custom footer built using UAE (Ultimate Addons for Elementor).
Note:
This homepage layout is just a starting point — a summary of what you might include. Each section (like Services, About, or Blog) can and should have its own separate page where you can dive deeper and add more detailed content.
You can also include additional sections like FAQs, Portfolio, Partners, or anything else that fits your goals and design vision. It’s all up to you and how you want your website to communicate.
To create each section, click the plus + icon inside the Elementor canvas and choose Flexbox Container (instead of the old sections). This gives you more control and responsiveness in your design.
Now let’s start with the Hero Section
How to Create a Hero Section Using Elementor (With the New Flexbox Container)
The Hero Section is the bold first impression — it’s where your site’s message, visuals, and CTA come together. Let’s build it the right way using Elementor’s new Container system.
What You Need in a Hero Section:
- A background image or video
- A headline (H1) that captures attention
- A short description or supporting text
- A call-to-action (CTA) button (e.g., “Get Started”, “View Courses”)
- Optional: An illustration or hero graphic
Step-by-Step: Building a Hero Section in Elementor (Free)
- Create a New Section
- Click the plus + icon in the Elementor editor, choose Flexbox.
- Choose a 1-column layout (we’ll build inside it).
- Set the section height to “Min Height” and choose something like 600px (or lessers, depending on what you want) or 100vh for a full-screen look.
- Add a Background Image
- Select the section by clicking the 6-dot handle.
- In the left panel, go to Style > Background > Classic, and upload your Hero image.
- Set:
- Position: Center Center
- Attachment: Scroll (or Fixed if you want a parallax feel)
- Repeat: No-repeat
- Size: Cover
- Add the Hero Content
- Drag an inner section into the section (for layout flexibility).
- In the left column:
- Add a Heading widget – This is your main headline.
- Add a Text Editor widget – Short, engaging text (1–2 lines).
- Add a Button widget – Use this for your CTA (e.g., “Join Now”).
- You can center them vertically by selecting the section > Layout > Vertical Align: Middle
- Optional: Add a Graphic or Illustration
- In the right column (if using two columns), drag in an Image widget.
- Upload an illustration or image to go with your headline.
- Make It Responsive
- Switch to Tablet and Mobile views.
- Adjust text sizes and spacing.
- Stack the columns vertically for mobile if you used two.
Example Use Case
Let’s say your site is about a Web Development course:
- Background Image: A photo of a developer at work
- Headline: “Launch Your Tech Career Today”
- Text: “Join our 3-month intensive web dev course – no experience needed.”
- Button: “Apply Now”
2. Services Section – Showcase What You Offer
A well-structured Services section gives visitors a clear overview of what you do.
How to Set It Up:
- Click the plus + icon in the Elementor canvas and choose a Flexbox Container.
- Select a 3-column layout if you want to highlight multiple services side-by-side.
- In each column, you can use the Icon Box widget (free) or Info Box (if you’re using an addon like Ultimate Addons for Elementor Lite).
- Customize each box:
- Choose a relevant icon for the service.
- Add a short title (e.g., “Drain Cleaning”).
- Write a brief description (1–2 sentences).
- Optionally, link each box to a detailed service page.
If you prefer using images instead of icons, you can use the Image Box widget instead.
3. About Section – Share Your Brand Story
This section gives your visitors insight into who you are.
Steps:
- Add a new 2-column Flexbox container.
- On one side, use the Image widget to upload a relevant photo (e.g., founder, workspace, team).
- On the other side, add a Heading widget for a title like “About Us”, and a Text Editor widget for a short introduction.
- If you’ve created a separate About page, include a Button widget labeled “Read More” linking to it.
You can also include a video using the Video widget if you want a more dynamic intro.
4. Testimonials Section – Build Trust
Testimonials are great for social proof and credibility.
You Can Build It Like This:
- Use a single-column or two-column container.
- In each container, add:
- A Text Editor widget for the testimonial quote.
- A Heading or Text Editor widget for the client’s name.
- Optionally, add an Image widget for a photo or logo.
- To enhance the section later, consider:
- Using a Testimonial Carousel (available in many free addon packs).
- Adding star rating widgets.
Don’t worry about making it fancy at first — clean layout and legible text go a long way.
5. Call to Action (CTA) Section – Guide Users to Act
A Call to Action section prompts users to take a step — contact you, sign up, or explore more.
How to Do It:
- Add a full-width Flexbox container.
- Drag in a Heading widget with a message like “Ready to get started?” or “Let’s work together”.
- Add a Button widget for the action — “Contact Us”, “Book a Call”, or “Get a Quote”.
- Use the Style tab to make this section visually distinct with a background color or image.
Make sure the CTA is aligned with your website goal.
Making It Mobile Responsive
After setting up your desktop layout, always optimize for smaller screens.
Use Elementor’s Responsive Mode:
- Click the Responsive Mode icon at the bottom-left of the Elementor panel.
- Toggle between Tablet and Mobile.
For each device:
- Adjust font sizes (Style > Typography).
- Modify margins and padding to avoid crowding.
- Center-align content where needed.
- Use Elementor’s visibility settings if you want to hide or change layouts on certain devices.
Pro Tip: Always test on a real phone or use browser DevTools (Inspect > Device Toolbar) for real-world accuracy.
Final Touches – Wrapping Up Your Site Setup
Before you hit “Publish” and share your site with the world, there are a few final things to take care of. These steps ensure your site is well-structured, protected, optimized, and mobile-friendly.
1. Tweak Your Permalink Settings
Permalinks control the structure of your URLs — it’s important for SEO and readability.
How to do it:
- Go to Settings > Permalinks in your WordPress dashboard.
- Select the “Post name” option (recommended for most sites).
- Click Save Changes.
This makes your URLs cleaner (e.g., yourwebsite.com/about-us) instead of something like ?p=123.
2. Set Up Automatic Backups
You’ve spent a lot of time building your site — now it’s time to protect it.
Use a plugin like UpdraftPlus:
- Install & activate the plugin.
- Go to Settings > UpdraftPlus Backups.
- Connect to a cloud service (Google Drive, Dropbox, etc.).
- Set automatic backup schedules (e.g., weekly files and daily database).
Backups are essential in case of errors, updates gone wrong, or hacks.
3. Configure Basic SEO Settings
Even if you’re not an SEO expert, basic setup can go a long way.
Use Google Site Kit or an SEO plugin like Rank Math or Yoast:
- Google Site Kit lets you connect:
- Google Search Console
- Google Analytics
- PageSpeed Insights
- Yoast/Rank Math allow you to:
- Add meta titles and descriptions
- Generate sitemaps
- Improve content readability and SEO
Don’t forget to submit your sitemap to Google Search Console once connected.
4. Final Mobile Responsiveness Check
Even if you adjusted sections in Elementor, always do a final mobile pass.
Steps:
- In Elementor, click the Responsive Mode icon.
- View your homepage and other key pages in Tablet and Mobile.
- Check:
- Font sizes and spacing
- Button alignment
- Navigation menu functionality
Open your site on real devices or use Chrome DevTools for a more accurate test.
5. Getting Ready to Go Live
You’re almost there! Here’s what to check:
- All essential pages (Home, About, Blog, Contact) are published
- Menu is created and assigned in Appearance > Menus
- Custom Header & Footer are displaying properly
- Logo and favicon are uploaded (Appearance > Customize > Site Identity)
- Contact forms (if used) are working
- Social links open in a new tab
- Backup & SEO plugins are configured
Once everything looks good, share your link and celebrate — your Elementor site is live!