Jimdo Advanced Tutorial | One Page Website | Getting Started

Create and update a website wherever you are with Jimdo’s free website builder. Learn more about Jimdo at http://www.jimdo.com/.

In part 1 of the How to Make a One Page Website series, we will take a look at an example of the website we will be building. We will also set up a new Jimdo website using the Cape Town template and then remove all the content and pages to create the basis for our one page website.

Some parts of this tutorial require you to copy and paste code examples that will appear on this page: http://support.jimdo.com/tutorials/we...

---

Closed Caption:

in this tutorial series we're going to
be talking about how to create a
one-page website in gym do it is an
advanced tutorial series which means
that there is some code but the main
idea that we want you to get out of this
is a way to think about your website
from the designers perspective and some
different tricks that we've picked up
and think that would be good for you to
learn so let's take a look at the
website we're going to make this is
another one of my make-believe coffee
fictional websites and it's a one-page
website based on one of our own
templates and if we scroll down we see
that each page each section basically is
its own page this is the about this is
the services this is location this is
contact and I built-in also a small
script that will allow you to slide
automatically up and down the page so
we'll be adding all of this to the
website that we're creating location top
and contact so obviously this is a
little bit limited because the way we're
doing this is using of a trick with
background so this size the vertical
size of each of these areas is fixed so
this this is designed to be a website
with minimal content on it a nice lick
quick one page website let's take a look
at how we're going to do this so we're
actually using a built-in template
interview called Cape Town and if you
already have a website that you want to
work with you can go ahead and change
the type of cape town i'm going to
create a new one and to start from
scratch so i'm going to go ahead and
look at templates and this is the Cape
Town template here i click the second
see a cape town is right up here so I'm
31 and i'm going to title it
so now we have the starting template the
the dummy template as we like to call it
for cape town and we want to see what we
need to do to turn this template into
this website so the first thing we're
going to do is going to remove all the
extra content and we're going to start
with the the extra pages we don't need
three pages because it's a one-page
website so if i go into edit navigation
i can simply delete the extra pages
since it's one page website i'm going to
go ahead and rename the existing page to
the name of my company
it's a good thing to do next I want to
go ahead and clear out all these
existing images and content so I'm just
going to go through each one and delete
them all going to actually delete this
column's on to leave everything at once
can do the same trick here is some
spacers and here i can just find out
where spaces are just moving my mouse
over the content area here to put this
heading in this image
alright so looks like we have no content
left and hero one more in there it can
hide on you go
so 10 pixels spacer sleeve that will
know we've removed all of the content
blocks when we have to add element ones
the top add element is for the the body
content area and the second element is
for the footer area we're going to be
using both of those sections i also have
a logo in here and the background so
let's take advantage of those things
next here i already have my logo preps
i'm going to go ahead
and just upload a new logo over this one
is a landscape white version and I'm
going to go ahead and center that now
just by making sure that it's centered i
can make it bigger smaller if I wanted
that size is pretty good for me save
that and if I want to add header text I
can do that here
did I put in my other one colorful
coffee with the fancy background
ok now i'm going to have to go into the
style area to set my styles and to
change the background out and the other
thing i want to do is get rid of some of
the things are built into the Cape Town
template we're in the style by template
version Castile by element is off so I
can set a color scheme i'm actually not
going to do that in this case i do it
just kind of it doesn't matter how can
actually set it to a dark color I want
to have a little bit darker background
and have most of my texts be white so
it's going to have a high contrast on so
i'm going to choose this color scheme
but I'm gonna actually override this
builds go ahead and set this now and I
always like Oswald as is one of my
personal favorites for of headings and
then for body text Roboto is my standard
font and i can go ahead and save which
pretty much height everything so we're
going to do is we're going to turn style
by element on at this point i can access
different parts of the site and
manipulate it for example the heading
text here i want to be all capital and I
needed to be a smaller font size because
I want to be on one line not that small
but something like that looks pretty
good to me i'm gonna go ahead and align
its center save that and then go ahead
and click on the background itself at
this point I'm going to switch it to the
transparent color which is the
checkerboard pattern and that'll show us
her back on all the way through this is
what we want i'm going to choose that
and save and we saw the background for
the footer as well so i'm going to go
ahead and I'm going to remove those two
and this very bottom one change that too
so now we see the background entirely
through here let's save that and we're
going to go ahead and change your
background image