Does looking at a WordPress website makes your head spin? Don’t worry, in this WordPress Tutorial for beginners, we take a look at every single step on how to build an amazing WordPress website from scratch without touching code. You can follow this tutorial and build your website even if you have no design skill, no technical skills, and you’ve never built a website before.

🔗 Links Mentioned 🔗
✅ Get Hosting – https://www.wpbeginner.com/refer/bluehost
✅ Free Images – https://unsplash.com
✅ Background Remover – https://www.adobe.com/express/feature/image/remove-background

⌚ Timestamps ⌚

00:00:00 – Introduction
00:00:25 – What’s a Domain name and Hosting
00:01:13 – Purchasing Hosting + Getting a Free Domain
00:04:44 – BlueHost Backend + Create a Website
00:05:18 – Add Site Title
00:05:33 – Connect your domain name
00:06:06 – Install WordPress
00:06:33 – Seeing your website Settings
00:06:58 – Create a Username and Password
00:10:08 – Check out your brand new Website!
00:11:35 – How to Login and Logout from Your Website
00:13:42 – Clean up the site
00:15:35 – Install a New Theme
00:17:29 – Install Starter Templates
00:18:28 – Choose a beautiful template
00:19:51 – Template import + features
00:21:30 – Finish the import process
00:21:56 – Checkout your brand new website
00:22:21 – Frontend and Backend
00:23:25 – Adding a Blog Page
00:25:28 – Adding Blog page to the menu
00:27:31 – Adding content on the site
00:29:36 – Customize your website using the Customizer
00:41:14 – “Customizing the Blog Page
00:49:41 – Customize Single Blog Post
00:57:45 – Customizing Pages
00:58:58 – Customize the search page
01:00:01 – Customize the Sidebar
01:00:54 – Customize the Header and Footer
01:16:45 – Customize the Home and other Pages
01:18:22 – Install a duplication plugin for safety
01:19:17 – Duplicate the home page
01:19:56 – Editing the duplicated page
01:44:29 – Finding Free Stock Images and removing backgrounds
01:55:03 – Add contact page link to the menu
01:56:25 – Changing the home page
01:58:01 – Exploring other block types

Top Resources

⚡Use Promo Code WPBVIP⚡

►Best WordPress Contact Form Plugin https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin
https://aioseo.com/
►Best Theme Builder for WordPress https://www.seedprod.com/

Related Videos
►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90

If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner

Check out our website for more WordPress Tutorials
https://www.wpbeginner.com/

#WPBeginner #WordPress #WordPressTutorial

Are you looking to build a website for Yourself your business or for your Clients you're on the right video Because in this video I'm going to show You how to build a WordPress website From scratch and this is a completely Beginner friendly tutorial so you don't Have any experience in WordPress that's Fine you have never built a website That's completely all right all you have To do is follow along and just do the Steps I'm going to show you on the Screen and you'll have a fully Functional beautiful looking website Ready in no time are you excited I am so Let's get started so to build a WordPress website you need two things You need a domain name and hosting Domain name is the name people will type In to actually reach the website and Hosting is what makes the website alive On the internet now think of it as a Phone number and a Sal service your Phone number is what people use to Connect with you and vice versa you Connect with other people using your Phone number or their phone number but The Sal service behind the phone number Is what is hosting so you need both of Them to work together to make the Website actually alive on the internet Now technically you need to buy a domain Name and hosting separately and make Them work together but I'm going to show

You easy way where you can purchase Hosting for a ridiculously low price and Also get a domain name for absolutely Free and don't worry if you already have Purchased a domain name you can always Connect that domain name to your account That I'm going to show you and if your Client has a domain name you can connect That as well so let's switch to my Screen here and I'm going to show you How to purchase hosting and get a domain Name for absolutely free go to your Browser and start and typing this what I'm going to show you on the screen so Pay attention to the screen I'm going to Type in HTTPS for slash double for slashes type In WP beginner /re SL blost this is our referal link to Bluehost which will take you to this Page which you'll see on the screen once It loads and this will bring you to Blue Host's page now blue host is one of the Most well-recognized hosting providers On the planet they host millions of Website probably even more so what you Need to do is just look at these details Just at $199 a month you can get a free Domain for the first year free SSL Certificate uh come expert support 24/7 You have reliable hosting of course you Have oneclick WordPress install so the WordPress setup process which is usually Quite complicated is quite easy here of

Course I'm going to show you how to do It so if you click the get started now Button this will take you to the pricing Options they have a few different Pricing uh the one I I just mentioned is This one this is great for one website But if you're working with clients you Build multiple websites you might Consider the choice plus or the cloud Options which are also very very Affordable for the features and whatever You get so what you can do is right Right now what I'm going to do is click The select option here and this give me A popup I'll skip the popup for the the U WordPress store creation I'm going to Skip for now and this will take us to The domain page now what you can do is You can create a new a new domain name Here if you have a domain name you want To purchase then you can find the domain Name here and click the next and this Will uh next button and this will add The domain name to your account and if You already have a domain name just Enter it here and this will be link to Your account and you just need to make a Couple of changes in your domain Register so that make sure uh that your Domain is actually connected to the blue Host Hosting account now I'm not going To make the purchase right now but what You can do is just just go here if you Want to Doom you havec com. online. site

All these different domain names just Find the available domain name that you Can get here click the next button and Be added to your account I'll just click Uh click this button I'll create my Domain later because I'm not actually Making the purchase I'm just Demonstrating how this is going to work This will bring you to the last page Which is the pricing page or not the Pricing page the checkout page where you Have to enter your details and finally Complete the purchase so enter your First name last name if you have a Business name country street address all The basic stuff and then come down here To make sure the pricing is something That you're happy with because uh Bluehost option or offers some extra Optional things that you can use or you Can disable if you don't want it for Example you see the code guard basic I'll just uncheck that and I'll take a Couple seconds to refresh the site Lo Essentials is also something that I Don't need professional email is also uh Something I don't need right now so once That is done once I've uh removed the Optionals the pricing is coming down to 2388 which is uh the exact same pricing We saw $199 a month you have to pay for The entire year and then there's a Payment op options here now once you add Your card details fill in the details

Just click submit you might get some Confirmations depending on the country You are in for example we get a one time Password on our phones to make sure the Purchase is authorized and once that That is done you'll have the hosting and You also have the domain name for an Entire year for free and you'll get some Updates from Bluehost you'll have have Account created uh email and maybe some Credentials essentially what you'll get Is access to the blue host backend so Once this is done go back to your email Account or email address and find the Email from Blue host which gives you Access to the back end because that is Where we'll continue the setup process And actually start creating a website so I'll pause the video for a second you go Back to your email now come back here With the blue host back end in progress And I'm sure going to show you how to Build a website with Blu host so welcome Back to the video hopefully you have Access to the Bluehost backend now so This is how it looks like this is the Homepage of the Bluehost backend what You have to do is go into the website Section so if you go to the website Section you'll see I have a lot of Websites created because I just use Blu Host all the time but you will not see Any websites created here once the page Is loaded you'll see all the different

Websites that have been created now you Don't need to worry about all this Because you probably won't see it all You have to do is click the add site Button so if you click this button it'll Start thee creation process of the Website stick with the default option Install WordPress let's click continue And then we'll give a site a title you Don't have to worry about what the title Is because you can obviously change it Later but this is easy to give a Reference point so that you can remember What you name the site so I'm going to Just name it yub site this is easy I can change it later as well so I'll Click continue and then this is where You connect your domain name so if you Have added the domain name to your Account you got it for free all you have To do is search for the domain name here And you'll find it and then blue host Will automatically add the domain name To your account now if you had a domain Name already or your client had domain Already you might need to change some Settings on the domain that they Purchase so that your website actually Connects in that case you can use a Temporary domain and then finish the Process later I hope you have the skills Otherwise we have some tutorials on our Channel which will show you how to Actually make those changes es but if

You have made the purchase through bluos Make sure that do this process right Here otherwise it'll be complicated this Will make it easy so since I am not Purchasing or I didn't purchase a domain Name I'll use the temporary domain Option here and click continue and then WordPress is now being installed that's It right the WordPress installation Process that's all you have to do now This process may take a couple of Minutes to finish so once this is done We'll come back and I'll show you how to Access a site and do some essential Things on site to prepare it to actually Uh modify and make it ready for your Client for yourself all right so let This finish and we'll resume the video All right so the process of installation Of WordPress is complete on the site and You can see it here what I did was went Back to the website sections and since I Had a lot of websites I just made a Search you'll see just the one website Here now all you have to do is click This name section here and this will Take you to the settings of the website Now you don't need to master this you Don't need to worry about all of this This is good to know how it works and What specific options are present now What we need to do is first we'll all Website is already created so we can Access the website and we can make some

Changes but the first thing we'll need To is to create a user ID and password For yourself now do keep in mind that The default username password actually Is created by WordPress or Not by WordPress but by Bluehost if you go to Users you'll find that a new username And password or for the administrator Has been created but this does not use Your own email so we'll create a Username and password just for you using Which you can log in from your website But before that we need to make one Important change we'll go to the set Settings option here and once this loads We'll scroll down a little bit here and We'll just disable the coming soon page So that the website can be actually Access and don't make the mistake of uh Using this option to edit your WordPress Website because uh what this will do is Take you to the AI Builder that blue Host has featured now for the design Aspect we're going to take a completely Different route so this will just take Uh excess time which will be completely Reverse later because whatever Customization options you see here we're Going to just do it the complete Opposite way so go to the users option Here right now and once you see this Here all you have to do is click the Login button and this will take you to The website and log the back end of the

Website this is the back end of the WordPress uh as a setup the WordPress Website that you see and once you see This we I'll show you the process and of Course everything that you see might be Overwhelming might look complex don't Worry I'm going to show you everything How you need to set it up so the first Thing we need to do is inside the users Option that you see here there's an Option called add new user so we click On the add new user option And this will take us to the option of Where we can create a new uh uh account On the site so add a new username so I'll just add my name here we can add an Email here as well so I'll just add my Personal email here let me just type it In you can add some other options like a First name last name which is not Required it's optional but that's Completely up to you now importantly two Things to remember uh WordPress will Give you an autogenerated password which Is very secure that you can U You can click generate password and will Have variations but you can also enter Your own password here now it suggest That you create if you're creating your Own password make sure it's secure Because that's like the main key to your House if somebody has a username and Password they can technically log to Your site so I suggest that if you're

Starting out just select this uh Password here so what I'm going to do is Just copy this on my clipboard paste it On a notepad on the side of the screen So that you don't see it and we'll Proceed with the video like that so once This is done the second important thing You need to remember is to go to the Role section make sure that the uh role Is set to administrator because using This account you want to make all the Changes on your site so once you make uh This uh role as an administrator you'll Get all those privileges that you want On your website to make essential Changes so once this is done make sure Uh to just double check you have a Username you have an email you have a First name you have the password and you Also have made sure that uh you've set The role to administrator once this done We'll click the add new user button and This will just confirm the changes and Add this new user on our site so now you Can see the username is now added here This was the default one that was Created this is a new one that is Created now the website is created we Already have created a user but how does The website actually look like so let's Go and check out the website so what you Can do is just open a new tab and Automatically just enter the domain name That you have purchased and you can open

The website like like that as well but From the back end there's an easier way To go to your website just go to the top Left corner on the screen somewhere here And and once you hover your mouse over Here you'll see the visit site option if You right click on open a new tab you Can just click on it as well and this Will take you to the website and this is Your beautiful new WordPress website Congratulations you have technically Buildt your website already yeah so it Looks great already but of course we're Going to take uh a complete step on how To customize website I'm going to show You everything you need to know on how To actually make changes to your site But before that let's talk about how to Log into your site and how to log out of Your site so to log in and log out of Site you just need one single thing you Need a domain name and there's some Additional i' say uh couple of words you Need to add to your domain name to Actually log into your site so let me First demonstrate how do you log out From your site and then I'll show you How to log into your site as well by the Way if you don't want to do all the Hassle you can always go to the blue Host area go to the user section and Click login and if I refresh this page You'll see the new username also being Shown up here but I find really

