🌐 Website Setup Installation Guide
5 Methods to Build & Launch Your Website — From Beginner to Pro
Method 1 — Astra
Method 2 — Envato
Method 3 — AI Stitch
Method 4 — Lovable
Method 5 — Kodee
Method 1 — Astra + Starter Templates
WordPress theme with Elementor page builder & pre-built templates
1
Go to Appearance → Themes
In your WordPress dashboard, navigate to Appearance → Themes → Add New.
2
Search & Install Astra
Search for “Astra” in the theme directory. Click Install, then Activate.
3
Install Starter Templates Plugin
Go to Plugins → Add New. Search for “Starter Templates”. Install and Activate it.
4
Launch Starter Templates
Go to Appearance → Starter Templates. When prompted, select Elementor as your page builder.
5
Pick & Import a Template
Browse the template library, choose one relevant to your niche, and click Import Complete Site.
6
Your Website is Live! 🎉
Visit your site URL to see your new website. Customize content via Elementor editor.
WordPressAstra ThemeElementorStarter Templates
✅
Website live — fully editable with drag-and-drop Elementor builder.
Method 2 — Envato Elements Theme
Premium WordPress + Elementor theme from Envato marketplace
1
Visit Envato Elements
Go to 🔗 elements.envato.com and log in or create a free account.
2
Filter by WordPress + Elementor
Select category: WordPress → Themes, and filter by Elementor as the page builder.
3
Find & Download Your Template
Browse templates relevant to your niche. Click your chosen template and download the .zip file.
4
Upload Theme to WordPress
In WordPress, go to Appearance → Themes → Add New → Upload Theme. Upload the .zip file and click Install Now.
5
Activate the Theme
Once installed, click Activate to make it your active theme.
6
Install Required Plugins
A prompt will appear to install required/recommended plugins. Install and activate all required plugins.
7
Import Demo Data
Go to the theme panel → Demo Import. Select your preferred demo and click Import.
8
Check Your Live Site 🚀
Visit your domain URL. Your website is now live with full demo content ready to customize.
Envato ElementsWordPressElementorDemo Import
✅
Premium website live — with demo content and full Elementor customization.
Method 3 — AI Design → WordPress
Get prompt from MotionSites → Design in Google Stitch → Convert via Claude → WordPress
1
Get Prompt Inspiration from MotionSites AI
Visit 🔗 motionsites.ai to find or craft a detailed website design prompt that fits your idea or niche.
2
Open Google Stitch
Go to Google Stitch — Google’s AI-powered UI design tool. Paste or type your prompt here to start building a Figma-style design prototype.
3
Generate the Figma-Style Design Prototype
Let Google Stitch generate a complete visual prototype of your website — including layouts, components, typography, and colors — similar to a Figma design file.
4
Export as ZIP File
Once satisfied with the prototype, export the design as a .zip file from Google Stitch.
5
Upload ZIP to Claude
Open Claude.ai and upload the exported .zip file. Use the prompt: “Convert this zip file into a WordPress-compatible theme package.”
6
Download the WordPress ZIP
Claude will convert the design files into a WordPress-ready .zip. Download this converted file.
7
Follow Method 2 Steps
Upload this WordPress .zip to your site via Appearance → Themes → Upload Theme and complete the remaining steps from Method 2.
MotionSites AI (Prompt)Google Stitch (Design)Claude AIWordPress
💡 Pro Tip: Be very detailed in your prompt — include colors, layout style, industry, and number of sections for best results in Google Stitch.
✅
AI-designed Figma-style prototype converted and deployed on WordPress.
Method 4 — Lovable + Hostinger
Vibe-code your site with AI, deploy via GitHub to Hostinger
1
Open Lovable.dev
Go to 🔗 lovable.dev. Write your website development prompt or get inspiration from 🔗 motionsites.ai.
2
Build Your Website with AI
Describe your website idea in the prompt. Lovable’s AI will generate and build the full website for you. Review and iterate.
3
Connect to GitHub
In Lovable, click Connect GitHub and sign in. This will push your project to a GitHub repository.
4
Sync Project to GitHub
Confirm the project sync. Your entire site code is now available in your GitHub repository.
5
Go to Hostinger Dashboard
Log in to 🔗 hostinger.com. Click Add New Website and choose Node.js Deployment.
6
Connect GitHub Repository
Sign in to GitHub within Hostinger. Select your Lovable project repository from the list.
7
Deploy to Hostinger 🚀
Connect the project and click Deploy. Hostinger will build and deploy the project. Wait for deployment to complete.
Lovable.devGitHubHostingerNode.js
💡 Pro Tip: Any future updates in Lovable auto-sync to GitHub and can trigger re-deployments on Hostinger automatically.
✅
Modern web app live on Hostinger via automated GitHub deployment pipeline.
Method 5 — Hostinger Kodee (Vibe Code)
AI-powered development directly inside Hostinger with Kodee
1
Log In to Hostinger
Go to 🔗 hostinger.com, log in, and click Add New Website from your dashboard.
2
Open Kodee AI Builder
Inside Hostinger, open Kodee — Hostinger’s AI website builder and assistant.
3
Write Your Prompt / Vibe Code
Describe your website idea using a prompt or simply vibe code — let the AI build and iterate based on your instructions.
4
Develop & Edit
Review the generated website. Make edits using the AI assistant or manual editor. Adjust layouts, content, colors, and sections.
5
Go Live on Hostinger
When satisfied, click Publish / Go Live. Your website is instantly deployed on Hostinger’s servers.
6
(Optional) Export to WordPress
For better scalability and management, export your Kodee site to a WordPress environment for access to the full plugin ecosystem.
HostingerKodee AIWordPress (optional)
💡 Pro Tip: Kodee is the fastest path to launch — everything is in one place. Export to WordPress later when you need plugins, WooCommerce, or team management.
✅
Website live on Hostinger — all-in-one build, edit, and deploy without leaving the platform.