Jimdo one page website

One-sided Jimdo website

One-sided websites are very popular at the moment. In this advanced tutorial you will learn how to create a one-page website. Creating a one-page website Unilateral web pages are very much in demand at the moment. By focusing on the creation of small segments within a page, this style allows users to skip up and down the page to display those segments. A little additional coding and some old web designer tips will help you build one of these pages on the Jimdo site.

It is an intermediate level workshop and expects you to know the fundamentals of Jimdo, such as the layout of a Jimdo pattern and how to use the stylescanner. Notice: While one-page sites with restricted contents are currently fashionable and liked, they may not be the best way to optimize a site for SEO.

Web sites with more pages and more text offer a site more possibilities to appear in results. Below is a sample website created with this tutorial: http://brentbgtest.jimdo. com/ It looks elegant and unusual, but anyone should be able to create a similar look without too much hassle or delay by following the instructions in this guide.

I will restart a website from the ground up for this tutorial, but use some previously created asset (logo, pictures, etc.). You can use this example with any Jimdo artwork, but some are better than others for this use. It is recommended to use a pattern with a top level navigational bar such as Shanghai or Malaga.

As we will create a one-page website, the first thing we will do is open the Edit Navigation pane and remove all additional pages except the home page. Change the name of the homepage to your corporate or website name. You' ll know you're done when you see two distinct "Add Item" keys on this page.

For example, first we build each of the segments on the page: We' ll talk about navigating later in the workshop. Since the page is empty, the second click on "Add element" can look a bit bewildering. Why don't we just modify the wallpaper colour of the bottom line to facilitate identification on the page?

Open the Styles Editor and click on "on" somewhere under the buttons "Add Element" and "Style by Element" is activated. Let us now make our first contents area. Adds a new rows item and leaves it at the two start rows. Insert a middle header item in the upper right hand corner and type a memorable brief title for your info area.

Below is a small distance between the two, perhaps 30-pixel. Then, insert a text item with a mid-size parapagraph. Aesthetics of this website is quite minimum, so we don't want to have too much text in each of the paragraphs. On the right hand side, insert a photo item and choose a photo.

Exactly like that we have the area ABOUT our website prepared! To keep our website coherent, I like to copy the whole column item from my first contents area and use it as a model for the other areas. Simply move the mouse over the column and click if it is called "Edit Columns".

" Click on the icon Replica Item and you will receive a second copy of your current item record. Move the mouse between the two column blocks and insert a spacer between them. To make your contents more interesting, you can now reverse what you have in the two column.

Do this again for the LOCATION section, except instead of a photo item, use a Google Maps item and include a placeholder for your adress. We use the bottom for this - this is the second contents area that remained after we cleared all the other items on the page intep 2.

Insert a new heading item there and then enter "Contact". "Place a distance piece under it and then a shape member. As this is a one-page website, we need to chop the navigational menus so that the navigational hyperlinks go down to the appropriate section instead of opening new pages.

We also want to set up "BACK TO TOP" hyperlinks at the bottom of each of our areas. Just insert a new text item under each of our column items in the different areas. Place one of them under the shape item in the bottom row. The entire naviagation on this page is done via anchors, which are a particular kind of hyperlinks that allow you to go to a particular point on a particular page of a website.

There is an ongoing workshop that will cover the production of anchored linkages, and this section will be very similar to the information presented there. First of all, we must establish the points to which the link should lead us (the "anchors"). And the first one, for the BACK TO TOP link, is installed at the top of the website for us.

In the other parts, make a new widget/HTML item above each of the parts on our site. Beginning with the ABOUT section, copy and paste the following piece of HTML into the widget / HTML item above the ABOUT section: Browse down to the first and click the text to modify the item.

Go to the "more" area and choose the icon that looks like this . The HTML screen of the item is started. Perform this for each of the BACK TO TOP blinks and store each one. Switch to the viewing modus and test the link.

When you click on one of them, the page should refresh with the top level navigator displayed on the monitor. We' ll initially put in some coding for the navigational menus. Browse to Settings > Website > Edit Header and insert the following header code: $("a[href*=#]"). attr('target','_self' ); }); now move the mouse pointer over the navigational menus, click Edit navigation and insert a new page for each section (About, Services, Location, Contact).

Click the linking symbol to specify an outside hyperlink and enter the following text in the box for the URL: Replace "about" with the name you used for each section and click "about" for each section. Once you're done, go back to view and test each of the links before proceeding to the next section of the Tutorial.

Please note: The Externally Link is only available for JimdoPro and JimdoBusiness people. JimdoFree sites allow you to register for a JimdoPro evaluation version or fade out all your navigational menus and build your own by adding text within a Columns item and following our Anker linking creation guide.

Here the website could be full, but there is a small enhancement we can make to help our website make a better user feel for our people. To make each section look different with its own wallpaper or colour, take a look at our full width section creation guide.

Be careful, although this is a more technically oriented tutorial that needs some basic understanding of how HTML works with the CSS. Among the prettier things about most contemporary one-page sites is the way in which the navigator animates the page, moving it from section to section. To explain this even goes beyond the framework of this extended tutorial, but we did some research and found a great little piece of writing that we can easily insert into our Preferences > Website > Edit Head section to apply this effect to all anchors on a Jimdo website.

Once you have saved, reload the page and go to display to try it out. Every hyperlink should move you up and down the page graciously. Whilst the user can use the normal functions of navigating by car, the user remains open after having clicked on a navigational hyperlink, which means that the user has to click on the hyperlink to exit the navigational hyperlink again.

In order to exit the Navigate window automaticaly, under Preferences > Website > Edit Header, please insert the following: e. preventDefault(); $(".jtpl-navigation__checkbox"). trigger("click"); }); }); }); How to create a one-page website with Anchorlinks.

Mehr zum Thema