Messenger Icon

Using WordPress Block Editor: ClonewebX merges Gutenberg

Would you like to utilize the WordPress block editor, also known as the Gutenberg editor, but are unsure about customizing styles?

In this post, we will guide you through the process of using the WordPress editor and show you how to enhance its functionalities with ClonewebX.

Are you ready? Let’s begin!

How to use the basic Gutenberg block editor

Take a quick tour around

The default block editor's interface

Every post or page you create using the block editor in WordPress is composed of content blocks. For instance, if your post consists of two paragraphs, a heading, and an image, you actually have two Paragraph blocks, a Heading block, and an Image block.

Although WordPress comes with several default blocks, you have the option to expand your library by using plugins. Furthermore, certain third-party themes and plugins offer their own unique blocks. Let’s focus on WordPress’ default blocks for now.

Begin by clicking on the “Start Writing” section. This will automatically create a Paragraph block, allowing you to start typing if you wish to add a paragraph. Alternatively, if you prefer to use a different block, click on the plus (+) button.

clonewebx-control-wordpress-gutenberg-blocks-default-1

Paragraph block

When you position your cursor within a Paragraph block, a floating toolbar emerges, giving you the ability to modify the paragraph’s text in various ways, including adding bold or italic styles, or incorporating a link. It’s akin to using Microsoft Word or Google Docs.

clonewebx-control-wordpress-gutenberg-blocks-default-4

Let’s delve into block settings, beginning with the Paragraph block. Take a glance at the sidebar positioned on the right side of the editor, and you’ll immediately spot two tabs: one for the overall post’s settings (Post) and another for the specific block’s settings (Block).

Now, navigate to the Block tab if you haven’t already. Within the Paragraph block, you’ll find a range of typography settings that allow you to tailor the font size of this specific paragraph, along with the height of each line within it.

Heading block

Heading blocks are a crucial tool for dividing blog posts into sections and subsections. This approach mirrors the effective organization found in traditional newspaper and magazine articles.

clonewebx-control-wordpress-gutenberg-blocks-default-3

Web pages typically encompass up to six headings, designated as H1 through H6 or Heading 1 through Heading 6. These labels, represented by HTML tags, play a vital role in determining the size and significance of a heading in terms of SEO.

Image block

Wordpress provides three options for uploading images with Image Blocks: Upload, Media Library, Insert from URL.

clonewebx-control-wordpress-gutenberg-blocks-default-2

When setting up your images, it’s crucial to include a style and alternative text. The alt text should be a concise yet descriptive representation of the image, serving the purpose of enhancing your SEO.

Other blocks

As mentioned earlier, WordPress offers a comprehensive library packed with numerous content blocks organized into various sections. When you decide to add a new block, simply click on the Browse All button to explore the full range of options available. Here are some commonly used blocks that you may frequently utilize:

  • List
  • Quote
  • Pullquote
  • Table
  • Gallery
  • Cover
  • Media & Text
  • Video
  • Buttons
  • Columns
  • Social Icons
  • Social Media Embeds
  • FAQ

If you desire even more blocks, you can opt for a third-party block plugin. This will grant you access to an expanded selection of content blocks, including some enhancements to WordPress’ default offering.

We have compiled a list of the top 5 Gutenberg block plugins that grant you access to a plethora of additional blocks for your Gutenberg editor.

Now, we will explore highlighted ClonewebX features, extra blocks with its controls.

Diversity controls

Extra Gutenberg blocks

Our plugin brings an extra touch of greatness to Gutenberg’s default blocks collection by offering 6 enhanced blocks.

  1. Div
  2. Heading
  3. Image
  4. Button
  5. Custom HTML
  6. and Basic Text

These elements may not seem extraordinary at first glance, but they are precisely tailored to fit your customization needs.

clonewebx-control-wordpress-gutenberg-blocks-editor-setting-elements

When you choose one of these blocks, you’ll discover two tabs: General Setting and Style.