Cumbersome to always log into Blu host And then go through the route of login My into my webite it so I just prefer This other way and most users uh use This as a standard method to log in and Log out so I'm going to show you that so What you need to do is go to the top Right of the screen on the top right You'll find your username currently Logged in so if you hover over it you'll See three options the profile edit Profile and log out so I'm going to Click log out which will log us out of The website and by default it also takes You to the login page which is looks Like this so now that you're logged out If you go back here this will also be Actually logged out if you click Anywhere you'll see that you're logged Out so how do you actually log into the Site it's actually very simple just open Up a new tab and first type the entire Website's domain name here whatever your Domain name is so I'm going to just copy And paste it here this is the domain This is a temporary domain name you will Have your own domain name which you Connected with Bluehost show up here now All you have to do is add gak just one Word uh after this right so type in WP Which stands for WordPress hyphen a DM i N a DM i n which stands for ad so all You have to do is make sure that your Website name is there and make sure that

It's ended by or it's that the last Character on the website URL is the Forward slash then you type in WP hyphen Admin once that's is done just press Enter and this will take you to the Login area of your website so if you Want to log into to your website this is How you do it and of of course how do You log in using your using your Credentials of course so just I'll copy The uh password that I have I'll paste It here and I'm going to add my username Here And we're going to log in using the new Username and password we just created so Let that load in and I'm going to show You what next to do beautiful so now That you have logged into your site you Can also see on the top right corner That the new profile picture or new name New user is now showing up so Technically whatever we accomplished Right now is we've created a website Obviously purchase hosting and domain Name we created a new user and of course Our website is live to the world once Again you can go to this section click Visit site and you can go back and see How your website looks like and don't Worry about this black bar that you see It's only shown for administrators that Means someone who can log into your site That means you your visitors or your Users will actually not see this so

Don't worry about this all right so once We're here now we need to clean up the Site so that we can set it up for uh Things we need to do on the site so the First thing I'll do is go to the plugin Section here and what blue host does is Install some required and essential Plug-in site but not every website needs Those plugins so we going to clean this Up and uh later in the video once we've Done uh changes to the site once we've Made some essential uh upgrades I'm Going to show you how to install plugins And what plugins to install so you can Actually manage your website so what We'll do is we'll just uh disable and Close all of this now there so many Plugins you can see here except for the Blu host plugin we don't not need any Plugin and the Blu host plugin is also Not essential but it helps you connect Your website through the back end and Make changes so I I would say uh let's Keep that here so I'm going to do is go Here select all the plugins by clicking Here and just go to the Bluehost plugin And disable this so it's not actually Selected once I'll go here and I'll just First deactivate all the plugins I'll Click deactivate I'm going to click Apply and this will deactivate all the Plugins that are installed let's wait For it to finish so now all the plugins Have been deactivated except for the

Blue host plugin once again I'll click This I'll uncheck the Bluehost plugin Because we want don't want to delete That go to bulk actions click delete and We going to cck apply confirm okay and This will delete all the plugins of our Site we have a completely beautiful Website and don't worry this does not Affect the appearance of your site uh Whatever it is it will still look like That so now that you have cleaned our Website website is ready it's time to Now customize the website of how it Looks like and the easiest way to do That is by adding themes now theme is Something you can think of as as a new Chassis a new paint job for your site And completely gives you the oportunity Or it gives you the opportunity to Completely customize how your website Looks like and one of the ways or the Way I'm going to show you is the easiest Way because you don't have to have any Technical skills or design skills it's Just a click click click method and You'll have a beautiful looking new Website in no time all right so let's Get started with installing a theme and To install a theme all you have to do is Go to the appearance section here inside The appearance we'll go to the theme Section and the themes that we going to See here are all from the WordPress Repository so you're not paying any

Money to install these themes once you See this page these are the themes that Are already installed on your site and You can only have one theme active at a Time but you can have multiple themes Installed so if I hover over this you'll See the customized option but if I hover Over these you see the activate options Because these themes are installed but Only this theme is active right now and This is default WordPress theme so don't Worry about it we'll click the add new Theme button and this will bring you to The repository where you'll see so many Different themes available on the Website now this can be confusing and Overwhelming to make this Choice what Theme to install so we'll just go ahead And uh install one of the most popular Themes uh for WordPress it's called Astra so go to the search option and Type in a a a and let the search finish And this is the Astro theme I'm talking About and don't worry how it looks like Is not something that you are stuck with You can customize this so don't be Fooled by that hey I'm I'm building a Car website so I want this tee I want This theme this look which you see here Can be completely customiz so we'll Click the install button and let's wait For it to finish and it's installed Already let's click the activate Button and the Astra theme is now

Installed on the site if you go back to The site here on the front end of the Website and if you click Refresh then you'll see this is the new Website and don't worry we're going to Customize everything if you're not happy With this look that's completely fine All right so one of the benefits of Using the Astra theme is this readymade Templates Astra has a wonderful Companion plugin called starter Templates using which you can just drag And rock or click and completely have a New website created with complete visual Complete everything in no time and That's what we're going to use to build A beautiful looking website in no time All right so what you have to do is just Go to the plugin section and go to add New plugin you can also click this Button which will take you to the same Page but sometimes this Banner does not Appear so I'm going to show you the Manual method go to plugins go to add New plugin click here and inside the add New plugins option I'm going to close This out we're going to search for Starter templates so we'll type Starter templates let the search Finish and this is the starter templates Plugin which I'm talking about make sure To check the logo make sure to check the Author here brainstorm Force have great Installation great ratings and frequent

Updates let's click the install now Button let's also activate the starter Templates Plugin now as soon as the plugin is Installed you'll automatically reach This page which is the website building Process let's start with the classic Starter templates it's the easiest in The page builder I I suggest you stick With the block Editor now this is the beauty of start Templates you see if you scroll here You'll find hundreds of templates to Choose from using which you can build Your website and all of them all of them Can be installed on your website in just A couple of clicks now there are some Premium ones you can scroll down and Find the free ones as well but that's Completely up to you if you want to go Premium version you will have to upgrade To a Premium plan from Astra otherwise You can stick with the free version if I Scroll down I'll see let me find a great Looking template that I can use just for An example I'm scrolling uh I'm Scrolling and these are some great Templates this template is nice uh this Template is nice this business template Is also nice this is nice I like many of These templates they're easy to use and You can install them onite so for Childcare expert looking this website This is great Jacob Smith this for a

Blogger this is uh good-looking for car Repair business this is nice uh you have This fashion lifestyle blog as well you Have the ux designer as well let's Scroll up and see okay this voiceover Artist looks good this looks good let's Let's choose this uh template here so Just to give you an idea I'm choosing This voiceover artist template doesn't Mean you have to stick with a voiceover Artist template you can use this to Customize and make a website for a Business as well for a blogger as well For an individual as well completely up To you I'm just using this template as a Reference uh you can use any of the Templates and customize them and I'm Going of course I'm going to show you How to make those customizations as well So let's click on this uh template and This template will open up and give you A preview of how your website will look Like once it's Uh import it to your website on on the Hosting provider right now so you see This has a beautiful template it has the Menu created here it has the heading Here beautiful image here and Goodlooking visuals here everything is Done well now the star templates option Or gives you an option to upload your Logo automatically in the first step so You can preview it but we'll click the Skip button for now because we'll uh

I'll show you how to upload your logo Later in the process let's click the Skip and continue button and this is the Second option where you can change the Default colors on your website so you See this is the default color palette But if you can click this you'll see Many elements on the page will Automatically change to reflect the new Color themes so the buttons are changed Some other links are changed so you can Test out whatever theme or color theme You like I'll stick with the default Ones because I think that is a great fit Here and you can do the same thing for The typography you can see the default Typography is robot on open S but you Can click this play fair and instantly You see these changes being reflected Here on the site and of course whatever You want to choose that's completely up To and you don't have to stick with These options I'm going to show you how To change the typography options later In the video as well so that you can Custom completely customize everything About the website I'm going to stick With this one popins and lto I think I Like this one and don't worry about this Overflow we're going to fix it later Let's click the continue button and this Will take it to next step you can fill In the optional details and share uh Non-sensitive data about your website

That's completely all right you can also Uncheck this and the process will still Work make sure none of these are Unchecked because you have to import the Customized settings widgets and content So that the website will look exactly How you saw in the preview once you're Happy with the settings just click the Submit and build my website and this Will start the building process now it Takes less than a minute sometimes but Maybe sometimes a minute and a half so Let this process finish and once it's Done I'm going to show you how your Website looks like and we'll resume the Rest of the Video so as you saw the website process Or the website building process is Complete and it just took 21 seconds to Build so this is how fast stter Templates is and this is why we Recommend it that you use it so let's Click the view your website button and This will open up your new website in a New tab and voila this is your brand new WordPress website that you just created In a few minutes it looks beautiful Exactly like how you saw in the template And this is one of the benefits of using Starter templates you just can build a Beautiful looking new website in just a Few clicks and you see you can just Navigate around the site it has all the Details it has all the good stuff that

You would expect from any website now This is the front end of the website This is what users see just claring some Clearing some terminology with you here And this is the back end of the site Right this is the back end of the site Which we've been using L this is also Called the admin area the back end but This is something that you can access And this is the front end of the site or Something that the visitors see now We've built a website we've completed Everything now it's time to customize The website but before that we need to Make a few changes on the site add some Things so that the customization process Can actually be done in the perfect way So can you see a visual representation Of whatever changes we're going to make So what going to do is go back to the Admin area and if you are overwhelmed Already just take a couple of seconds Take a deep breath enjoy your website uh Move around pause the video for a second If you need to and then we'll start the Process of actually customizing and Making changes s and making or say just Making those changes and then heading Into the customization areas where we Make cosmetic CH changes to a side so if You want to take a breather a water Break coffee break that's completely all Right we'll resume the video after the Short break so hopefully you've had a

Break and you've understood and spent Some time on the website understanding How the back end and front end look We'll make some changes to our website First and then we'll start the Customization process and of course I'm Going to go through everything step by Step so you don't have to worry about uh Missing some steps or uh things becoming Overwhelming few so let's switch to my Screen here and you'll notice that the Homepage of the website this is of Course we just did it so the homepage of The website is already done but we need To create a new page a complete blank Page on the site so we can customize and Make some changes to site and you'll Understand what I'm going to do so what We'll do is is go to the pages section Here inside here and we click add a new Page so we'll add this page and all you Have to do is just name the page for now And just uh Sav it and we are not going To add any content here uh that is Reserved for the end of the video well We'll I'll show you how to customize and Add some content so on this page all you Have to do just go here and type in Blog sorry blog and just click the Publish button and click publish once Again once this is done pages don't Worry nothing is on it just go back by Clicking this WordPress icon here it Take you back to WordPress now go to the

Settings here and inside the settings go To the reading section okay in the Reading section the default section or Settings what you will see is your Homepage settings this is the settings Now what does this configure so we see That this is already set to a static Page and the homepage is set to the Homepage so this page is the homepage But we also need to create a page for The block page where all the blog posts Will go that is what we created here and That what what we'll do is we'll select The post page as the blog page we just Created so once this is done we'll click Save changes and now that page is just Added to the site we don't have to worry About it but there's one thing missing What we'll need to do to configure this And of course also understand the Process of customizing is We'll add the Blog post page or the blog page here on The menu because this will help us Navigate to the blog poast and it'll be Very useful when you actually customize The page or customize our website so What I'm going to do is go back to Appearance here inside the appearance we Had the themes first which we went to But there's also the menus option here So if you go to the menu option here This is the menu of your site now if you If you see this and if you see this menu It's exactly the same thing right now

This is where the menu is actually Created and I I'll go through a little More detail when we go to the Customization aspect but for now what I'm going to do is just add the blog Post or blog page that we just created Here so if we go to the pages section if You go to view all we see the blog page Here which is the post page we'll click Here add to menu and we can drag and Drop it around as well so let's say for Example I want to keep it here then we Can just do this and we can just save Our menu and once this is saved you'll See this option here header has been Updated now if you go back to the site Click Refresh you will see this blog section Is now here now if you go to this page This is a completely empty page right Now or at least it has the default post That is created on our site now the idea Behind this is that once we actually Customize the site we'll be customizing This page and we'll also look at the Individual block post like this and how We can customize this page now without Any post being on the site without Anything being present on the site it's Going to be very hard for you to see What your changes you're making so That's why I went through a trouble First of creating this so that when you Actually go and customize you can

