In this blog post, I will show you how to create a one-page website with Elementor in a few easy steps. You will learn how to:
- Install Elementor and choose a compatible theme
- Create a new page and set the template to Elementor Full Width
- Add sections and columns to your page and customize their layout and style
- Add widgets to your sections and columns and customize their content and style
- Add a navigation menu to your header and footer and link it to your sections
- Publish and preview your one-page website
Let’s get started!
Step 1: Install Elementor and Choose a Compatible Theme
To create a one-page website with Elementor, you will need to have Elementor installed on your WordPress site. Elementor is a free plugin that you can download from the WordPress repository or from the Elementor website. To install Elementor, go to your WordPress dashboard, click on Plugins, then Add New, and search for Elementor. Click on Install Now and then Activate.
You will also need to choose a theme that is compatible with Elementor. Elementor works with any theme that follows the WordPress coding standards, but some themes are more optimized for Elementor than others. You can find a list of recommended themes on the Elementor website, or you can use the Hello theme, which is a lightweight and minimal theme designed specifically for Elementor.
To choose a theme, go to your WordPress dashboard, click on Appearance, then Themes, and search for the theme you want. Click on Install and then Activate.
Step 2: Create a New Page and Set the Template to Elementor Full Width
To create a new page for your one-page website, go to your WordPress dashboard, click on Pages, then Add New. You can give your page a title, such as Home, Frontpage, or anything you wish.
To make your page full-width and remove any sidebars or other elements from your theme, you need to set the template to Elementor Full Width. To do this, go to the Page Attributes section on the right sidebar, and select Elementor Full Width from the Template dropdown menu.
Click on Publish to save your page.
Step 3: Add Sections and Columns to Your Page and Customize Their Layout and Style
To start building your one-page website with Elementor, click on the Edit with Elementor button at the top of your page. This will open the Elementor editor, where you can drag and drop widgets to your page and customize them.
The basic structure of your page is made of sections and columns. Sections are the horizontal containers that divide your page into different parts, such as the header, the hero, the features, the testimonials, the footer, etc. Columns are the vertical containers that divide your sections into different parts, such as the logo, the menu, the image, the text, the button, etc.
To add a section to your page, click on the + icon on the top left corner of the editor, or on the + icon on the bottom of an existing section. You can choose from different predefined layouts, or create your own custom layout by adding or removing columns.
To customize the layout and style of your section, right-click on the Edit Section icon on the top left corner of the section, or click on the six dots icon on the top center of the section. This will open the section settings panel on the left sidebar, where you can adjust the following options:
- Layout: You can change the width, height, alignment, and margin of your section, as well as the gap, width, and position of your columns.
- Style: You can change the background color, image, gradient, video, or slideshow of your section, as well as the border, box-shadow, shape divider, and typography of your section.
- Advanced: You can change the padding, margin, z-index, and responsiveness of your section, as well as add custom CSS, motion effects, background overlay, and custom attributes to your section.
To add a widget to your column, drag and drop it from the left sidebar to the column you want. You can choose from over 90 widgets for different purposes, such as text, images, buttons, icons, headings, videos, forms, testimonials, etc.
To customize the content and style of your widget, right-click on the Edit Widget icon on the top right corner of the widget, or click on the pencil icon on the bottom left corner of the widget. This will open the widget settings panel on the left sidebar, where you can adjust the following options:
- Content: You can change the text, image, link, icon, or any other content of your widget, as well as the alignment, size, and spacing of your widget.
- Style: You can change the color, typography, background, border, box-shadow, and animation of your widget, as well as the margin and padding of your widget.
- Advanced: You can change the z-index, responsiveness, and custom CSS of your widget, as well as add motion effects, background overlay, and custom attributes to your widget.
You can add as many sections, columns, and widgets as you want to your page, and customize them to your liking. You can also duplicate, copy, paste, delete, or move any section, column, or widget by right-clicking on them and choosing the appropriate option.
Step 4: Add a Navigation Menu to Your Header and Footer and Link It to Your Sections
To make your one-page website easy to navigate, you need to add a navigation menu to your header and footer and link it to your sections. To do this, you need to use the Menu widget and the Anchor widget.
The Menu widget allows you to create a horizontal or vertical menu with different styles and options. The Anchor widget allows you to create a link to a specific section on your page.
To add a Menu widget to your header, drag and drop it to the column you want, and customize its content and style. You can choose an existing menu from your WordPress dashboard, or create a new one by clicking on the Edit Menu button. You can also change the layout, alignment, pointer, animation, and typography of your menu.
To add an Anchor widget to your section, drag and drop it to the top of the section you want, and give it a name. The name should be unique, lowercase, and without spaces or special characters. For example, if your section is about your features, you can name your anchor “features”.
To link your menu item to your anchor, go to your Menu widget settings, click on the Edit Menu button, and edit the menu item you want. In the URL field, enter a hashtag (#) followed by the name of your anchor. For example, if your anchor is named “features”, enter “#features” in the URL field. Save your menu and close the window.
Repeat these steps for each section and menu item you want to link. You can also add a Menu widget to your footer and link it to the same anchors as your header.
Step 5: Publish and Preview Your One-Page Website
Once you are happy with your one-page website design, you can publish and preview it. To publish your page, click on the green Update button on the bottom left corner of the editor. To preview your page, click on the eye icon next to the Update button, or open a new tab and enter the URL of your page.
You can also test your navigation menu by clicking on the menu items and see if they scroll smoothly to the corresponding sections. You can also resize your browser window and see if your page is responsive and adapts to different screen sizes.
Congratulations, you have just created a one-page website with Elementor!
