Search the Support Center

How to make a one page website

One-page websites are very popular right now. This design trend is centered around creating small sections within a single page and then allowing visitors to jump up and down the page to view those sections.  With a little bit of extra code and some old web design tricks, you can create one of these sites on the Jimdo platform.


This is an advanced tutorial and will expect that you know the basics of Jimdo, including the anatomy of a Jimdo template, and how to use the style editor.  We will be adding some custom code to the site, but you do not need to understand how to do any coding. 



While one page websites with limited content on them are currently trendy and popular, they may not be the optimal solution for a website's search engine optimization. Websites with multiple pages and more text content provide a website with more opportunities to appear within search results.

Here is an example website built with this tutorial:  It looks slick and fancy, but everyone should be able to achieve a similar look without too much effort or time if they follow the steps in this tutorial. Let’s get started.


1. Create the website and select the template

For this tutorial, I’ll be starting a website from scratch but using some previously prepared assets (logo, images, etc).  This tutorial can work with any Jimdo template, but some templates are better than others for this purpose. I recommend using a template with a navigation menu at the top, such as Shanghai or Malaga


2. Remove all the extra content

Since we’ll be making a one-page website, the first thing we are going to do is go into the Edit Navigation panel and delete all the extra pages besides the homepage.  Rename the homepage to be your company or website name. 


Now go in and delete all the content on the homepage. Remove the logo, and all the elements. You will know that you are done when you see two separate “Add Element” buttons showing on this page. The top one is for the content area, and the bottom one is for the sidebar.


3. Upload the logo and set Header Text

Go ahead and click on the Logo Area to upload your logo, and add a tag line into the Header Text area. If you don’t have a tag line or would prefer to not use it, simply leave the Header Text area blank.

4. Add your content

First let’s create each of the sections on the page, for example: About, Services, Location, and Contact.  We’ll deal with the navigation later in the tutorial.


Because the page is empty, the second “Add Element” button can look a little confusing. So why don’t we change the footer’s background color to make it easier to identify on the page. Go into the Style Editor and with “Style by Element” turned to “on,” click an area somewhere slightly below the “Add Element” button.  Now pick a color that you think compliments your main background color. Save and you should then be able to clearly see where the main body content area ends and the footer begins.


Now let’s create our first content block. Add a new Columns element and leave it with the two initial columns. In the left column, add a medium Heading element and write a catchy short headline for your about section. Underneath that add a small Spacing element between the two, maybe set to 30 pixels. Then put a Text element with one medium sized paragraph in it.  The aesthetic of this website is pretty minimal, so we don’t want to have too much text in any of the sections.


In the right column, add a Photo element and select a photograph. I used one that is landscape oriented (wider than it is tall) and tried to match the overall height of the heading and paragraph in the left column.  And just like that we have the ABOUT section of our website ready!


In order to keep our website consistent, I like to copy the entire Columns element from my first content area and reuse it as a template for the other sections.  Simple hover over the Columns element and click when it says “edit columns.”  Now click on the duplicate element button and you will have a second version of your existing set of elements. Hover between the two sets of columns and add a spacing element. 


Now to give your content a more interesting feel, you can invert what you have in the two columns. Put the image in the left column, and then heading, spacing, and text elements into the right.  You can do this by dragging and dropping the existing elements, or you can delete and add new ones.  Replace the image and the text with the new information you want for the SERVICES section.


Now do this one more time for the LOCATION section except instead of an Photo element, use a Google Maps element and add a place marker for your address. 


Finally, for the CONTACT section, we’re going to do something a little bit different.  For this one, we’ll use the footer—this is that second content area that was left after we deleted all the other elements on the page in Step 2.  Go ahead and add a new Heading element there and then type in “Contact us.”  Put a spacer below that and then a Form element.  Use spacers above and below this set of elements, then our content will be complete.


5. Create the one-page navigation

Since this is a one-page website, we'll need to hack the navigation menu so that the navigation links scroll down to the appropriate sections rather than open new pages.


