Home » Tutorials » How To Create One Page Website With Elementor Free Plugin?
Creating a One Page Website with Elementor is not a big deal. First, list down how many sections you need inside your homepage. There is another important part which you need is One Page Navigation Menu. It will help your visitors to navigate from one section to another. As a One page website, you may have lots of sections to put. In that case, the nav menu plays a vital role for the audience.
In this post, you will learn how to create one page website with elementor with Master Addons Navigation Menu Element. Make sure you have installed Free Master Addons plugin on your website.
Let’s break down all topics in a table of contents here. It will help you to navigate specific sections.
Before goes with manual one page website creation. I like to explain how to create a one page website within a few clicks using Master Addons. Master Addons has a rich template library where you will get landing page, sections, header, & footer. Just click on the master addon importer icon from your elementor page editor and import whatever you want. Then customize the content and create your own menubar.
I will explain which elementor element you should put in different sections to create one page website. If you go through the full content properly then creating one page website will be super easy to you.
Without any extra discussion let’s focus –
Some general section that we need accordingly:
These 11 sections are enough to create a simple One Page Website with Elementor.
I will recommend you to choose “Elementor Canvas” Page Layout when you create a one-page website or any landing page. It will remove the default widget, header, & footer based on your Theme. You will get full control to create header, footer for this specific landing page.
You can use Free “Hello Elementor” Theme. This theme available in the WordPress free theme directory so, search it from your website dashboard and install it.
Let’s create a Menu from Appreance>Menu. Put # (Hash) as a link for now. I will show you how to put a specific section id as a link in each menu item at the end of this post. My menu will be Home, Service, Team, Portfolio, Pricing, & Contact. You should use your sections accordingly like me.
Now, let’s navigate to the landing page and edit it with Elementor. Add a section and make it full width. Then add another inner section inside the main section. Resize the inner section column first. Add image in the left and add the nav menu (Master Addons Nav Menu Element) in the right column. Take a look at the following image. If you want to put background image for the header area then open the main section setting and set a BG color. You can customize the menu item color, margin, padding, etc. Check this document to learn how to customize the navigation menu.
Add a new section and set height “Fit To Screen” + Full Width. Fit To Screen option will showcase your hero section in full height + Width in any device. If you don’t prefer full height or Full-Width hero section then don’t change the section default settings. Now insert background image and content as your design.
If you have Master Addons installed then you don’t need to create hero section manually. Just click on the Master Addons importer and select your desired hero section. There is a lot of pre-built hero section available. Just import it.
This section depends on your design. Showcase your photos, title, description inside this section. Use the default Image, Heading, Text Editor, Button element to create a beautiful about us section. You can link your service section with a button here. Frankly, I prefer to make a website easy for visitor navigation.
This is one of the most important parts of a one-page website. Explaining what you provide and what you do is the main purpose of any website. This is the section where you have to explain details about your service.
Create new section and put an eye-catching title with subtitle. Then drag and drop an inner section and divide it into multiple columns. From my perspective, 3 or 4 column suites best with any design. Use the infobox element in the inner section. I recommend you use the Master Addons Infobox element here. Infobox has the feature to select icon or image, service title, service description, URL. With the URL option you able to navigate your audience to the contact section easily.
Your visitor will be happy to see your real face and name. Do a photoshoot with your team members first. Then edit and crop the photos in the same size. Size really matters here, if you use different size team photos then it will look awful.
Add a new section and Add Title + Subtitle here too. Then think if you have a giant team then I recommend you use the Team Carousel element by Master Addons. If you have a few team members then go with Team Member element Demo. Make sure to put the Team element inside the inner section. This is not necessary but it will help you to control margin, padding with the main section. If you don’t know how Team Member and Carousel work then Follow this Team Member Documentation and Team Carousel Documentation.
Showcasing a portfolio will increase your landing page demand. It attracts your visitors and they can calculate your performance and service quality. Adding a Filterable portfolio is not a big deal if you have already installed the Master Addons plugin. If not then you can work with the Basic Gallery Element too. But within Basic Gallery, you can’t create a filterable category system. You can just showcase some photos there.
To create a portfolio section, follow previous section creation steps. Insert title + Subtitle as you need. Then drag and drop the inner section. Delete a column from the inner section. Now find out “MA Image Gallery” element. Drop this element inside your inner section. You will get some unique options inside this element like popup, Button, Ribbon, Title, Subtitle, Category. You can hide this meta info from the image gallery option. Better you should check How Master Addons Image Gallery element work.
You can create a basic pricing table with Elementor Inner Section. Just divide the inner section into multiple columns like a pricing table. Then insert title, price, features, button inside each inner column. The customization and style depend on your Elementor experience.
But if you want an automatic professional pricing table with multiple variations then check Master Addons Pricing Table demo. After dividing your inner section, just drag and drop the “MA Pricing Table” Element. Select the variation that you want for your website and input price, title, sale, features, purchase link properly. Feel free to check how Pricing Table Element works.
This is going to be easy for you. Free Elementor has a basic Testimonial element. You can use that element for your website section. Or, if you want more customizable and stylish testimonial – I recommend you use “Ma Team Carousel” element. So feel free to download Free Master Addons plugin and install it on your website. Select one column carousel and customize it in your way.
The contact form can be added via a shortcode using the text editor element. Don’t forget to add the main section then insert title + subtitle. I always prefer to use the inner section for a one-page website element.
Maybe the default contact form style is not suitable for your website design. Check how to customize Contact Form 7 Element. You can customize label color, border, margin, padding, typography, button in that content. Master Addons Contact Form 7 element comes with 10 variations and it’s fully customizable.
Social profile plays a vital role nowadays. People provide support, chat via social media profiles. That’s why it’s great to have your business social media profiles. It’s super easy to add icons. Free Elementor has a default Social Icon element. Just create a section and insert Social icons there.
Customize the social icon color, size, margin, padding and update your page.
I don’t think it needs too much explanation. Add your copyright footer text inside a section. Footer just complete a website look. A website without footer is like a football player without football. With footer you will complete your one page website with elementor journey.
Click on the 6 dot icon of section setting. You will see layout options. Now navigate to Advanced Tab of section. You will see CSS ID option. Just Insert a unique CSS ID for each section. I am editing About Us section CSS ID, and named it “about-us”. Copy the CSS ID and paste it after hash (#), without spacing. Take a look at the following screenshot.
Do the same thing for all of your nav menus which you want to link with their specific section.
I have tried my best to explain what is the best element for your desired one page website section. But you should try different elements in different sections. It will increase your ability to create something unique with elementor page editor.
That’s all on how to create one page website with elementor. Comment here or contact me via the website contact form if you need any assistance.