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.

Joomla Control Panel - 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.

Joomla Control Panel - Install Extensions

Once upload and installation is successful, it will show you a success message that says “Installation of the component was successful”.

Joomla Install Extension Success Message

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.

Joomla - 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.

New Joomla Menu

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.

Joomla - Add New Menu Item

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.

Joomla - New Menu Item

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.

Joomla - Select Menu Item Type

A modal will open. Now, click on Search Links » URL. This will serve as our Menu Item Type.

Joomla - 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.

Save Joomla Menu Item

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.

Joomla Extensions - Templates

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.

Duplicating Joomla Style

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.

Renaming Joomla Style

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.

Joomla - Menu Page

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.

Joomla - Add Module

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.

Add New Joomla Module

Now, to select the Menu Item for our Base Item, click on the Select button beside Base Item.

Select Base Item for New Joomla Module

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.

New Joomla Module & Menu Item

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.

Selecting Joomla Module Position

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.

Joomla - Save Module

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.

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).

SP Page Builder - Pages: Home

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.

SP Page Builder - Gear Icon

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.

SP Page Builder - Section ID

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.

SP Page Builder - Save Changes

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.

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.

JD Page Builder - Pages: Home

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.

JD Page Builder - Blue Circle

Upon click, it will open something like a modal by the left side of the page, with Heading Settings as its title.

JD Page Builder - Element Settings

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.

JD Page Builder - Custom ID

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.

JD Page Builder - Save Changes

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.

Setting Template Style to Default

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.

Setting Template Style to Default Alternative

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.

JovialGuide

We provide comprehensive tutorials. Reach us on Facebook via JovialGuide.

Leave a Reply

Your email address will not be published. Required fields are marked *

 

Shares