Actually go into the block section and See how uh different block posts are Looking like and what settings you Change and how it actually affects you Website all right so once this is done Now we'll create some content on the Site because if if you just have the one Post here which is the default post it's Not enough information for you to make Judgments on how you should customize Your website especially the block page Here and the individual blog post page So what I'm going to do is just give you A simple idea of how to create a blog Post on the site and of course we're Going to go through in a little more Detail once we've done basic cosmetic Changes on site but I want to add a few Block posts here and so that we can Actually see this and have navigate Through the different options we have to Customize this area and other areas of The site so once again I'll go here Inside the admin area I'll go to the Post section I'll click add new Post and this will open up the block Editor inside WordPress it's similar to How I saw show showed you the pages Option it's very simple now the idea Behind this is absolutely simple on the Left what you see here the blank area is Where all the content goes and here are All the properties about the content so You see right now you have the

Properties about the post and you also Have the properties about the blocks so You can add different blocks here in the Block editor and whatever block you Choose you'll see the options or Settings here right now what I'm going To do is I'm going to pause the video Add some content here quickly and then Once I've added the content I'll save it I'll show you how it's done and I'll Just add repeat the process a few to few Times I want to add a five six seven Block post here so that we have enough Information on enough data on the site To make a judgment call so I'll pause The video for a second add some content And we'll resume the video so I finished The blog post here and you can see this Is the title of the blog post there's Some headings that I've created a simple Simple blog post about a voiceover Artist because that's what the website We are creating is about you can add Your content right here let's also try And uh see a preview of the site you can Go to this button here which is the Preview button if you click on this You'll see preview in a new tab and this Will open up the preview of that Specific block Post in new tab this is a Featured image that I've added here and You can see this looks beautiful if you Go back here the featured image is Actually added here if you go here in

The post options there's a featured Image here so this is how you basically Create content on the site so what I'm Going to do is again pause the video for A second and I'm going to add 6 seven Eight block post on the site because That will help us understand and Visualize how we're going to make Changes to the site and the process is Going to be exactly the same I'm going To add some content maybe a couple of Images and once I'm done we'll resume The video and I'll show you actually how To customize your Website all right so I've created a few Different blog posts here you see uh It's around eight blog posts that I Published on the site and if you go into The front end of site and go to the blog Section now it looks like a beautiful Blog section that you would expect on a Fully functional website and that was The intent here if you don't see this It's hard to actually understand what Changes we make and how they're going to Affect the website so now that this is Done we can actually go back to the Customizer and start customizing our Website now what is the customizer it is A built-in WordPress feature which Allows you to customize whatever happens On your entire website so if you're Making changes to the customizer just Assume that anything you do is affected

Throughout your website so if you change Some colors entire website if you change Something else entire website well That's completely fine because WordPress Gives you the ability to override Certain things just for example let's Say you want to have a different colors For the headings so you change the color Of the headings here but you want this Heading to remain in the black color so You can still go back onto this page Particular pce and make this change that This heading stays in black color while The rest of the headings uh stay Whatever color you decide so that's how Uh you get the best of both worlds You're able to customize something on The entire website using in one location So that it's easy for you but then you Can go and override certain areas Certain places things so that you Actually have the benefit of customizing Everything so there are two ways to go Inside the customizer the first one is Through the back end of the site you go Into the appearance section and you go To the customize option here this is the First way the second and the faster way Is if you're already logged in you go to The front end and you see this customize Option here both will take you to the Same location so I'll click the Customize option here and this will Bring us to this website or this page

This is the customizer let it load for a Second what you see here you see this is The c customizer this is where you can Customize every single thing so what I'm Going to do I'm just going to go through The chronological order so it's easy to Understand what happens every single or In inside every single menu now to Understand what I'm going to do is more Important than actually seeing what Technically I'm doing because you might Choose a different template you might Have different choices on your website So just understand what settings are Where they are how do you change them One other thing you should remember is That let's say for example if you are Not following along the tutorial ex Exactly and you chose a different theme Some options in inside uh the customizer Are theme dependent so your theme might Support all the features but it might Look different some things might be in Different locations so again as I said What I'm doing or the concept behind the Principle behind what I'm doing is more Important to understand rather than Exactly seeing this because let's say You're watching this tutorial 6 months After it's published and some changes to The UI have happened uh in the meantime And now the interface looks a little Different so the process will still Remain the same so let's start with the

Global options first what Global options Have typography colors container buttons Scroll to top access block it and misane Of course we'll start with the Typography and don't worry it's not too Complicated as we already saw when we Importing the starter template the Typography options allow you to change The typography of the site the same I Think the same heading formats or Typography pairs have been shared here But you can change the typo typography Of individual elements directly so for Example if you want to change the base Font here just click here and you'll see All the fonts available to you right now And you can go and change font family From lto to something else example if I Change to Latif you'll see some areas Which the body font will change to Latif And if you don't see a change here that Means the specific area has been Overridden so you can go and change it There so if I change it to Latif you see This change here I don't like this I'll Just go back to lto and here you can Again change the font size here you can Make all those changes you can change The text decoration for certain Styles And all this that is all in the Customization option you can also change The typography for the headings here and If you want to change the typography for Individual headings separately so H1 H2

H3 completely here you can go and change Them here for example if I go here once Again inside the headings you'll see the Popins font is selected let's try and Select the font here po story now you See this typography has changed applied To the headings instantly so if I go Back here and say popins it'll instantly Change back to popins and font weight Was set to 700 so I'll just go back to 700 and now you see this beautiful font Here so this is how it's easy to Customize typography on the entire site Level using this options going back from Typography to Colors this is where you Customize the colors now how the colors Work inside uh the customizer and Specifically in the Astra theme are Little different what you see here are Three predefined color palettes or three Locations where you can add color Palettes so this is the first palette The second palette and the third palette Now technically they might look the same But here's the uh interesting bit if you Click here and click here now you have Some color presets to choose from so if I click this here now this is a color Preset saved here and I can go to the Third one I can click this here and go Here and now I have three un unique Color presets that I can choose from so If I go back to the blue one this area Which you see here are or represents all

The colors in this palette and if you See the theme color options here you'll See a globe icon inside them the globe Icon represents that these colors which Have the globe icon are just simply Referencing these values which are Called Global colors and why this is Important is because if you say let's Say you customize the colors here all These colors everywhere on the site will Automatically be changed so it just give You a center location to change all the The colors on your site so you see Accent colors if I highlight the screen So this is the accent and if I have Links they have specific colors for Hover we have the colors for headings And body text you can change everything Here so let's say if I go here and click Here and I just I'll just overwrite this For a second and I'll change this here And let it load and now you see the Accent color is different this also Technically looks good you can do this Or what you can also do is change the Color here directly and then reference The global image or Global color you can Always res set the color if you want to If I click this this will go back to the Default pet settings so this is a great Way to uh preserve your settings you're Not messing anything up now for the Headings let's say if I want to have uh Colored headings let's say I'll choose

The dark blue color and go here Something here not exactly black so now You see this is a beautiful color here Now what I can also do is you have you See there three different white colors Approximately this is technically a Little gray but this is white and this Is also kind of white right it's not Very uh there not a different color so If I take this color and if I change This to dark blue like this uh I'll just Go back to the blue color here and I'll Just go to the dark blue color like this If I just go here like this deep dark Color something like this now I can go To The Heading section and just Reference this color here and now this Color has changed here and it's also Referencing a global palette the benefit Of the global palette is that if I Change the palette here directly this Heading color will automatically inherit The color in this palette so it gives You a simple way to actually manage your Colors and again this is completely up To you I'm just showing you some changes Here but the potential of customizing Your website entirely is up to you if You have a pre-built design layout uh Inspiration some swipes that you have or Client has shared with you or you have Some ideas you can go completely um onto It and change everything you like but This is the basic idea of how you make

Some changes can also change border Colors and site background colors and Content background colors so this site Doesn't have too many areas where the Background is added so I I won't be able To show you but maybe when I go to the Block post section I'll show you how the Content background and site background Can be changed all right so this is how You change the colors it's easy uh the Pallets the global colors all make it Easy to change the colors on your site Let's go back and go to The Container Section now the container allows you to Customize how your website is contained So this is the container default Container layout the normal layout you Can also change to this which is the Narrow layout now if you change the Layout here your website might look Weird or sometimes it won't it won't Make any change here but it will make Definitely make a change to the block Post on the site because this is again As I said you can override certain Things sometimes you'll make changes Here it won't give you any uh like a Difference here but it does affect some Other areas which you are not usually Are or not maybe paying attention to so If you don't want to make this such like A narrow thing and if I just go and Trying to uh show it to you let's go to The block section here I'll switch back

To the normals for a second while it Loads if I go here let's open up this Block Post in particular so this is the Particular block post right so this is The container layout for normal and if I Change this to narrow you'll observe That it'll shrink down and this is how It's going to look like so even the Homepage even if the homepage is not Being affected by this change this is What is being affected so if you don't Like this if you don't want a website to Have a kind of a narrow Outlook then Just go to The Container layout and now You probably would understand why I Added the block Post in the first place Because it makes it so easy to actually Understand what changes you are making To the site so let's go back to the home Here homepage and you also have an Ultra Wide full width layout and that's again We will test it out and I'll show you How the different layouts look uh when We customize the block post on other Pages but this is just an idea that you Can do container style is something you Don't need to worry about if you're not Changing this then you have the Container width how how width how wide Should it be and what should be the Width of the narrow container so here You actually F tune the width of the Containers this is something you want to Do if you are strictly designing for

Mobile devices once again this this Website we're creating is already mobile Responsive and it works great on mobile Phones so you don't have to uh worry all About all of that okay so going back to Buttons here inside the buttons once Again we have button presets now you Might think where is the button this Button looks different there's a Different color and this is where the Area about buttons actually come in some Buttons might look different because They've been optimized well or I say not Optimized well but been overridden on This particular page so we'll have to go Into the specific page and change this But again similar to how I showed you Different areas of um or I said Different colors were being customized For the headings you can actually Customize the uh options for buttons so You have primary buttons and secondary Buttons and you have some preset Styles This is the preset Styles let me try and Change this to see if actually it uh Affects some buttons so right now the Size changed but the uh colors did not Change so I'm pretty sure there's some Something be overridden here so I'll Switch back to the regular button size And for the text color once again you Have two options instead of just the one So you have the regular uh color and you Have the H Color so once you hover over

The buttons you'll see something Different happens so this is where this Things actually change so if You observe If you CH make any changes or if you Want to customize any of these uh I say Buttons this is where you do it and Again uh if you add buttons or when we Add some buttons to our block post that That is where you'll be able to see These changes in action once again you Have colors here you have the typography You have the padding border width and Border radius so padding is how thick You want the button to be apart from the Text area so if you want to have the Text in the middle and the very wide Button you can change the padding B Width is how thick you want to the Border to be and Border radiuses how Rounded do you want the button to be so You can click one of the presets or Customize everything yourself here That's how you customize the buttons Going back to scroll to top if you want This you can actually just enable this And just have a scroll to top button Will be appearing here and if you scroll Down and click it'll take you to the top Of the block post immediately and you Can have the disc displayed on desktop Mobile phones or both and position can Be left or right size can be changed and The design options you will have the Option of customizing some colors and

Border areas so let let's for example You want this to be around have rounded Edges from all sides so I'll just click This button here which will just connect All the sizes here and now we have a Rounded uh kind of thing now if you want To make it completely round just make it On 30 and it will be a round block or Round button here so this is how you Change the scroll to top and add it to The pl accessibility and block era and Miscellaneous are not really important For this customization part we'll look At this maybe later part of the video Because most of the Cosmetic changes we Are doing was covered in these areas in The global Department going back here We've covered the global uh settings Completely let's first go to the blog Section and we'll we'll not go go into The breadcrumb because it's not Something really important or not uh as Important as the other areas here and Header Builder has uh I say it's it's a World of its own where we need to Understand a lot of things so first I'll Go to the blog section here and we'll Customize and I'll show you what Settings here are and then once we've Done with everything then I'm going to Show you how to actually uh tackle or Work with the header and photo Builder And it's going to be absolutely Fantastic so going to the blog page here

