rectangle border below the title signifying a block in wordpress gutenberg

Top Class Invention By WordPress

The global leader for website building software, WordPress has again launched a first-grade product for developing and designing websites.

The company has released a major version of its web page development application after a gap of 4 years.

This new release is such a huge development inside the website building industry worldwide that it has various names :

  • Gutenberg
  • Bebo
  • Blocks Builder
  • Version 5
  • New Editor

Basically all are same but just as this is a game changer for the website designing industry, it has been called by different names.

Please note that i am writing this blog only concerned with keeping the self-hosting option out of purview in this article post.

The biggest highlight of this latest upgraded portal is that it uses blocks for creating content inside web pages.

Now you can build your content precisely like you make a LEGO set : all from one box, following a standardized and straightforward set of instructions.

Undoubtedly the unbelievably fantastic amenity in this top class invention by WordPress helps in creating the perfect page layout.

The New Editor allows much more flexibility than one used to have in previous version of this web page design software.

It is now possible to build web pages by inserting content inside blocks instead of just simply adding words or non-text based matter in a blank template earlier.

By using this modern concept of website designing, you can now determine what every part of your content is and also define and change specifications of any block.

By the way Bebo is the newest WordPress update which uses the Blocks Builder.

While Gutenberg is the name of the project which is being called as the Blocks Builder.

Website developers finding it difficult to create online documents through this new release may use the classic version as before for which a plugin is available.

But then i cannot imagine why one would not prefer using this latest technology which is so easy to understand and implement for publishing articles or web pages.

Start A Gutenberg Website For Increased Internet Visibility

This is how to begin with working at this new website making portal.

Open any of your existing web pages you will notice a changed interface for editing content.

Observe the text “classic” written over a grey horizontal bar indicating that one is on old website builder.

To start a Gutenberg Website, click anywhere within that grey horizontal bar.

You will find editing choices like the one in window partly overlapping a web page inside WordPress 5 :

blocks builder by wordpress bebo world’s best website designing portal
Blocks Builder By WordPress Bebo – World’s Best Website Designing Portal

Click the second option “Convert to Blocks”.

That’s it. You did it.

Click Preview button to make sure that your document is same as before.

You can now avail the benefits of this top class invention by WordPress.

So go ahead and start a Gutenberg Website for increased internet visibility on Google and Bing.

Design A Website With Blocks Builder By WordPress Bebo

Observe that all content on web page has been divided into separate blocks.

Click anywhere within main page body and there would be a thin grey rectangle box around the text or photo or any kind of matter you have out there.

Look carefully at first paragraph beneath the title :

rectangle border below the title signifying a block in wordpress gutenberg
Rectangle Border Below The Title Signifying A Block In WordPress 5

To insert fresh content, click a blank area after the last paragraph in your document and locate the “Add Block Symbol” at left border of rectangle.

Inside blank rectangle, on the right side there would be icons for image, bulleted list and text.

If clicking a blank area does not open a new block then go to paragraph immediately above and press enter.

Click any thumbnail visible at the right, inside the block, to begin adding more content on your webpage or article post.

Choosing the first icon i.e. picture would ask you to upload any image from your computer or media gallery.

The remaining two choices are for creating either a text sentence or a bulleted list.

To add content in between any block, observe that “Add Block” icon would appear at upper center of rectangle border, after moving the mouse pointer over it.

That enables one to uplink a picture or write any words in between the blocks above and below.

WordPress Bebo Makes It Easier To Upload And Embed Content

Look at the screenshot displaying a small toolbar window open partially covering your web page :

different types of content allowed for insertion in wordpress 5 blocks builder
Different Types Of Content Allowed For Insertion In Blocks Builder

But it doesn’t end just here. This is just the beginning on this top class invention by WordPress.

As you must have already noticed that there is an abundant choice in choosing what kind of content is to be inserted.

The list keeps going on and on as follows :

  • Text.
  • Photo.
  • Quotes.
  • Audio files.
  • Bulleted lists.
  • Embedding codes.
  • Page headline.
  • Cover image.
  • Any file like PDF etc.
  • Contact form or any other kind of call-to-action form.
  • Inline image.
  • Video.
  • Picture gallery.
  • Many choices for formatting such as code, custom html etc.
  • Layout options like buttons, columns, media and text combined, page break, separator and spacer which can be adjusted in width.
  • Choices for inserting widgets for shortcode, archives, categories, latest comments and posts.
  • A plethora of options for embeds from many social media websites. The popular ones are – YouTube, Facebook, Twitter, WordPress, SlideShare, Reddit, Tumblr and Instagram.
  • And Yoast Structured Data Blocks too.

