How to build a website with BeOnePage
Introduction
This tutorial uses the BeOnePage theme, but many of the same principles apply no matter which theme you’re using.
WordPress has different ways you can build and customise your website. These have grown and changed as WordPress has developed—and developers have been encouraged to integrate their own features into WordPress. The result is a platform which is hugely flexible but often difficult for newcomers to understand.
Prerequisites
Before you start:
⚠️ If you’re redesigning an existing website, take a full backup before you proceed.
(Recommended) Plan your redesign on paper or use an online mockup tool.
(Optional) Install the demo content (‘Appearance’ → ‘Import Demo Data’). This will give you a copy of everything from our live demo that you can use as a starting point.
Elementor page builder
One option is to build your website pages ‘from scratch’ using Elementor page builder. Elementor comes with ‘widgets’ that you can drag-and-drop to build your page. The ‘BASIC’ and ‘GENERAL’ widgets are free plus BeOnePage comes with over 18 custom widgets. If you wish, you can subscribe to Elementor Pro (not affiliated) to unlock even more widgets.
Login to your WordPress dashboard.
‘Pages’ → ‘Add New’.
On the right-hand side, in the ‘Page’ options panel, select the Template ‘Elementor Full Width’ (see below).
❗️Important. You must use an Elementor or Redux page template to use Elementor page builder. If not, you’ll see the error ”content area was not found” (see below).
Click ‘Edit with Elementor’.
Use the panel on the left to browse widget categories.
Drag-and-drop widgets onto your page. When you click on a widget on your page, its settings will appear in a panel on the left. You can add content using the panels on the left and get an instant preview of what your page will look like.
Front Page Module Manager
Another option when building your site is to use the front page module manager (‘Theme Options’ → ‘Front Page’ → ‘Module Manager’).
This option is only available for the page using the ‘Home Page’ template. It’s the easiest option for building a one-page website.
If you create a new page in WordPress and choose the ‘Home Page’ template, this page’s content will be determined by the different modules you select in the ‘module manager’. For example, in the image below, seven of the available modules have been selected (each module can only be used once). They will appear on the home page in the order shown. Drag-and-drop the modules to rearrange their order. Don’t forget to ‘Save Changes’ each time.
Both Elementor and ‘Theme Options’ → ‘Front Page’ contain similar modules, so you can create comparable designs using either method. Only the settings for each module are in these panels. To edit the actual content, simply ‘Edit’ the Page from the WordPress dashboard. This will take you to a page containing ‘Metaboxes’ where you can add content to each module (see second screenshot below).
What about customisation?
This depends on what you want to customise and how it was created. Site-wide settings can be customised in two places:
The WordPress Customizer (‘Appearance’ → ‘Customize’).
The Theme Options panel (‘Theme Options’ at the top of the dashboard).
For individual page settings, if it’s the ‘Front Page’ (Home Page), the settings are in the ‘Theme Options’ panel and the content is in Metaboxes—just ‘Edit’ the ‘Front Page’ in your WordPress dashboard (see above). If it’s a page you created with Elementor, click ‘Edit with Elementor’ in the dashboard and use the Elementor widget panels on the left to make your customisations.
Summary
⚠️ Take a full backup before undertaking any changes to your website.
You can build individual pages using Elementor page builder (be sure to use an Elementor or Redux page template).
Elementor pages are built by selecting from the available widgets.
The ‘Home Page’ template is special. Its settings are in the ‘Theme Options’ panel (select the modules you want in the ‘Module Manager’ and its content is accessed via Metaboxes when you ‘Edit’ the page in WordPress.
Side-wide settings can be found in ‘Appearance’ → ‘Customize’ and the ‘Theme Options’ panel.
Need help? Drop our fantastic support team a message.