You have two options or blog options Here you have blog archive and single Post now this is where the all the Things that I did previously come into Play if I go to the blog page here this Is the blog archive page right this is The blog archive page because this is Where you see all the blog post somebody Uh you can also call it as a category Page the technical term for WordPress is Archive page so inside the blog archive Section is where you'll customize the Appearance of this page and settings for These pages so now since you have these Pages already and they populated now You'll be able to see the changes live So if you go to the blog and archive Page this is where you change a lot of Areas so you have the blog title area I'll talk about that later once again You have the container layout so what This container layout will again affect How your website is going to look like So since we change the container or There was an option to change the Container on the global level this is The default setting so if you let's say Want to have the global container of the Site a very narrow but on blog posts or Block archives you want to change this You can override this second since I Didn't change it I don't have to change This but if I just want to change the um I say the layout of the blog archives

Page I can just click narrow and the Blog archive page will become narrow so Now you see the blog archive is narrow This is completely up to you what kind Of um choices you want to make again you Also have the full width option which Will just completely make this full on Like this this particularly this is very Very broad I don't think it it's looks Very good so I'll go back to normal and Then in the container style you have Default unboxed andbox so this is how You can see that that the uh the the Image is also inside the box so you can Change these settings and see how the Image will act and how the container Will react and then that's completely up To you then you have the sidebar options Now sidebar since we haven't touched the Sidebar even if I change this I don't Think the sidebar will appear right now Because the sidebar has been disabled oh It does show up so if you want to have a Sidebar on your site you can add it here Now do keep in mind that this sidebar Will only be visible inside the blog Archive page because we are adding it to The blog arive page we're also also Going to change the single block post so If you want to add the the sidebar there You will have an option to do so most Modern websites I don't think they use Sidebars a lot but you might have a Requirement or you might have a special

Need to use a sidebar so you can make The sidebar on the right on the left you Can have the default layout as well or You can just keep it no sidebar for the Blog archive page now do keep in mind we Are just customizing the blog archive Page right now not individual blog post Or how blog post will look like so this Is the blog archive page right now once Again you have the sidebar options as Box unbox and style and then we have the Blog layout now this is very very Exciting and this is very useful to Change or customize block look of your Blog post instantly right now you see The individual block post are listed out As this layout which is one block post One image heading and some other areas But if I click this grid option Instantly you see that all the blockb Will be visible in a grid layout and This is quite useful in my opinion Because you want to have flexibility When it comes to displaying content on Your site once again you can just do This which is a list View and and the List view will start opening up you also Have the option to use a cover option or Cover layout and this will use the cover Layout so this is a benefit of creating All the content before and now you can See how this is beautiful looking and You can just use any of these I say Options to uh just represent your site

And how you want to set up your site I Particularly like the grid option so I'll just go and switch to the grid Option here and let it load and then We'll proceed to the next few uh options Here so this is the grid layout now Whatever layout you choose the options Here in the post structure are very very Important to understand so what is the Options what are these options so if you Notice here this is a specific order of Elements that you see and this is again Representing what elements of order you See here so right now if you see here The top of the individual uh entry in The grid is the featured image which is Here then you have the title then you Have the post meta then you have the Excerpt and then you have the read more Section and then the comments in Categories and author are not actually Because they after the separator so They're not actually being shown on the Screen so what are what is this useful For you can do a few things you can Reorder or rearrange these or you can Elimin disable them or you can change Their options so just for example if I Don't want to show the images inside the Grid I just have to go here and click This eyeball and instantly you'll see The images have now disappeared now if I Want to enable this but I want to keep The title above the featured image I can

Just drag and drop it here and now the Title comes first and the images come Later now of course it doesn't work Really well because the titles have Different lengths so that's why this is A better layout of better options to use Now let's say for example I don't want To have the exert uh show up or instead Of the except I don't want to post meta To show up here so I can just drag it And post put it here oh no here I'll Just uh put it uh just below the title But I'll just click this button and um The eyeball icon uh so that the the Actual options will disappear from the Screen now some of these options also Have uh you see a drop down option here So what is the drop down used for so if I click the drop- down option here you Can see I can change the image ratio and The hover effect so if I click zoom in You'll see that I when I hover over the Image it'll have a zoom in effect so This is how easy it is to add these Simple things on the website what is the Image ratio so you can say if you have All the Certain up in a certain Ratio or you Want them to be displayed in a Predefined ratio then you can select This option and this will completely Change how your grid will look like so It this this won't work with all the Images unless you have already defined a

Specific uh aspect ratio when you're Uploading the images so if I go for 1 Is2 one you'll see the aspect ratio of Some images will change so make sure to Use this option carefully I would just Keep it at the original because it's the Easiest whatever image aspect ratio you Upload it'll be actually applied here And doesn't um I say U skew the image in Anyway it looks great here then the Image size option is here again you want To have the large option full image Whatever custom size you want to have You can keep it here I like the large Option I think this looks good here and For the title of the blog post you can Just click the title you have the title Here you have the excerpt here and the Read more options so this is how you can Simply customize whatever is visible on The page or reorder them change them uh Change some options and completely Customize how the content actually looks Like on the site it's quite easy it's Quite powerful and it's very very useful So in just a couple of minutes you were Able to design this section or say Rearrange the section but there's also The design options where we can make Some changes to this area as well so We'll go to the design option here and Here you can change the Border radius First what's the Border radius let me Just show you so I'll change this to

Let's say 15 and you see this area is Being rounded so if I just click here And then add it so you'll see all these Areas oops I didn't think I was able to Click this now it's set okay let's add 15 and now you see this has rounded Edges across the side so this is how Easy it is to show or make these changes Now what do I think or in my opinion the Title of the blog post is quite huge Compared to the rest of the content so This is how you change it just go here On the post title just change it Slightly like this around 27 would be Fine in my opinion so 27 this looks good Then you also have the meta font size Which is the meta text I have disabled It otherwise you can customize it here And you also have the taxy font so if You are displaying tax enemies and other Areas other things here you can actually Customize uh them here as well going Back to the general options you also Have the block title area let's also Click on it and see other settings so This is how the block title area options Can be customized so you have the title Description you have the design options Here and you can go back to the design Areas and you can have in spacing Elements and change other things now if I go back here and just disable this You'll notice changes on the side I Think this is the easiest way to uh

Understand and follow along any tutorial Just click click and disable change some Things and if even if you don't like it You can just completely uh I said Disable it and or I say there's nothing That can go completely wrong you can Just uh import the template again or Just don't save your changes and nothing Will go wrong on the side so blog Archive section has been completely Covered going back to the single post Option now single post option let's go To the preview of a single block post And this is where you'll to see uh how Uh we can make changes to the single Block post area so this is a single Block Post open this is a block post That I have written on the site and this Is where we can change any of these Settings for the block post here so once Again you have the container layout Options again if you choose a container Layout at the global level you can Choose it to be inherited here or you Can override this option I would stick With the regular option here but you can Change it to normal narrow or full width For just the block post and have a Different settings in the global areas Then you have the container options Similar to this you have the sidebar Layout again similar to this so you can Add this here and the sidebar will be Visible on the Block post then again you

Have the content with options as well And then content images box Shadow if You add this here then box Shadow will Be added to the content areas as well Then you have two different unique Options here which you can enable Comments is enabled by default related Post is not enabled by default so if I Click this just at the bottom of the Blog post the related post area will Show up right now you can see this here And what you can also do is customize Them how they appear so first first what What I'll do I'll just go to the design Options in the single block post section First I can just just demonstrate those Options to you and once once again we Have the spacing options for the outside And inside for the uh post so if you Want to change some of the paddings and Margins you can customize them here if I Go to the general options and once again If you scroll down to the related post Option scrolling down here we'll have Some options to cosmetically change Related post right now if I say related Post if I want to change the title to Read this Next instantly I can change this and You'll see this option appear here I can Click to be Central LED total number of Blog post let's say I want to have four As previewed so the four four options Will show up and I want to have them

Displayed in a four grid layout so all Of them will be visible like this you Can also if you're a technical user you Can change the post query so you can Pick um post from a particular category Particular tag or only sorted by a Particular date that's completely up to You this is completely uh so I say it's A power user thing uh you can or you you Don't need to uh understand or customize This once again going to the post Structure here so this is a post Structure just for the related post do You want the featured image or the title And meta not showing up or show up you Can customize this here so if I let's Say if I want to disable the title and Meta the title and meta will go away Immediately now obviously this won't Look good so I'll enable this option Here and inside the meta as well so Right now you see the meta here similar To how I showed it to you in the blog Post section or blog archive section The Meta can actually change the meta here So if I if you want to have the comments Category authors not visible you can Reorder or enable or disable them Completely so since I don't want the Mattera to have how many comments it has So I can just disable this and I don't Want the category to be visible as well I just want the author to show up so now Only the author will show up here and if

I drop click the drop down and I can Just change the label to written by and If I want to enable the Avatar of the Author I'll just click here and the Profile picture of the author will also Show up which is my photo here so you Can have this and change the size of it As well so this is how easy it is to Make these changes so once again if you Enable a certain feature if had has if Had has a drop down uh just next to it And you can go inside and actually Change um the things here so this is how Uh it's absolutely very very visual to Customize anything on uh WordPress using And following this tutorial once again You can go inside the drop downs options And see what kind of separators you have So if I let's say I want to have a Separator like this I can change the Separator here and inside the featured Option as well I can again change the uh Aspect rtio of the images so original Predefined custom similar to how I Showed it to you in the blog archive Section and this is how easy it is to Customize everything now what do you Want what do you do if you want to have Some kind of highlight areas around this Section you go to the design options Which is where you can change the Section title colors the backgrounds and Customize and override everything so Let's say for example the section title

I want the image to have or the the Title to have this blue color I can Choose one of these Global colors and if I'm not happy with the global colors I Want to make it a darker shade I can Pick one of the global colors as I Already demonstrated earlier or what you Can do is just pick a dark blue color Like this which kind of matches the site So section background again let's say You want to have a section background Similar to this color now it doesn't Look good let's switch to this color Which is slightly darker what we'll do Is we'll just switch change it to Slightly bluish shade like this and now You see a nice little hiding or Highlight added here which is adds a Compliments this take once again you can Change the color of the content the Section title font post title font and The Meta font and the borders so Technically you have every single thing You can customize so content is this uh This is the section title then the post Title and then the meta is the meta and Then if you want to add a border let's Say you want to add a border so I'll Just try and pick a border here dark Blue color let's and add a border width Of two it's a little too thick let's add It to 1.5 yeah so now I just added a Beautiful looking section here which is Looks great and of course as I said you

Can change any color here so if you want To change the color for literally Anything that's all these settings are Available here and you can also change The paddings and the margins if you want To add more margins or the side or the Paddings the side that's completely up To you so even in just a simple feature Like the related post not just enabling It but completely customizing it and of Course everything that you do here Affects the entire site so one changes That you make here this will be just Your entire website will be set up very Very easily so we've just finished Related post let's also go into the Comments post or comment section and the Comments have similar areas or similar Options in the design areas because the Comments are uh added by users so you Won't have any options to control the Kind of comments are coming because blog Post has a comment then you don't Control it the users do so we don't have Any more many options to U uh fetch what Content will be displayed only the Cosmetic changes uh can be made so first Of all the section placement is default Contained and separated so if you click Separated you'll have kind of a separate Section on the Block post here it's Separated from the different block post And then you can have the full width Structure or an narrow structure so

