How to Create a Single Page Website in Joomla (2020)
Do you want to create a single page website in Joomla?
A single page website allows you display the contents of your website on one page. It is a modern way of creating websites.
Creating a single page website is usually believed to be coded with the latest web technologies. Nevertheless, you can also create a single page website in Joomla by just following a few simple steps.
In this JovialGuide, we will detailedly show you how to create a single page website in Joomla (2020).
What Do You Need to Create a Single Page Website in Joomla?
To create a singe page website in Joomla, you need an SSL certificate (HTTPS), domain name and a Joomla hosting account.
SSL certificate uses HTTPS for a secure connection. It basically lets you transfer data over a secure connection.
Domain name is the unique name your website users will use in finding your single page website. For example; jovialguide.com is the unique name of this website!
Hosting lets you host or house your Joomla website. We recommend A2 Hosting (see review) and SiteGround (see review) because they are fast and secure.
After purchasing a web hosting package, the next step is to install and setup Joomla. Before you install Joomla, let’s take a look at what quickstart is.
What is a Quickstart Pack?
A quickstart pack is a complete demo content of a Joomla template, or template framework. By default, a quickstart pack comes with: the complete Joomla CMS itself, plugins, template, components and every other needed or necessary data.
It contains demo contents and layouts, that are ready for you to use. If you’re creating a website using Joomla, then a quickstart pack is recommended for use, basically, because you will not have to manually create pages, Menus & Menu Items, etc.
How to Create a Singe Page Website in Joomla (2020)
If you are creating a singe page website in Joomla from scratch, then installing a quickstart package would be much easier, rather than creating completely from the scratch.
In addition, there’re some Joomla templates that are specifically designed for single page websites. They make creating single page websites in Joomla a lot easier. You may want to see best one page Joomla templates for more.
In this “how to create a single page website in Joomla” JovialGuide, there’s a step that you’ll need either SP Page Builder or JD Page Builder installed to proceed. If you have not already installed any (you only need one to be installed), please goto the next section to learn how to install a Joomla extension, else skip the following section to the one after it.
How to Install SP Page Builder or JD Page Builder in Joomla
To install SP Page Builder or JD Page Builder, you have to first of all download (the paid or free version) it into your local storage. After that, log into your Joomla backend and click on Install Extensions.
When it opens, click on the Upload Package File tab. Now, you can drag-and-drop the package file that you want to upload and install unto the upload box. Alternatively, you can click on or browse for file button, then select the page builder you downloaded and want to upload and install, from your local storage (where you downloaded it to). Then wait for it to upload and install.
Once upload and installation is successful, it will show you a success message that says “Installation of the component was successful”.
Note that if you’re installing a Joomla template, and it’s successful, it will show “Installation of the template was successful”.
Creating a Single Page Website in Joomla: Adding a Menu, & Menu Items
To create a single page website in Joomla, we will start by adding a Menu.
While you are still logged into your Joomla website, click on Menus » Manage » Add New Menu.
On the new Menu page, we will have to enter a title for our Menu. Since we are creating a single page website, we’ll have to title our Menu One Page to match what we are creating (you can give yours another title). So, in the title field, type in One Page, and in the Menu Type field, enter onepage (in small caps with no space) into the field and click “Save & Close”, so that you will be taken back to the Menu page.
For Menu Items, in this JovialGuide, we will be adding 3 Menu Items to our single page website. Namely: showcase, testimonial and contact us.
To add a Menu Item, click on the Menu you just created, » New.
On the New Menu Item page, enter the Menu Title of your choice. In this tutorial, our Menu Title is Showcase.
After that, enter an Alias to the alias field. Since our Menu Title is Showcase, then our alias will be showcase in small caps.
Note that if you leave the Alias field blank, it will auto-generate from the Menu Title.
Next, to select a Menu Item Type, click on the Select button beside the Menu Item Type.
A modal will open. Now, click on Search Links » URL. This will serve as our Menu Item Type.
Now, in the Link field, enter a link with a leading harsh sign. That is; in our case it is #showcase. It is similar to the Alias field, except that the Link field starts with a harsh or number sign, followed by the link-name, while the alias doesn’t. If you have finished, click on the “Save” button.
If you want to add more Menu Items, repeat the steps above. In this tutorial, we’ve added the three Menu Items (for our single page website) we listed earlier (showcase, testimonial and contact us). Go ahead and add as many Menu Items as you want, and make sure they’re under the Menu you added earlier.
Creating a Single Page Website in Joomla: Duplicating & Renaming a Style
When you are done adding the Menu Items you need, navigate to Extensions » Templates » Styles.
Since we are creating a single page website, it is recommended we duplicate our Template style (one for the single page website we’re creating, and one as the original) in case of future usage of the original template style. However, if you want to use the default style or any other style available in your Joomla website, then you can skip to the next two paragraphs (below).
To duplicate the Template style, tick the checkbox beside the style that you want, then click on duplicate.
In our case, we are duplicating the default frontend template for our site (frontend).
Now, click on the style you just duplicated to open it. After that, enter any name you’d like into the field for style name. In our case, we’re renaming our style name to One Page.
Once you have renamed your style, click on the “Save & Close” button, for it to save and take you back to the styles page.
You just renamed your template style.
Creating a Single Page Website in Joomla: Adding a Module & Assigning a Position to it
It’s time to add a Module to the Menu we added. To add a Module, click on Menu » Manage.
On the Menu page, locate the Menu you added earlier and click on the “Add a module for this menu” button. It is by the right side of the page.
It shows “Add a module for this menu” because no Module has been added to it yet.
When it opens, the next step is to add a title to the Module. Go ahead and enter the title of your Module into the Title field. In our case, we’re naming it “One Page”.
After that, under the Menu section, select the Menu for this Module you’re adding, by clicking on the drop-down beside Select Menu, and select the Menu you created earlier. In our case, we’re selecting One Page from the drop-down.
Now, to select the Menu Item for our Base Item, click on the Select button beside Base Item.
When it opens, click on the drop-down at the top, and select the Menu you created earlier. After selecting the Menu you added, it will display all of the Menu Items that are under it. After that, click on the “Close” button, to close the current modal.
For our Module to display on the frontend, we have to assign it to a position in the frontend. To assign our Module to a position, click on the drop-down under Position and select the position of the style that you want it to display on.
Take note of the Style name and the position you choose. In our case, it is the style we duplicated and renamed to One Page.
Note: It is best to have these links positioned at the top of the page for easy-navigation.
If you don’t know the position to choose, navigate to Extensions » Templates » Styles. When it opens, locate the style that you want to view its positions, and click on the icon that is like an eye. When it opens, you will see all of the positions for that style.
Before you Save & Close, be sure the Status of the Module you’re adding is Published. In addition, you can hide the “Show Title” option. Or, you can leave it to “Show” if you want. However, for this JovialGuide, it is set to “Hide”.
Once everything is okay, click the Save & Close button to save, close the modal and take you back to the Menu page.
And it’s save!
Creating a Single Page Website in Joomla: Adding Custom/Section ID to Column/Section
This part can be done in two ways. Namely:
Click on any of the links above to jump to its appropriate section below.
Adding Custom/Section ID Using SP Page Builder
This is the part that we will use SP Page Builder we installed earlier. If you haven’t already installed it, go up to the go up to the installation section for instructions.
To add the Section IDs to the columns that we need, click on SP Page Builder » Pages.
When it opens, you’ll see all of the pages that you have. Now, click on Home (in your case it may not be Home too).
Next, locate the section that you want the Menu item to scroll to when clicked. In our case, we want the Showcase Menu Item we added, to scroll to the Showcase section of the homepage when clicked. To do this, we’ll add a unique ID we used (the one with the leading #, or number sign) when we were adding a Menu Item.
To add a unique ID after locating the section that you want it to scroll to, click on the gear icon that is by its right side.
When it opens, under the General tab, scroll to where you have Section ID. When you find it, enter the Link (that one with #, followed by the name in small letters), you used when adding a Menu item. Enter it into the Section ID field without the leading # sign, then click on the Apply button.
In our case, for Showcase, it is showcase (in small caps).
When you’re done adding the Section ID for that section/column, locate the next section that you want to add a Section ID to, and enter its Section ID. Do this for all of the sections that you want to add a unique ID to.
In our case, we’re adding a Section ID to showcase, testimonial and contact us.
Once you’re done adding the Section IDs to each section that you want, click on the save button to proceed.
Have in mind that each section must have one ID, and it must be unique.
What Section ID does is to alter the default Section ID of the template, by making the ID you enter into the Section ID field the current or new ID.
Once you’re done, skip to setting template style to default to continue.
Adding Custom/Section ID Using JD Page Builder
If you haven’t installed JD Page Builder yet, go up to the installation section for detailed instructions.
Once installed, navigate to JD Page Builder » Pages.
There, you’ll see all of your pages. Since we’re working on the homepage, click on Home and you’ll be taken to the edit screen.
Note that in your own case, it may not be “Home”. However, it will be based upon how you configured your Joomla site. Find out and proceed!
Next, locate the column that you want to add a Custom ID to, and click on it. Upon click, you’ll see two small circles with two colors, namely: blue and purple. Now, to open the Element Settings, click on the blue circle.
Upon click, it will open something like a modal by the left side of the page, with Heading Settings as its title.
After that, click on the Design tab » Basic.
Under Basic, locate Custom ID field and enter the link (that one with #, followed by the name in small letters), you used when adding a Menu Item. Enter it into the Custom ID field without the leading # sign.
In our case, our Custom ID is testimonial (in small caps) for the Testimonials column.
Once done, locate the next column that you want to add a Custom ID to, and enter the Custom ID to it like the one above. Do this for all of the elements that you want to add a Custom ID to.
In our case, we’re adding a Custom ID to Testimonials (Custom ID is testimonial), Showcase (Custom ID is showcase), and Contact Us (Custom ID is contact-us).
Once you’re done adding the Custom ID to each section that you want, click on the save button to proceed.
Have in mind that each column must have one ID, and it must be unique.
What Custom ID does is to alter the default Custom ID of the template, by making the ID you enter into the Custom ID field the current or new ID.
Note: In JD Page Builder, it is called Custom ID, while in SP Page Builder, it is called Section ID.
Creating a Single Page Website in Joomla: Setting Template Style to Default
Notice that when you visit your Joomla website to check for the changes, all that you’ve done are not reflecting. Nevertheless, to make the changes show, we have to set the style we have been working on (editing/making changes to), to the default frontend template.
To set the style you have been working on to default, navigate to Extensions » Templates » Styles. After that, tick the checkbox beside the Style that you have been working on, then click on the Default button.
Alternatively, you can simply click on the star icon beside the style that you want to set to default, and the style will become the default frontend template.
In our case, we’re setting One Page to be the default frontend template. One Page is the style we duplicated and renamed earlier.
If you were editing the default style, then you’re done. There’s no need to set it to default, because it is already the default frontend template style.
Now, visit your Joomla website, scroll to the position you assigned the Module you created earlier to, and click on any of the links. So, you just created a single page website in Joomla.
This JovialGuide has shown you how to create a single page website in Joomla. We showed you that you need a domain name, SSL certificate and a Joomla hosting. We recommend A2 Hosting and SiteGround because they’re secure, fast and have excellent customer services.
Joomla can be used to create different types of websites. You’d want to see our JovialGuide on types of websites you can create with Joomla.
If you have any questions, please let us know using the comments section.
See other of our Joomla tutorials for more.
