How To Make a Website With WordPress Only - No Slow/Complicated Page Builder

in this video we're going to go over how to just use wordpress only not a page builder to build out beautiful web pages for example a beautiful web page like this it's only using the wordpress block builder and you can accomplish anything that you could accomplish with a regular page builder except you have the simplicity and the speed performance gains that you get with just using wordpress we're going to go over a ton in this video it's going to be information packed you are going to learn how to build total websites and it's going to be demensified it's going to become easy for you there's nothing that you're going to need to purchase to apply any of the principles in this video everything we're going to be using is free tools that's what i'm talking about using just wordpress it's a lot more simple you're gonna learn ways to build websites and web layouts faster than ever so if you're ready to learn how to use the wordpress block builder to its maximum potential give this video a thumbs up right now buckle in let's get started now before we get started i just want to quickly go over why you want to spend the time and make the choice of building your websites using the wordpress block builder versus one of these fancy page building tools that you might have come across there's a big change on the horizon for people who have websites that it matters to you if it ranks in google or not and it's something called core web vitals it goes into effect may 2021 it actually came out in 2020 but google announced that in 2021 this is going to be a significant ranking factor for your website so if getting visitors to your website matters to you you have to pay attention to what these core web vitals are here's a post on google's website regarding web vitals and what they are and essentially to make it simple to understand it has to do with website performance how fast your website loads there are primarily these three metrics but there's more than just these three metrics now some of these are directly related to your web hosting quality and some of them are with the tools that you use and then some of them are with how you use the tools that you're building your website with now one of the main core reasons why you're going to want to choose to build your website with the wordpress block builder gutenberg over one of these other page builders is because the code output that comes out of the block builder more closely resembles hand coding when compared to one of these page builders so the code that is going to be loaded when someone visits your website is a lot more optimized and it's cleaner and the other main reason is that's the direction that wordpress is headed in all the development of wordpress so the first step is to go over what you need now in this video i'm not going to go over setting up web hosting but like i said a moment ago one of the core web vitals is based upon your web hosting or the quality of your web hosting so there's two web hosting services that i would recommend you check into if you have a poor performing web hosting service one of them is name hero you can go to wpcrafter.com name hero that will lock you into an exclusive seventy percent off discount or actually it's up to seventy percent off it's very affordable it ends up being just a few dollars per month now the other web hosting service and this is the one that i personally use there's a little bit more to setting it up but the performance is much more significant and that's cloudways and you can go to wpcrafter.com ways now there's also a coupon to get a discount for this down below in the video description you'll want to enter that in it's going to save you some money per month for the first three or four months i use this it costs a tiny bit more but it's really not that much more expensive and i'll link down below to a video where i go through the entire setup of cloudways so i'm assuming you already have your web hosting setup and you already have wordpress installed on your hosting account so now let's go over what you need to install on your website to be able to get the most out of the wordpress block builder we need to add a free plug-in that's going to give us the structural blocks the mobile responsive options some efficiency tools like copying and pasting styles and also a useful set of blocks that are typical on most web pages and the name of this free plugin is cadence blocks so i'm gonna go to plugins click on add new and over here i'll enter in cadence blocks and here it is i'm gonna click on install now and then i'll activate it all right after i activate it it just takes me to its settings panel here this is if i want to just change any of the settings we're not really going to need to be right here however there is a facebook group for cadence users if you want to connect in with the community where you can ask questions and get help that's where you'd want to do it now you're also going to need a wordpress theme you might already have one and cadence blocks will work with any wordpress theme however they also have a free wordpress theme that has some really nice integrations with the blocks package right here as well as some templates that are using the wordpress block builder i'm going to use it for this website so i'm going to go to appearance i'll click on themes then i'll click on add new and i can go here and search for cadence and here it is the cadence theme you'll want to choose this one and i'll click on install and now i'll click on activate you should have a message up here if you went with the cadence theme and it will prompt you to install their starter templates and that's going to give you the templates inside of wordpress if you wanted them i'm going to go ahead and manually install that plug-in so it's plugins add new and where it says search plugins i'm going to type cadence and it's right here starter templates by cadence wp and i'll go ahead and install this and activate it when you activate it it's going to ask you if you want templates for gutenberg or elementor and we're going to want templates with gutenberg and these are templates that are available they're all free except this one here that says membership other than that these are gonna all be free and you can click on one and you can literally change the colors site wide for the template by choosing some of these alternative options right here and you can even change the font options you see how i'm able to do that by just choosing it and this is a full website it's going to have all of these included pages you can easily bolt on e-commerce tools if you want like woocommerce or anything like that i'll take it how it comes and i have an option to import a single page but i'm going to go ahead and click on full site and then i'll click on start importing and basically it's going to install this website on my website okay now that it's done i'll click on finished view your site and i've got the full designed website right here with colors and font choices so now that we have everything installed let's go into step two which is understanding the three c's of website building and this is actually something that i came up with the three c's of website building and let me explain but what i'll do is create a new page and i'll explain it from there and it's gonna make total sense to you so i'm gonna go to pages i'll click on add new and i'll give this page a title so three c's is a very simple concept to understand and every single web page on the internet can bro be broken down into these three c's the first c stands for container and the second c stands for columns and then the third c stands for content let me show you this in action so every single web page that you visit is simply a series of these three c's so let me show you the first thing i need to add and it's the bottom layer is the first c so i'm going to click on the plus there's multi i'm going to show you the interface here in a moment but i want you to understand the three c's first so first thing we need to do is have a a container now with cadence blocks it's called a row so here it is it's a row layout i could search for it but it's right here so i'm adding that to my page and so this is our first to see now inside of this container we're going to have columns now there are some settings for the container such as a background color background image background video there's different spacing options so everything goes into a container so the next layer the second c is columns now when you add that first c the container which is this row we can choose the column layout that we want so let's do something basic a two column layout now just select that now we have that second c which is the columns now columns have their own background settings and spacing settings and all of that that we can use now the third c is some content so if i want to add content in this column i can click on the plus right here and let's see i will do and let's just put a heading in there so i'm going to type heading oops i should spell right it's actually right here advanced heading we're going to want to do that and now i can enter in my heading now in the second column what i'm going to do is add an image so i'll click on the plus right here and i'll start typing image just like that here is an image and i will see what's in the media library and just select one of these images i'll go ahead and choose this one and click on select and there we go we have our image right there so the this is basically the core structure of any web page is creating these sections now what ends up happening with the wordpress block builder is getting to the right c to change something so if i want to get to the the row layout which is the first see it's the container like how do i get to it you know i'm clicking here and and i i don't know exactly where i am well there's a very easy way of knowing where you're at always to make sure you're editing the right thing because we we've got three layers here the bottom layer is that container which is the row but how do i get into the rows settings and then there's the next layer which is a column but how do i get to the column settings and then on the top is the content and that's easy i can just click and i'm right into that so there's two ways of doing it the first way it might be a little cut off on the video recording is here on the bottom left so right here it says row layout section and it's showing at the end here the advanced heading because that's what i'm in so if i want to go up a level i can click right here where it says section and now i'm editing the section and i have my section settings and then it says row layout and if i click there now i can adjust the row layout now don't worry that's one way and i know it's cut off a little bit the other way is clicking on this right here and you can see here's my row here's a column and here's the content in the column and here's my other column and here's the content inside of that column so this is how you'll always make sure you're editing the right thing so let's first start adjusting this and and just to show you that you can do everything using this that you can do with any other builder so over to the right we have the settings specific to the first c which is the container so i've got my mobile responsive options my column structures right here the separation between these two i can literally drag and drop this or drag to adjust the size of these columns right here and i can also adjust the height here of of each column the the padding right there but i also have these options here so first let's add a background color so it says background settings i'm going to click there and right here it says background color i could just as easily add a video if i wanted to or an image i'm just going to add a color so i'm going to click right here for color and let's just choose something like that just so we can see so this is the the containers background color now there's also some options here for alignment so every block inside of wordpress you're going to have these options here so usually for me i wouldn't want the alignment like this it's the top of line when you have an image on one side and you have a heading on the other so if i click right here it's going to center everything vertically and that's probably exactly how i would want it and you'll find there's alignment options usually found in this area here so when i click here for my heading i can go right here and there's a center line when i click here on my image there's an option right here and i can align it in the center as well and there you have it this is the three c's of every single web page that you go to you have a container in this case it's a row you have columns you have this column structure right here and then you have your content and once you understand this principle you can build any website layout using the block builder now if you're coming from a traditional page builder experience what usually happens is the page builder will create the three c's automatically for you so if i click on this plus and say i want to add an info box and i click this well when i do it inside of the block builder it adds it to the bottom of the page and that's it it didn't automatically create the container in the column and then put the content in it that you would see in other page builders so when you're building with the wordpress block builder you always want to be intentional intentional about putting in a row first so i wouldn't do it like this i would go here let's go ahead and remove it i would instead click on the option here for a row and then if i wanted it one or two columns or whatever column structure i could do it there let's just say one and then i can click on the plus right here and then i can put in that info box that i just put in so that is the one thing that you have to get used to doing different in a different order everything you have you want to set up this proper structure of the three c's now let's move on to step three which is understanding the interface now i know you got a brief preview of the interface a moment ago when we talked about the three c's so it should make sense to you what i'm about to show you so let's go ahead and jump into the home page and see how that is structured especially within the concept of the three c's that we just talked about so you can see right here is the first c on the page and we simply have two columns here and this has a few blocks and this just has an image it's a very typical type of container layout that we would have so let's go over this interface so the first thing is how do you get these blocks on your page well there's more than one way to do this so the first way is you just click on the plus right here and we have a list of blocks now whenever possible you'll want to use the cadence blocks because they're going to give you more control and they're also going to give you mobile responsive options so you're going to want to go with the cadence block now here are the default blocks that come with wordpress and here's some media ones here's some design ones so they're all kind of categorized like this so this is actually drag and drop i can literally drag and drop from here to here so here's the button i can drag and drop it wherever i want so you see right there where it has the blue if i let go that's where it's going to end up so i can let go and here's my button now if i want to see the settings for the button i have to just click in it right there and we have over in the right panel here the settings for this particular block now there's also settings that will appear right above it as you can see here so there's also some hidden in this drop down so if i wanted to remove this block i can click right here it says remove block now there's also keyboard shortcuts here that you might want to remember to be able to work more efficient so i'm going to click on remove block and just like that my block is off the page now if you ever make a mistake don't worry about it because we have an undo right here and when i click on it my button comes right back but you also have a redo option i can click right here and that button goes back away so you don't have to worry about making a mistake next is right here which is the navigator and this is going to be a list of all of the blocks and the entire page structure and you can jump to quickly get to what you want so i've got a row here and then here's a section and it's clicked on uh this advanced heading right here so if i wanted to say get to this button i can click on it obviously or i can click right here which says advanced button and now i'm editing the button so this is very convenient to see where you are so if i wanted to say change this background color that you see here i'll just click anywhere in here and then i'll click on the three lines and i'll choose my row layout and then i've got my settings here on the right and i can go here and change that background color to whatever i want to if i want to make it darker there it's a little darker i can have it be whatever makes sense to me now the next thing to understand in the interface is everything that's kind of scrunched in over here and there's actually a lot to it so right here we have our preview option and i'll go over this later where we can see the layout in tablet and mobile view and will want to do that in order to make sure that it looks great on a mobile device and make those tweaks that we need to make we obviously have our update button here and then we have these icons now you see three here depending on what you have installed in your website it might have more so for example if you have an seo plugin on your website it might add an icon here for the seo settings for a particular page so it might show more now the settings wheel is always going to be with the settings for the block that you're in and then when you click right here where it says page your page settings so this is where you would set your featured image and adjust your permalink if you wanted some basic wordpress settings but right here is the block settings so the block that you're in right now i'm in the row layout i click here and now i'm in the advanced heading and i have those settings here now the only thing that's a little weird is say i click right here and these are my theme settings so the settings the theme allows me to have for this particular page which is the width of the page and if i want to hide the header or the footer all this kind of stuff now this is kind of weird say i want to edit this button and i click here and i don't see my button settings that's because when you click into a block it's not going to automatically change from one of these big settings panels up here so i'd have to click my settings wheel right there to get back into the settings for the block that i'm in now here's some really important settings that i want to show you and that's where this k is and these are the cadence blocks control settings so right here is where you could set up your color palette now if you did choose to go with the cadence theme which is free these colors are coming from the theme and there's many themes that also have an integration with cadence blocks so their color palette will sync back here now if you're not using a supported theme that's okay you can add your custom colors here that you will be able to select throughout your page designs so you can just add your custom color i clicked on that and then you would click on the circle and then choose the color you want or go ahead and put in a color code you can even name this color and if i click this little button right here it's going to make it disappear it's going to delete it so i'll leave these the way they are but here's where some really cool settings are in the interface and these are default settings for all of the cadence blocks so here are the blocks for example the row layout so let me click here and it pulls up some settings that i can have be the default settings whenever i add a new row to my layout so if i wanted to change the size of the gap between the two columns well i can set it right here and it will just be like that by default the collapsible order that's more of a mobile responsive setting if i wanted to change the margin and padding for different devices to just have that uniformity i could do that here as well as the structure settings i have that here as well so you can adjust them click on save and close and you can do that for all of the different blocks that cadence blocks gives you now if you're an agency and you make these websites for clients check this out you see where the little i is well this is access controls so if i don't want my customer to ever be able to adjust the row layout i'll click on the i and then right here i would choose what a user based upon user role is able to do so this way you can keep the integrity and the strength of your layout yet still allow your customer to make minor text changes so i would lock them out of any row layout settings adjustments as well as most of these and i would build out all of my text with the advanced heading and allow them to change the text and you know you can have whatever control works best for what you do and so like i said you might have some additional icons here depending on what tools you have installed on your website unless we got these three little dots right here so this is gonna change the interface here and how how it looks so first of all is our three views right here i like to leave it how it is personally in full screen mode however watch what happens when i do a top toolbar keep an eye on this toolbar when i choose top toolbar what was above my block moved all the way up here so now when i'm in a particular block and before it was showing me that those options right above it you won't get that anymore with this view i personally have tried this and i don't really like it that much i prefer having it right where i am but there might everyone's different you might have your own preferences so if i'm editing this text and i want to change the alignment i don't want to move all the way up here and change it click on the alignment button so that's completely up to you now let's take a look at spotlight mode right here and this basically what it does is it makes everything you're not editing kind of fade away so you see how my font here is very easy to see and everything else is just faded away so if i click here now i see the text really good and everything else is faded away so you may or may not want it this way i i don't like this mode really either so i'm gonna get rid of that top toolbar and i'm gonna get rid of that spotlight mode and what full screen mode is is when you're editing your page it's full screen and if i uncheck this we get that wordpress stuff right back so it's up to you i prefer full screen mode i'm very much used to it right now next we have the visual editor in the code editor so if you are want to see the code that is generating this you click right here it says code editor and there you have it i'll be leaving mine on visual editor right here for sure next it's listing out the plugins that are adding panels so the page settings one is coming from my theme and this cadence blocks control is coming from the cadence blocks plug-in and we have a few other options right here so we have the block manager which is let's just take a look at it so every single block that i'm going to use i can choose to not have them displays an option and so you might want to do this if you know you're going to use the cadence block over a particular block that you don't want to see there reusable blocks i'm going to go over that later if you want to see all keyboard shortcuts you can click right here and it will be a list of all of the various keyboard shortcuts those are good to remember we have a copy all content when i click on this it's going to literally copy all the content of this page and you can literally paste it into a notepad document or into a different website it literally goes side to side it's really cool then we have this preference option right here i never adjust these options but you might want to go through them just to be familiar with them so we have some appearance options some block options right here and then some of the panels these were on the page settings so if i didn't ever want to see the discussion option i can toggle that off and never see it so this replaces the screen options setting that is in other areas of wordpress now we're in step 4 and i want to show you some speed tips to build out better looking websites and having it just be an easier more enjoyable process so there's a couple really cool options that we have the first one i want to go over is coming from the cadence blocks package and i'm so glad that they have this in there it's called copy and paste styles so when i click on say this headline element you see this icon right here and when you hover over it it says copy and paste styles when you click on it it says copy style and it's going to copy the styles not the content just the style so if i wanted to this is using the same block if i wanted to paste the style here i can click right there and choose to paste the styles you see that and it paste the exact style in so i don't have to go through and set it all up again for for this it works great with buttons so i'm going to click right here and this is the advanced button module i'll click here to add a button and you can see it's adding the proper style but let me go ahead and click something here and there we go so i just messed my button up so say i'm tweaking it and i just like screwed my button up it doesn't look right i can click on this button and for buttons it moves the copy and paste style option to right here so i can go there copy my style i'm going to click on this button and i'll click there and i'll paste my style right in so that's how you can do it with buttons uh there's lots of great uses of this especially when you're using or you're setting up the structure for the three c's right so we have the column container and we might want to change that so let me go ahead and click into this and i'm in what's called an info box well i've got my copy and paste style here as well so if i wanted to say change something here so let's say the media setting which is this little icon is a little small let's go ahead and change that so maybe i want that to be a 55 or whatever it is but it would be very tedious to manually do that for everything in this grid right here that be doing it six times well i can go here copy style click right here and then i can go and i can paste my style in just like that and i would just do it for each of these it's very point and click easy so that is one of the things that you can do to really speed up the paste with which you build out your layout is using this copy and paste styles which is why i recommend using the cadence blocks where possible because you can use this copy and paste style and get the mobile responsive options which i'll be showing you here in a moment okay the next cool trick in this step is reusable content so anything that you have on any of your layouts you could make reusable basically you would save it and it saved into this area called reusable content and you can reuse it on any other page on your website and what's nice if you want to make a change to it every place you've linked it to will change so you see this a lot of times when you have a call to action in the footer so here's our footer or right above the footer the end of our page and i wanted the same thing on the bottom of every page so let's go ahead and make this a reusable content section so i'm going to click on it and what i want to do is make sure i'm in the row and i can see down here that i'm in the row and i could go here and i can see that i'm in the row and this is the contents of this row which is a couple headings in a button okay so what i want to do is click on the three dots and there's an option here that says add to reusable blocks i'll go ahead and click on it and now it's gone ahead and created a reusable block what i'd want to do is change the name or set a name i don't want it to be named untitled reusable block so i'll come over here to the right and i'll give it a name that looks good to me footer call to action and so let me go ahead and click on update the page and you can see right here it's saying do you want to save the page as well as this reusable block so i'm updating two things at the same time i'll go ahead and click on save and now you can see my name updated here it says footer call to action so now i will put this same reusable section in a different page entirely so let's go ahead and get out of here and then go into my three c's and when i'm in here i can click on this plus right here and guess what we have this option here that says reusable i'm gonna go ahead and click on it and there it is footer call to action and guess what you get a little preview there on the right so when i click on it it's automatically going to add it to the bottom of the page and there we have it it's all linked together now check this out if i change it on one of these pages like the words the colors anything it's going to change everywhere i've linked it so we have this button that says get started now let's go ahead and change this so a second ago it said get started now i changed it to take action now which is now what it says so watch this you see the update button i've got the little dot i'm going to click on update and it's saying do you want to update the page and as well do you want to update the change you made to this reusable block so i'm going to go ahead and click on save and it's saved now let me go back into the homepage and you're going to see that button text is updated there as well so here i'm on the homepage i'm going to scroll all the way down to the bottom so you can see it and there it is take action now so you can use reusable content like this in very intelligent ways now the last thing that i want to go over is mobile responsiveness it's huge it's very important to go over your page layouts and how would look on a mobile device to make those little tweaks to make sure it looks perfect so we have this container right here it's a row with these two columns let's go ahead and get into those row settings so now i'm in the row settings you can see it's all highlighted and selected first we have our alignment options always want to make sure people know about these alignment options to align the content vertically all right so but what we're looking at right now is the mobile responsive options so throughout the cadence blocks you'll see these so you might see a desktop a tablet and a mobile device right here and there's also option options for text sizes so if i go to not the color settings if i went to actually i'll probably have to click on the text for that anyways so let's go ahead and click on the mobile device and when i do that it changes it to the mobile device view so you can choose how your columns are going to stack on a mobile device so here we have the above each other so you were stacking them but if i wanted it to be side by side or a different kind of orientation i have the option here it just makes sense on this layout for sure for it to stack like that right and then we have our spacing settings between the two columns that have been stacked and then we also have the collapsible order so there's times where you might want the order to be reversed when you have alternating sections we have that here as well as all of our mobile settings we have margin padding a different mobile background so you would probably do this if you have a video background on the desktop and that doesn't work on a mobile you would do something different on the mobile so we have these options right here okay so now let me get back into the desktop view and show you where else you'll see settings so i'm going to click in the advanced text module right here and you can see on some of the settings we're going to see the little icons here as well so if this looks better centered on a mobile i'll click on the little mobile device and then i'll click on centered and then there we have it so you can do that how you want the same thing for the spot the font size you can see it's all locked to mobile like this and as you dig into the various settings you're probably going to come across more that have mobile options so these would be sizes and things of that nature and margins and paddings we have that all right here and that's how you build full pages on a website just using the block builder and you get to take advantage of the better html output i know real techy but you get to take advantage of that for better performance also i find it's more simple because you can't get away from this block builder interface so when you pile on a page builder now you have to become familiar with another interface and then another interface and you're working in all these interfaces it can get a little disjointed and feel weird at times so that's why i think most websites really should just be using the wordpress block builder especially websites that are mostly blogs or e-commerce these websites that don't have a lot of pages to it and you're gonna have to use gutenberg anyway you might as well just use it for your entire website for example e-commerce or a learning management website it just makes sense to do the whole thing using the wordpress blog builder getting all the advantages if you notice nothing needed to be purchased throughout this video except web hosting but of course you need web hosting now there is a pro version of cadence blocks that adds some really useful blocks uh that i i use and there's like a mobile pop-up there's more advanced post grids there's all kinds of things like that that it comes with but you can get away totally fine using the free version and if you chose to use the free cadence theme there's also a pro version of that that has a lot of great features that i end up using myself as well so anyways that is the full tutorial on how to just use wordpress just wordpress it's 2021 just wordpress it's all that you need hey i need your help right now in this video i need you to give it a thumbs up it'll help more people see this video and if you're not subscribed continue consider just hitting that subscribe button and uh becoming a regular subscriber here on the channel and ask any kind of questions that you want down in the comments section thanks for watching this video and i'll see you in the next one

Channel: WPCrafter.com WordPress For Non-Techies

Views: 33,093

Keywords: how to make a website with gutenberg, how to make a website with wordpress, how to make a website with wordpress 2021, how to make a website with wordpress for free, how to make a website with wordpress (free theme), how to make a website with wordpress.org

Id: sOYXRg1m5VQ

Length: 37min 38sec (2258 seconds)

Published: Tue Mar 23 2021