Last updated 6/2022Course Language EnglishCourse Caption English [Auto]Course Length 02:21:34 to be exact 8494 seconds!Number of Lectures 38
This course includes:
2.5 hours hours of on-demand video
Full lifetime access
Access on mobile and TV
Certificate of completion
Learn the ins and outs of the Gutenberg editor and how to use it to create beautiful and professional WordPress websites
An introduction to Become a web design using the Gutenberg Full Site Editing.
Learn about all the Gutenberg blocks to use for content creation.
Learn How to create your first page using gutenberg editor blocks.
Gutenberg was launched as an incorporated part of WordPress 5.0. Gutenberg replaced the Classic WYSIWYG editor as the new default wordpress block editor that has been used since the earlier versions of WordPress.The Gutenberg editor is such an important update from the Classic editor that many WordPress developers absolutely refused to even learn how to use it, especially when it was declared that the Classic Editor would continue to exist for an unspecified while.After Discovering the Gutenberg Editor for about 6 months now, I've changed my mind from a non-Gutenberg supporter to a Gutenberg fan. It must be said that the Gutenberg editor is a huge time saver, with a variety of built-in design options. In other words, you wouldn't need any coding skills to create compelling pages and posts using Gutenberg.Gutenberg is the wordpress pre-installed editor as you create the content for your WordPress website's pages and posts. There are blocks for headers, images, and text blocks. Gutenberg comes with customizable blocks for just about anything you may want to add to a web page or post. You can easily create your posts and pages using the Gutenberg editor's drag and drop feature. Dragging the blocks on and around, the editor. Your WordPress theme handles other site elements, like the header and footer areas, as you build content for your web pages and posts.The latest Gutenberg version was definitely the biggest ever update in WordPress 5.9. Full Site Editing (FSE) is now possible using Gutenberg as the website editor!You can now use Gutenberg editor to create and edit website content and edit and design the website headers and footers. With this Gutenberg update, seize the opportunity to design the header of the page, the footer, and the bit in the middle of a page or post. You now have full control over your website's design. That is what Full site editing is.This course introduces you to the wordpress Gutenberg editor's latest version.In this course:An overview of Gutenberg editor.A detailed look at the Gutenberg editor's most important blocks.Follow along and practice by yourself to create a basic page or post which is Full Site Editing compatible. Also, take the time to learn about templates and template importance to speed up and optimize webpage creation and overall theme function.By the end of this course, you'll have enough confidence to easily design your own compelling website, Gutenberg is the perfect editor to design the header, footer, and website content. You'll be on your way to mastering Full Site Editing.The Gutenberg Editor is the future of web page content management using WordPress, and the future is happening right now!Since Gutenberg is continually getting updated, so will this course.One of the best things about learning on Udemy is that you gain Lifetime access to every course you buy.As you can see from the Course Content below, these Lectures are not just a description of each gutenberg block; they are detailed 'How-To' videos so that you can speed on using these blocksUpon completing this course, you'll learn to use the Gutenberg (Block) Editor.This course is a series of over-the-shoulder-style screen capture videos. Once you purchase the course, consider that you have hired a personal trainer guiding you on all the how-to's, except that it's without any personal training cost.Who this course is for:WordPress developers seeking to learn to learn about Full Site Editing with GutenbergAnyone looking to wants to design a wordpress website.
Course Content:
Sections are minimized for better readability, click the section title to view the course content
38 Lectures | 02:21:34
How to log into wordpress
04:41
WordPress access through a direct link
Search your browser's address bar for your domain name with /wp-admin or /wp-login. ...
Type in your WordPress Username or Email Address and Password. ...
Once logging in is successful, you will land on your WordPress Dashboard and manage it.
Install the gutenberg plugin
05:29
On the Plugins page, click on Add New. In the field labeled Search plugins… type in Gutenberg and hit enter. You will see the Gutenberg plugin shown in the list with a button labeled Install Now.
Gutenberg advantages vs other page builders
09:00
Key Differences Between Gutenberg and Page Builder Plugins
The most significant difference is that the block editor comes built-in with WordPress core software as the default editor. On the other hand, page builder plugins are created and supported by third-party developers.
Gutenberg widgets overview
11:59
Adding Gutenberg Blocks to WordPress Widget Areas
Log into your WordPress dashboard.
Install and activate Gutenberg.
Navigate to Appearance > Widgets.
Add, edit, and delete the widget blocks as you would on a page or post.
Click Update to save your changes.
Change permalink
05:19
How do I change the permalink in WordPress Gutenberg?
Option 3: Change Permalink via the All Posts Page
Step 1: Hover over Posts in the left sidebar when logged into your WordPress site and click on All Posts. ...
Step 2: Hover over a post in the list of all posts and click on Quick Edit.
Step 3: Edit the slug, AKA permalink/post URL, and click the Update button.
Working with text
07:09
To add the Media & Text block, click on the + Block Inserter icon and search for “media.” Click it to add the block to the post or page. Using your keyboard, you can also type /media on a new line and press enters to add a new Media & Text block quickly. Adding a Media & Text block with the slash inserter.
Use list block
04:33
You can find the reusable blocks you already have on your site by clicking the + Block Inserter icon. You will find a separate tab called 'Reusable' listing all the reusable blocks you have created.
Gutenberg headings 7
03:40
Use the heading block to break your page into sections. Each heading should indicate the start of a new topic.
All HTML heading tags (<h1> through <h6>) can be used.
Let's take a look at all the settings for the heading block.
Add tables 8
03:18
To place a static table, open the Gutenberg Editor from WordPress. After that, click on the “Plus” icon to open the blocks list. Find the Table block and click to put it on the page. Select the number of columns and rows, fill the table with the required information, and customize the table using block settings.
Column editor 10
02:14
To add content within columns, follow these steps:
Hover over the column section where you want to add content.
Click the plus button that appears in that section.
Find the content block you want to add and click it.
Add an image 11
05:47
To add a basic image to your WordPress content, click on the + icon and choose the “Image” block. Now you can either upload an image, select one from your Media Library, or insert from an URL.
Cover block 12
06:54
What is a cover block, Gutenberg?
Cover Image is a bold image block with an optional title. Description. If you like to add a hero header, like the section on a page or post, a cover image block would allow you to do that. This block allows you to add a title over a background image.
Gallery block
04:44
The gallery block is very similar to how image galleries worked in the classic WordPress editor.
Add multiple images to a gallery
(Optional) Give the images a caption
Choose the number of columns
Insert your gallery onto the page
Audio block 14
03:33
To add the Audio block, click on the + Block Inserter icon and search for “audio”. Click it to add the block to the post or page. Using your keyboard, you can also type /audio on a new line and press enter to quickly add a new Audio block.
Add a contact form
03:12
Gutenberg Forms is one of the first plugins to do this – you’ll be able to set up form fields, notifications, and more without needing to open up a separate interface. Better yet, it’s free. And even better yet, it integrates with MailPoet so that you can automatically add people who submit your form to your MailPoet email lists (if they give permission, of course).
Add quotes
04:40
Add “Quote” Block in WordPress Gutenberg Page Builder
Click the “+” icon to choose the new block.
Go to the Common Blocks tab or Most Used tab and choose the “Quote” block.
Choose the size of the quote.
Publish.
Test the result.
Performated text
01:44
The preformatted block is very similar to the code block, with a few small differences.
Preformatted blocks keep all spaces & line breaks intact and display text exactly as you type it. However, they don't use the HTML <code> element and come with a few more styling options.
Embed youtube videos on gutenberg
02:10
How do I embed a video in Gutenberg?
Embed Videos Directly
Video Block is to add self-hosted videos. To embed a video you simply need to paste the video URL in the paragraph block and it will get converted to an embedded video automatically. It's super easy to embed videos directly into your content in Gutenberg WordPress Editor.
Add a seperator
00:48
The separator block adds a horizontal rule (<hr>), typically indicating a thematic change in your content.
Read More block
02:19
To add a Read More block, click the (+) icon to open the block inserter pop-up window and search for the Read More block. Click on it to add the block to your page template. You can also type /read-more and hit enter in a new paragraph block to add the Read More block quickly.
Use verse block
02:19
What is verse block in WordPress?
The WordPress Verse Block was designed to show text in a versified format. It displays the text without changing your line breaks and spaces. Hitting the Enter key starts the following line instead of beginning a new paragraph. It's not meant for your normal content.
Add buttons
03:49
Hover your mouse over the Add Block icon (the plus sign in the upper left-hand corner within the Gutenberg editor).
Select Blocks. ...
The button edit window will appear. ...
On the right-hand side, there are more customization options for buttons.
Font plugin
02:19
Fonts Plugin is a free plugin that gives WordPress users access to the Google Fonts and Adobe Fonts libraries. With this plugin, you can choose from over 1000 Google and Adobe fonts, use multiple fonts across your site, and test different options with the plugin's live preview feature in the WordPress Customizer.
Add a reusable block
02:01
What are reusable blocks on Gutenberg?
The WordPress block editor (a.k.a. Gutenberg) comes with a feature called “reusable blocks.” They are blocks, saved for later, and edited in one place.
Manage reusable blocks
02:56
How do you use reusable blocks in Gutenberg?
Click on the three vertical dots and then “Add to Reusable Blocks”.
You are then prompted to give the block a name.
Once this is done, you can use this block on other pages and posts. ...
You will find a list of all your reusable blocks and you can select the one you want.
How do I make a reusable block in WordPress?
Create a Reusable Block
Select the block you'll want to reuse.
Click on the three dots that appear in the toolbar.
Click on Add to Reusable blocks.
Give it a name.
Click Publish and then Save.
Where do I find reusable blocks in WordPress?
To do that, open the regular block inserter interface and then scroll down.At the very bottom of the list, you'll find the Reusable section.
Create templates using reusable blocks
02:56
Gutenberg's Reusable blocks are big-time savers. This Lecture covers how to create templates using reusable blocks you already have created.
Customize gutenberg settings
02:56
How to customize Gutenberg?
The bottom tab in the Preferences window allows you to show and hide several Sidebar panels. Clicking on these toggles will show and hide the various panels in the Gutenberg Sidebar. Gutenberg allows you to customize the panels that appear in its Sidebar.
Add google maps
03:49
A Simple Gutenberg Map Block For Google Maps & OpenStreet Maps. WP Map block build with LeafletJS an open-source JavaScript library for mobile-friendly interactive maps. You can easily use customized Google map or openstreetmap to your WordPress gutenberg supported posts, pages or custom post type.
Monitoring comments
02:34
Learn how to monitor comments on your web pages and posts bu customizing gutenberg settings.
Akismet anti spam
04:48
Akismet checks your comments and contact form submissions against our global database of spam to prevent your site from publishing malicious content. You can review the comment spam it catches on your blog’s “Comments” admin screen.
Free antispam solution
01:50
Use a free antispam plugin to protect your website from spammy comments, and spammers in general. This improves customer experience.
Add links to your page or post
02:27
Links (both from other websites and the links within your site) are important to SEO because there is a direct correlation between the quality/quantity of links to your site and how much search traffic your site receives. For small businesses, more links = more search traffic = more customers.
Intralinks
01:51
In this lecture you will learn how to Link same page elements.
Gutenberg colums
03:23
How do you make columns in Gutenberg?
Hover over an existing block and move your cursor over the top or bottom edge to reveal the “+” button for adding a new block. Click the plus button, and you'll see a popup where you can select a block to add. The Columns block is featured at the top. Click the Columns block, and it will be inserted into the post.
Social sharing icons
02:04
Add Social sharing icons to encourage website visitors to share your content on the web, social media, etc...
Align buttons
02:47
The Gutenberg editor gives you the option to float the button to the left or right (wrapping text around it), or center it on the screen. Just click the appropriate alignment option found directly above the button.
Adding jump links
02:23
Highlight the header in the Gutenberg block and click on “Advanced” on the right-hand side. You will then see an option to add an HTML Anchor. ...
If you want to link to it, simply create a hyperlink on your anchor text.
Acces the code
01:09
Access page HTML code using the code view using Gutenberg editor.
4.39
(80 course ratings)
1
1/80
2
4/80
3
12/80
4
21/80
5
42/80
JOIN OUR WHATSAPP GROUP TO GET LATEST COUPON AS SOON AS UPDATED
If you like to get inspired by great web projects, you should check out Made with Javascript. If you have a project that you wish to share with the world, feel free to submit your project on Made with Javascript Club website.
Free Online Tools And Converters for your use
URL Encoder
Input a string of text or a URL and encode the entered string
FAQ: Udemy Free course Most frequent questions and answers
Does Udemy offer Free Udemy coupons?
Yes, Udemy is the largest online education platform, with the broadest selection of video-on-demand courses and qualified instructors available to meet your needs. At theprogrammingbuddy.club we curate the latest udemy coupons, their expiry, and the number of uses left of these udemy coupons.
How to get free Udemy courses?
There are two ways to get free Udemy courses:
Go to udemy.com and search for your desired course category. Then select free from the filter options.
You can also get paid courses for free if you have a coupon. You can head to theprogrammingbuddy.club, where you can get a daily udemy paid course for free.
How to get Udemy Certificates for free?
Udemy offers certification on completion of each course. In order to receive a certificate of completion from Udemy, you need to complete your course 100%. There is a simple hack, you can open a video and jump on the timeline to complete a lecture.
To download the certificate from Udemy, you need to head over to your account on a desktop browser. Udemy certificates can't be accessed on the mobile app.
Do Udemy courses expire?
No, once you enroll, you will have lifetime access to the course. You can complete the course on your schedule.
Why are the Udemy instructors giving away free Udemy Coupons?
Every instructor has worked for hours on each of their courses. As new courses get launched, the instructors have no way to get their course in front of an audience to get some feedback. So, instructors share free coupons for their courses to get feedback from the students. We attheprogrammingbuddy.club work with these instructors to get their courses available to our buddies.
Is Udemy safe to use?
Yes, payments on Udemy are safe. It is no different than paying for other services on an application or website and inputting your payment information before receiving your goods. Just be sure to keep your account secure, do not share your udemy accounts.
Can Udemy courses get you a job?
Earning a skill is more valuable than earning a job these days. Skills are your most valuable asset. They can help you qualify for jobs you want and get promoted to more advanced positions within your organization. Unfortunately, it is difficult for many people to balance taking courses with work and family obligations. We have had many students, who have taken just Udemy courses, started a job as well as started freelancing with the skills they have learned.