Again you have a few predefined choices You can make for comments on the site if I stick with the default one I think That's the best one and you can also Leave the contained one the form Position is above elements or comments Or below comments what does this mean so When uh this this particular block post Does not have any comments but if a blog Post has comments where should this form Show up for leaving a comment below the O comments or above the comments I would Say above the comments make more sense If you have a lot of comments coming in The first thing users will see is that They can leave a comment too and then All the different comments will actually Show up just below this so this is Completely up to you again I'm just Showing you what possibilities exist Once again we can go into the design Options and we have the Border option so Once again I'll just go here and I can Pick a color and let's pick this color Color let's see how it looks like as a Border if I add this here I think 1.5 Border width should be fine and if I can Add a little bit of a border radius Let's say 10 uh I think uh yeah okay it looks good Let's do this and for the padding and Marging I think I'll just keep it at the Usual levels so once again in a couple Of seconds I was able to not only add

This section completely customize this Section and also just add a little bit Of border around to make it a visual Hierarchy sort of thing just separate The entire thing from the blog blog area So this is again uh completely finished Uh section here on the blog section so If I remind you we uh did do two things In the blog we did the blog archive page And also the single blog post and Everything every single option that you Can use to customize the blog areas has Been covered going back now we have the Page section now I'm not going to go Into too much detail on the pages Section because the options are exactly The same if you don't know what page and Post are WordPress has two types of post Types I would say which you can use to Add content site if you're adding Information articles howto uh customer Queries that's usually qualified as a Post which is like this this is a post But if you have uh let's say uh contact Us page if you have a my address page Testimonials page terms and conditions Page these are usually pages so Technically you can use or customize Pages similar to how we customize post Right now but if you're not using pages To add content then this this is Something that you can quickly brush Over but again the settings are exactly The same in the single page option you

Can customize the all these settings Same settings now just to remind you There's no page archive page on WordPress pages are individual things That just exist on the site so there's No page archive so in the post or in the Page section single page section you Have very very similar options you can Change these areas you can customize Sidebars you can customize the design Options I have not created any pages on The site so I don't even have an option To actually make these changes and show This to you how we can change this so Once again these settings are exactly The same you also have the option of a Search page where what does happens is If somebody makes a search on your site So how does the page look like I haven't Created a search option here but I'll do This later in the video I'll show when I Show you the header foot a builder how To add a search option to this website And once again inside the search page When you make a search how does the Content look like the exactly same Settings we we covered in the block Archive sections and the block post Sections are visible here container Layout you have the container style you Have the sidebar layout and you have the Results layout so how does the result Actually look like you can customize This here and you can enable the live

Search option so while the user is Typing content that is matching the Search will actually start showing up I Just enable this because I think it adds A good experience to the user and when I Add a search bar or search option to the Header I'll be able to show you uh live On how this is going to look like I'm Not going to customize any of these Sections because I've already covered in In-depth detail on how these affect Individual pages but right now this Section specific section the search page PH is affecting just the search page That will be created on your site so Going back we've covered the page option We have covered everything now let's go To the Side Bar this the last section Before we head to the header and footer Builder Now default layout of the site This is the default layout of the site Once again it might not affect the the Homepage because that's completely Change customized so if I enable the Sidebar here you might not see a sidebar I'm just not sure yeah the sidebar Doesn't show up but if I go to the blog Post section or blog archive p page You'll see the sidebar appear here Because now we've added the sidebar Throughout the website once again you Have the option of left and right Sidebar or default layout which is no Sidebar then you can change the sidebar

WID you can have the sidebar box style You can have a sticky sidebar all these Simple options uh you just enable them And just customize them a little bit so That you can have different kind of Looks on your side so we' covered the Sidebar as well so kind of we have Covered or not kind of we've covered the Global options we cut the brecs we Ignored blog post page sidebar Completely but let's come to the most Important I say one of the very Important areas of customizing website Which is the headers and the Footers now This is the header which you see here Which has the menu the logo and other Elements that you can add to the page And you also have the footer this is the Footer how do you customize this because Uh you want this to be visible Throughout your site at least the header And footer are visible throughout the Website so once you make these changes Again you will have these options here And the Astro theme has a great feature Inside it called the header photo Builder so this is the header Builder This is the photo Builder once you go Into the header Builder you'll see a new Interface pop up on the screen and this Is the header photo Builder now what is This this header photo Builder is a Visual representation or a dragon and Drop it approach to building and

Customizing headers on your site so you See this option here this represents Your header here technically the header Has three rows but the two rows are Empty and this is the middle row and you See the exact same things you see here Are the exact same things you see here So what does this mean so this is the Site logo which you see here this is the Primary menu which you see here you can Add elements remove elements and reorder Elements on the page using the header Footer Builder how let me demonstrate You see some websites that have uh Interfaces where the logo is in the Middle of the page and then the menu is Just below it you see how we can do it We can just take the site logo drag it In the middle of the section on the Upper row take the primary menu drag it Just below it in the middle of the Section and now you have a brand new Header already done that's how easy it Is what if you want to have the site Logo here but you want to have the menu On the extreme right hand side of the Page so you just drag and drop it there Easy or you want to have it here but you Want to add a button here where it says Hire me so just click the empty area and Click the plus icon and you have options So if I click the button now a button Will be added here it says contact now So if I go to the button option here now

I'll be able to change the text I'll say Hire me me for Voiceovers hiire me for voiceover and Don't worry about the button layout We're going to change the button layout Uh uh or you can change the design Options here so you can add a link to a Specific page if you want to and you can Open in a new tab if you go to the Design options here this will show up The options we can customize for the Button so once again you have the Similar options which I showed you Inside the button you have the Background color so if I click the Regular background color I can change This to this and I can change the text Color to White and I can change the Border color I'll leave the Border empty completely Empty but let's change the hover color To something else so when I hover over It I want the text to become darker and I want the background to become white so Now if I go here you'll see that the Button how effects actually changing Place so I was not able to demonstrate The button elements or the changes that You can make to button elements Previously but now this is how it is you Add a button on the page and you just Change the settings and this is Completely you can customize and if I Want to just make this button slightly

Larger I'll click this button and uh I'll just make sure that this font is Oops that's just way too big let's Turnone it down turn it down to Something Like yeah this looks fine so now this Button is pre uh primarily added and It's you you just can't miss it so Instantly I have changed the button I've Created a button I customized the button I Chang the size of the button all with The header footer Builder And you can add elements you can Customize elements as I already Mentioned uh if you want to change a Certain element all you have to do is Click on it so if I click the primary Menu this brings up the interface for The menu here you can go into the design Options and change the menu hover so if I say Underline now buttons or the menu should Be underlined but yeah sometimes I guess I said it doesn't work perfectly but That's completely all right if I go to The menu options let me show you how to Configure these options so just for Example most websites have an interface Where if you click the home button or The logo of the website it just takes You to the homepage anyways so this home Uh section here is quite redundant so We'll click the this option here which Will bring us to the menu Edition or

Editing feature inside WordPress this is Very similar to how we saw it on the Back end of the website where we were Customizing the menu where I added this But this is one more interface where you Can change this now this is where you'll See all the areas where your theme can Support or add themes you can see it Here your theme can display menus in Five locations so we have a primary menu A secondary menu off canvas menu logged In menu and footer menu right now we Just have the one menu which is the Header menu so all the other areas where You see there are no menus visible and That's completely fine right so we want To customize this menu so we'll click The edit menu option and this will bring You the similar interface which we saw Uh in the WordPress back end so I let's Say delete the home entry here I'll Click this uh drop down option here or Toggle switch and just click remove and This will be removed from the site so This is how easy it is now let's say for Example I want to uh delete the contact Form as well because now this button Will act as a contact form so once again I can just click here I'll remove and This is also removed so this is how you Customize it now coming to one of the Most common things that you want to do On your website which is customizing Your logos so you can just click on this

Pencil icon here which will again bring The header Pho Builder and the site Title and Logo now one important thing To understand and realize is that this Site is using a transparent header Transparent header you see there there's Is transparency in the header so Astro Them provides you an option to have Different kind of I say logos for Transparent header and a normal header And why is this option useful because Let's say if you have a transparent Header and the background is white a Black logo uh works well but let's say On the rest of the website the header is Black then the black logo won't work so In that case you can have separate logo For the transparent header and the Regular header so right now what you can Do is just click on this button change Logo and you'll be able to actually Upload your logo directly on the site I Don't have a logo for so what I'll do is I'll pause the video for a second I'll Download a logo from a free website and I'll upload the logo right here in front Of you and I'll show you how the logo Works so I've just created a logo let me Just add this logo right here drag and Drop and the logo is now present here Make sure to follow the suggested image Dimensions right now it's 180x 60 and Here it is 180x 60 let's select this and Once you select this it'll option give

You the option to crop now since we have The right aspect ratio already we don't Need to crop so we can script the Cropping process and now this is a Beautiful logo here now this might look Like a little wide logo so you can Change the dimensions and make sure That's it's not too wide completely up To you this is just a logo that I found On the internet which was free to use And I just added this for a Demonstration you can have your own logo Added here and then you can change the Uh L width to change this here you also Have some other other options here you Can enable the site title to be shown Alongside the logo I don't recommend it Usually no website should do this at Least modern websites don't do this Their own logo is in either these the The title so for example the previous Logo that I had on the website was the Name of the person who was the voiceover Artist so you can have that here and you Can also have the logo and sight that in Single line if you enable this then you Can add the tagline you can change the Tagline visibility all this is Completely something very obvious that You want to add a logo and you want to Add or do all of this now couple of Additional things you will you should Remember is you need to add the site Title here or site icon here which is

The fav icon so if I just go here I Click here this is the option to add the Fav icon which is usually a square Aspect ratio now this might look exactly The same but the spacing around it is Different just for example look at this And look at this this is quite wide this Is the F icon it's usually Square I'll Click the select button again we'll have The option to skip the cropping process Process I'll click Skip and I'll just Place the um the header of the Chrome Browser on here which will instantly Show you that the a site Identity or I Say the ficon just I added here is Instantly showing up on the screen so This is the Fon we've changed the logo And the ficon here now just to give you Clarity on the transparent header Situation if you go back here inside the Transparent header option you can go and Customize the transparent header now Some of the options are enabl on the or Visible in the transparent header so First option is do you want to enable The transparent header on the complete Website so right now if I go to the blog Section these kind of sections these Sections don't have a transparent header Right now see this header is actually Separate so this option will enable the Transparent header throughout the Website do or keep in mind that this Will change the entire look of your

Website so enable this option at after Careful consideration you can also Choose different transparent logo so This is where it gets interesting if I Do this here now let's say I want to Have this logo as the transparent logo And of for the logo for the transparent Header and you can have a different logo For the regular uh I say uh regular Header so in this case if I go back here To the homepage of the site now you see This logo show up here for just the Transparent header because it has a Different background but if you go to Any other section you can have a Different logo there as well so if you If you have imported any other template Apart from what I showed and you're Facing uh issues with logos is not Appearing sometimes you'll have a white Logo and then the header is also white This is where you can change it just Upload a different header or different Uh logo for different headers and you You won't have this issues so since my Header is completely fine for both or my Logo is fine for both transparent and Regular headers I won't change this you Can also go to the design option here And see some other options so again once Again you have the bottom bord so you Can customize the borders here you can Have colors and background so what color Should the menus be in what color should

The sub menu be in the social icons if You add it the search color so this Brings me to a nice place where I can Add the search option here so I'll just Go here click here and I'll add the Search option here now you see the Search option is added here so if I go Here and I say hey for the search icon I Want to have this blue color then it Should reflect in sometime if it doesn't We'll go back to the search option click This and this will allow you to actually Uh customize the search options so now We have the search width here we can Change the width the icon size live Search let's enable it and search within We only do post for now or not Pages We'll disable the pages we'll only do Post and going into the design options We'll be able to change the color of the Logo here so now you see this is the Icon that has changed so as I said uh There's some settings are available in Um multiple areas so you can just click Around and find out the right place and You can just add a margin as well so if I just add a left margin of let's say 20 Pixels uh you can also do 30 so it'll Have some separation here so once again Going back to header Builder search I Think we've customized every single Thing so going back to the homepage of The site now we've covered almost Essentially everything except for the

