Welcome to Part 3 of our Live Website Design Project Series, brought to you by 24SiteShop, your trusted web development partner. In this detailed walkthrough, we guide you through designing a complete WordPress website using Elementor, all in just 2 hours.
This post accompanies our YouTube tutorial and serves as a structured breakdown of the project, ideal for learners, freelancers, and business owners looking to master WordPress website creation.
If you’re building a client project, personal brand, or business site, this tutorial equips you with the skills to design a fast, responsive, and modern website — from start to finish.
What You’ll Learn in This Tutorial
This project is a full real-world implementation, and you’ll learn:
- How to set up WordPress and configure core settings
- Selecting and installing the right theme for performance and design
- Using Elementor to design each section visually without coding
- Creating key pages: Home, About, Services, Contact, Blog
- Designing a functional header and footer using Elementor
- Installing essential plugins and configuring them
- Adding responsive contact forms using Forminator
- Structuring a blog page for content marketing and SEO
- Optimizing layout and responsiveness for all devices
By following this tutorial, you’ll have the foundational knowledge and practical steps to design and deploy a complete WordPress site for your own brand or for clients.
Project Structure and Video Timestamps
For ease of navigation, here’s a section-wise breakdown of the tutorial and where to find each step in the video:
| Section | Time |
|---|---|
| Introduction | 00:00 |
| Theme Installation | 04:56 |
| Plugin Installation | 07:09 |
| WordPress General Settings | 09:00 |
| Creating Pages | 11:44 |
| Navigation Menu Setup | 14:25 |
| Designing Header with Elementor | 18:38 |
| Using ColorZilla for Color Picking | 26:40 |
| Home Page Design | 34:25 |
| Contact Form with Forminator | 01:20:11 |
| Blog Page Setup | 01:24:11 |
| Footer Design | 01:34:11 |
| Creating Internal Pages (Services, About, etc.) | 01:43:11 |
Tools and Plugins Used
WordPress
We’re using the latest version of WordPress with default settings optimized for clean structure and performance.
Elementor Page Builder
This is our primary design tool. It allows full control of layout and design using a simple drag-and-drop interface. No coding needed.
Forminator Plugin
Used for building custom contact forms, Forminator supports styling, anti-spam, notifications, and more.
ColorZilla (Chrome Extension)
A color-picking tool that helps us capture and match exact color codes to maintain brand consistency.
Designing the Home Page
The home page is the first impression of any website. In this project, we focus on:
- Creating a compelling hero section with headline, subheading, and call-to-action
- Structuring service or product highlights in a clean grid layout
- Adding client testimonials or brand logos for social proof
- Using spacing, alignment, and hierarchy for readability
- Maintaining mobile responsiveness across all devices
Each section is built with Elementor’s widgets and styled to match a modern aesthetic. We use global colors and fonts to ensure design consistency throughout the site.
Header and Footer Development
Both the header and footer are designed using Elementor’s theme builder.
Header:
- Includes logo and main navigation menu
- Designed to be sticky (remains visible on scroll)
- Clean and minimal for usability
Footer:
- Contains quick links, contact info, branding, and copyright
- Structured using columns for clarity
- Styled to match the site’s overall visual language
These areas are made responsive to ensure they look good on tablets and mobile devices.
Contact Page with Forminator
We use the Forminator plugin to create a professional contact form. Features include:
- Name, email, message fields
- reCAPTCHA protection
- Auto-responder email setup
- Custom styling through Elementor or plugin settings
This ensures your website can capture inquiries effectively without needing additional form builders or integrations.
Creating a Blog Page
Adding a blog is essential for SEO and content marketing. In this project:
- A Blog page is created and set as the “Posts Page” in WordPress settings
- Blog layout is designed using Elementor’s post widget (or native layout if preferred)
- This section is styled for clean reading, with post previews, thumbnails, and excerpts
This structure is ideal for publishing updates, tutorials, case studies, or company news.
Services and Other Internal Pages
To complete the website, we also build internal pages like Services, About Us, and FAQ. These pages:
- Follow a consistent layout and design structure
- Use Elementor to add icons, images, and columns for better UX
- Are optimized for clarity and client conversions
Each internal page is carefully built to reflect the overall branding and maintain UI consistency across the website.
Why This Tutorial Matters
This tutorial is more than just a walkthrough — it’s a real project that reflects the actual process agencies follow when building websites for clients. This makes it perfect for:
- New freelancers looking to understand client workflows
- Agency owners training their team
- Students or self-learners looking to master WordPress and Elementor
- Small businesses who want to build their own site without hiring developers
By building a complete site from scratch in one session, you’ll develop a true understanding of how pages, plugins, and design systems work together in WordPress.
Need Help or Want a Custom Website?
At 24SiteShop, we design and develop custom WordPress websites for businesses across industries. Whether you need a landing page, a portfolio, a business site, or a full eCommerce solution — we can help.
This WordPress website design tutorial is part of our ongoing commitment to helping learners, creators, and entrepreneurs master digital tools. With the help of Elementor, Forminator, and smart design choices, you now have the power to create professional websites that convert.
Make sure to bookmark this guide, subscribe to our YouTube channel, and follow 24SiteShop for more in-depth tutorials, live projects, and web development resources.
Have questions or feedback? Drop them in the comments below or message us directly. We’re here to support your learning journey.
