# How to Build a Custom Elementor Website Without Touching Code

Thankfully, those days are over when you had to hire a developer or spend hours learning to code.
If you are using Elementor for your WordPress website, all you need to boost the performance is [ElementsKit elementor addon](https://wpmet.com/plugin/elementskit/).
Whether you’re launching a business site, portfolio, or online store, this guide will walk you **through how to create your custom website using Elementor + ElementsKit from** scratch.

**What You’ll Need to Build an Elementor Site Without Code**

Before you start, make sure you have:
1. A WordPress website, installed and running.
1. The Elementor page builder plugin, the free version.
1. The ElementsKit addon for Elementor, free & pro.
1. A theme compatible with Elementor, like Hello Elementor.

**How to Build a Custom Elementor Website**
Creating a custom website with Elementor is easier than you think. Simply follow these straightforward steps to design, customize, and launch a professional-looking site that perfectly fits your brand.

**STEP 1: Do the Initial Setup**

**A WordPress website**: You’ll need to install WordPress to get your website running. This requires a domain name and web hosting. Most providers, like Bluehost or Hostinger, offer one-click WordPress installation. So, it’s easy to launch your site in just a few minutes.

**The Elementor page builder plugin**: Get the Elementor page builder plugin. The free version is sufficient for getting started and building your initial pages.

Go to your WordPress Dashboard → Plugins and upload your downloaded plugin here. Or, click on the Add New → Search for Elementor → Click Install Now → then Activate

**The ElementsKit addon for Elementor**: To power the Elementor builder, get the ElementsKit addon. Download the free version available on WordPress.org.

Now choose the plan that suits your requirements.
Whichever plan you choose, you will unlock all the features of Elementskit.

Afterwards, choose a theme compatible with Elementor, like Hello Elementor and activate it. From the WordPress Dashboard → Appearance → check the themes and activate. It’s super quick.


**Step 2: Build Necessary Pages**

ElementsKit includes 1000+ ready-made templates and sections. You can pick any starter template and start customizing it.
From your dashboard, you can simply add all the necessary pages by clicking the Add Page button under Pages.


When building a customized WordPress website, it’s important to plan the pages strategically. It helps the visitors to navigate easily and find the information they need. Key pages typically include Homepage, About, Products, Contacts, etc.


To customize the pages, you have to click on the edit with the Elementor button.


Next, browse the template library, choose from homepages, service pages, about sections, or any page you need. Click Insert to add your favorite design to your page.


If you want, you can customize the inserted template by yourself. ElementsKit extends Elementor with 90+ widgets and 20+ modules. This is where Elementor and ElementsKit shine!
Also, you can start from scratch, mix and match different pre-built sections to create your own unique layout. Drag-and-drop any widget and start customizing, all without writing a single line of code.


You can visually edit every element, text, image, button, background, typography, button styles, etc.


Everything updates in real time, just drag, drop, and adjust until it’s perfect.

**Step 3: Build Your Site’s Header-Footer**

Want to give your navigation a wow factor? Try [ElementsKit Megamenu](https://wpmet.com/plugin/elementskit/megamenu/). It helps to transform the standard WordPress menu into a highly functional Megamenu. It offers ready-made templates to ease your workflow. To craft this manually, simply follow the detailed process below:
Go to Menus from Appearance.


Create menus and don’t forget to tick the ElementsKit Megamenu option. After that, save your menus.


Next, start by navigating to ElementsKit's Module Settings. Activate the Header Footer Builder and Mega Menu modules.


1. Navigate to Header Footer under ElementsKit
1. Select Header
1. Click on Add New Template


Set a name for the header and start editing with ElementsKit. After that, search for the ElementsKit Nav Menu widget and customize your header accordingly.


Design your footer just as easily. Drag in your image, heading, and text widgets, then customize them with a simple drag-and-drop workflow until the look is perfect.


**Step 4: Optimize for Mobile**

In the Elementor editor, switch to the responsive mode, at the top, middle. After that, tweak how your design looks on tablets and smartphones.
ElementsKit ensures all widgets are mobile-friendly by default, so you’ll just need to adjust minor spacing or font sizes for perfection.


**Step 5: Publish Your Website**

Once your design looks great on all devices, click the Publish button. Your changes will go live instantly. Visit your website to see it in action. It’s a fully customized site created visually without coding knowledge.


**What Pages You Should Create**

When building a customized WordPress website, it’s important to plan the pages strategically. It helps the visitors to navigate easily and find the information they need. Besides the key pages, your site should also include these essential pages:

* **Portfolio or Case Studies** – This type of page showcases your work or success stories to demonstrate credibility.
* **Blog or Resources** – Crafting helpful content engages your audience and positions your brand as an authority. It improves SEO and organic reach.
* **About us**: Write about your company, yourself, or your business so that people can learn more about you. This also helps build authority.
* **Privacy Policy** / Terms – Essential for legal compliance and building trust.
* **Contact form**: As you are using Elementor, you can easily create a contact form with the Metform [Elementor form builder](https://wpmet.com/plugin/metform/).

**Quick Look: ElementsKit Widgets and Their Purpose**

Let’s see how ElementsKit’s wide range of widgets can elevate your Elementor website.

1. Advanced Accordion & Tabs – Organize content neatly and make long sections easy to navigate.
1. Image Comparison – Suitable for before-and-after showcases or product transformations.
1. Pricing Table & Pricing List – Display your services and plans in a clear, conversion-focused layout.
1. Team Member & Testimonial Widgets – Add credibility and personality to your brand by showcasing real people and customer feedback.
1. Advanced Button & Call-to-Action – Create interactive elements that drive users toward key actions.
1. Countdown Timer – Build urgency for sales, product launches, or special events.
1. Social Feed & Social Icons – Integrate your social presence smoothly into your website.
1. Mega Menu Builder – Design multi-level, content-rich navigation menus with complete control.
1. Header & Footer Builder – Customize your global layouts with unique, brand-aligned designs.

No PHP or theme editing required!

**Summing Up**

With ElementsKit, you now hold the simplest path to a pro-grade website. Plan your site, follow the steps, and make the changes you need to make a unique site. Remember, your creativity is what makes your website special.