Introduction

Whether you are starting a business website, portfolio, agency site, blog, or eCommerce store, WordPress is one of the best website-building platforms. Combined with Elementor Pro (a visual drag-and-drop builder) and Astra Pro (a lightweight and customizable theme), you can create a beautifully designed website without writing a single line of code.

This guide will show you:
✅ How to set up WordPress
✅ How to install Astra and Elementor
✅ How to customize and design your pages
✅ How to optimize performance and publish your site

Even if you’re completely new — just follow each step carefully.
By the end, your website will be fully functional, mobile-responsive, and SEO-friendly.

What You Will Learn

• How to configure hosting & domain
• How to install WordPress
• How to install & activate Astra Pro
• How to install & activate Elementor Pro
• How to design professional pages
• How to improve website speed
• How to launch your site publicly

Before You Start: What You Need

Item	Purpose	Recommendation
Domain Name	Your website address	example: yourname.com
Web Hosting	Stores your website online	Hostinger, SiteGround, Bluehost
WordPress Installed	Website platform	Free
Astra Theme + Astra Pro Add-on	Theme & styling	Astra Pro (optional but recommended)
Elementor + Elementor Pro	Page building tool	Elementor Pro

Step 1: Buy Domain and Hosting

Visit a hosting provider such as:

• Hostinger – Affordable + fast
• SiteGround – High performance
• Bluehost – Beginner-friendly (recommended by WordPress)

Important Tip:

Choose a hosting plan that offers:
✅ Free SSL
✅ Free email
✅ 1-click WordPress installer
✅ Good customer support

Once purchased, log in to your hosting dashboard → use the 1-click WordPress installer to automatically set up WordPress.

Step 2: Log into Your WordPress Dashboard

Once installed, access your dashboard:

https://yourdomain.com/wp-admin

Enter your username and password.

You’re now inside the WordPress control panel — where all magic happens ✨

Step 3: Install the Astra Theme

Navigate to:

Appearance → Themes → Add New → Search “Astra” → Install → Activate

Astra is:

• Lightweight (loads fast)
• Easy to customize
• Perfect for Elementor users

Install Astra Pro (Optional)

If you purchased Astra Pro:

1. Go to Plugins → Add New → Upload Plugin
2. Upload Astra Pro Add-on ZIP file
3. Activate & enter the license key

Step 4: Install Elementor + Elementor Pro

Install Free Elementor Plugin

Go to:
Plugins → Add New → Search Elementor → Install → Activate

Install Elementor Pro (With Add-on)

Elementor Pro is the premium version of Elementor that unlocks advanced design features, professional widgets, templates, WooCommerce builder, form builder, and full theme customization capabilities.

If you’re serious about designing a professional and branded website, Elementor Pro is highly recommended.

Where to Get Elementor Pro

Click the link below to get Elementor Pro from the official website:

✅ Safe & Official Source
✅ Secure Payment
✅ Includes License Dashboard
✅ 30-Day Money Back Guarantee

1. Download Elementor Pro ZIP File

After purchasing Elementor Pro:

• Go to your Elementor Account Dashboard
• Click Downloads
• Download the Elementor Pro plugin ZIP file

2. Install Free Elementor First

Go to:
Plugins → Add New → Search “Elementor” → Install → Activate

This installs the core builder.

3. Upload and Install Elementor Pro Add-on

Now upload the Pro add-on ZIP file:

1. Go to Plugins → Add New
2. Click Upload Plugin
3. Select the Elementor Pro ZIP
4. Click Install Now
5. Click Activate

4. Connect Elementor License

After activation:

• Go to Elementor → License
• Click Connect & Activate
• Log in to your Elementor account

This enables all Pro features, templates, and form submissions.

Install Elementor Pro Add-on

Go to:
Plugins → Add New → Upload Plugin → Select Elementor Pro ZIP → Install → Activate

Enter your license key from the Elementor dashboard.

Step 5: Configure Website Global Design Settings

1. Set Logo

Appearance → Customize → Header → Logo

2. Configure Colors and Fonts

Use Astra Global Design or Elementor Theme Style.

Recommended Font Pair:

• Heading: Poppins or Montserrat
• Body Text: Inter or Open Sans

3. Set Button Style

Make sure all CTA buttons look consistent.

Pro Tip: Consistent branding increases trust and conversions.

Step 6: Create Essential Pages

Go to:
Pages → Add New

Create these pages:

• Home
• About
• Services / Products
• Blog
• Contact

Do not design them yet — just create and publish blank pages.

Step 7: Design Pages Using Elementor Pro

Open Home Page

Go to:
Home → Edit with Elementor

Now the Elementor visual editor will open — drag-and-drop to design.

Suggested Homepage Structure

Section	Description	Elementor Widgets
Hero Section	First impression banner	Heading, Text, Button, Image/Shape
About Section	Introduce your business	Image Box, Text Editor
Services Section	Show what you offer	Icon Box / Cards
Testimonials	Build trust & credibility	Testimonial or Carousel
Call-to-Action	Encourage contact	Button + Contact Form

Step 8: Create Contact Page With Form

Elementor Pro includes Form Widget — no need for plugin like WPForms.

Add fields:

• Name
• Email
• Message

Set email notifications:

• Go to Actions After Submit → Email

Step 9: (Optional) Set Up an Online Store

If you want to sell products or services:

1. Install WooCommerce
2. Set currency, payment, and shipping
3. Use Elementor WooCommerce widgets to design product pages.

Step 10: Optimize Your Website Speed

Install:

Plugin	Purpose
WP Rocket / Airlift	Caching & Minifying
ShortPixel / Imagify	Image Optimization
Cloudflare CDN	Faster global load times

Additional Speed Tips:

• Use compressed WebP Images
• Limit heavy animations
• Avoid too many plugins

Step 11: SEO Optimization for Better Google Ranking

Install Rank Math or Yoast SEO plugin.

Optimize:

• Write keyword-focused page titles
• Add meta descriptions
• Use header structure (H1 → H2 → H3)
• Add alt text to images

Step 12: Publish Your Website

Go to:
Settings → Reading
Set Homepage to the page you designed.

Preview → Check responsiveness → Click Publish

🎉 Congratulations! Your website is now live!

Final Thoughts

Elementor Pro and Astra Pro together let you build high-quality, professional websites without needing technical skills. Whether you’re building for yourself or clients, this workflow is efficient, scalable, and beginner-friendly.

If you need help, professional customization, or a full website build, I offer:
✅ Full WordPress website setup
✅ Elementor Pro custom design
✅ Astra Pro custom layouts
✅ Speed optimization & maintenance

Contact me anytime for help or project support.