How To Build A One Page Website With Avada
Last Update: April 12, 2024
A one-page website lets you consolidate all your site information into one page that is split into multiple sections. There are both advantages and disadvantages of one-page sites, so read up on the pros and cons, but if you decide you want to create one, Avada gives you the flexibility needed to do this, and also provides several prebuilt one-page websites to get started with. To get an idea of how one-page sites work, please see our Landing Product, Cleaning Services, Hair Salon, or Resume Prebuilt websites, or read this detailed blog post.
Please read below for detailed information on how to create content for a one page site, and how to make and assign the menu needed to get a one page site to work as intended. Also, watch the video below for a visual overview of the process.
Creating One Page Site Content Sections
The main consideration when creating content for your One Page site, or a page with a one page menu in a multi-page site, is to organize your content into sections. In this way, you can then reference each section in your menu. Your menu will serve as a way for your viewers to quickly scroll to a section they’d like to view. For example, clicking the About menu item will automatically scroll the page to the About section.
There are two methods you can use to identify the specific sections of the page. You can use the ‘Name Of Menu Anchor’ option present in the Container Element, or the Menu Anchor Element at the beginning of every section.
Step 1 – Create your page content into the different sections you want on your page. For example, the About section, the Contact section, etc. The easiest way to do this is to have separate containers for each section.
Step 2 – Once you’ve decided on the different sections of your page, it’s time to reference each section. There is little difference in whether you use the ‘Name Of Menu Anchor’ option in the Container Element or the Menu Anchor Element, but in most cases, the Name of Menu option in the Container will be the simplest. The main difference is that the ‘Name Of Menu Anchor’ option, references the start of a Container. The Menu Anchor Element, however, can be inserted anywhere in the content, giving you the ability to reference a spot in the middle of a Container for example. In most situations, referencing the start of the Container, or Section is what you will want, and therefore either method will work.
Step 3 – If you’re using the ‘Name Of Menu Anchor’ option, you simply insert the unique Menu Anchor ID for the section you are on into the Container option. If you’re using the Menu Anchor Element, click the ‘Element Settings’ and enter a unique Menu Anchor ID for the section in the ‘Name’ field. For example, about.
Step 4 – Click ‘Save’ to save your changes, then repeat step 2 and create separate Menu Anchors for all the different sections that you have on your page. See the screenshot below for an example of the Menu Anchor Element inserted at the top of a Container, in the ‘About’ section.
A Custom One Page Site menu is important because this is how your viewers jump to different sections of your page. Instead of normal links, your One Page site’s custom menu will have Anchor Links that link and scroll automatically to each section on the page.
Step 1 – Navigate to the Appearance > Menus tab on your WordPress admin panel.
Step 2 – Click the ‘Create A New Menu’ link. Give it a name, then click the ‘Create Menu’ button.
Step 3 – In the left sidebar, expand the ‘Custom Links’ tab. If you’re missing content types in the left sidebar that you want to add to the menu, you can open the Screen Options and enable them for your menu.
Step 4 – In the ‘URL’ field, enter the Menu Anchor ID you’ve assigned to a section on your page. For example, if this menu item links to your About section, then it would be about. NB. Please note that you have to enter it with a hashtag (#) in order to scroll to the section properly. For example, #about.
Step 5 – Once you’ve added the Anchor Name ID to the ‘URL’ field, enter a name for the ‘Link Text’ field. This is simply the menu item’s text. For example, About. See the screenshot below for an example of this.
Step 6 – When finished filling in those fields, click the ‘Add To Menu’ button.
Step 7 – Repeat steps 4-6 and create a menu item for each section you have on your page.
Step 8 – Under the ‘Menu Structure’ section, you’ll find all the menu items you’ve just created. You can expand each menu item and edit its settings if you need to.
– Once you’re done creating your custom menu, click ‘Save Menu’. For situations when you want to have a page with one-page links on a multi-page site, you will have to make a separate menu. See the Multi-page site section below for more details.
Assigning Your Menu To A Custom Header Layout
Once you have created your content and your menu, you need to assign the menu. There are two methods for this, depending on whether you are using a Custom Header or a Legacy Header. For assigning Menus using Legacy Headers, please see this document.
If you are using Avada Layouts, and have a Custom Header Layout, then you assign the menu for the one-page site in the Menu Element in your Header Layout Section. Here you can select the custom one-page menu you’ve created from the dropdown of available menus. In the screenshot below, we can see the menu selected for the Avada Landing Page prebuilt site.
That’s it. Save the Layout Section, and it will be used when it is added to the Global Layout. Please see the Avada Layouts doc for more information on Layouts, Layout Sections and Custom Headers.
You can also have a multi page website, with one page acting like a one page site. To achieve this, you need to create two menus, one with absolute links, and one with relative links. This is because relative links only work on the page the anchored content is on, and so on another page, an absolute link would be required to both go to the page, and then scroll to the linked section. Please see the One Page Menu with Multi-Page Links doc for more information about relative and absolute links.
So in this situation we’d need two menus. One could be called Relative Links Menu, and the other could be called Absolute Links Menu. The Relative Links menu would be the same as we created in the Creating A One Page Site Menu section above, and would only be assigned to the actual page with the one-page sections.
The Absolute Links Menu would be for all other pages, and would contain normal links to all the pages of the site, as well as Absolute Links to the page / sections of the one page content.
So for example, the absolute link to the About section on a page called One Pager, would be https://yourdomain.com/one-pager/#about. This link would take the user to the One Pager page, and then scroll them down to the About Section. Just to reiterate: on the One Pager page itself, we would only need #about to link us to the About section of that page, but when we are on another page,we need the absolute link to get us there.
See the screenshot below for an example of an absolute link added to the default menu of a multi-page site.
Once you have created, or edited your second menu with the absolute links to the sections of the one pager, we need to assign the different menus to their correct places. Again, there are two methods for this, depending on whether you are using a Custom Header or a Legacy Header. Here, we will present the up to date method using Avada Layouts. For legacy headers, please see this document.
Step 1. For your Main Menu, you would create your Header Layout Section as per usual. You would assign the Absolute Links Menu to the Menu Element, and assign this Layout section to the Global Layout. This would apply the menu to all pages on the site.
Step 2. And now we need to assign a different menu to the One Pager page, the menu with the relative links. To start, we need to duplicate our Global Header. This can be easily done on the Layout Section Builder Page by cloning the Layout Section and then editing and renaming it, or you could save the Global Header Layout Section to the Avada Library, then create a new Header Layout Section and load the template from the Library. Both methods work.
Step 3. In either case, you now have a new Header Layout Section that is a direct copy of the Global Header Layout Section. Now, you just need to change the menu the new Header Layout Section will use. Simply edit the Menu Element, and choose your Relative Link Menu, and save the layout section.
Step 4. Finally, we need to apply the new Header Layout Section to our One Pager page. To do this, create a new layout (we might just call it One Page Layout) assign the new Header Layout Section to the Layout, and then open the Manage Conditions dialog and set the layout to only include the one Pager page (as seen below). Now the site will use the Absolute Links Menu on all pages, with the exception of the One Pager page, which will use the Relative Links Menu.
See the screenshot below of the resultant Layouts.
