Set a Static Homepage vs. Blog Feed
The home page of your website is one of the most important pages of your WordPress website and in this video, I'm going to show you exactly how to customize your WordPress website's homepage so you can design the perfect homepage according to you. Let's go.
So let's talk about some important things first. If you're trying to customize the home page of your website, it's very likely that you would prefer to have a static home page on your website, not a blog feed. What's the difference? Let me explain. Right now if I go to the home page of my website, it's a collection of blog feed. That means just all the blog posts are available or are showing up in a chronological order. So even if I decide to customize this home page, I have limited options except for some cosmetic changes because the block feed is not going to change. Now you might want that, I'll explain how to work around that, but most likely you would prefer to have a static home page.
How do you change that or how do you customize or switch between those two? What you do is go to a dashboard, go to settings of your website, settings and go to reading. And the first option that's available is what you would need to customize. Your homepage displays: your latest post, which is the current setting, but you can choose a static page. So click this and then select the home page that you prefer to have on your website. For example, if I see the home or home page, I'll save this. And if I've selected the correct page, the home page should appear. Let me just refresh this page to see if I've selected the right home page. Now this is not the right to home page, let me just go back and select home and save again. And I'll refresh this page. And now you see this is the actual home page of the website or a static homepage of the website, which is very beautiful and I can now customize this and make a lot of changes. I can change the font style, I can change the images, I can change some other elements on the page, and I just have more control over what I can do with the page.
So that's the first step that you know, decide what kind of home page you would want to have on your website. Once you've done this, let's go to the actual meat of the video which is how to customize the home page on your website. Let's go.
Method 1: Using the WordPress Customizer
So once you've decided on the kind of page you would want to have on your website, the easiest way to start customizing the home page of your website is by using the customizer. Now if you don't know what the customizer is, it's a built-in, I say solution inside WordPress to customize your website. And you can reach the customizer in two different ways. If you're on the back end of your website you can go into Appearance and then go to Customize. Or if you're on the homepage and logged in already or any other page, you just click the customize icon or customize button link here and that will open the customizer as well.
Now, let me clarify, the customizer will appear differently or it will present different options depending on the the theme you're using. Right now I'm using the Astra theme, so you can see the name right here, and many of the options that I will see for customizing the home page and other areas of my website will come from the theme itself. So some options that you see here might not appear if you're customizing your website which uses a different theme. All right?
So inside this section what I can do is, if I let's say I want to customize my header, I can just click the header section which will open up the Header Builder, which is an exclusive feature to Astra and a few other themes. Your theme might not have this feature, but nevertheless you would be able to customize the logo, the menu entries, the footer, and some other areas of your website.
For example, if I go back and if I show you all the options, I can change Global options, that means typography options, colors, container options, button options, and also user block editor. And also if I go back to Header Builder, I already showed you how the header Builder appears or what looks like. I can change the breadcrumb options, I can change the block feed sidebar and many other options. And some of these options are available or some of the options relate to the home page and some of these options are for the rest of the website as well, which will also affect the home page in some way. But the ultimate idea is that using the customizer you have some degree of control over what you want to do on your website and you can customize the home page to your liking. So that's the first step to customizing your home page of your WordPress website. Let's talk about the second method.
Method 2: Editing with the Block Editor (Gutenberg)
So let's talk about the second method to customize the home page of your WordPress website. And the second method is the easiest one because it's using the built-in block editor, which is the default editor in WordPress. You see, I'm on the pages section of my WordPress website and this is the home page of my website which I already showed you. This is the page, right? Beautiful looking page.
If I open this page up, if I open this up by using the edit option which I already have it open, you'll notice something very interesting. The entire page is actually designed and built using the built-in block editor or Gutenberg and you can see the entire page right here. And I'm free to change anything I like here. I can click this section, change the typography, change what the text is, change this section, change the button, and a lot of different, I'd say at least the text and content I can change it right here. And I can also change the images. So if I click this image and open up the or click the gear icon you'll see the info box block appearing here. I can change the style, I can change the presets, I can do a lot of different things on my website right here inside the block editor.
And that's one of the easiest ways to customize and even build a custom home page from scratch if you are familiar with the block editor. Now, one interesting add-on to this can be that if you don't find the block editor easy to use or if you want to speed up the process of creating beautiful looking pages with the block editor, you can actually utilize additional plugins that add on to the block editor. For example, I am using the Astra theme right now, and what the Astra theme does is also bundles their own product, for example it's called Spectra, with their offerings which is already installed inside. And some of the elements that you see, for example this info box, is coming in from their plugin. But we also have a blog post on a website which lists around 17 different plugins you can install on your website which will give you different kinds of functionalities on the block editor. So you're free to choose any of the block editors, install them on the site, and have different kind of elements pre-built so that you don't have to create everything from scratch. Just change some of the elements, change the images, change the text, and then go your way to customizing a beautiful looking home page.
And of course depending on the theme I'm using, I can also customize the colors and typography using the customizer and sometimes also on the Block editor itself. So that controls or those controls are already available to you depending on the theme you're using where you can customize those options. So those are the two exciting ways to customize your home page. Let's also talk about some exciting other ways to customize the home page on your WordPress website. Let's talk about method number three.
Method 3: Using a Page Builder (SeedProd)
So let's talk about the third method to customize the home page on your WordPress website. And the method is by using a page builder or a theme builder for your WordPress website. For example, if you see my website right here, I'm still on the pages menu, but you might have not noticed that I have this plugin installed which is called SeedProd, which is one of the best page builders out there for WordPress right now. Now what I can do is customize the current home page of my website. You might have noticed this button already. This is on the existing page, I can edit this page with SeedProd completely and customize this. Or I can just create a brand new page or use the import or import a template with SeedProd, customize it, and make that my home page. Both work fine, both are up to you. Whatever you want to do is up to you.
For example, if I go back to SeedProd, I go to landing pages, which is just a static page, I have these options available. I can customize some of these pages which are meta pages, for example if I want to make a coming soon page, maintenance mode page, a login page, or a 404 page. Those are not in the scope of this video, but you can still make those with SeedProd. But let's create a new landing page which is just a static page which you can make into your home page if you prefer. So I'll click this Add New Landing Page button, which will open up SeedProd's interface. Let's wait for it to load. And yeah, before the interface loads it will give me an option to import the templates or I say choose a template if I prefer. For example, you can see there are so many different templates for pages available which I can just simply import and have those as my home page or any other page on my site and even customize them. For example, if you see the Educate Webinar template, if I click the magnifying icon right here, you'll be able to see complete demonstration of how the page will look like. So let's say this is the home page of my website, the entire point of my website is to get leads for my webinar, right? So I'll choose this template and this template will be imported to my site. So I'll just name the landing page as home-alt, which is alternate, and I'll save and start editing the page.
And now the SeedProd interface will open up, which is similar to where all the other page builders out there. If you haven't used a page builder before and you have no idea how they work, think of them as Legos, right? So if you have a blank canvas or a blank space and you have all the Lego blocks in the world, you can create anything you like. So page builders work in a similar way. Think of this as your canvas or empty canvas. Right now there's something already built, but here are all the Lego blocks that you have access to. And anything you want to add or remove you can just drag and drop anywhere. For example if I add the image block now I can add an image here. If I want to delete this I can just click the delete icon and click delete confirmation and it's deleted. So I can add elements, I can take away elements, I can click on certain elements which are already on the page. For example if let's say I want to change this image, I'll click this, I'll be able to upload a new image, delete this. I can even edit the text right here. So I click this and I can change the image or text or change the icon, I can change the text, I can change the typography, anything I want I can change. So everything on the page is clickable and editable. So if I don't like something, I want to change something, I just click on it, the properties for that element open up, I change it. When I'm happy I can save my changes.
So let's say for example, I am not making any changes to this page because let's say it's a beautiful looking page already. I just save that page, right? So if you remember the slug I selected for this page or created for this page was home-hyphen-alt. So if I go back to my site, let's click the cross icon. The page is not published. I'll just, yes publish. I'll close it and go back to my dashboard. If I go to settings, where are the settings, settings, and if I go to reading, now I can just change the home page of the site to something that I just created with SeedProd. So if I go to home or the home page option and I choose home-alt, click Save Changes. And remember the home page is already loaded on a new tab, so if I open this up, this is the old home page. I'll just refresh this page and now the entire page is changed or replaced with a new home page that I just created with the help of SeedProd. Pretty easy, right?
Now in the beginning of this lesson, I did mention that you can utilize page builders or theme builders to edit or customize your home page. What's the difference between those two? So a page builder will allow you to create these kind of pages, but it will not allow you to edit certain elements of the website. For example, if you just use a page builder and not a theme builder, then you won't be able to edit these header and the footer of your site. Now if you're using SeedProd, SeedProd, the pro version has a theme building capabilities built in. So what I can do is technically I can create a static header or create a footer and also have that customized on my website as well. So just a difference between the theme builder and a page builder. Many page builders can be theme builders and vice versa is just a subtle difference on what the capabilities of the page builder are. Technically, you can use both to create beautiful looking customizable home pages on your website.
Now, before you hit the like button and just simply exit this video, there's one more method you should know about to customize the home page and even customize your entire website very easily. So let me show you how that works.
Method 4: Full Site Editing with Block Themes
So right now as I demonstrated in the first lesson in this video, if you go to the appearance section you have the customizer option available. But that's not available with all the themes on WordPress currently. WordPress is experimenting with a new kind of theme building or let's say website building experience and that is still in beta, but let me demonstrate how it works. So let me change my theme for that demonstration. I'll go to my themes and if I choose the default WordPress theme right now, as you can see right now I'm on Astra. But if I change to the 2023 theme which is recently added to WordPress and if I activated this or activate this theme, you'll see instead of the customizer I'll be able to see these options. So I'll see the editor, I'll see these options and what the editor lets you do is just change or it is, think of it as a page builder inside WordPress with some limited capabilities at least for now. But what that allows you to do is change elements on this your website, change the menu entries, change a lot of things directly. And it also adds a lot of interesting functionality called Styles. So let me demonstrate how it works.
This is the beta editor where you can, whatever you can call it, I think it's a WordPress theme editor. And if I go here in these Styles options, this will open up these kinds of options. So what styles are are predefined templates of or predefined combinations of colors, typography and sizes of fonts and all that, which you can just click and completely replace and customize your entire website. So if I just click this button you'll see all the Styles will be available or shown on the screen. And you see the bunch of styles that are bundled with the 2023 theme, and whenever you use a block theme, it will bundle its own styles. So not every theme will have these Styles, but these are themes available or these are the Styles available with this theme. So let me demonstrate how contrasting or how stark a difference it can make if you just change the style on your website. This is the default style, double click and a second, the entire homepage looks different, right? And of course this will apply throughout your website. I'll click this, completely different website. Completely different website again.
I'm just giving you a quick demonstration on how instantly you can change your entire website's look and feel with the help of styles. And of course, this will get better over time. Right now as I said, not all themes support this. Technically the block page teams support this functionality. And if you want to just, let's say you don't want to import everything from a style, then you can customize that as well. For example, if I just switch to the default style, go back, I can just change the typography, text, links, headings, buttons. I can change just the colors or I can mess or customize just the layout of my website by making these changes. So I don't have to use the predefined Styles completely. I still have that control when I can make those changes on the site. And of course, you can customize your home page with this or your entire website with this. That's completely up to you. But this is a powerful functionality in WordPress and if you're using a default WordPress theme right now, you can access this right away. But make sure that if you want to use this functionality, then the theme you're using also supports this one, at least out of the box. Otherwise you'll be stuck with the customizer on all the other options I demonstrated.
Conclusion
I hope you enjoyed this video. If you now enjoyed this video, make sure to hit the like button on this video and also subscribe to our channel for easy to follow along WordPress tutorials just like this one. My name is Yuvraj, you're watching WPBeginner, and I'll catch you in the next video very soon. Take care.