Thank god that was all. Or else i would have fainted.

Just joking.

The reality is – More the options, the better it is.

Such elements go a long way in helping optimising websites as well as blogs.

This website building portal makes numerous tools available right in front of your eyes, on your computer screen.

That eliminates the possibility of forgetting using add-ons which sometimes one forgets when posting articles or forming web pages.

For finding the complete list of options, click the “plus symbol within a circle” at topmost left inside toolbar.

Click on it and you will be able to a lot more than you could ever have imagined while working on this website building portal, previously.

Remember that one needs to scroll down the blocks list to find all choices available for boosting blogging websites and web pages.

Begin Using The WordPress New Editor For Website Designing

For example one would be able to spot the block option for embedding a Google Map through Jetpack only after scrolling down on this small window :

insert contact form or google map or simple payments button within blocks
Insert Contact Form, Google Map Or Simple Payments Button Within Blocks

The second and third tool buttons in top menu bar are for redo and undo so those are self-explanatory functions.

The fourth tool button is an “i” letter within a circle.

Observe the photo below :

an outline summary for document content structure in wordpress gutenberg
An Outline Summary For Document Content Structure In WordPress 5

This section gives information about the number of words you have already typed, headline chronology, number of blocks, paragraphs and title.

The furthest button at top left section of toolbar is – Block Navigation List :

content block navigation list in this top class invention by wordpress 5
Content Block Navigation List In This Top Class Invention By WordPress

This module above covering a part of a web page indicates the hierarchy of the kind of blocks you have created in particular document.

Now Update Content In Websites Simply Inside

Now coming to top right side section of your screen, i.e. the toolbar above the side bar.

Click the icon showing three dots in a vertical style and a new window would open :

start a gutenberg website for increased internet visibility on google and bing
Start A Gutenberg Website For Increased Internet Visibility On Google And Bing

See that Yoast SEO Plugin is also accessible from this section.

Most likely you won’t require to do anything here if in my category i.e. a non-programmer.

But then there is one link here which is worth checking for non-coders too.

Observe the ending text link saying “Options”.

Click the same and a new vertical window partly overlapping the web page would open.

choice to select panels in wordpress gutenberg the world's best website builder
Choice To Select Panels In WordPress Gutenberg – World’s Best Website Builder

It has some important segments like :

  • Categories.
  • Tags.
  • Featured Image.
  • Excerpt.
  • Discussion.
  • Sidebar.
  • Header Animation.
  • Likes and Shares.
  • Yoast Internal Linking.
  • And Yoast SEO Premium.

Basically all aspects in the list above are identical to ones found in earlier model of this website builder i.e. WordPress 4.9.8.

This module is not about settings but for giving a choice as to what all tabs you need to be easily accessible while designing websites.

Find Yoast Website Optimization Plugin On Top Of Web Pages

The icon on the left of symbol just discussed is for Yoast Plugin, renowned for its powerful capabilities in helping website optimization companies in gaining increased internet visibility on Google and Bing.

Click the same and notice a vertical window opening up and covering the right sidebar :

yoast helping companies in gaining increased internet visibility on google and bing
Yoast Helping Companies In Gaining Increased Internet Visibility On Google And Bing

In general, all tabs in this segment are the same as present in earlier model of this website hosting portal.

However one of the several advantages WordPress Bebo brings to the table is that now there’s no need to open another window for working on Yoast.

It’s just that this new addition would help website optimization companies to enter, delete and modify SEO data on Yoast plugin in a faster manner.

Edit Document & Block Settings Easily In WordPress Gutenberg

Coming to the settings segment in the right sidebar.

One notices two headings – Document and Block, respectively.

Click “Block”.

This aspect is one of the reasons why this New Editor is a top class invention by WordPress in regards to developing a web page or a blogging website !

Notice the screenshot :

edit color and font size for designing websites in wordpress gutenberg
Edit Color And Font Size For Designing Websites In WordPress Bebo

The Blocks Builder is providing a choice to change :

  • Font Size.
  • Text and Background Colors.
  • AMP (Accelerated Mobile Pages) – A project by Google.
  • Advanced CSS.

The first feature would prove to be priceless for website designing companies as it was unavailable in previous version of this website builder, unless one applied css.

Regarding the second item – It was possible to modify the text color only, previously.

Now as one could apply background colors within blocks, surely this characteristic is a major enhancement inside this upgraded website builder.