Tab Setting

The General Setting tab allows you to manipulate the actual HTML markup on your page, while the Style tab lets you control the visual appearance.

Div Setting

While we’ve grown to love the Gutenberg block editor, users have been frustrated by the lack of an easy way to enclose portions or entire articles with a DIV tag.

Although Gutenberg allows the grouping of multiple blocks, the process can be streamlined by directly using the Div block.

clonewebx-control-wordpress-gutenberg-blocks-editor-div
Heading/Text Setting

Just like the default Heading and Paragraph blocks, these elements are improved in customizing controls.

Image Setting

With the Image Block for WordPress, you can effortlessly enhance and showcase stunning images on your website. Unlock a wide range of color choices and advanced image settings to truly make your photos stand out.

clonewebx-control-wordpress-gutenberg-blocks-editor-setting-img
Button Setting

With the Button block in WordPress, you can effortlessly design stunning and trendy buttons to enhance the appeal of your website.

Include multiple buttons within a single block, each with its own distinct text, styling, and function.

clonewebx-control-wordpress-gutenberg-blocks-editor-setting-button
Custom HTML Setting

After adding Custom HTML block, you will have the ability to enter or copy your code into the provided box. Additionally, you can conveniently modify and preview your code directly within the editor.

clonewebx-control-wordpress-gutenberg-blocks-editor-setting-custom-html

Tab Style

Controls under the STYLE tab affect the style/design (CSS) of a block.

clonewebx-control-wordpress-gutenberg-blocks-editor-style-tab
Layout

You have the power to personalize the Layout just the way you want it: adjust the spacing, size, positioning, and other MISC settings.

clonewebx-control-wordpress-gutenberg-blocks-editor-layout
Typography

Unleash your creativity by having complete control over your headings and paragraphs. Select from a diverse collection of fonts, colors, and styles to design headings that perfectly complement the branding of your website.

clonewebx-control-wordpress-gutenberg-blocks-editor-typography
Background
Border

Adding border for your elements

clonewebx-control-wordpress-gutenberg-blocks-editor-border
Custom CSS

Customize directly CSS for your elements

clonewebx-control-wordpress-gutenberg-blocks-editor-custom-css
Highlight feature

ClonewebX blocks templates

We want to highlight the blocks template shortcodes as the first feature. With the default WordPress editor, you are limited to performing only basic tasks with posts, pages, and post types, without dynamic capabilities.

Experience the extraordinary capabilities of ClonewebX, as it enables you to effortlessly embed your Gutenberg content anywhere.

gutenberg-shortcode-clonewebx-3
ClonewebX projects dashboard

Navigate to the Softlite section in the Wordpress dashboard and click on Block Templates which provides Gutenberg block templates.

Next, proceed to create a new post by clicking on the “add new post” button.

Add your content and apply shortcodes.

gutenberg-shortcode-clonewebx-4

Gain comprehensive insights by visiting the following link.

Primary feature

Clone any website to Gutenberg blocks editor

We are excited to share the primary feature of our application with you – the ability to clone websites from any platform into WordPress Gutenberg Blocks Editor. As pioneers in this field, we firmly believe that this feature is a game-changer for website creation, particularly within the WordPress community.

clonewebx-control-wordpress-gutenberg-blocks-editor-clone-feature

Rather than creating a website from the ground up, you can effortlessly replicate the layout and personalize the content in minutes using the default WordPress block editor.

clonewebx-control-wordpress-gutenberg-blocks-editor-clone-feature-2

To gain further insights, you can explore the process of duplicating websites using Gutenberg.

How to clone websites into Gutenberg Editor

Relevant documentation

To get more information of ClonewebX tutorials
Clone Brick's website to Elementor WordPress
Convert a website to Elementor
How to clone any website to Bricks
Combine Litemove to clone any animation Website

For effortless and efficient creation of animation effects in a drag & drop editor, you can consult our tool, Litemove.

Back to top