Messenger Icon

Introducing Gutenberg blocks method for WordPress page builders

Imagine the power of enhancing your WordPress website effortlessly, by simply typing a short code. Shortcodes in WordPress serve as quick code shortcuts, enabling you to seamlessly integrate dynamic content into WordPress posts, pages, and sidebar widgets.

In essence, they empower developers to encapsulate their code within a function and then register that function with WordPress as a shortcode, making it accessible for users without the need for any coding expertise. You will discover that a multitude of WordPress plugins and themes utilize shortcodes to bestow additional features upon your site.

This article will guide you through the step-by-step process of using Gutenberg Blocks shortcodes on your WordPress website with our ClonewebX plugin.

Adding a Gutenberg Blocks Shortcode to anywhere

Initialize setup

Gutenberg Blocks Templates

First, 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.

gutenberg-shortcode-clonewebx-3

You can create your own content using the default WordPress editor or by combining it with our application.

In ClonewebX control and proceed to export data with the Gutenberg builder.

gutenberg-shortcode-clonewebx

Paste data on Gutenberg Blocks Template (by confirming keyboard Ctrl/Cmd + V), then customize the content, and publish it.

gutenberg-shortcode-clonewebx-2

Now you are granted the freedom to make full use of the Gutenberg Block Template shortcode, seamlessly integrating it into any WordPress theme or page builder of your choosing, whether it be Divi, Beaver Builder, or Flatsome. Embrace the limitless potential of ClonewebX in crafting breathtaking websites that will leave a lasting impression.

Gutenberg + Elementor

Inserting a Shortcode in Elementor

In your Elementor Editor, find the “shortcode” widget and drag it into canvas area.

gutenberg-shortcode-clonewebx-5
ClonewebX projects dashboard

Then, you can embed your Gutenberg Blocks shortcode and the data will appear instantly.

gutenberg-shortcode-clonewebx-6

Do not forget to refresh data by confirming “Apply” button.

gutenberg-shortcode-clonewebx-5-2

An ultimate combination of Elementor and the default WordPress editor – Gutenberg.

Or you can get the “Block by Softlite.io” widget in Elementor Panel.

alternative-elementor-gutenberg-editor11

A dropdown menu appears, prompting you to select your Softlite block templates -> Choose the template that best suits your needs.

Gutenberg + Flatsome Theme

Embeding a Shortcode in Flatsome Theme (UX Builder)

In your Flatsome Editor, find the “Text” Element.

Pick the “Text” element in Content section

gutenberg-shortcode-clonewebx-10

Choose “Paragraph option” and apply it.

gutenberg-shortcode-clonewebx-11

Embed the Gutenberg Blocks Template shortcode with Text element.

gutenberg-shortcode-clonewebx-12

Relevant documentation

To get more information of ClonewebX tutorials
Clone any website to Gutenberg 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