The Block Builder in WordPress is a powerful tool which enables you to visually design your website. However, it can be overwhelming to use, especially for beginners. With the help of this video, you will be able to understand the Block editor completely inside WordPress and use it build your websites the way you like,
⌚ Timestamps ⌚
00:00 – Introduction
00:30 – Page Structure and Title Block
01:44 – Paragraph Block
02:36 – Add Other Blocks
04:11 – Heading Block
04:35 – Delete a Block
05:18 – Block Settings
05:49 – How to Open Post and Block Settings
06:06 – Post Settings
09:23 – Block Settings
10:00 – Block Settings for Paragraph Block
15:33 – Image Block
22:13 – Image Block Floating Bar Options
23:24 – Cover Block
27:17 – Adding Links
29:39 – Image Lighbox
30:27 – Document Overview
35:57 – Button Block
39:09 – Column Block
44:16 – Table Block
46:33 – Embed Block
48:16 – Additional Tips on Using the Block Editor
49:33 – Copy Paste Styles
51:03 – Patterns
54:52 – Blocks Added By Plugins
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
Follow us on Twitter:
https://twitter.com/wpbeginner
Check out our website for more WordPress Tutorials
https://www.wpbeginner.com/
#WPBeginner #WordPress #WordPressTutorial
In today's video I'm going to cover how To use the block editor inside WordPress The block editor has been around for a Long time but millions of people Discover WordPress for the first time And you might be one of those people and You might be wondering how to use the Block editor what is functionality and How do you create beautiful looking Pages and what can you do with the blog Editor so in this video I'm going to Cover everything from start to finish it Might be a little longish video so what You can do do is use the time stamps to Go to a specific section so that you can Find out the information you're looking For a little faster so let's head to my Screen here and simply this is the block Editor you see here and when you create A page or a post on your WordPress Website this is what you'll be greeted With some of the things might look Different the colors the default fonts That you see in the placeholders Depending on the theme you're using I'm Using the WordPress default theme so That change is completely all right now When you start using the block editor For the first time it's complete blank Canvas now you see couple of Placeholders already here you see the Add title and you see type or option to Choose a block now whenever you start uh Adding or creating a post the first line
Which you see here is always the title So if I just click here and type Something so I'll say this is the title This will always become the title of the Page or the post that we are working With just to give you an idea if I save A draft of this and I go to the actual Page preview I've opened up I'll refresh This so you can see here this is the Title which I just added here so when I Make changes here I'll go back to the Actual preview of the page show you how It looks like for the the users you can Understand whatever I'm doing on the Screen and how it works now when you Start out uh you the first title we Already added next thing what you can do Is just start typing something on the Screen here so if I start saying WP Beginner is the best this creates a Default block on your WordPress website Or specifically this post Which is the paragraph block now Understanding the how the blocks Interface or how blocks work is critical To using the block editor and blocks are Actually very simple to understand and Visualize how they work you have a lot Of different blocks available to you and You can stack those blocks connect those Blocks and make them work together like Kind of Lego blocks or Lego blocks that You can just stack on top of each other To create a certain output so in this
Case the default block when we start Typing on the screen is the paragraph Block so this is the paragraph block That is being added on the screen how do You know it's a paragraph block I'll Explain that in a second when we want to Add other types of content on our page Or post we need to add different kinds Of blocks that we can replicate certain Functionality that we have in our head And we want to create the same Functionality right here on the post Itself so how do you create or how do You add new blocks to the page they Technically three different ways to do So the first thing you'll see is there's A plus icon here and there's a plus icon Here and there the third easiest way Which I usually use when you're familiar With the blocks to add blocks on the Screen so when you click this plus Button it will give you this options It'll give a search box it'll show you The most popular block types and it'll Give you an option to browse all now let Me just read out the names of the blocks That you see here the paragraph block Which we already added the heading block The image block Gallery block list block And quote block if I click browse all it Is similar to like me clicking this Button which is also called The Block Inserter so if I click the browse all Option you'll see the toggle menu from
The left opens up and this gives you Option to see all the blocks and add Them to your website and there is a Overwhelmingly large number of blocks But don't worry you don't need to Understand and remember every single Block just the top I say 20% is good Enough if you go here you see the uh few Blocks here are the same ones we saw When we use the add block shortcut so The paragraph block The Heading block The list block the quote block and you Also have the classic block the table Block I'm going to give you a preview of All these blocks and how you can utilize These blocks to create certain looks and Certain pages let's start with the most Basic one The Heading block I've already Added a paragraph block here let's add a Heading here and it will automatically As you click it or you can drag and drop It here as well if you want to add it Somewhere in the middle of existing Blocks you can do that as well so you See saw here I just added drag and drop It and added it so now I have two Different blocks on the screen now this Might happen to you so how do you Actually delete a block what you do Whenever you click a block whenever you Have selected a block you'll see a popup Menu just on top now this is separate or This is unique for different block types So every block will have a unique set of
Options example this is the paragraph Block so they have certain set of Options in the heading block you see the Options are slightly different now if You want to delete a block all you have To do is go to the three dot menu it'll Give you all these options and explain Some of these options you can just click Delete and then that block is deleted Now let me add a heading here so I'll Say this is a heading and now as you see Since I added the heading block before I Typed in it is now a heading block and I Able to add a heading on the page now One more thing or I say one more Important thing you should know about How to use the block editor is the Settings options now when I started the Page you saw that this option or there's Nothing to the right side of the page But when you start using the block Editor for the first time you might see A set of options on the right hand side I purposely did that so I can explain to You how to enable or disable or I say Just toggle the feature on and off if You want to customize your page if you Want to see a full full page preview of Your page so if you go to the top right Hand corner and I'll just highlight that On screen this is the button which Signifies that hey do you want to enable The settings or you want to see the Settings so that you can customize them
So if I click them right now you'll see That you have this kind of options Available on the screen now in this Option you'll have the post Tab and the Blog Tab and the post tab let me talk About the post tab first it deals with All the settings related to the actual Post itself so the URL what's the status And all the different settings about the Post are here so let me cover some of Those first and then I'll explain to you What the block settings are how do we Customize them and what are these Different options available in different Kinds of blocks so in the post block you Have the first option I'll just I say Collapse all of these so you can see Different kinds of options in the Summary tab we have the first few set of Options you have the visibility so if This is a public document you have Published this you can make it public And if you click it you can make it Private or password protected as well You can also change the schedule of the Publish so example I not published this Post but I can change this Behavior if I Change this go here and say I want to Schedule this post to go live at a Certain date then even if I save it it Will not go live it will automatically Become public at a certain date I can Schedule it and you also have the Template options which is a little out
Of the scope of this video but you can Think about this template is the Template of the post which is the single Post then also we can change the url or The slug of the post itself so if I Click here I'll see what is the perm Link of the post so example I added the Title and it automatically pulls the Title in to create perm link but let's Say if you want to change this make it Simple I can just change it here and This will change the title of the post And you can you can see a live preview Here as well and if you click on it it Will actually open up your post in a new Tab with this title so if you want to Change the title of the post uh at any Point of time this is how you do it so You can also stick this to the top of The blog which is again a different Feature and then you have uh if you're Working with authors you can make it Pending review so that some Administrator can actually review it and Publish it this is the post summary Block then you have the revisions block If you make certain revisions to your Block post you'll see a kind of variety Of revisions here and you can see in This older versions going to categories You can assign a category to this post If you have categories this is a brand New website so there are no categories But I can click and add a new category
Here you can select a parent category And assign the category to the post here And I can go to the tags option and do The same thing categories and tags are The default tax Mes in WordPress you can Create more tax memes if you like but These are the default ones then you can Add the featured image here sometimes People think that the featured image has To be added right in the post area but That will usually do duplicate your Featured image this is the right way to Add a featured image so if you have an Image already on your computer all you Have to do is click it and just select It from your computer I'll show you how To do that in latest part of the video But you can add a feature in there then You can also add expert or I say exert Sorry not expert exert of the post here Which is just a shortened word know the First X number of characters of a post Which appears in the let's say a Blog Feed or RSS feed or some other of areas Of website which entices the users to Actually click and read the entire piece So you can add an excerpt here if you Want to and then discussion section you Can allow the comments if you want to Enable comments and allow pingbacks and Trackbacks this is a very less used Feature now but comments are important If you want to enable comments on the Post this will not show up on pages only
On post so you can enable or disable Comments now this is all about the post Settings so in this section I already Mentioned that you have you'll have the Post settings but you'll also have the Block settings now if I click outside This all these blocks here you still see That the block settings is still Persistent but if I click on the Block Settings you'll see it will tell me that Hey no block is selected because this Section will be populated with the Settings of the particular block that I Have actually selected for example if I Go here and select the paragraph block You'll instantly see this section is now Populated with the settings of the Paragraph block and now you can also Double check that here if you click on a Block you can instantly see what kind of Block it is it's usually previewed or Shared here in the top section here so Going back to the options of the Paragraph block let me just explain some Of the options available in the Paragraph block so that you can Understand how you can customize the use Of General basic text that you can add To your website so inside the paragraph Block you see the default options you Can see here are the color the Typography and dimensions and advanced Inside the color options you can change The color of the text so if I click here
On text you see there have some Pre-built uh color or I say color Palette given to you which is ALS also Called a color style so if I let's say Click this green color now the text gets This color now I can change the Background color as well because Obviously this is not the best contrast To see the uh text on so what I'll do is Instead of clicking uh these default Options I'll go and click the color Options here and pick a dark gray Background to add here and this will Give the text a little bit of contrast Now one great feature about WordPress is That if you uh let's say choose a color Combination that doesn't have enough Contrast it'll be hard to read WordPress Will give you a automatic warning that This color combination may be hard to Read so this is a great set of warnings That you can inst understand and then Just if you change the contrast to a Decent level then that warning Automatically goes away so this is how You change the background color and the Text color by just clicking the options In the block and if you notice that Apart from these options you also have a Three dotted menu which I'll talk about When we come to the typography options So in the typography options you have uh Some predefined sizes that you can Instantly switch between so if I click
The M for medium you have the medium Applied if I click the L the large Setting will be applied and if I want to Customize or if you want to customize This specifically to let's say Precision With Precision you can click the custom Size option here and then change this to Something that you like completely up to You and if you go to the typography Options in three dotted menu here you'll Notice something interesting many of the Typography settings are not hidden but I Say under a submenu so if you see if you Want to change the font family or Appearance size or line height or letter Spacing or decoration or some other Options then all you have to do is just Go to the thre doted menu first so let's Say I go to the font family and now I Have the option of choosing a different Font now these are the pre-built Different fonts available to us but WordPress is possibly working on a Solution where you can upload Google Fonts directly to WordPress so you can Actually add more and more fonts Directly to your website which will be Easy to do so let's say if I choose Cardo so I can you can instantly see the Different font applied here if I choose Enter the different font is applied here If I do this you can see it here and Instantly the changes are reflected now One interesting thing about is whatever
Setting you choose will have a check Mark here and it will be added to the Typography section and if you reset it You can always go back and reset it so Example if I click the line height you See the line height is now different I Can customize this and once I am happy Or not happy I can go back and just Uncheck it so it will go back and be Reset to the default options so this is One S say hidden thing that many people Might miss when starting out customizing Their WordPress website inside the Dimensions options you have margins and Paddings so you want to add a customs Amount of spacing uh around the text Using margins and paddings you can add It here so if I add a little bit of Padding here you can see on the top and Bottom I can instantly set a custom Space around this section and now this Is a section which has a little more Space around it again this is completely Up to you if you want to add it what I'll do is just go back and remove it Just to make it default and in the Advanced section you have the HTML Anchor you can add additional CSS Classes or name the block a certain way Now this is the section where I covered Everything about the block settings for The paragraph block every block that we Have has two sets of options so one set Of options is visible here but the
Second set of options is visible here Now you see in this section you have all These options now some of these options Will not affect the block but might Change the block or move the order or do Something else for example if I want to Take this text and I want to center it Or Justify the text orientation then I Can just click here and it'll give me an Option to align the text to the left the Center or the right and this set of Settings is not available here so come Coming to uh so there's a distinction Between both these settings you have to Understand and I say the more you Practice it the more you use it it will Become very easy to remember Subconsciously that hey this set of Setting is actually in this section of This area I can instantly go there so You can also see here that I can Actually change some of the settings That are also here so if I go to the Text decoration options you can probably Just bow the text here which you can Also do from here and you can make it Italic as well so some settings do Overlap but not every settings overlap Here and of course if you click the uh More options here you can see all the Other options uh which is maybe if all Were populated to the menu it will Become too large so there is a set of Options in the uh toggle area as well
And if you click the three dotted menu This will bring you to the regular Options which almost every block will Have because this is not related to the Uh visual Identity or visual style of The block but more has to do with how You want to customize your page you want To delete a block duplicate a block and All those settings so we've covered Basics about the first block which is The most important or usually I say most Used block the paragraph block you also Have the heading block and I showed you You have tons of different blocks so let Me show you an alternate way to add Blocks to your page and also different Set of settings that WordPress now Supports on your website so let's talk About the next important block which is Typically something that you will use a Lot on your WordPress website which is The image block so as I was Demonstrating earlier if you uh click or If you have not selected any block on The page you'll see this uh block Edition option here and also this option But there's a third way which is in my Opinion the fastest way and if you get The hang of it you'll be very very quick When uh adding blocks to your page so All you have to do is make sure that you Are in a blank section and your cursor Is highlighted and instead of typing Regular text which will start or create
A default paragraph block you have to Start with a forward slash to choose any Set of blocks that you can search for so If I click forward slash in my keyboard It actually initiates a search so if I Type in the name of the block that I Want to add here for example image then It will automatically search for an Image block you can see image featured Image cover block and there's so many Options here here but we're interested In the image block so let's click the Image block and that gives an option to Either upload an image or choose the Media library or insert from a URL so What I'll do is I'll just choose the Media library and doesn't have an image Right now so I'll just drag one from my Computer and add it here and instantly You see uh you have the media upload Options you can do a lot of things here But we can do the same things most of The things in the block editor as well So I'll just show you how to do that so If I add an image here now again there's Two sets of options appear inside the Block options when the image is selected You have the block sections and now Inside the block sections too you have Two sets of options and one has to do With the settings and one has to do with The appearance which is called or the Name in WordPress is commonly used Styles and then you have the set of
Options here which we'll be talking About so I'll go a little in depth with Images because images is very useful a Lot of people want to use it and then We'll quickly skim through some other Blocks so that you can know that oh this Is how you do stuff this is how you add Certain things to your website so inside The image block we'll go with the block Settings first the first side is the Block and we'll talk about the settings The first thing you can do is add an Alterna text now this is important for Accessibility and SEO so you should be Doing this with all images so I'll say Man on Hilltop that's one uh alternate Text you can use then you change the Aspect ratio here so if I change the Aspect ratio you can see a different Kind of uh image being used in different Aspect ratios so that's something you You can customize here so if you want to Have a certain kind of block style you Can use it let's stick with the original For now just example and you can also Customize it based on what you want as a Custom Dimensions so you can make the Width and height a certain way and then You can choose the resolution of this as Well so you can have a full size image Thumbnail or medium so sometimes you'll Have divisions between images or what When sometimes you want to use a full Size image sometime sometimes you don't
So then this is how you do it so in the Setting side you just have the basic Options but if you cck the three do menu Once again you can reset some of the Settings reset all of them enable or Disable some of these settings and all The good stuff so make sure whenever you Are looking at a setting of The Block Also check the three doted menu because You might some find some hidden gems There as well inside the Styles option It all has to do with how you want the Look and the Cosmetic feel or say the Appearance of the image to be so right Now we have two default Styles built in So right now you see the image has Rectangular Corners which is typical for Any image but the new trend or I say a Recent Trend in the market or I say with Design is rounded edges if you see your Phone most icons you see on the phone Will be rounded so if you want to give a Rounded appeal to your images just have To click the rounded option and this Will give it a rounded appeal so it Looks very nice inside the filters this Was a more recent update I said a couple Of years ago where Doone filters were Introduced what you can do is similar to How you can add filters on your images On Instagram you can add a certain look To your images inside WordPress so if I Click the duon option have a few Different options to choose from for
Example if I choose this option so give It a kind of a tint to my image and you Can what you can do is you can since It's is I a standard filter here you can Apply this to all the images on your Website we will give you uh completely As say uniform look to all your images And your entire website so if I add this Add this I'll just quickly demonstrate How you can see different kinds of uh Filters exist here so I'll just keep This one for now and once again uh we Can go to the three dotted menu and you Can reset it if you don't want to inside The borders and shadows you can add a Border and a shadow to your image as Well and once again in the three dotted Menu you have the radius option as well In the radius option you can customize How rounded do you want the edges to be So if I start customizing it here Instantly you see if it's zero this the Rectangle images or the images edges are Completely rectangular but if I Customize it slightly you can see now we Have a slightly rounded edges so you can Actually customize it here or if you Want to uh unlink it and have different Edges differently around it you can do That as well for example if I say if I Want to do this just the top right being Rounded rest uh not being rounded we can Actually do that as well it doesn't look Good so I'll just click this and enable
Uh say uncheck this and just make Everything 16 because I think that looks Uh much better so let's stick with that And we link that together and in the Border again we have similar options First we have to choose a border color Because there's no color you won't see The border so let's say if I add this Orange color here and of course you can Click here and choose a different say Color style as well that's completely up To you I'm just giving a demonstration Then we can just link it and change the Border style or colors and now we have a Border so if I now go here and I say Clear this now you see the duone filter Being applied or if I remove the duone Filter you'll see the real colors of the Border so the filters are I say the Border that we apply are affected by the Duon filter so this is a very thick Border so I'll just change this to Something a little more Nuanced something like this and if you Want to add a shadow here as well I Believe it is possible as well you just Have to go into the three doted menu and Enable it and then you can have some Preset styles to how you want the drop Shadow to be so if I click this or let's Try something else let's try this one I Think that looks good even this one Should look good and I think the bottom Can be removed in this case so we'll
Just remove the border and now look at This it looks beautiful as an image on The screen with a little bit of Shadow And rounded edges and all of this is Possible right inside WordPress so these Were the block options for images but You have some other options here as well So let's quickly go through all these Options so I have the first option which Is alignment again similar to how we Aligned the text you can align images Differently to your website then you Also have the Doone filters appearing Here and here you you can actually Customize the Deon filter so if I just Click this button here I can actually Choose a color for my Deon filter so Let's say if I want to add a greenish Tint and then the second color I can Choose to be something adjacent to Green Let's say Yellow and it's way too strong so let's Just dial it down a bit and we'll just Do this and oops I'm not a great Designer so just giving an idea that you Can actually completely customize a Shadow color and the highlights colors And this will completely change the look Of your images since that didn't do a Very good job I'll just clear it and Then you can also add a link here to the Image so if you someone clicks on a link Or somebody clicks on image it can Actually take them to a certain page you
Can also crop images this is very useful If you want to crop your images you can Actually do this right here and you can Apply and cancel if you don't like it And you also can add captions or text Over images this is a very useful Feature so let's say if I click this Option here it actually becomes a cover Block and this is the next block I was Going to cover every cover anyway so This is the block which allows you to Have images and then add text on top of Your images so that you can have a nice Little title appearing on then with the Background appearing as a text so I say Uh let's say if I add here feel nature Let's say if I add this title here and I If you didn't have all these things now This is a good look for a cover block And similar to how we have have settings For blocks we have settings for the Cover block as well so by the way uh you Don't have to convert images to uh cover Blocks you can just add the cover block Separately as well so let me first Demonstrate that to you once again I'll Click on an empty area with the cursor Blinking I'll type forward slash I'll Type cover and I'll click cover and now I can go to the media library and I can Add another image let's try a different One and I'll choose this and now we have The cover block available for this image So I'll say uh nature
Heels so now I have the cover block Added here and you'll notice something Interesting if you click on the text Inside the cover block it actually is Just a paragraph block so you have the Same options available to change the Background color and change the text Even change the size in and not Considering the fact that it's inside a Cover block so that's pretty cool if you Click the image area then you come to The cover block where you can change the Images now couple of things which are Little different with images and cover Blocks is you have few customizable Options so you have the content width And Alignment parts then you have the Fixed background option which gives it a Parallax effect so example if I click Here now if I scroll you'll see the Image stays in position and as I scroll In it just Scrolls past so it's called The paralex effect it's pretty cool some On some images it looks good sometimes It's not so you'll have to make and Choose where you want to add this and You can also add a point of focus by Using this option here so let's say for Example I want people to focus on the Sun so I just drag it like this and I Can change the focal area around to make Sure that I can add the image Appropriately so depending on how wide Your image is how big of a resolution
You have with the images you might be Able to move things around quite a lot But this is how you use a cover block to Actually customize it and once again you Have percentage options for the same if You want to specify specific percentage AG let's say rule of third or something Like this you can actually use Percentage you can add all text here as Well and the advanced tabs you have HTML Anchor and CSS classes similar to images And a styled option you will see the Same options you can change the styles For the text text Styles heading Styles And overlay so if I change the overlay And I can go to gradient as well I can Add some gradient overlays as well then You have the overlay opacity if I change The overlay opacity to 100 you'll see it Completely becomes like a regular block So this is where you customize how Strong of a overlay effect you want so Let's say for example you have white Text and you go want to go here and you Want to ensure that a black overlay is Added so once you add a black overlay Then you can decide how dark you want The image to be so that the text Actually shines through so this is Something you can do and in the same Option you can go to the gradient route And add a gradient radial gradient you Have all these options so plenty of Options to design the perfect looking as
A cover block uh of your choice and rest Of the things we already covered we have The duone filters we have the typography Size the padding margins spacing aspect Ratio for Imaging uh border radius and Also the Border if you want to add a Border so this is all the basic stuff That you can do with the cover block so We've covered the paragraph block The Heading block the image block the cover Block now let's talk about something Very very basic that everyone needs to Do on the website is which is adding a Link so let's say for example I were Write I was writing an article on how to Learn WordPress so I can probably write On my website the uh best way to learn WordPress is by going to WP beginner Docomomo here and refresh the post the Wagner.com is not a link it's just a Piece of text so I cannot click or users Cannot click it to actually go to the Website so how do we add those links Here let me just give you a quick Demonstration so inside the paragraph All you have to do is select the text or Piece of text that you want to add a Link to and then just hover over these Options and you will have the link Option you can also use the keyboard Shortcut control K which is faster in my Opinion you can click this button here And you can type either the name of an
Internal post so you see right now There's a sample post already on the Website it's already showing the option Of L link into to internally but if I Want to add the title or I say type the URL I can actually do this here so I'll Just type in WP beginner Doc and now I Can just click this button submit and it Will add this link here now if I click The options again to edit once again if I go here you'll notice once I'm Clicking on the link you a popup menu Opens here I can copy the URL I can uh Remove the link or I can edit the link And inside the editing options you can Can also make it open in a new tab and Mark as no follow as well if you want to Once I click save and save the draft now If I go back you'll notice now this is Highlighted or underline and if I hover Over it the Highline or link goes over Just typical sign for link and since I Set up to or this to open a new tab if I Click on this actually take uh open a New tab which opens up W beginner so This is how you add links to any text Piece of text and the same thing can Apply to images as well if I go here and Click this you'll see not in the cover Block but in the image block so I just Probably delete this and just give you An example of an image block once again So I'll just forward image and if you Choose the same image we had for the
First uh example now you see there's Another option here to add a link to the Entire image so you can link to the Image file link to attachment page or You can expand on link or you can Actually customize or uh as say send Users to a specific URL as well so for Example if I click expand on link now if I save draft and if I refresh this page You'll notice if I click on the link it Gives you a nice light box effect this Is a very cool thing it's a recent Addition to WordPress and this adds a Very nice beautiful animation to website As well so you can see this icon already Displayed but what you can also do is Just customize this link to actually Take users to any other page as well so Those are the kind of options you can Customize on your WordPress website when It comes to blocks so so now that you Know the basics of blocks how to use Them and what kind of blocks exist let Me give you some some examples on how You can organize your page better Because right now on this post we just Have a title a couple of pieces of text And couple of images but on typical long Page on a website you'll have tons and Tons of elements and it can become Overwhelming or confusing to understand Where the specific areas are done and How the page is organized so I'll give You a couple of ideas on how to First
Overview the document and also organize Things better on your website using a Couple of different ways so on the PO on The page itself where you're customizing This or the post that you're customizing You'll see this interesting option here And this is a very powerful feature in My opinion it's called the document Overview so if I click this option You'll see a list of all the elements That are added to the page right you can See paragraph heading cover paragraph Now to demonstrate this the entire Feature in a I said relevant way and a More powerful way first I'll close this And I'll do something interesting so we Have this title here we have a heading Here let me add a few different headings To the page and then I'll explain to you How uh this works so what I'll do is I'll just uh type it in uh another Heading and I'll say this is the third Heading and what I'll do is I'll click The heading block and just change the Heading type to a uh four and the next Line I'll add is again a heading block And I'll type this is the Second heading and once again I'll click On this and I'll change it to an Edge3 now let's go back to the document Overview and I'll explain what the Significance of this is how you can Utilize the document overview to not Only understand your page but also
Organize your page so I'll go here and Inside the document overview you can see The paragraph block and if you click on A block WordPress will instantly take You to that section instantly so if I Click the image we are on the image if I Click the cover block I'm on the cover Block if I click the heading we can Quickly navigate the post here and it Give you a nice uh say heral view of uh Or say the chronological view of what The elements or what kind of blocks You've added to the page so now you can See this is a heading the second block Or second block I added was this is the Third heading and this is static heading Now obviously I added this uh Intentionally out of order so I can can Demonstrate the next important feature Inside document overview which is Organizing your blocks and moving them Around now there are a couple of ways of Doing this if you click on a block and You see all the settings here you'll Observe this six dotted menu and if you Hover your mouse over if I zoom on the Screen you might be able to see but my Mouse might disappear but if you see This is what I'm trying to explain to You the six dot menu is called drag and This is what you can do you can just Click and hold on it and just drag Things around like This and this is how you can reorder any
Of the blocks and this works with Everything so if I hover with this you See it also has the drag option if I go Here it also has the drag option so Every single block will have the drag Option which you can use to drag things Around and reorder them so if I go back And say say do this once Again and you'll see a nice blue Highlight which will represent where you Are actually placing the elements you Also have another option which is just The arrows next to it So if the arrow says move up and move Down and this is a I say more easier way If you were just want to move one Element up or down so you click here and It takes it up and you click down and it Takes it down and the same thing you can See reflected being here I click it here Click it here now my favorite way of Organizing things is the document Overview the same things we were doing Here you can also do it inside the Document overview and it's much faster Because you can see the entire page Structure here so I'll give you an Example if I take the second heading Here click and drag it and I can just Take it around anywhere on the page I Can quickly drag it just below the Paragraph block and I can just do the Same thing once again and bring it here So this is how easy it is to quickly
Move things around and just Place Anything anywhere on the screen and this Is just one option of the document Overview we are currently working with The list view option we also have the Outline option and the outline option is I say better to understand the structure Of the page and this this is more for Organization so if I go to the outline You'll see now what does this post have So any kind of text based elements that You added the hierarchy of those text uh Based uh text will be shown here inside The outline block and that's why I added A couple of um blocks here just to give This idea and representation here so you See the title is the topmost in the Hierarchy then the H2 then the H3 then The H4 you can't move things around even Though it does look like it but you Can't move things around you can Definitely move things around here in The outline block you also see number of Characters youve added number of words And how much time approximately it will Take to read this block post by a user So this is all useful information where You can use the list view to organize Things and do all sorts of nice stuff Now this is just the basics right we Covered most of the things let me just Cover some other additional blocks and What you can do with it so you have a Nice understanding of what is possible
Or what kind of blocks we can add to Just do anything on a site right for Example if I go here one of the common Things that you need to add or not need To add but at least common things on Website is buttons so you have a Dedicated button block to just do that So if I just type forward slash once Again and I type B T then you can see The buttons block appear here and this Will instantly if I click on it Instantly add a button to the page and Once again we have a lot of different Options here you can quick and quickly Find out what kind of uh options Available are here and inside the button Options in the block options you have The width settings if I make it 75 you Can see it becomes huge 100% covers the Entire page 50% covers and then you can Also justify it or Center or make it Full WID Max WID that's completely up to You all these options are exist so I can Justify it in the center and vertical Alignment so all everything can be Customized in the Styles option is where You can change the look of the button so Let's me just add something here I'll Say click me and now this is the basic Button that we have created on the site In a couple of seconds now if I click This button and go to the style options I can choose different styles pre-built Or I can customize them from scratch so
If I see you have the fill options which Just gives you a demonstration here That's completely filled and an outline Is basically an outline so you can Choose what kind of uh I say option you Want and then the color options you can Change the background colors and the Text once again you have the pre-built Uh theme or let's say predefined color Styles but you can go and choose uh Different colors you like for example if I go here and choose a nice bright green Color of course I'll change the text Color to black as well and now we have Much more vibrant button appearing here On the screen and much more looks much More enticing in my opinion going to the Other options we again have the same Options that we can change with Typography you can make it large so the Text will become large you can customize It and again we've already already Covered all these options so you have The same options available here as well Then you have the padding margin borders Everything everything we have already Covered so if I make it rounded you can See the Buton becomes rounded so you can See all the different elements or all The different blocks we add to the page Have very kind of similar functionality Whenever it comes to text even if it the Text is inside a button even if the text Is on a cover block it uses the same set
Of settings you can change the font Family the size the colors so that's Completely once you understand it it's Easy to replicate and just do it Multiple times so that's how you do it Now about adding links to what that's The most important part so if again if I Come here button also have the how menu Which has the link option and once again I can type in let's say WP Beginner Doc and we'll instantly add This link here and if I want to make it Open a new tab once again I can go here Open a new tab save and once it's done Let's save the post we'll go back Refresh I'll just show you how this Beautiful button looks on the page once Again if I click it'll take me to wb.com So this is how you customize and use the Blocks and the button block inside your WordPress website so let's talk about a Couple of additional important blocks That are very important for any kind of Design work and then I'll go into some Other interesting Concepts when it comes To blocks and I'll show you some Powerful features that will help you I Say use the block editor faster so the First uh I say block that I want to Cover is the column Block it's Absolutely important and columns used to Be a big problem when dealing with the Classic editor the old version of WordPress so it's much much easier when
It comes to uh the block editor so all You have to do to get started is type The forward slash once again and you can Again you can go to the option here I Just prefer to use the keyboard so I Type c you see the columns option come Here so if I type or click the columns You'll have some predefined columns you Can have two column layout three column Layout and know different variations of That as well let's start with a 50/50 Equal split columns and what this does Is create two blocks side by side so you See two placeholders for blocks side by Side and I can add more than one block Side by side so let's say for example if I add click here I can add a block here So I'll add the image block so I'll Click image and I'll say media library I'll just upload a new image here And let's select the image and then we Can just leave it here and on the side I'll just add a paragraph block and Inside the paragraph block now I can Describe the image so I can say or I can Just do anything right sometimes uh the Layout of images or text on the screen Is you have the image starting out and Then you can add text to the site so It's just way to customize things and if I click around and customize the Settings here if I just I'm able to Click on the actual column layout and Once again this is where the uh the
Document overview is very helpful so if You not able to actually see where to Click to find the exact column you can Always click here and come to the column Section and now let's say if you want to Change the number of columns you can Always go here and change it 3 4 5 six So this is also nice so let's say a Common use case of this would be hey These are the services Pro we provide in Four different sections where you have One image and then text just below it so This is how you do it and also has a Option of stacking at mobile so let's Say you have four uh side by side side These kind of cover blocks or image Blocks and mobile phone obviously you Don't have the width so you just stack Them one on top of each other so that Option already exists and you can also Go to the Styles option change the Colors the background so let's say for The entire section you want a dark gray Background this is completely possible And then you have typography and other Options as well so inside the when Inside the columns as well you have Complete control over what you are Trying to do right so these are Interesting things that you can do and Then of course you have the options here To change alignment vertical alignment And some other options here as well and Inside again you can just type hey
Beautiful Gray M mountains oops [Music] Mountains now one thing you might notice That um ideally the best case scenario Would be that you want to add the Beautiful gray mountains in the center Of the section now you can go into the Typography the dimensions and add Margins and paddings but that's usually A little Advanced we things this brings Me to another nice very useful block Which I'll just show you how to use so I'll just add the block to an empty area First and the block is called the spacer Block and that as the name suggest it's Used to create space so if I just type In Spacer if I click this it just adds a Blank area and you can customize this How much you like based on how much Spacing you want to create and once Again using the document overw I'll take The spacer and we just want the spacer To be above this paragraph because I Want just the paragraph to be pushed Down so I'll just click and drag it here And now I can just push the text around A little bit to make sure it's in the Middle so this is one I say easy way to Space things around and this works the Same way inside in between blocks as Well so if I take the spacer block and Just drag it somewhere uh about the
Buttons and the image here let's say Here you can see instantly the Difference with or spacing between the Image and the button is increased so Let's bring it back to the paragraph Block here and now we have this let's Save draft and go back and refresh and See now the spacing has been created so These are the some of the common blocks That we utilize inside WordPress and Once again the list of blocks is quite Extensive but now you understand where To find any kind of options for any kind Of blocks and usually they have a SIM Similar combination of all the Properties that we've already discussed So if I just exit and if I go here you Can see paragraph heading list quotes Code all these blocks kind of make sense What you are going to do now I want to Cover couple of additional blocks before We proceed to the some Advanced things The first block I want to cover is the Table block which is very very important Um tables are usually quite useful when You're are presenting tabary information So you have a built-in table block Inside WordPress so if you click the Table option you can say hey how many Rows do you want how many columns do you Want so let's say I want four columns or Yeah four columns and I need five rows So I can create a table instantly and Then you have fixed with table cells
Header section so you have headers here And you have the footer as well so you Have quite a flexible table when it Comes to let's say presenting any Information so if you have let's say Presenting some accounts you want to Have some total here you can enable the Footer and you can have the fixed cells Also so that yeah the width of the cells Is entirely fixed and inside the options Here you can have the stripes options as Well so if you want uh the the visual Identity or visual style to be striped You can add that once again you have the Color and background options similar to What we've already seen so if I go here And I Say uh cost I say hey Revenue and I Say yeah kex or something like this just Regular terms now I can just add numbers Here this cost was 45 the revenue was 195 oops whatever and then I can add Something like this so you can Completely customize uh the table and The relevant settings so if I go here Now you see the block width is fixed and You can go back to the table options and Click the edit table and then you can Insert rows as well delete rows insert Columns and customize everything so it's Not like that you created a table you Want to customize it you have to go back And do things so it's it's worthwhile to
Also double check what options are Available inside so if I just do this Let's say so Center Line columns and I Just to say align Center I can change Some of the down the table so this is How easy it is to add tables on your Site so uh if I go back into the block Options we have lot of different options We have embeds we have themes but it's Not possible for me to cover every kind Of I say block so I'll just cover maybe One more block for that what I'll do is I'll just go to YouTube I'll search for w beginner and This will bring us to our Channel I'm Covering uh how to embed things on WordPress so let's say if I go to the Video section I want to see uh let's say This uh this post or this video and if I Copy the link of uh this YouTube video Typically in the older versions of WordPress it was quite hard or I say you Needed the embed code to embed something On WordPress but with the recent updates With the block editor specifically all This has become quite easy to do all you Have to do usually is if you have like Any social media platforms uh let's say Content needs to be embedded so let's Say you have a Content or video from YouTube let's say you have a Twitter Feed or a said a set of tweets or maybe Just a Twitter thread and an Instagram Reel or any other social media platform
All you have to do is copy the link from The social media platform itself and Just paste it and once you paste it Automatically WordPress recognizes what Kind of content you're posting and Changes the block to a embed block for That particular section or particular Social media so if I click here once Again I'll just give you an example of If you go to the theme sections and just Scroll past it you'll find the embeds Option so inside the embeds all these Social medias are automatically Recognized by WordPress Twitter YouTube WordPress SoundCloud Spotify flicker Vimeo Animoto and so many different Others so if you just copy and paste a Tik Tok link and paste it here it'll Automatically just give you the preview Here Reddit Pocket Cast Spotify so even Audio content can be pasted like this so This is how all of this works inside WordPress now I want to cover one more Important feature but before that let me Just talk about some document settings That might help you navigate uh WordPress and the I'd say the block Editor faster So if You observe the settings option Which are the button I talked about it Again has a set of three de to options Just next to it so if you click on it You'll see you have the top toolbar and Some other options now you don't need to
Understand or remember or say memorize Any of this but the top toolbar is a Very useful option if I if I said my Personal opinion and what this does is Instead of the hover options with every Single post it transfer the options here Which in my opinion is little cleaner Way to work and I when I'm editing WordPress or editing my site I usually Keep it this way it just makes my life Easier the second set of options that Might be very helpful is learning the Keyboard shortcuts and if you click on This you can go to the keyboard Shortcuts menu here which again has its Own keyboard shortcut which is shift alt H at least on a Windows machine you can Click on it this will bring you all the Keyboard shortcuts on how to make Changes how to delete how to move how to Remove links and this can just make your Life easier of course the more you Practice just just try to see whatever Steps take you time to do on WordPress Website maybe there's a keyboard Shortcut that can help you out so now You know how to use tons of blocks Inside WordPress how to customize them What's the visual Styles you can use all The different options you can customize There's a couple of additional things I Want to talk about inside WordPress Which will make your life easier Especially when creating a lot of
Content so let me demonstrate or give You a practical example of uh the first Option so I customize this button right I just change the text to buy my book so In a hypothetical scenario let's say You're selling a product selling a book And you created this button to actually Just make this call to action where you Link people to let's say purchase your Book somewhere else so let's say you Want to add this on different areas of Your website so you start a new post and You say hey okay this is a blank new Post I want to do the same thing right So I can go and I'll just create a new Button I'll go to button and I'll say uh Buy the book right because that's what It said I say buy my book that was it And if I go here I can go to the Styles And I can change the size I can change The color once again and let's find the Right color once again and we had this Now I did a decent job but still you Might see some differences between the Styles of this button and that button Which brings me to a very useful style Or option inside WordPress which is copy Paste Styles so if I click here on the Three dotted menu just next to it you'll See an option called copy Styles if I Copy this Styles you'll see a notice Here if I go here and do this and paste Styles now you see all the Styles have Now been applied to this partner it's a
Very useful feature inside WordPress This is the first set of features I want To talk about the second feature in my Opinion is even more important and it Doesn't work with every block uh at the Moment for example you can't do that With button blocks for some reason but Some other blocks support it for example Let's say I take this table block if I Take this table block and I want to add The same table in multiple areas of of My website so now this will be a little Problematic because customizing a button Is okay but creating a table from Scratch is quite a time consuming task So in this case WordPress is a very neat Feature called patterns and patterns is Think of it as a global block so for Example if I create this table I can Just save this as a template and just Reuse it anywhere on my site and I'll Just demonstrate how this works so I'll Click the block here and once again I'll Go to the three dotted menu here and you See you have this option called create Pattern if I click create pattern you'll Have this option here you can say uh Business expense table you can also have A category so you can say Table that's the thing and keep this Synced and this I'll explain what this Is later I'll create this pattern Another pattern is created now you see It has a different look to it when you
Actually move things around so if if I Go here and I have refreshed this page Let's save it dropped First and now I come here let say I Click outside now I can just insert that Uh pattern here so if I just search for Let's hope that's right it comes up as a New block entry so if I just go here Similar to how I search for blocks I can Just search for that particular pattern Here as well if I click and do this now Instantly it is now done here Now what this does is this allows me to Have the same information available in Multiple areas of my website and you can See if I click here and I say edit Original this brings me to a different Interface Al together so if I click this Button and I say 22 and I update the Post if I Save and I can just go back to the page Oops logged out accidentally oops Right so after logging in you can see That now this has this here now if I go Back here if I save the draft here if I Refresh the page and I come here now you See the change I made there is also Available here it's very useful feature So this makes this entire table Completely Global throughout the website So if you change the original everywhere This is will be changed now you can Override this feature for example let's Say you just like the look of this uh
I say the table and you want to have the Look of the table but not the content of The table being synced around so in that Case what you can do is I'll just create A new table just for Example you can click this and you can Do the same things again you just have To do this once and once you customize Uh some of the stripes options and you Go and say headers and you can do XYZ Something like this now what you can do Is if you save it as a pattern all you Have to do is change this that this Pattern is not sync and we did a recent Video about this how you can change this And then what what will happen is the Layout of the the table will be uh saved In your WordPress Library you can paste It anywhere but the content will be Overridden and it will not be synced Across all locations on a side now this Is a very powerful feature it might be Complicated to understand in the first Go but a very very useful feature which Saves you a lot of time when especially Creating a lot of different pages and This is one part I said the both most Basics have been covered in uh this Video right now but I want to just add One more thing or I say a couple more Things that will be very very valuable To you is that you can have uh different Kind of blocks added by different Plugins and also by different I'd say
Different plugins Al together which add A lot of blocks on your site let me give You a demonstration so right now we have A form or a installed on site called WB Forms it helps you create forms on the Site so what I'll do is I'll just Quickly demonstrate uh this process to You so that I can understand how it Works so what I'll do is just create a New form in just a second on my WordPress website and let's go and I'll Just do This and I'll just name this test form And I'll just click simple contact form And this is not a video about WP forms But I'm giving an idea that you can Actually create a form on the site very Easily so let's say if you already had a Form on your site if I refresh this post Okay let's save it to as dra refresh the Post now this WP forms plugin that has Installed on site has its own set of Blocks that it's added so now if I Search for WP forms you'll see a new Plugin or as a new block being visible And inside this you can select from any Of the forms that you have created you See I created the test form very poor Capitalization but still if I now open This now you have a beautiful form added To your WordPress website easily so There are lot of plugins that add Different SE sets of blogs to your Website or different set of I say uh
Blocks to your site which add Functionality like all Inu will add SE Related features you can have add an FAQ Block you can add a Google Map listing Block a small business business Information block and we've done many Videos about this so just keep your eyes Open for different kinds of blocks Available and some of these plugins or I Say some plugins are exclusively for Design related options for example There's a popular uh block Builder Called Spectra so if you go to Spectra On Spectra on wordpress's website let's Just do It so in this plugin you see you can Just go to this and it just adds a new Set of blocks which can help you design Your page better so if I go to here you Can see powerful set of features and This is not the only plugin that does This you have lot of different plugins That add a certain set of functionality So the idea being that you're not Limited to the default blocks inside WordPress you also have additional Functionality coming in from plugins and You can add dedicated plugins to your Site which will add a new set of plugins Or not a new set of blocks which will Help you customize and design your Website better all right so this was a Simple I say short and sweet video on How to use the blocket and WordPress
Hopefully you've gotten a lot of clarity And understood a lot of things if you Have any questions leave it in the Comments otherwise like follow share Subscribe all that good stuff you're Watching yaj from double beginner I'll Catch you in the next video very very Soon take care
