EB Transform feature allows you to display blocks dynamically with versatile transform effects like rotate, translate, skew, etc., right inside the Gutenberg editor. With this feature, you can now rotate, make 3D effects and create stunning hover effects.

Follow this guide to learn how to transform blocks for your website using the Transform in Essential Blocks in Gutenberg.

How to Activate the EB Transform? #

To activate the Transform, navigate to the block you want to implement the Transform effect on. Then, from the ‘Advanced’ section, toggle the button to enable it. 

Note: Transform is a premium feature and only applicable in the Essential Blocks block library. To use this, you will need to install and activate the Essential Blocks PRO plugin on your website along with the free version.

How To Configure the Transform Effects From the Gutenberg Editor? #

Open the page or post where you want to add the transform effects using the EB Transform. After selecting the block and enabling the Transform effect, you will now find different options. Here is the list of options you can use for a normal effect. 

Rotate #

With this option, you can adjust the rotation of the block. Drag the cursor to rotate the block or add a specific angle degree for the block rotation. 

Rotate 3D #

To make a 3D effect on the block, toggle the ‘Rotate 3D’ to enable it. In this effect, you will find different options to showcase the block on the X and Y axis. Here, what this axis does: 

• Rotate X: Tilts the block up or down, like flipping it forward or backward.
• Rotate Y: Turns the block left or right, as if rotating it side-to-side.

Perspective #

With this effect, adjust how “3D” the block looks, making it appear closer or farther away.

Offset #

For the Offset effects, you will find 3 different axis. Those are: 

• Offset X: Moves the block left or right on the screen.
• Offset Y: Moves the block up or down.
• Offset Z: Moves the block forward or backward in 3D space.

Scale #

This effect makes the block appear larger or smaller.

Skew Effect #

To lean the different blocks in the X or Y axis, this effect can be used. Here, both axis works: 

• Skew X: Lean the block horizontally, stretching it sideways.
• Skew Y: Lean the block vertically, stretching it up or down.

If you want to flip the block, horizontally or vertically, then you will find the option to enable or disable it. Simply toggle the button and your block will adjust accordingly.

How To Configure the Transform For the Hover Effect? #

In the transform feature, you can style your block in the Hover effect as well. You will find similar effects like Rotate, 3D Rotate, Perspective, Offset, Scale, and Skew effects in the settings. Additionally, you can set the Transition Duration for this effect.

Final Outcome #

By following the basic steps and a bit more modification, you can style your block EB Transform feature however you want.

With the help of EB Transform, this is how you can stylishly showcase your blocks and grab everyone’s attention.

Getting stuck? Feel free to Contact Our Support for further assistance.