>> There we go.
Well, good morning, folks, from my site.
Today's topic is creating a one-page website.
I thought I'll first do a bit of an introduction
before I am going to go to my test website
and show you how to create one.
So what is a one-page site?
Of course, a one-page website contains
all the most important details or everything you need to share
with visitors in one location, in one spot.
And one of the things I thought I'll chat about first
is what to include, because it all depends, of course,
on what type of website you have.
But I think it's important to have an about section
or a section about your company or the history of your product
or your company.
Then to also have an area about or a section
about the services you provide or to share your portfolio
or to showcase whatever you bring to the table.
Some folks also add testimonials or a section
about frequently asked questions.
And then I think one of the important things
is to have a contact form.
As you want people to, of course, take action.
You want a call to action, and a contact form
is a great way to do that.
And then I would also advise to have social media
integration so that you can connect with folks
via your social media platforms as well.
Now, one of the things I also wanted to highlight
was is that single page websites are versatile.
It's not just one--
there's not just one type of one page website, right?
Businesses, even larger businesses,
but maybe more small businesses can
go for a single page website.
Some restaurants, especially freelancers,
small agencies, photographers.
And then you will also find that many campaigns or events
use single page websites.
I've, of course, also seen like a wedding invitation sent out
using a single page website as well.
So yeah, with that in mind, let's go and explore.
I first wanted to show you an example of a one page website
that I found.
And then I'll show you the one that I created.
And then we will go ahead and recreate it.
OK, so the single page website that I wanted to share with you
today is called Cook Collective.
And it's actually like a shared kitchen
that you can rent in New York.
So let's see what they have on their single page website.
So of course, here at the top, you
can see it's shared kitchen by food industry people
for food industry people.
So you have this feature image.
And then if you scroll down, of course,
the who we are or the about section that I spoke about.
And if you scroll down a bit, we can see what they offer.
So they've got eight customizable preparation stations,
fully licensed and equipped.
And then it talks a bit more about the infrastructure,
the equipment, the services.
And then of course, there's a call to action.
And then you've got another image with a bit of a slogan.
And then they also actually share who they partner with.
People that probably use their facilities.
And then at the bottom, how to apply.
And then of course, there's a booking form.
And that is it.
And then of course, your footer.
And of course, they've also added a sign up
for updates section in the footer, which is also a good idea.
But now, of course, the one thing that
makes this a single page website is that there's no other pages.
We can't dive deeper into the site.
This is it.
And if we look at the navigation menu,
and usually if you click on one of these,
it's usually a page, right?
And it takes you away from this page.
But these will take you to that section on the page.
So if I click on what we offer, we
can see it scrolls down.
If I click on partners, it scrolls down.
And even how to apply takes us here.
And I will actually show you how to do that today as well,
using targets and anchors.
So that is the way we can also achieve that
with our single page website.
OK, so that's the example from a live website
that I wanted to share with you.
And now I'll show you the one that I created
and that I will be recreating alongside you today.
All right, so I have created a dummy architectural website.
So I am a freelance architect or a one man band,
a one man architect.
And I'm going to share my one page website with the world.
It can probably be seen as a portfolio website
or whatever it may be.
So you will notice I have added a logo.
I've got this featured image.
And then I've got an about section.
I'm on a mission to make architecture more sustainable.
And then I've got a whole section about my work.
And that's the section I spoke about where you
want to share portfolio or to showcase
or to talk about your services.
For example, if you're a plumber
and you've got a plumbing company,
you want a section about all the services you provide.
All right, so then I've got some images of my work,
part of my showcase.
And then I've got a section about my process,
the process that I follow.
You'll see consulting, project management, design, maintenance.
And then I end off with getting touch, with a contact form.
And then at the bottom, I've got my footer.
And I've added my social media links here.
And now, of course, the cool thing, as I showed you,
if I click on the about link, it will take me to that section.
And if I click on my work, it will take me to that section.
All right, so let me show you how you can also
achieve this.
So I'm going to make my way to my test website.
And the first thing I wanted to show you,
I am using the 2024 theme.
And the great thing about the 2024 theme
is that the theme provides a lot of cool patterns
and even page patterns.
So it was a bit more easy for me to actually build that page
using the patterns that the 2024 theme provided.
And then if I make my way to the dashboard,
I thought we can start from here.
So the first thing I am going to do
is go to Settings and Reading.
Now, you know you have a choice to choose between your latest
posts, like your homepage displays, your latest posts.
And then you have an option to add a static page.
Now, I am actually going to leave it on your latest posts.
So I'm not even going to change anything
you're going to leave it as is.
And I'm actually going to go ahead and create a front page
template.
So I'm not going to create any pages.
I am basically going to build my entire one page site
on my front page template.
And that's it.
So I won't be creating any posts
because I don't have a blog section.
And I'm not going to create any pages.
I'm just going to create a front page template.
So to do that, we need to make our way to Appearance,
and then it will take us to the site editor
if we click on Editor.
And of course, if we are in a site editor, we can usually
add a header and a footer to our templates.
Now, we don't have a lot of time to go into the nitty-gritty
of templates, et cetera.
But as I mentioned, we are going to actually
create a front page template.
So at the moment, you will notice,
if I open up my site editor, the template
that we see is the blog home template.
OK, and if I click on the--
if I go to Templates and I click on Blog Home,
you will notice it says it displays the latest posts
as either the site home page or as the posts page
as defined under the reading settings.
Now it says, if it exists, the front page template overrides
this template when posts are shown on the home page.
So the reason I'm going to create a front page
is because it overrides this template.
So we don't have to worry about anything else then.
If we create our front page template,
we can just focus on that.
And it will override.
And that will be the front page.
That will be the main page that we
are going to use for our single page website.
All right, so if you click on Templates,
you will see there's a plus icon next to Templates.
We can say add template, and here we can add a new template.
And here we will then select a front page template.
And that made it easy to actually provide you with patterns.
So I will just select the standard pattern.
And now my front page template is created.
And this will be my front page.
This will be my single page, right?
So we are going to build our one page website right here
in the site editor.
And we are not going to be bothered by anything else.
OK, so first things first, let's open our list view.
And then we can start at the top.
And we're going to start at the top,
and we are going to build our header.
OK, so I will click on the three vertical dots.
And I'm going to select replace header.
So the nice thing here is there are header patterns.
So of course, I'm going to save time
by using the patterns provided.
So if I click on replace header,
you will actually see the header that I've already created.
But imagine that's not there.
Then you can scroll through some of the patterns available.
Of course, this might look different depending
on the theme that you're using.
So I am going to select this pattern.
And it's called full width header with your image.
OK, so let's select that header.
So that's going to be our header pattern
that we are going to select.
And now we can start modifying it, right?
So the first thing I was going to do is--
the great thing is, in the list view,
you will see how these blocks are nested.
OK, let me just save this for a moment and refresh.
OK, so let's just open up our list view again.
And as I said, if you open your list view,
you can see how all these blocks are nested together.
All right, so I've already uploaded my logo.
And I just basically added my logo to my media library.
And I used Canva to create my logo.
Now, you can use anything to create a logo.
But I'm just showing you this.
It's already pulling in my logo because I've already
added my site logo to my site.
So that's my architectural logo.
And then we can see on the right, part of this row block
is the site title.
And I actually don't need this.
So I'm going to delete these.
I don't want that there.
I just want my site logo on the left.
And I am going to enlarge this a bit.
There we go.
And then at the on the right, you will see my navigation menu.
And for now, we are going to leave it as is.
And we'll get back to that at the end
after we've added our sections.
So let's ignore the navigation menu for now.
And next, we can go ahead and select the cover block.
And let's click on replace in the block toolbar.
And I will also select an image that I've already
added to my media library.
There you can see my logo that I've added.
And here's the one that I wanted to add.
Great.
Next, I'm going to add a columns block within my cover block.
So I'm going to add a columns block here.
So I will select the space of block.
We're going to use the space of block to create more space.
And then I'll say add before.
So let's say add before.
And here in the list, you can now see
that we're adding a block above.
So I'm going to say forward slash columns.
And let's select 50/50 for now.
And then in the right column, we are going to add a heading.
And it said an architect with a passion
for eco-friendly design.
Now at the moment, I want to push that text to the right a bit.
So what I'm going to do is I'm going to select the left column,
open the setting sidebar.
It's changed that to percent.
Sorry.
Let's change the unit of measurements.
And let's change that to 17.
All right.
So I've changed the width of the left column.
And now the text on the right pushes to the side.
And you'll notice I've actually selected an image
so that the building is on the left.
And we've got blue open sky on the right.
OK, let's see what that looks like.
OK, next, let's also look at if we want to--
OK, let's open our styles section.
The one thing you'll notice is I have changed--
or I have not touched the opacity.
I wanted the opacity to be 0.
And the next thing I'm going to do
is I'm going to add some padding.
So let's add some padding.
Let's add there.
And let's add some more padding on the left and the right.
OK, great.
Now it says minimum height of cover
here on the right at the bottom.
Let's say we want to push that up a bit.
Let's say we want to make that 50.
We can do that as well.
OK, great.
So now let's close it.
And there is our header almost done.
I just wanted to enlarge the text of the heading as well.
So let's open up our settings again.
You can go to size.
And if you click on set customize size, we can change this.
Let's make this 56 pixels.
And that looks better.
I wanted that text to be larger.
All right, so our header is in place.
We've got our logo.
We've got our featured image.
We've got our text, which we've added using the columns block.
And as I said, we'll come back to the navigation a bit later.
All right, now we get to the content bot.
Now you will notice if I click on this group block,
my theme have already added all of the dummy text,
or basically patterns that come with my theme
into this front page template.
And we are going to add our own content now.
So we are going to remove this.
We're going to say delete, delete.
OK, great.
So now let's click on our header and say add after.
And the first thing that I wanted to add
was the about section.
So maybe if I look at this--
see, we've built this now.
So let's add the about section.
All right, so I'm first going to add a group block,
like a container block.
And I'll select the single block.
And then I'm going to add a media and text block.
Let's first select the group block.
All right, wait.
I'm actually going to delete this first.
Let's say add after.
Let's add our media and text block first.
Right.
All right, and now let's add our image.
So this is me or the fake me.
And then on the right, we can add our dummy text.
Now, to save time, I've just copied
and pasted it into a Word doc so that I
don't have to type everything out.
So let's just copy that.
And let's add our content on the right.
OK, you will notice it's a heading that says on a mission
to make architecture more sustainable.
And this is also-- it's just double check.
I wanted this to be 56 pixels as well.
So if I go to size, let's make that a bit larger.
And then I've added some paragraphs.
I want to make sure that's medium.
Yep, that is medium.
All right, so there's my about section.
But now I want to actually add this to a group block.
I want to put it into a container block.
So I'm just going to click on the three
video dots and say group.
And then I will group this.
OK, let's change this to wide words.
There we go.
OK.
Now, the great thing about group blocks now
is that you can rename them.
So I'm actually going to rename my group block.
And I'll rename it.
And this is-- I'm going to call this my about section.
All right, so let's save that.
Now we've got our about section.
So that is a group block.
And let's add some padding as well.
Let's open our styles and let's add some padding.
Great.
So that is in place.
Our about section is in place.
Now we are going to add our second section.
So I'm going to say add after.
All right.
And just to remind you--
so there's my about section.
OK.
I just wanted to check something here.
I just want to open up my sidebar settings
and check something here.
Oh, let's see if I can change my media width
and make this a bit smaller.
There we go.
So I just wanted to make this image a bit smaller.
So I went and I'll open up my setting sidebar
and I changed the media width to 240 instead.
All right.
Let's move on to our next section.
And this is the section about my work.
And I'm going to use a pattern here provided by my theme.
So I'm going to click on the Inserter.
And I'll go to Patterns.
And the pattern that I'm looking for
is actually a portfolio pattern.
So if I click on the category portfolio,
you will see all of these great patterns that I can use.
And you'll see at the bottom it's called Project Details.
There we go.
All right.
So at the top, I'm going to add a heading as well.
So let's say Add Before in my left column.
You'll notice I just selected the paragraph
and I said Add Before.
So yeah, we can now add a heading.
And I'm going to say it's my work.
And then I'll also change that to the size to 56 pixels.
OK.
And I'll select my group block.
And then I will also add some padding.
So you'll notice that the padding has already been added yet.
So I'm happy about that.
And now we're going to add our images.
OK.
So again, we'll select this group block.
And we are going to say Add After.
And again, we're going to add a pattern
because I want to add some images.
And this theme provides some really cool gallery patterns.
So I'll click on patterns again.
I'll go to Gallery.
And yeah, you can see this.
There's a few options here.
And I'm going to select the first Offset Gallery
to Columns Pattern.
And once inserted, I can then select the images
from my Media Library, which I've already uploaded.
So the first one is-- here we go.
That's the first one.
The second one.
And I wouldn't mind living in this little house
when it's snowing.
And then the last one showing folks how I work my disk space.
OK.
So the one thing you'll notice is that I actually
don't have the rounded effect to these images.
So at the moment, the pattern provides
these rounded effect because they've added a bit of a radius.
So I'm just going to-- if I change the radius in my sidebar
settings to 0, I can remove that rounded effect.
So for now, I would prefer to remove the radius and make it 0.
The radius is 0, below Styles.
Right?
OK.
Let's open up ListView, select my portfolio images,
open Styles.
And you will notice there's already some padding around here.
And now we can move on to the next bit.
So I'll click on the three vertical dots, say Add After.
We've added our images, and we've got one more pattern.
And again, I'll click on the Insertor.
And this time I'm looking for a text pattern.
So I'll go to this category text,
and you'll notice there's some cool patterns again.
And you'll notice some of them come with my theme,
and some of them just come with standard WordPress.
And again, it's the last one here at the bottom.
And of course, I'm not changing the text and stuff now.
But as soon as you add a pattern, you
usually-- you modify it.
You add your own content.
You can remove things.
You can add things, et cetera.
OK.
So there is my pattern added.
But I wanted to add some more padding here.
So I'm happy with that padding.
But I wanted to add some padding to the columns.
So let's select the left column.
Let's add some padding there.
And let's select the right column, open our styles,
and let's add some padding there.
It's safe.
Now the one thing I still wanted to do
is I wanted to make sure that this is medium.
So yeah, I'm happy with that.
OK, cool.
So now I've added a section about my work.
So this is all my work, some more detail, some images,
and then some more detail.
But now I actually want to select all of these blocks
and group them together.
I want them to be one.
So I'll hold and shift, and I'll click on all three blocks.
So it's the--
my work, the images, and this section.
And I'll click on the three vertical dots, and I will say group.
And now they are all grouped together nicely.
And I can also rename them now.
So I'll click on the three vertical dots and rename,
and I will say my work.
Safe.
I wanted the wide width on all my sections.
So let's see.
This must be wide width.
Correct.
Thank you.
This should be wide width as well.
And this should be wide width as well.
Let's see if I close this now.
Of course, you don't have to add the wide width.
You can keep it different.
But yeah, all my content is wide width now.
So yeah, thank you.
I forgot that step.
OK.
Now we are going to add a contact page.
So let's say add after.
And of course, for this, unfortunately,
we're going to have to use a plugin.
So let me just duplicate this for now.
So we are going to make our way to our dashboard.
We can make our way to plugins.
We can say add new plugin.
We can add the new plugin, and then we
can search contact form.
Now, of course, you can choose whichever plugin works for you.
For example, contact form seven, contact form by WPForms,
forminator, ninja forms, et cetera.
For today's session, I use the contact form by WPForm.
So as you can see, it's already active.
So what I did is I went to my contact form,
and then we can say add new.
And a lot of these work the same way.
And I'll just say, oh, I want the simple contact form,
and I'll use that template.
And you'll notice it's the name, email, and comment, or message.
Now, these need to-- you need to pay to see these.
So what I just decided is I am going to say--
I'll add a number here.
But then I'll just change the label to number,
and then I'll move it up to below email.
And then my form is done.
I can say save.
And then we can go back to our page, of course.
And now I can say forward slash, and I can type in form,
and it will actually pick up the plugin.
And then you can select the form that you created,
depending on what plugin you used.
And I just wanted to use my simple contact form.
And there we go.
OK, so let's first select our--
navigation menu.
All right.
And I am going to remove this privacy policy page,
all those terms and conditions.
All right, and now we are going to add links to these sections.
So let me show you how to do that.
So, OK, so the first is we are going to add a link.
We are going to add a link.
And then we can label the link.
And the first one is, of course, about.
Right, so we can label it about.
And we are going to add a target and an anchor.
So the first thing we're going to do is for the URL,
we are going to say hashtag.
And then we, of course, this is the section we want,
so we can say about.
OK, so that's the first thing.
So we've added the label, the about label.
We've added the URL target.
And now, let's say that.
Now let's go to that section that we want to target.
Then we will click on advanced in our sidebar settings.
There you can see the block name is about.
And we are now going to add an HTML anchor.
And the only thing you have to do here is give it the same name.
And it's about.
And then we can save.
So let's do it for the second bit as well.
And you can see me going through the same process again.
Let's select our navigation block.
Let's add a new link.
Let's label it my work.
Let's add the target.
And that's the target, of course, hashtag my work.
Let's save that.
Let's go to the section.
Go to advanced.
And for the HTML anchor, we just say my work.
It says they enter a word or two without spaces.
So we can save that.
And then let's do it for the last one.
And then we select our navigation block.
Add a new link.
And this is called contact.
And then hashtag contact.
And then let's save.
And now the one thing I forgot, if you go to this group, sorry, my WP forms, I actually
did not want to be part of that group.
I wanted it to be by itself.
So I just removed it as you see from that group.
And then let's group it.
And then let's call that group block, it's rename it to contact.
Save.
So we've already done the target.
We've targeted that.
So let's go to that section.
Go to advanced.
Again, just type in contact.
And now click save.
Okay.
So now let's make our way to the front page.
Okay.
So let's view site.
And here we can see our header in place with our navigation menu.
We've got our about section, my work, my portfolio, and my contact form.
So the one thing I still forgot to add here is let's add in this block.
And before, let's add a header, the contact.
Sorry, a heating.
Hating, let's say, contact.
And let's also say this must be 56.
Okay.
So let's save that.
Let's refresh.
Okay, cool.
And of course you wanted to make sure your else for your social media page design place.
You've got your navigation menu in your footer.
Now let's see what happens.
If I click on about, it takes me to the about section.
If I click on my work, it takes me to the, my work section.
And then of course if I click on contact, it takes me to the contact section.
And of course you achieve that by adding the targets and the anchors as I showed, as I just showed you.
But the interesting thing is you will notice I've added some CSS.
I've added some CSA CS.
So let me show you why I did that.
We didn't have time to really get into CSS, but I just wanted to show you this.
And so if I go to my site editor, appearance editor, and if you go to styles, and you say
edit styles, there is an option.
If you click on the three vertical dots there, you will see additional CSS.
So I've added this CSS to give it a smooth scroll.
So if you want to copy this down, you can do that.
It's a basic one.
It's some basic CSS, which you can just add to your site editor and the CSS section.
But I'm going to show you what happens if I remove this.
So I'm just going to cut it now, save it.
And let's go to the front page again.
I'm just going to refresh.
If I remove this smooth scroll, this is what happens.
So let's say about, do you see it's quite jarring.
It doesn't scroll down.
It just takes you to that page.
Let's try that again.
Let's say my work.
It just does that.
There's no scrolling effect.
Same with contact.
So that is why I added the smooth scroll to my CSS.
So again, let's paste it back.
You've got your HTML curly brackets and then it just says scroll behavior smooth.
And you close your curly bracket or curly braces.
Okay, let's save that again.
And return, refresh, and hopefully now we've got this smooth scroll.
All right.
And that is my one page site that I created and that I've used to present my business.