Reason being that previous version allowed one to change background color for entire document.

Whereas one may be able to have different colors within blocks enabling a multicolor background on documents.

Now, there is no need to install a page building plugin for designing websites.

But, those needing complete functionalities of something similar to visual composer may however still need any one of those related plugins though.

Coming to point 3 – First of all this is not one of the fresh properties inside WordPress Bebo.

And secondly this tab is something you would most likely not need to think about.

Reason being that this specific AMP tab changes settings for a particular block only and not for entire document.

This element is probably placed here only to grant flexibility in editing documents where only a part of the web page needs “AMP Fit Text”.

One could not find this facility in the former version of this website builder.

However, most probably you would like to enable this useful element for the complete web page or article post.

It is time to switch to “Document” mode.

 Notice the screenshot :

google accelerated mobile pages in the new editor by wordpress bebo
Google Accelerated Mobile Pages In The New Editor By WordPress

See that “Enable AMP” button is switched on (in mustard color).

This signifies that entire document is compliant with the project.

As far as the functions inside this section are concerned there is no change from the past website builder except for one.

Scroll down to bottom section and spot the Yoast Internal Linking tab.

Again nothing new as the same was present in previous model too.

The only difference is – Now this top class invention by WordPress makes access to Yoast Internal Linking segment from within your document.

This would eliminate the need to go to wp-admin panel as used to be the case earlier.

Likewise if one scrolls to bottom in main content body then again the Yoast SEO settings are accessible from within.

The biggest benefit of this particular feature in the website building software is that it eliminates the chances of editing errors.

For example for editing page content one opened another window for reaching the wp-admin panel to make additions or changes in meta data segment of Yoast.

Sometimes one ended up making alterations in some sentences too by scrolling up to the blog or page content body.

There was a possibility of forgetting that main page is also open for editing in another window, alongside.

Without copying the altered words in admin panel and then pasting on other window which was simultaneously open, one could close the page after saving.

In such a case the paragraphs changed in wp-admin panel would not reflect on the published document, online.

Because in such a scenario the user would obviously save and close the first window later.

And any website building portal would accept the content which is saved later.

Features For Editing And Designing Websites In WordPress 5

There are many more user-friendly components inside this top class invention by WordPress.

For example one can change the “block type” to another at any point of time, from here :

the new editor helping in changing block types for designing websites
The New Editor Helping In Changing Block Types For Designing Websites

Next element worth mentioning is that in the prior website builder, one could reach the “html mode” in pathe ge editor by clicking the button placed at top right of the page content body.

One can now reach the same by clicking the three vertical dots as in opened vertical window :

option for switching to the html mode for editing content in wordpress bebo
Option For Switching To The HTML Mode For Editing Web Page Content

Few More Improvements Visible In WordPress 5 Website Builder

Click any photo and you would be shocked to find what is there in the right sidebar :

start a gutenberg website and alter size or link and amp settings for images
Start A Gutenberg Website And Alter Size, Alt Text, Link Or AMP Settings For Images

The visuals may not be clear above but try it out and you will realise that it is now so convenient to change settings like Sizes, Links, Alt text and AMP for photos now.

Another point – In the former version one could :

  • Neither center-align videos.
  • Nor write video captions.

But this enhanced website designing application makes both elements available.

To top that it provides many options in terms of AMP layout for videos which is another fabulous aspect inside this application.

The facility to create “reusable blocks” is another element which can help save time while designing websites at this improved portal.

The Last Highlight I Noticed In This Website Building Portal

This updated website builder does not disturb paragraph spacing even if moving from HTML to visual mode.

Previously whenever one switched between these two modes, whitespace created through the code used to disappear, leaving very little horizontal space gap between paragraphs.

Use the “spacer” element within New Editor and the whitespace stays as it is no matter how many times you switch over from one mode to another.

So that brings us to end this blog post explaining reasons why WordPress Bebo can help in increased internet visibility on organic search engine result pages.

Watch the video below and start a Gutenberg Website fast :

Introductory Video About WordPress Version 5 – Bebo

The only noticeable problem in this website building application is that it works fine as long as one writes anywhere upto 1000 words in blogs.

The moment you continue with typing a longer article beyond roughly 1200 words, suddenly this software slows down the document.

But then since this changed website designing software has been inducted only 3 days ago, such shortcomings are understandable.

I have no doubt that this issue would be sorted out by the time this website building tool rolls out fully.

 So go ahead a start a Gutenberg Website today.

No Responses

Hi. We welcome your feedback -

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: