Embed Gutenberg block pattern into Elementor

Gutenberg to Elementor is a component that allows you to insert a Gutenberg pattern into an Elementor page.
Learn how to design, save, and reuse your Gutenberg blocks across multiple Elementor layouts, helping you save time, maintain consistent designs, and simplify your creation process from start to finish.

Enable the Gutenberg to elementor component

The Elementor plugin is installed and active.
The EAC components plugin is installed and active.
In the dashboard select EAC components link and Basic tab then enable the Gutenberg to Elementor option then Save settings.

Creating a Gutenberg Pattern from an Existing Block

The workflow begins with an existing block in the Gutenberg editor. You can use any block already available in a post, such as a heading, image, text, button, or call-to-action block.

– Open the post containing the block you want to reuse.
– Select the block you want to convert into a pattern.
– Click the ⋮ dots menu in the block toolbar.
– Choose Create pattern or Create pattern/reusable block, depending on your WordPress version.
– Give the pattern a clear name, such as Call to Action Button.
– Enable the Synced option if you want changes to the pattern to apply automatically to all its instances. Leave it disabled if each insertion should be customized independently.
– Click Create.

Embed a block pattern into an Elementor post

Search for the Gutenberg to Elementor component and drag and drop it into the preview.
The drop-down list displays all the pattern blocks that have already been defined.
Select the pattern, and its content is inserted into the page.

Leave a Comment