How to Build a Website Using Elementor (Step-by-Step)

Elementor allows you to build professional websites visually by dragging and dropping elements onto a page. No coding is required for most designs.

What You Need

Before starting, make sure you have:

• WordPress installed
• Elementor installed and activated
• A theme such as Hello Elementor or Astra

Step 1: Install Elementor

1. Login to your WordPress Dashboard.
2. Go to Plugins → Add New.
3. Search for Elementor.
4. Click Install Now.
5. Click Activate.

Step 2: Install a Theme

Go to:

Appearance → Themes → Add New

Search for:

• Hello Elementor
• Astra
• Kadence

Install and activate one.

Step 3: Create Your Website Pages

Go to:

Pages → Add New

Create:

• Home
• About
• Services
• Blog
• Contact

Publish each page.

Step 4: Set the Homepage

Go to:

Settings → Reading

Choose:

A Static Page

Set:

• Homepage = Home

Click Save Changes.

Step 5: Open Elementor

1. Open the Home page.
2. Click Edit with Elementor.

You will see:

• Left panel = Widgets
• Right side = Live website preview

Step 6: Build the Hero Section

The Hero Section is the first thing visitors see.

Add a Section

1. Click the + icon.
2. Select a one-column layout.

Add Widgets

Drag:

• Heading
• Text Editor
• Button

Example:

Heading

Professional Website Design & ICT Training

Text

Helping businesses grow online with modern web solutions.

Button

Get Started

Add a background image to make it attractive.

Step 7: Create a Services Section

Add a new section with three columns.

In each column add:

Icon

Heading

Description

Example:

Website Design

Responsive websites for businesses.

ICT Training

Practical technology training.

Script Installation

Professional setup and customization.

Step 8: Add an About Us Section

Create a two-column layout.

Left Column

Company image.

Right Column

Company information.

Example:

SKOC Global provides web development, ICT training, hosting solutions, and script installation services for clients worldwide.

Add a button:

Learn More

Step 9: Add Portfolio Section

Showcase your work.

Drag:

• Image Gallery Widget

Add screenshots of websites you have built.

This helps build trust with visitors.

Step 10: Add Testimonials

Create a section for customer reviews.

Example:

⭐⭐⭐⭐⭐

Excellent service and fast delivery.

⭐⭐⭐⭐⭐

Highly recommended for web design projects.

Step 11: Add a Contact Section

Install:

WPForms

Create a contact form.

Drag the shortcode widget into Elementor and insert the form.

Include:

• Name
• Email
• Phone Number
• Message

Step 12: Build the Header

Your header should contain:

• Logo
• Menu
• Contact Button

If using Elementor Pro:

Templates → Theme Builder → Header

Create a custom header.

Step 13: Build the Footer

Include:

• Company Name
• Contact Information
• Social Media Links
• Copyright Notice

Example:

© 2026 SKOC Global. All Rights Reserved.

Step 14: Create a Navigation Menu

Go to:

Appearance → Menus

Create menu items:

• Home
• About
• Services
• Blog
• Contact

Assign as Primary Menu.

Step 15: Optimize for Mobile

Click Elementor’s Responsive Mode.

Check:

• Desktop
• Tablet
• Mobile

Adjust:

• Font sizes
• Images
• Button sizes
• Spacing

More than half of website visitors use mobile devices.

Step 16: Add Essential Plugins

Useful plugins include:

• Elementor
• Rank Math
• WooCommerce
• LiteSpeed Cache
• WPForms

Example Layout for SKOC Global

Section 1: Hero Banner

• Headline
• Description
• CTA Button

Section 2: Services

• Website Design
• ICT Training
• Script Sales

Section 3: About Us

Section 4: Portfolio

Section 5: Testimonials

Section 6: Contact Form

Section 7: Footer

SEO Checklist

• Use one H1 heading per page.
• Install Rank Math.
• Compress images.
• Add image ALT text.
• Use keywords naturally.
• Create fast-loading pages.
• Make pages mobile-friendly.
• Submit your site to search engines after launch.

Please follow and like us: