Transcripts
1. Gutenberg Introduction Video: Hi and welcome to my course in which I am going to
teach you how you can use WordPress Gutenberg editor to create the pages and
posts for your website. Gutenberg block editor makes
it very simple and easy to create and format the pages
by using the block system. In this course, you will learn all the main features
that you have to use while creating
pages on WordPress without using any
separate page builder. We will learn how we can
insert different blocks getter available in Gutenberg editor and how we can
customize those blocks. So stay tuned. In the next lecture, I will give you a brief overview of the interface of
Gutenberg editor.
2. Gutenberg Interface Overview : Now we're going to get started when Gutenberg block editor. The first thing that
we're going to do is get a brief overview of
Gutenberg interface. On the top left corner, we have this louvered
and width plus icon. This burden is to add
blocks inside our website. By clicking on this icon, we can see all the blocks
that are available to use. And also the veterans that are pre-built templates
given by Gutenberg. These templates are also
created by using these blocks. Next is we have
option of switching between object mode
and select mode. Select mode is very
useful when we want to simply select an item and
move it or reposition it. Then we have the option
of undo and redo. Here we can see that
your tails of our pH means how many characters,
words, headings, or paragraphs or
blocks are included in the page and also the
document outline of the page. Now this is the list view, which is very important part
of our Gutenberg editor. Here we can see the complete
structure of our blocks. And also the sequence is currently we have
only one block added, which is paragraph block. So it's showing only one block. In next lectures, we're
going to add more blocks. Then we will see how
the ListView becomes useful to see the sequences
and structures of the blocks. Next we have is saved draft
option to save our work. And then we have
the preview option to open the Fernando
of RPGN new tab. Or we can see how our page looks like on
different device sizes, which is mobile and tablet. Then we have the
Settings option where we can see the page setting
and the block setting. In bade settings, we have some options like
stewardess and visibility, perma links, feature
image and discussions, and also the page attributes. And in block, we have the
sending of our selected block. These settings will be different for different types of blocks. Like forebear graph look, we have font size, line-height, color,
background color. These settings will be different for other types of block, like images, list, or a column. Now on the top right, we have dysphagia options. The first option is top toolbar. To explain this feature, I'm going to add a new block, which is a heading block. Now you can see that every block there is
our toolbar with it. By selecting this option, we can move that toolbar
to the top of the page. Then we have the spotlight mode and then full-screen mode. In editor, we have visual editor that
we are currently on. And then the coordinator. In block Manager, we
can manage our blocks. We can disable or
enable any block from here and manage usable blocks. We have flux data
saved to reuse later. Keyboard shortcut options
are given by Gutenberg. You can use these shortcuts
to speed up the work. And then we have
our welcome guide, which is a short guide to
use the Gutenberg editor. And then we have copy
all content option, which is used to copy all the content that
are on the page. Now this is a, this is all that we have in our
Gutenberg interface. This was just a brief
overview of all the features. Now in the next lecture, we are going to
learn how we can add an Azure deadlocks
to create our page.
3. Adding Blocks: Hi and welcome to
the new lecture of WordPress Gutenberg
editor course. In this lecture, we're going to start adding
blocks in our page. There are different types of method to add
blocks in the page. Before that. One thing I want to mention
here is that whenever we add a new block before
choosing its type, it is by default a
paragraph block. You can see here
in the list view, the log that is added is
showing as a paragraph block. Now we're going to
add a new block. So for dat, I will click
on this blue icon. And then here are all the
blogs that are available. You can also search
from the search bar. I will choose a heading block, and the block will be
added in the page. Now you can see in the
ListView that the blog that was a paragraph block is now converted to
a heading block. Now I will write their texts
for the heading block. And when I will press enter, I will jump out of this block. And then a new block
will be added, which is also by default
a paragraph look. Now there is another
method to add a block, which is by clicking this plus
icon that is on the peach. And here we can see the
most commonly used blocks. We can also search for
any block from here. So now I will add
image block from here, and then I will upload
our image for this block. As you can see, the
image is uploaded. And now I will again press the Enter button and
I will jump out of this book to a new block. Now another method
to add the block is we can dive forward
slash in the block, and then the block name
that we want to add. This is also a very quick way to add a new block in the pH. Here I will search for our burdens block and
then add a new burden. Now if I select this
block and in the options, I have this option of insert
before and insert after. By selecting this option
of insert before, a new block will be added
before this burden and look. And if I have to add a new
look after this but unblock, then I will choose the
option insert after node. These are some of the methods to add new blocks in our website. Now in next lecture, we will start editing
these blocks by using all the editing options that are available for different
type of flux.
4. Customizing Heading Block: Now in this lecture, we will start editing
our heading block. Festival. I will select
the heading block. Now let's see what are
the options available. On the right side. These options will be different for different
types of clocks. In typography, we have options of changing
the heading size. We can select from the
sides that are available. Or we can choose a custom size. Then in color, we have option to change the text
color of our headings. Then we have some more
options to change the background color and
to change the link color. After that, we will see what are the options available
in the toolbar. The first option we have is to convert this block to
another dipole flock. And we converted
codecs related blocks. Then we have options to move
it down or up in the beach. We can use this option to
change the blog position. We also have option of drag. So by dragging, we can
change the block position. Then we have alignment options. The first option is full-width. So from here by choosing
the wide width option, our blog will cover the
wide width of the screen. You can seen the ListView. Now our block if governing
the wide verdict. If I uncheck this, and you can see now our
block is in the center. The word block is
just in the center. Now. In the same way if I
choose full-width option, now, our heading block will cover the full width
of the screen. Then we have the
options of having dive. We can use different
heading types, which can change the
size of the heading. Then after that
we have option of text alignment in the block. If we align it to centre, we can align it to right. I will use a center alignment. And then we have options of bold and italic for the heading. Then we have the option of adding a link to a heading text. But I will use that option
later for our paragraph block. And then the hair, some more information like I can add inline code or inline image. From inland image, I can add any image inside
this heading block. And then we have an
option of strikethrough. And then we have option of
subscript and superscript. And then another option is x color that we can
change from here. Now some more options
in these blocks. Our options are we can make
a duplicate of this block from here by clicking on
this duplicate button. Or we can remove any
block from here. And the other useful
information here is add two reusable block. We can add any blog
do reusable block. From here. Like I am adding this heading block and giving
it a name, my heading. And then if we go down
and add a new block. And in this block, we can reuse deadlock
that we have created. Here. We can search for that
book, which is my heading. And you can see that
block is available here that we've added
to the reusable blocks. So I will simply
select this block. And now that block we
have created and then add it in reusable block
is added in the page. Now, these are some of
the options by which you can address your block. Nine next lecture,
we will learn about other blogs, data available.
5. Paragraph And Image Block: Now we will start adding new blocks and then we
will exit those blocks. The first block that I
will add is a paragraph. Look by default is block
is already a paragraph. So I will just simply based on text for the paragraph
that I want. And then after that, if
I see on the right side, all the editing options are
same as our heading bloke. Like we can change the size
of our text from air or we can change the text color or background color,
the link color. One more option we
have is of drop cap. If I select this option, the first letter
off our paragraph will become a drop cap. We can select or unselect
this option if we want. Now we will see options
on the toolbar. The first option is to transform it to any
other type of block. It shouldn't be related
to our textbook. Then we have option of
moving it or by dragging it. And then we have
options of alignment. I will align it to centre here. Then we have options
of bold and italic. Then after that we have option of adding a link in our text. So I will select this EGN, write the name of any website where I want
to redirect this text. So after typing the text on the website and I would
simply click on Submit. And then I will open the
speech in a new tab. And here you can see
the link is working. If I click on this link, it will redirect us
to another website. Non deodorant options for
this paragraph block is same as that we have discussed
in our heading block. And now we will add
new block in our page, which will be an
image block size, click on insert after, and by clicking
on the plus icon. And from here I will
add a image block. And I will choose the image
from our media library. I'm going to choose this image. Now you can see the
image is added. The options for image block on the right side are
we can convert it to round or we can add a border or framework
in this image. And then I have option of
changing the size of time is I can convert it to a medium-size image or
a large size image. And then after
again the options, the toolbar are, we
can transform it to any other block which
is imagery related. Then we have alignment
options like, well, I can use full-width. If I use full version, you can see the images using the full width
of the screen. And if I use wide good. And which bloke will use a
wider written the screen. I have also optional
aligning it to right or left of our block. And then I have option of
aligning it to center. The next option is
we can also add a link for this image or
we can crop this image. And then we have option
of adding our text in the image with Phil converted
to what cover block. And a new block of paragraph
block will be added in this, inside this image block. And then I will write the
text of dark paragraph block. And we can change the
settings of this block. I can align it to
centre and then I will increase the
size of the text. And then I will make it bold. And we have all the options of paragraph look for this image. And then we have the option
of replacing the image, but any other image. This option is useful
when for example, we have multiple images in our
image blocks in our peach. And we can simply click on Replace and replace the image of the bloke with
any other image. Now these were some of
the editing options available for paragraph
and an image block. Now in next lecture we will
discuss some more blocks.
6. Customizing Buttons Block: Now we will add our new block, which will be pretense block. So from here I will search for the overturns block and
inserted in our page. Here we have options of
adding multiple burden inside one burdens block from
hairless view we can see we have added one burdens
block inside that work. We can add multiple burdens. But currently I will work
with only one button. And now we will write duck X4, the burden which is get started. And then after that
we will see what are the editing options
on the right side. First of all, we have
option of changing the burden style to
outline or fill. Then we have option of changing the font size for the Verdun. And in the border
settings we have option of changing the
radius of the burden. We can convert it to our own
burden or keep it square. So I will convert it
to a round button. And then we have option of changing the text
color for our button. So I will choose a lighter color for the text, white color. And then we have option of changing the background
color of the button. So from the customized color, I'll select a different
color for the button. I'm going to select a navy
blue color for this button. So this color looks good. And then after that,
if we have option of changing the burden size, we can change the word setting. We can keep it 50 percent or 75 or 100 percent of the block. So I will use 50 percent width. And we have options of in the toolbar we can add
a link to our burden. The link is adding all the other options for
the burden and Toolbar are same as our other blocks that
we have previously used. So these were some of the
editing options for the burden. By using these options, we can edit our burden.
7. Changing Theme and Creating Menu: Now we're going to learn how
we can create a landing page or any page for our website by using
these Gutenberg blocks. But first of all, I
will change my team currently I'm using our
default team of WordPress, which is drawn D 21. So first of all, I will change the
team of my website. So for that, I will go to
their dashboard or WordPress. And then in appearance, I will go to Teams. And I will search for a new team here by clicking on Add New. And then in the search bar, I will search for
a cadence team. I'm going to use cadence
team for this website. So I will install this team. And after installing,
I will click on activate to
activate this theme. Now the theme of my
website is changed. Now I will add some new pages in the website because I want to create a menu for the page. So first page I will
add is Contact Us page. We write Contact Us the title of the page and I will
publish this page. And then I will go back to pages and add a new
and other page, which will be our services. And then we will click on
publish to publish this page. Now we have three
pages in our website. First is incorrect,
which is our home-based and we have Contact Us
and services speech. Now we're going to
customize our teens. So for that I will
click on customize. And from here I will create
a menu for our website. So I will go to menu, and I will add a new menu here. I will give it a name, my menu, and then select the location bribery
and the menu is created, then we will add
items in the menu. These are the pages that we
have created and I will click on this page is to
add them in our menu. Then after that,
we can reposition it to change the order. Now our menu is created. Now our next task is to
change the homepage settings. So we will go to
homepage settings. Thirdly, our homepage
is our latest posts. We will change it
to our static page. And we will select a page
and direct as our homepage. So now this page will
work as our homepage. Whenever we will
open our website, this page will be opened instead
of our earlier disposed. And then we will click on
publish to save two settings.
8. Creating Hero Section: Now we will start creating
our landing page. So first of all, I will open the aggregate mode
for our current beach. In cadence team, we have more customization options
for our PhD out and settings. Then we have in
our previous team, I want to use transparent
header for my website, so I will enable this option. Then after directly
at pH tried to option that I will disable. And then beige layout
I will use full width. 10 contents style will be unbox. Then after dad, I've ill
disabled or padding. First of all, we will
create the hero section. First blog that I will add for ego section will be image block. And then in media library, I will select the image
that we want to use. And I will use the full
rate for this image. After DAG, I will add the
text inside the image. Now, this image is
converted to a cover block. Then I will change
the opacity to 0. It's overlay color opacity. I'm changing it to 0. And then I've typed text
for our hero section. And I will use center
alignment for this text. Then after that we
will edit this. First of all, I will increase
the size of the text. And then after
that, I will change the line height and then make the first letter
of every word capital. And then I will make it bold. Now it's time to
add our new book, which will be the flock. So from here, I will
add a new block. Harbored any staggered.
I've again use justify center for this block. And then I will write the
text for this button, which has contact us. And I will change the size
of the text and the word. And after that, I will
change the radius, border-radius to round, and I will change the background color and text
color often burden. Now, our hero section is ready. Now I will increase the size of our ETL section
image a little bit. I think now it looks good. I've been updated and we
will see in a new tab. Yes, it looks good. Audio section is ready. Now in the next
lecture we will change the colors of our menu bar items and we will add a logo of
our website in the header.
9. Adding Brand Logo and Costumizing Menu: Hi, in this lecture we've added our brand logo of
the website and we will change the size and
color of our menu items. So I will click on customize
and go to the customization. And from here I will select
the title of my website. And from here I will
select Logo and when. And then I will add the
picture for the logo. Know our side brand
logo is aggregate, then I will adjust
the size of it. After that, we have to change the size and color
of our menu items. So I will click on Edit. And here I will increase
the spacing of the items. And after that, I will change
the font color from here. After that I will change, also changed the
whole word color. Now we have to change
the font style and foreign size of
these menu items. So I've inherited from here, we can change the font
that we want to use. I would go with this
phone and then I will increase the font size. And we can also change the line height and item
spacing. From here. Now our font-style is changed and our brand logo is added. Now I will just go back and
I will change the base font, all of my website. So from here, I will
change the base font, which will change the
fall of all the text and I will add in my website. You can also change
the fonts of headings like H1, H2 from here. And then I will select Publish. And now our changes
have been saved. Now in next lecture we will add some more blocks to
complete our landing beach.
10. Creating Our Services Section: Hi. Now in this lecture we are going to create our next section, which will be our
services section. So first of all, I will add a new page and I'm going to write the
text of the heading. And then after that I
will align it to centre. And we will make
some adjustment with the size of the heading. After that, I will
add a new block, which will be columns block. Here are different variations
for Coulomb's law. And I will select a
tree variation column. Column. I will add
a new heading. And then I will write
the x Dr herding, which will be web development. Then I will choose
the center alignment. After DAG in the second column, I will also add the adding with the same settings and write the content which will
be digital marketing. And then I will add
the third heading, which will be app development. Now I will add a new image
in our first column. And then from media
library I will select the image for this column. And then I will write
the paragraph text. And then I will adjust the
size and align it to centre. And then also select the
text and make it bold. Now we will add the image
for our next call number. Before that, I will align
the first image, the center. Now I will learn the image block and then select
the second image. Will align it to centre. Then add a new paragraph block and write the text
for the paragraph. And make the same or just
meant that their text. And then the same before
the third column, I will add a new image
with the same settings and also the paragraph text data
with the same settings. Now our, our services
section is ready. I can save it and then
preview it in a new tab. So this is how it looks. It looks fine, but there's
one problem with it. The vector of the
section is so wide, it is covering the full screen
that doesn't look so good. So I will make some
adjustments with my layout settings
of the Canvas team. From here I will use a normal
bit instead of full width, and then we'll save it. Also one more adjustment
I want to make is the space between our
heading, our services, and the columns is I won't
do increase this piece, so I will just increase the
line height of our heading. Now I will save it and
preview it in a new tab. Let's see how it looks now. Now it looks better. Our new section is VRD, which has all the
services that are white. So this is how you can use the column lock to create their different
content in your website.
11. Spacer Block: The next block that
we are going to discuss is a spacer block. To discuss that
bloke, I will add any of the block from here that's supposedly
add a cover block. And now we want to give the space between
these two blocks. So for that, I will select the options of the covers book. And in the options I will
select insert before. And here I will search
for the spacer block. And then I will add that. Now what this does
is that it add a space between any two
blocks or in the pH. In this way, we can add the space between any
blocks in our page.
12. New plugin kadence Blocks : In WordPress Gutenberg editor, you can use all of these blocks to create your
complete be January website. But you have, but if you want
more customization options, you can add more plugins in your website to have
some more blocks, bit more customization options. So for direct, we will
have to add a new plugin. So I will go to Add New. And we're going to add
a new plugin which is good and good and
lurk Gutenberg block. So I will add this plugin. It's already installed,
so I will just update it. And then I will go
to install plugins. And from here I will
activate this plugin. To plug in is activated. Now. I can go back
to the page editing. And now we will
see in our blocks, so many new blocks are added. These are the blocks that are
cadence Gutenberg blocks. We can use these
blocks now in our pH. For example, I add a new block, vicious testimonial
in the peach. And here we have
different styles available that we can use. I will choose this cell. Now. I just have to aggregate the
content of this testimonial. So first of all, I will
add a new picture, will upload it from my computer, then I will add this picture
in their testimonial. Now for this picture, if I go to block setting, we can see here so many more
customization options are available then
the other blocks. So I will start
editing, for example, in media settings, we have
this border settings. We can change the
radius of the border. We can increase or decrease
that bedding or the margin. And then we can convert it to a smaller size image or we
can use it cover image. So many options,
customization options are available here
that we can use. Just have to edit the content of this testimonial and
it will be ready. Now if I add any more
block from here, like I will add advanced book, then we will see for
this pattern block, we have so much more
customization options than our normal
Gothenburg burden. Now I'm going to
add a new block, which is Advanced
Image Gallery block. Then I will select the images
for this image gallery. And now you will see
these images are added. Here are some of the options. We can use a grid style gallery and we can convert it
to an image slider. So by using these blocks, it's very easy to create
our image slider like this. So you can use this
cadence block to have more editing options for all the elements that you
want to use in your website. And also, it has
a design library that we are going to discuss
in our next lecture, where we can find pre-built templates that
we can insert it in our beach and added them to create beautiful
pages for our website.
13. Design library Sections of Kadence Blocks: Now we're going to discuss another feature of
Giddens blocks, which is design library,
InDesign library. We have prebuilt sections and starter templates that
we can use in our page. So I will open the
design library here. And here we have all the sections that
we can use in our page. These are prebuilt sections which are made with
different blocks. So for example, I want to add a contact form in my website. I will just search for
the contact form here and it is added in the beach. Now I can edit the content. And our contact
form will be ready. We'll see you search
for more designs here. There's so many different
sections or you can use, for example, this section, I just have to click it
and added in my page. Then I just have to edit the content on More
section I will add. For example, I want
to add this section, so I will just click on this. And then the complete
section will be inserted in our beach. And then we can customize it according to our requirements. Now we also have started
templates like these are pre-built full pages that we
can embark on our website. For example, I want
to use this page. So I will just open all the
beaches like about us and different beaches are available here and different sections. I just have to add these in my website and then I
can customize this. And customization
of these sections is very easy leg I want to, for example, replace
the image here. And I will just click on
Replace and then I will add a new image and the
image will be added. Now for example, I want to
add a folder in my website. So I will search
for a photo here and I will add this
folder in my page. Then I can customize it. I will use filbert
for this footer, and then we can customize
it the way we want. So this is our base, which is how it looks like we will open your
dynein, your data. As you can see the contact form and all the sections
that we have added. So by using design library, you can add many
different sections and also the complete
pages on your website. And you can add them
according to your requirement guides we have
learned in this course.
14. Thank you : So these were some of the main features of
WordPress Gutenberg editor. In these lectures, you have
learned how you can add and customize different blocks to create your WordPress
website pages. Thank you so much for
watching this course. I hope you have learned
a lot from this course. And it will help you in your
web development journey.
Faisal Khokhar, null