Footer because it has very similar Options to the header Builder but now Just think about this within just an Hour or whatever this video has been Going on we were able to build a website We were able to import a theme I showed You how to customize the entire website The look of the website every single Thing in sh such a short period of time It's actually amazing right so uh just Pat yourself on the back once again if You think you're enjoying yourself and Learning something new about WordPress It's a very very powerful piece of Software let's also finish with the Footer Builder here and then we'll go Back on the uh admin area and I'll show You how to customize the actual content The homepage and other areas of your Site and that's also going to be very Very easy so going to the footer Builder Here once again the footer Builder has Uh very similar I'd say uh uh the the Layout you have three areas you have Widgets HTML copyright sections already Confirmed are connected so if you want To change anything once again you can Click on the individual icons and it'll Open up the settings for it so if I Click the social icons you have the Social icons that are added let's say if You are not present on YouTube you can Just disable that icon you can add new Social media icons here so let's say I

Am on GitHub let's say for example if a Voiceover artist was on GitHub you can Just add the social icon and now the GitHub icon will show up here so this is How you can add this you can also enable The labels so you can enable the labels Like this so similar to how I showed you In the header Builder you you have just Click and change options so if you want To change this just click on the find The widget which is here or just click The pencil icon and you'll see this Widget is responsible for showing this So now you can change this add media Let's say uh you can just add a link Here which can be linked to a contact Page so you can just add contact Me page and just add a link here to a Contact me page We'll add this link here I'm just giving it a random link because I haven't created a contact page yet so Just add google.com just for example and We can just come back later and change This so now it links to the contact me Page the HTML page now anybody clicks on This they'll reach the contact page and Of course we'll need to change this so That the uh link doesn't blend in the Background as I mentioned some things Need to be customized once again you can Change the HTML here the copyright Information here and you can also change The logo here now this background is Black and I don't have a white logo so

I'm not going to change this but the Idea is that in similar fashion how I Was able to show you how to change the Logo here you can actually change logos Here as well right so once again we have The phoo completed we have the all the Elements on the header and photo Builder Completely customized and now you also Should have a great idea on how things Work inside WordPress it's actually easy Uh making changes sitewide is absolutely Not something that is uh too complex or Sounds like repairing an autobot or a Transformer it's very easy just you to Understand what things to be changed Here and using or following this Tutorial till this point you must have Have your website already ready that's That powerful so once again we'll take a Small break so that you can just relax Take a deep breath have a sip of coffee If you want to we'll go into the back End of the site and what we'll do is We'll customize this homepage and some Other pages on the site which are Created and then we'll start with the Process but before that before that very Very important if you've been follow Along make sure to hit this button which Is the publish button because this is Where you'll commit all the changes that You made to site onto the website so Once it's is done you can cck click back Here the cross icon here and this will

Bring you to the actual website so this Is your website congratulations you Build this all by yourself so if I go to Any of these Pages you'll see all of These pages are also completely already Designed for us and we can customize any Of these pages right you can customize Any of these pages and I'm going to show You how to do that and how to even add New pages onto the site and add them to The menu technically I already have Shown you some of these things but let's Say for example if I go to the blog post Here this is all where the blog Post Live we can go into the services section Which is all the services show up and You can customize this and you can also Go into the studio option and then you Can customize the studio page as well so Whatever Pages you want to customize or Even add all of this is possible right Inside WordPress no external tools Required whatever we installed is what We'll need to just customize all these Things on the website all right so this Is your beautiful website uh soak it in Just take a take a look around have a Little fun with it if you want to check Something out you want to check the Search option out just check how Everything works how it looks check on It on your mobile phone just see the Mobile preview do all of that and once We're back we're going to

Customize uh a couple of pages I'm going To show you how the block editor inside WordPress works and how you can use it To customize pages on your site I hope You're having F fun till now because now It's going to get even more exciting all Right see you after a short Break all right welcome back to the Video and I hope you spent some time Understanding your website looking at Your website look at this beautiful Website we created in just less than an Hour off time and it looks absolutely Fantastic and we covered everything About how to build a website how to Customize it the only thing remaining is Now how to customize the individual Pages on the site so this is the Homepage that we created we also have The about page automatically built we Can create new pages as well so this is The about page you can see here Beautiful then you have the blog page Which we created I already showed you How to customize this we also have the Services page so inside the services Page this is automatically pre-built From the website itself and then you Also have the studio page which is built Here now you can customize these Pages You can create new pages and use the Same principles we're going to cover to Just uh do the same thing now if you go Back to the admin area and if you go to

The pages section and we click all pages This is where you will see all the pages On the site so the about page the blog Page the contact page contact page we Haven't added to menu technically we Will add this here and then we have the Homepage the Privacy page which is not Added here and the sample page created And services and the studio page now you Can actually just go and start editing Any of these pages but if you mess up Then uh you won't have an option to go Back and you'll have to reimport the Entire template which is fine but if you Have made significant changes using the Customizer here then you'll lose all the Changes and you'll have to kind of make Those changes again so I just suggest That whatever works for I'm going to Show you you should do this because if You're new to WordPress this will just Save you a little bit of time so we Going to install a plugin which allows Us to uh duplicate Pages inside WordPress uh sadly there that's not a Native functionality so we'll have to Install a plugin for that so I'll go to The plug-in section I'll go to add a new Plugin and inside this add new plugin I'll just search for duplicate post and This will bring the plugins options and This uh plugin I've tested out it's a Pretty decent plugin we'll install this Plugin and once it's installed I'll also

Activate the plugin and then we'll use This plugin to duplicate some of the Pages on the site and then edit those Pages I'll click Activate now the plugin also offers some Security checkup I would suggest that You skip this we don't need it now the Default settings are completely fine we Don't need to mess with this and this Menu entry you can completely ignore and Just directly head to the pages sections And inside the pages section now you'll See a new copy option alongside all the Options here so the hom page let's say We want to edit the homepage first if You hover on the copy button you'll see The copy option appear here and you can Have one time so click the copy button And this will create a copy of the Homepage now the benefit of this process Is now you can edit this and you don't Like something you break something That's fine your homepage is not being Messed and you can do the same process Uh on a live website as well so Customers are coming in you're not Messing with uh the actual homepage you Can try and uh change things here and if You like it you can just change the Homepage to the second version and by Just going into settings so this is a Great workflow to save time and also Have flexibility in your workflow coming To homepage two uh we'll just edit this

Page here by clicking this button and This will open up the block editor Inside WordPress now when the block Editor first starts there's a lot to Take in so I would just recommend that You listen to me for a a few minutes I'll explain everything that is about The block editor now whatever you see in The middle of the page this is the Content area and this is where all the Blocks go using which you can create Your page now think of the blocks as Lego pieces you can arrange together and Similarly to how you have different kind Of Lego blocks uh each does or solves a Different purpose you have different Kinds of blocks inside WordPress which You can add and use which solve a Different purpose just by looking at the Page you can understand that everything If you hover you'll see different Sections are being highlighted and each Of these sections are different blocks So you have blocks for text you have Blocks for images you have blocks for Other areas and other kinds of blocks What kind of blocks are there before That I want to just uh highlight this Section right here this is the settings Area and the settings area uh you see This settings which is currently Highlighted is the WordPress settings Which is present by default even if you Have installed nothing on the site but

These what you see here these are added By starter templates and Astra and these Buttons are also added by starter Templates and the Astra theme so they're Not part of the default WordPress setup So if you want to enable or disable the Settings or just the appearance of the Settings on the page you can just click This and this will just give you a full Page preview of how the page actually Looks like so you can click here bring Back the settings it goes back you can Click this settings and the theme Settings come back you can do this and You can do this and the Spectra page Other the settings also come back so This is how you bring the settings first And uh this is where you also see the Blocks this is where the settings are But what kind of blocks are supported You have tons of blocks now I'll click This and you'll see some variety of Blocks here Wonder blocks and Spectra And text and other things why are there So many blocks so the beauty of WordPress is that not only does it Include plenty of blocks here so you see These blocks the paragraph block The Heading block uh the list block you can See the preview on the right hand side As well on how it looks like you have The code block the details block uh all These blocks these are default blocks Inside WordPress which are just provided

You you can use them add it to the page Drag and drop it and customize them also Have the media blocks design based Blocks lot of different options but WordPress also allows thirdparty Developers to add their own set of Blocks now the benefit of those blocks Is most of the time they will have some Unique set of settings or uh say um Different settings or more settings you Can customize so you'll have more Control over the layout of your website So just for example if you scroll up all These uh uh blocks you see are added by The Spectra block so same uh similar to How you saw the heading block below you Also have the heading block here you Also have an image block here you have The buttons block here you have the info Box call to actions so all these blocks Are are very similar to some of the Other blocks inside WordPress but these Blocks will have more I say unique Options or additional options which you Can use to customize and then you also Have the third set of blocks the Wonder Blocks which are added by again Spectra And other add-ons so whatever these Blocks you want to use that's completely Up to you what I'm going to just first Is start to show you the page structure How it's laid out how you find elements And change them and what kind of Settings you can expect and then how you

Can change them all right so if you'll Just close this by clicking this cross Icon this will go away and this page is Defined into a few different sections But how do you see what kind of elements Are added and how the page is Lay Laid Out because as a beginner it might be a Little confusing to you to understand How everything is put together so I Would suggest that you use this feature Inside WordPress which is called the Document overview so if you click this Button here here this will bring up the Overview of the document directly and You see this document is made with six Containers one container two container 3 4 5 6 what is inside each of these Containers you can hover and click on Them and that particular container will Be highlighted so if you see this this Container is this container which ends Here and then second container is this Container and this is the third Container this is the fourth container My clients this is the fifth container For the testimonials and this is the Sixth container for let's get together Or let's work together so this is how The page is actually laid out but you Can also just click at the drop- down Option here and you'll see it has Another container inside then it has Another container inside and it has Headings and it has another container

Which has icon list and it also has Buttons laid out here as well so there Are many different elements in a single Container and what you can do is you Don't always have to use this the easier Way way to uh get around WordPress is Just clicking elements and then figuring Out their properties and settings so That's let's start with that first but Before that I want to show you how you Can actually preview this page uh so That you can actually understand how the Preview or live preview looks like now If you have this open or the blocks Options open and the settings open the Page is actually compressed quite a lot Right you can see it's compressed so It's not a realistic preview of how the Page will look like so I would recommend When you're looking at the page and Designing the page close CL all of these Or just toggle them on and off so you Can see a final output of the page and You can also use this preview option Here if you click this you'll have the Preview in new tab option and if you Click this page you'll see this page Looks significantly different from the Actual homepage which is this this is The homepage let's go to the homepage Here and this is the homepage and this Is our page why does this look so Different because the homepage is using A full width layout we look looked at

Those settings inside the editor or in The customizer and since we set the Regular container to be normal uh not The full width that's why any default Page we duplicated is not using the full Width layout so let's change that now This is again a great feature inside WordPress you can override settings so To change this to a full width layout We'll have to just go into the Astra Options here and we'll click this and You can go to The Container layout this Is the container layout you see this is The default options we'll switch to a Full width option and you inst ly see Now it's a full width page and then Container style will not change we don't Have the sidebar we will not disable the Header footer or other areas but we'll Go into the advanced settings and we'll Enable the transparent header on this Page now if you remember from the Customizer we did not enable it sitewide But since this is a replica of the Homepage we want this to be enabled here All right so disable primary header and This this is not something we'll do We'll return to post and we'll also do One more thing but let me show you the Preview first if I now see the preview Of the page you'll see that it's Starting to look like the homepage uh Quite a lot so this is the page here and This is the page here there's only one

Difference this is the title of the blog Post or the page which is showing up Here so there's an option to disable That as well just click on the title Here and if you delete this this this Section will remain empty and it cause An unnecessary space here so what you Can do is just click on this and there's A i icon just here just click on the I Icon this will just hide this from the Page once again if you go and click the Preview option now you see this looks Very much similar to how the homepage Looks like this is the page we are Designing and this is the homepage There's actually no difference it's Exactly the same so whenever you are Creating new pages especially homepages And other Pages these are essential Settings you'll need to figure out Anyway because you need to have the Transparent header and you might need to Have the full width layout setup so That's why I thought this is a great Opportunity to demonstrate how you do This because it can be confusing for Beginners now since we have set out the Lay out of the website pretty well how Do we change things how do we customize Things so let's start with the text Options here now the easiest thing to Change on WordPress is the text and as I Said all you have to do is select the Element and then look for the

Appropriate settings in the settings Area so if I click the settings right Now the settings for the page are Appearing because I haven't selected any Block if I go to the block you'll see no Block selected so all I have to do to See the settings of a particular block Is to select the block so I'll just go Here and let's say I want to change this Headline to hi I'm Dave I do voiceovers I'll click here and now you see the Block settings appear now first let me Show you how to change the text on the Page so I'll just double click this and Let's say your name is not Dave your Client's name is not Dave it's John so I'll just do hey I'm John and simple you Just drag and click on it and change it How you would do it any any word Processor it's quite easy so once you've Done this now let's explore the settings For the block and there are exensive Settings now do notice that this is a Heading block but not the regular WordPress heading block this is coming From Spectra so if you're using a Different template or different website And it's using the default heading in WordPress it will have different Settings on the page or different Settings in the block but you can also Use the Spectra block to have all these Settings that I'm going to mention so That you can actually take advantage of

Them so inside the general settings you Have the content subheading and Separator so inside the content you have Alignment options so if I do this the Text the centrer line right line left Line and if I uh want to have this as a Heading then I can enable The Heading And what kind of heading H1 H2 H3 and This will inherit the settings that we Customized from the customizer for typ Typography and size then you have Subheadings you can enable and disable It and have a separated between uh Headings or uh headings and subheadings Now this is just the content area let's Go to the style Tab and style tab has Heading link highlight background and Spacing plenty of options so inside the Heading option you have the text color Option you can have basic classic color Text or you can have a gradient color as Well now some of these settings you will See that these are being inherited Directly from the theme so that's why You see this is transparent but this Theme has a color now whatever you Change here will only affect this Particular page on this particular area Whatever you did from the customizer Affects the entire site so let's say for Example you had the bright idea to Change uh some of the colors here so you Go here and you click the color option And you CH pick this color this color

Let's pick a different color this blue Color and you pick this color so Instantly you see that that that now This color is being applied here on the Page let's click this once again okay so Now we've instantly changed the color of This headline I can just make it a Little darker if I want to so once again The uh color palette we defined in the Customizer is showing up here these are Global colors but you have the option of Actually freely picking colors from the Color pick as well so you can just drag And just select a color pickup I think It's a little buggy today for some Reason but you can just drag it around And find the appropriate color that you Like you also ha can paste the hex code If you want and what you can also do is Uh change the transparency here uh for Some reason it's a little bit laggy on My website today on my page today but You get the idea uh see this Transfarency actually was applied so now This is something you you can do I'll Just try and go back to the full width Or full transparency full opaqueness Here but I'll stick with the the color That we selected as I said it's a little Bit laggy for some reason but let's Stick with it all right so this part is Done let's let me click around somewhere Else that the settings are saved so once Again going back to the color options

You can actually set this color which I Just did and you can also set this as a Gradient so it can be a gradient that You like so again beautiful looking Gradient on page and you can change the Type of gradient right here as well you Can add new uh colors have multicolor Gradients and change the radius or Change the type of gradient it is so you Have plenty of options to uh mess around And have a little fun let's stick with The gradient I think it's it's suiting The theme of the website and then once Again apart from the color we can change The typography here so this is similar To how we saw in the customizer but as I Said whatever you change here only will Affect this section or this particular Piece of text that is what we are Customizing so if we go to the shadow Option we can add a shadow here as well So I'm just going to uh spend a little Time here the reason I'm spending uh Quite a lot of time on all these Individual settings is so that you can Understand the kind of options are Available in the heading and other Blocks so that when I actually go and Change text somewhere else on the page You won't think about oh what other Settings are there so by just covering All these settings here you'll Understand uh basically every single Block that is added to the page

Especially a text block do has similar Options all right so this is the part Where we have changed the colors here You also have linking options so if you Want have if you have links on this page Or links in this text you can change the Color of that link and also change the Color of the hover so if you hover or Something and it has a link you can Change the color you can also have Highlights on the page highlights you Can have highlights and you can also Have background so if you want to add a Background to this uh particular Headline you can just select a color Here once again it might mess the page Up a little bit let me just try and see If it works so this looks absolutely Horrible but I'm just trying to Demonstrate that this is an option that You can utilize so we changed the Background you can also change the Spacing so you can change the padding And margins make the spacing a little Nice just to give you an idea if I go Here and add the bottom padding as let's Say 15 pixels now you see this padding Or this margin has been added so it Gives a little bit of breathing room to The text below it so these are all all The settings in the heading block and The text blocks are also very similar so If I click the text here now you see This is also technically heading block

Which just contains all the different Kinds of text so the exact same settings That I mentioned to you are the same Settings that are available here as well And if I want to change this text I'll Just highlight this and I'll just Say uh hey um A Specialized voice over Artist that can Narrate cartoons ebooks Audiobooks anime Children's Event Promos and More so instantly I have changed uh this This text as well all right so this text I we customiz we customized this text Let's also look at this text and this is Not a text block this is a list item Block which kind of represents different Lists that you can have and the special Thing about this list item block is that It's coming from Spectra so it allows You to add specific icons next to it so You see this icon here this icon has Been added through Spectra or this Particular block and you can add uh These options are present so you can Have an image as the or an icon as the Icon an image as the icon and none as The icon so you can remove the icons as Well you can add links to it so if you Want to link out to a particular Page by

Adding a CL click here you can add the Link here and in the image section or Not in the image section the style Options you have the label colors so Normal and H colors and the icon color And the spacing and in the advanced tab You have some other options as well We'll look at some Advanced options Later once we finish the basics there Are some exciting things here as well so Again very similar options you can Customize change the text and and add This here now let's go to the button Block and customize the button now why The button first because if you remember When we were adding or customizing Buttons using the customizer I did Mention that some things on the page are Overridden because uh technically what I Meant was that some uh elements on the Page are added by third party blocks so It's not the customizer won't actually Affect them so this is one of the Examples of how this button block if I Click on it you see this is coming from The Spectra uh plugin once again and This uh options are actually set on the Page itself so the button will not Inherit the settings unless it is set to Inherit the settings which it is not so Once again you have the options here for Predefined styles on the content you can Have this content being inherited from The theme you can add icons links and

All that good stuff but if you want to Just change the text on the button I can Just do this I'll say uh let's Connect and if I do this now you can see That it's changed here now in the style Tab is where I can change the style of The button the Cosmetics the colors so What are the Styles I'll just uh click This and you'll have all these options Here you have the text the background The border the Box Shadow and spacing Let's look at this so that you can see How we can customize this so let's say For the first thing what I want to do is Make the button a little bigger by Changing and improving the font size so I'll go to the text options and in the Text you have typography I'll click the Pencil icon and this will open up the Typography options and I'll just move This around To let's say I'll just do this 20 Pixels and yeah this looks decent to me So I'll stick with 20 pixels and click Back the pencil icon and now the button Is bigger now if you notice if I'm Hovering over the button the color of The button and the text are changing the Text system Remains the Same but the Background color changes what if you Want to customize this Behavior we can Do that so in the text area you have Normal color and H Color and in the Background color you have the normal

Color and H Color and technically also Have transparent and color and gradients As well but we're going to stick with The basic color right so normal color The black color is fine the white text Is fine I want to change the hover color To something else so if I go to hover It's set to this blue color what I'm Going to do is go here and hopefully the Color doesn't mess up once again I'm Going to just do and pick a dark blue Color here and this dark blue color and I'm going to add a light blue border to It and I'll go to the border and and Let's do solid and now the border is Added as solid and I'm just going to do On the regular border I'm just going to Make it translucent so it's not visible So I'll just make it three pixels for Now so you can see that the border is There but it's completely translucent on The hover side I'm going to change the Color to this darker blue compared to This light blue so now I just customized The settings so let's hover over the Button now you can see the button color Is is dark and has a light blue border So this is how you can customize the Button very easily to any colors you Like it's that easy and you don't have To actually mess around and change every Single button on every single page what You can do is just copy and paste this Around once you have made one button or

One change here Spectre options or the WordPress options gives you this options Well so once you've done this you have This option I'll demonstrate probably This later in the video let's say you Spent uh 15 minutes of your time to Customize this button beautifully you Want to copy and paste this and click This copy this go to other page paste The button there and have all this uh Settings being applied there as well so Don't have to mess around uh changing Every single thing every single time if You don't have to so once again Instantly we've given it a beautiful new Look we have changed the text here I've Shown you how to customize the lists and Buttons as well and this is again a Second button and this button has a Transparent outline but let's change the Typography for this to match uh the Button just next to it so we'll just Make the font size the same and now this Actually matches the site let's now go Back to this here so that we can Actually see how it looks like we'll Click here we'll go to the preview and New tpe and this is the beautiful new Homepage that you have just customized With me on this website looks great and This as a reference this is something we Created or technically customized but And this is the original one tell me in The comments what do you like better

This one or this one and how easy it is To make these changes on your site right It's absolutely easy now one thing we Haven't customized is this image so Let's do that next and with that you'll Technically understand how to customize Every single thing I'll maybe spend a Couple of minutes of my time showing you Around how to change these things how to Do the same thing for other elements on The page but essentially that is how you Do it right you just mess things you Click things you find the relevant Settings and you change things around so Once again going back here we have this Image here now one thing that might be Challenging is to figure out which block Does have the image actually because you Can click around but you'll keep Selecting different blocks that's why The document overview is very useful if I click here and I open the settings as Well I'll just open the style tabs first And instantly by just default I was able To select the appropriate container Which has this image now if I just give You an example the top container has This beautiful basic gradient added as The background which you see the blue Outline here so the outermost container Has that as the background and the Container just inside it has this image As set as the background and then the Next containers inside it has other

Things customized so that's why you have Multiple containers because you can't Set multiple images inside a single Container so that's why you might be Wondering why does a container have a Container and then another container Have another container this is a reason So let's select the appropriate Container with the image let's try Change this image to something else I Have experimented with a couple of Images here I'll just uh demonstrate That to you and I'll also show you how To do one from scratch all right so I'll Click change image and I just added this Image here first but this is not a high Resolution image I downloaded from Unsplash.com I'm going to demonstrate That I removed its background but it's It's not a great resolution so you might Think that this is uh not looking great But I'll I'll change that so once I Added this image now since this is a Small image it technically kind of Disappeared right can't see it so what You do is again you go into the Container and you figure out the Jour Settings the style and then you have the Position so if you find the image you Find the position now you can mess Around and find the image or you can Just click reset and now you can see the Image so with this simple uh I say block Options you can just drag this

Around and place it in the appropriate Area and once again I would recommend You close this so that can you see the Realistic idea of how the page will look Like so this is how it's going to look Like not great once again so I'm going To open the settings once again I'm Going to drag the uh image around just a Little bit more close this and still It's nice but I want to just have it More to the side so that it's not Overlapping the text so I'll just do This once again I'll do this and let's Try it now it looks fine I think the Image is again as I said the image is Not great the background removal Is Not Great it doesn't have great resolution But I'm just giving you an idea of what Can be done and I'm going to demonstrate How to do this as well so once again We'll click this we'll preview in new Tab and this will open up our new image Or new uh I say homepage design with a New layout here so kind of works but the Image isn't great let's change this Image to something else once again we'll Go here open the settings up we'll Click Change image and I have this another Image added here on the page uh let's Use this and let's see how it looks like So now this image looks this is a much Higher resolution I think more clear and It also has some some the brightness is Matching the brightness of the page so

Reset this first and once again we'll Just do a push to the side push to the Side push to the side and we'll just Close this to see how it looks like and It this looks much better in my opinion So let's try this out let's click Preview and this will open up once again The live preview of the page and let's See how it looks like and the new Homepage looks beautiful so this is how You customize things on the website all Right so what I'm going to do is now Demonstrate the process of how actually Did this and how I found the images so That if you maybe struggle with that you Will have an actual answer of how I did This so you can go to any stock image Website where you can find the Appropriate images my personal website Or favorite website is unsplash.com this Is the website I use the best part about This is there some websites or some I Say images that are premium but most Images are free to use and you don't Have any licensing no complicated I say Terms and conditions uh you can use Those images freely so the license part Is which makes it very very simple so I'm going to find an image called Singing now technically I already have An image downloaded on my computer just To demonstrate this to save a time but I'm going to just demonstrate the Process anyway all right so I'll just go