In addition to this, we also want to create “BACK TO TOP” links at the bottom of each of our sections.  Creating the text for these is pretty easy.  Simply add a new Text element underneath each of our columns elements in the different sections. Type “BACK TO TOP” and then align the text to the right.  Also put one of these beneath the form element in the footer.  Once that is complete, we have all of our link labels, now we just need to add the code to make them all work.


All the navigation on this page will operate using anchor links, which are a special type of hyperlink that allow you to jump to a specific point on any given page of a website. We have an existing tutorial that covers making anchor links, and this section will be very similar to the information presented there.


To start with, we must create the points where we want the links to take us (the “anchors”).  The first one, for the BACK TO TOP links, is built in for us at the very top of the website. For the other sections, create a new Widget/HTML element above each of the sections on our website. Starting with the ABOUT section, copy the following code and paste it into the Widget/HTML element above the ABOUT section:


<a id="about"></a>


Repeat for each section; simply replace the word “about” with the name that the link will use for each section: about, services, location, and contact. 


Now to finally make the actual hyperlinks. Let’s start with all the BACK TO TOP instances.  Scroll down to the first one and click on the text to edit the element.  Now go to the “more” area and select the button that looks like this <>.  This will launch the HTML view of the element.  Inside the panel that appears, you will see the following code:


<p style="text-align:right;">BACK TO TOP</p>


Replace that code with this code:



<p style="text-align:right;"><a href="#cc-inner">BACK TO TOP</a></p>


Do this for each of the BACK TO TOP links, making sure you save each one.  Now toggle into view mode and test out the links. Clicking any of them should reload the page with the navigation menu appearing at the top of the screen.  


For the navigation menu, we’re going to start by adding a bit of code. Navigate to Settings > Website > Edit Head and paste the following code into the head:


<script src="" type="text/javascript"> </script>


<script type="text/javascript">



/* removing target blank from anchor links */    


   $(document).ready(function() {

        $( "a[href*=#]").attr('target', '_self' ); 





Now hover your cursor over the navigation menu, click Edit Navigation, and add a new page for each section (About, Services, Location, Contact). Starting with the About page, click the chain link icon to set an external link, and in the field for the URL, type the following:






Repeat for each navigation link (Services, Location, Contact), replacing "about" with the name that you used to link each section. When you are complete, switch back over to View mode and test each link before moving on the the next section of the tutorial.



The external link option is only available for JimdoPro and JimdoBusiness users. For JimdoFree websites, you can sign up for a JimdoPro trial, or hide all of the links in the navigation menu and create your own navigation menu by creating text links inside of a Columns element, and following our tutorial for creating anchor links.

6. Add the final touches

At this point, the website could be complete, but there is a small improvement that we can make to help our website be a better experience for our visitors.


Create full width sections

If you'd like each section to stand out with its own background image or color, have a look at our tutorial for creating full-width sections. Proceed with caution, though—this tutorial is a bit more technical and requires a little bit of background knowledge of CSS.


Add a smooth scrolling JavaScript function

One of the nicer features on most modern one-page websites is the way that the navigation triggers an animation that slides the page from section to section. This is done using some JavaScript. Explaining that is beyond the scope of even this advanced tutorial, but we’ve done some research and found a great script that we can simply paste into our Settings > Website > Edit Head area to add this effect to any anchor links on a Jimdo website. 


<script type="text/javascript">




        $(function() {

          $('a[href*=#]:not([href=#])').click(function() {

            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {


              var target = $(this.hash);

              target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

              if (target.length) {


                  scrollTop: target.offset().top

                }, 1000);

                return false;









It looks scary, but you do not have to interact with it at all. After you save, refresh the page and go into view mode to test it out. Each link should gracefully slide you up and down the page. 


Automatically hide the navigation menu on the mobile site

While the mobile navigation is usable as is, the menu stays open after clicking a navigation link, meaning the visitor will have to manually close the menu after clicking the link. To have the navigation menu close automatically, add the following to Settings > Website > Edit Head:


<script type="text/javascript">


    $(document).ready(function() {

        $('.jmd-nav__list-item-0 a').on('click', function(e) {








So there you have it: instructions for creating a one-page website with anchor links. Once you learn how the process works, you should be able to tweak it to make many different versions.