Here and I'll find an appropriate image Which is available to use now if you see This this icon here and you see a Watermark on the image as well then that Image will not be available to download Unless you have the premium version or Something like that but most images Without this are free to use so I'm Trying to find an image which has uh Good contrast and this is the image Again as I saw this has good contast so I selected this image as an example Let's find another image which we can Use which has a decent I say look to it That we can remove the background so Let's find this this can work but it's Black and white I'm not sure if the Background removal process will be Efficient but we'll try it anyways all Right let's try this image by the way I'll just show you the image I actually Downloaded for this so I actually tried Out this image I have downloaded this Image oops sorry let me just resize this So I have downloaded this image already From unsplash.com and if I show you how The image looks like after I removed the Background this is how it's looked like So this is again this is I this is Something I've already done so this is Something I'll use but I'm just going Demonstrating the process and uh in real Time so that you can understand how How's the actual process look like so

I'll download this once again and this Is now download to my computer all right So I'll go to Adobe Express Adobe Express background remover why Adobe Express well there are million ways to Actually remove backgrounds you can do It in your phone as well we've done a Video about it uh first it was just IPhones but now modern Samsung phones Can also remove uh backgrounds from Images you have iPads you can do it on Computer this is the only I say service That I found which can remove Backgrounds from images and also allows You to download them in the full Resolution for free so that's why it's a Recommended service I'll take the image Here and I'll just drag and drop it here Now do keep in mind that to download the Image you'll need to sign into your adob Account I'm not signed in but as you see It kind of does the job it's it's okay But it's not great right so we'll just Go back and find another image and let's See if we can find a goodlook image we Can utilize to actually remove the Background now this is hard work I don't Know where I found the first image that I used so let's take some time all right This looks good so I'll just download This one we we might have to flip this Around but that's that's easy to do so Once again upload your photo let's Download and activate this one upload it

Oops it's maybe the image is too big Oops okay I might need to resize this so I'll just select another image I think This image is too big for the service to Actually take out uh the background so Let's find some other images once again This looks fine maybe we can use this One or maybe this one let's try this one First we'll download This and we'll also use this Let's see if it works all right it this Is a reasonable I say job done what you Can do is download this or and use this Image this is the process that I'm Describing but as I said I've already Done this process uh not with this image But this image which I have removed the Background from so again the process is Something I've highlighted how to find Images how to remove the background so It's completely free all you have to be Do is sign into your Adobe account and You'll be able to download this image so Going back to the Here this is the page we're working with This is the page data let's find this uh Block here for the images let's Container click here click image change Image I'm going to drag and drop the Image that I just downloaded here let's Drag and drop it Here and this is now added to the page Let's also add this here and we'll see How it looks like we'll reset the

Position and it sticks on the page we'll Close this and we'll change the position And as you saw we have to make it a Little to the right so that once you Close this it actually connects here so This kind of works right so let's try And preview This and I think it look good again not The best image in the world but you get The idea of how to actually do this Process yourself all right so Technically I've shown you every single Thing on how to actually make ch changes To your website now if you go down here You'll find the same options so once Again if I click this section and if I Click the options here this section has This as just the background image added And it has the text here and it has the Text here it has the text here and it Has a button which has some custom Settings done so everything that I Showed already can be applied to this Section and then be just added here as Well and why is this list block here This is for the social media icons That's the only difference otherwise Every everything is the same once again If I select this section you'll see that This section has this image as the Background and if I open up the Container here let's open the container If you open the uppermost container here You'll see once again as I as I

Demonstrated in the first container you Have the primary container having the Image background here so if I close or I Can't close this I'll have to show it to You like this this beautiful gradient or I say shape background that you see is Added to the topmost container which you Can see here right here and then the Container just inside it has this Headphone image as the background so Once again the same principles apply Here you can go and change the Background image if you like and change The background colors if you like if you Need to customize the section otherwise What you can do is click on this section Change the text click on the button Change the button make the button uh the Size of button not change anything else And if I click around you'll see Different kinds of blocks used to create The rest of the website so if I click This block here you'll see this is just An image block and this below it is just A container block again this is the Easiest way to actually go around is Find out the page structure here so we Click the topmost container it has a Container which has another container Another container and this is Technically an info box right so this is An info box that added and then in cut In another container you have the button Block here which is being added so this

Is how you can find out how the page is Actually laid out so right now we saw This so let's close this container let's Click the second container and now this Container has four of these containers Inside and each of these elements that You see are contained in individual Containers so if I click this you have An image then you have the commercials Which is the heading and then you have The button here so this is how it is Actually structured you can copy and Paste this as well so if you want to Copy this just click and you can copy This select parent box or container copy Duplicate it take it to another page and Just paste it there if you want to Change the images here just click on the Image and you can go and change the Image it's just an image block you can Change the image and add your own image And all the settings on the image the Rounded Corners will automatically apply Once again this is just a list item on ION set so if you click this this is a Container which has a background like This and everything is just basically The same and if you go here to this Testimonials block let's go to this Section this container this container I Just collapse everything else this Container has two containers so this is The first container on the left and the Image is on the right so if I go to

Image here hopefully we'll find the Background here yeah the container Inside it as as a background image and How the effect for this cutout of Extending to the previous section is Done because the image is of that size It's not something magical just the Image is a little larger so it's Extending to the side and you can add Some paddings and some other lay uh Changed a little bit of margins and Paddings to make this happen as well so If you go here in the I believe it was In style tab you see the margin is Actually set to minus 64 so if I make This zero you'll see that the image will Actually fit inside the content so again Neat little trick for you to actually Add a little bit of interesting look to Your website so all you have to do is Just make it minus 65 or 64 was let's do It 65 so okay I'll have to either do it This Manually so okay so let's do 65 oops I Don't think I can type it in let's try Once again okay I can type it in so Minus 65 is what you can do so this is How the effect of uh the extension of The image in the previous section is Achieved and once again you can do this With any single image you can just Change the image and if I go and show it To you here let me just actually Demonstrate this to you we can go here

Inside the image Block and where is the image let me find The image options all right go to General change image and if I want to Change the image to this image which we Use previously as an example we can do That as well and the appearance of the Image will be the same so let's select This image here and now we can do the Same thing on the style tabs we'll go to The margin and we'll set it to minus uh Let's say 90 because this is a bigger Image I'll just change the this to The Hyphen and once again you have the Similar look created with a different Image so that's how easy it is to change Things around all right so technically I've shown you every single thing let's Also publish this page for now so that All the changes we've done to the page Are actually committed to the page and I'll show you how to add links to Buttons and also show you how to change The homepage of website on the fly right So we have this now a beautiful new Homepage with a New Image new kind of Text here and new things couple things We changed already and I also Chang this Image here which is now appearing on the Page all right so if you want to change This first of all we haven't added the Link to the contact button here so let's First fix that so what I'm going to do Is go back to this section now since

This page is already done we can click To the top left corner and go to the Pages section where all the pages are What I'm going to do is find the contact Page here I'm going to just click the View page and open this page in a new Tab and I've copy the link here I'll Just copy the link and close this page Because I don't need this page to Actually work like this so once I've Copied the link I'll just click the Customize button which will open up the Customizer and what I want to do is just Go to this button here which is present In the header and just add the link to The contact page here so just Demonstrating how this is possible going To uh click the button Here and once the settings for the Button open we'll just go to the link And cck cck link and open in a new tab And publish and that's it now we have Added the link here we can go back and I'll just demonstrate how this works so If we go back to the homepage Here and if I click the button here this Will open up the contact page in a new Tab and now you this or you can see that This link works perfectly now you see There are a lot of elements here on the Page and I'll take a moment to discuss How you can customize these pages but First I want to talk about how you can Change your homepage on the fly so if

Example you see this is the homepage but We also created an alternate homepage Let me go back to the admin area and I'll talk about how to actually change Those settings so I'll go back here and If you're in the dashboard of your Website inside the admin area all you Have to do is go to the settings and go To the reading settings reading settings And inside the reading settings the Setting which we configured in the Beginning of the video where I changed The post page to post uh post now you Will remember that we created the Homepage or the post that we created the Second option as the homepage uh I named It home 2 so right now the homepage is Set to home which is this page but if You go here you can actually change it To home to so once you save these Changes now your homepage is actually Changed and it will have a completely New design so this is the default Homepage I haven't refreshed the page if I refresh the page you'll see the new Homepage now loading now this is how you Actually make multiple variations of Your homepage and configure them change Them on the fly so you can have a Shorttime promotion you can have say uh You want to promote some special offer Then you can create a new homepage and Just change them between the fly and I Told you how to create a homepage from

Scratch or just duplicate your existing Homepage and customize that for ease and Comfort now let's talk about some other Pages on the site uh what kind of Elements there are because there are Some unique things on the on on those Pages which you might be thinking how do We do now in the studio page uh we have Nothing special in others uh other pages I think nothing nothing special we've Kind of covered every single thing here But the only the contact page has unique Elements which you might be wondering How to add so let me give you a brief Overview and then we'll have detailed Tutorials I'll show you or share with You detailed tutorials on how you can Implement them on your site so let's go Back to the admin area and I'll go to The pages section once again and the Pages section is where the contact page Is so I'll quickly edit this page and You can duplicate this page and mess Around with it as we did with the Homepage but I'm just going to show it To you right now how this works now once Again as I said in the beginning of the Video or many times that if you're Confused about how page is structured Just go here and check out the uh Container view or I said document Overview I'll give you a quick idea on What kind of elements you have on the Page now if you open this container up

It has containers and containers and This container should contain the help Me or send me message and a form block From Spectra and if you see the map Plugin or the map location here once Again if you open this up then you'll See an info box here which is this and If you see this container here then you Have the studio location which is a Heading and then you have the Google Maps uh the block here and the Google ma Um blocks um or the Google Maps block Uses Spectra's own Google Maps API key Because that technically you need that To embed maps on your site so they use Their own API key so you don't have to Work just have to add your address here And this is work this is working now These might be limited options but they Still work but if you want more control Over how the uh the the map is displayed Other additional options then you should Be using different plugins or I say Different dedicated plugins or blocks Which allow you to customize this for Example this form plug-in is very basic But it gets the job done but if you want To have more control over what kind of Feels you want to add you want to Customize the look and feel of it and Get uh I said uh post submit actions and Collect emails or collect I say all the Entries in the list and have payment Buttons and all that good stuff then you

Have dedicated videos on our Channel Discussing all those features by using Dedicated plugins that are designed to Do this job now Spectra uh get this job Done this is good great but as your Website grows you'll have specialized Needs that you need to fulfill to U I'd Say complete all those TS so in that Case what I would recommend is watch the Videos I link on the screen once the Video ends in just a minute and by the Way this is the complete or the end of The tutorial we've covered everything About building websites we looked at the Homepage we created new homepages I told You how to install WordPress and every Single thing that you need to have or Learn in order to build websites was Covered if you still have questions then The comment box is open or just Appreciation about this long great Tutorial would also be great and if you Want to continue your WordPress Education I'd highly recommend you Subscribe to W gner and also like share Subscribe share this video all spread The Good Karma out there once again You're watching yubraj from wner and I'll recommend these two videos that you Can watch after this to learn how to Even enhance or add more things to your Website so that you have no confusions About how to build a fully functional Website once again if you have questions

The comment Box is open otherwise I'll See you in the next video take care

You might like

Revolutionize Your Website with Powerful Contact Forms

WPForms: The Ultimate Form Builder with Powerful Features and Built-in Spam Protection

How to Fix Image Upload Issues in WordPress

Increase Sales and Reduce Cart Abandonment with OptinMonster’s Exit Intent Technology

Boost Your WooCommerce Page with All-in-One SEO

Free Website Hosting: Is It Worth It?