Info Card 3D Block for Gutenberg

Table of Contents

This block allows you to create a 3D info card where the image appears to pop out of the box.

Required Setup

  • Nexter Blocks FREE Plugin installed & activated.
  • You need to have the WDesignKit plugin installed and activated.
  • Make sure you’ve created an account and logged into it.
  • Make sure you’ve downloaded the Info Card 3D block.

How to Activate the Info Card 3D Block?

Go to 

  • WDesignKit Widgets. 
  • Search the block name and select Gutenberg as the Page Builder.
  • Click on the Download icon.

How to Use the Info Card 3D Block in WordPress?

Add the Info Card 3D block to the page.

Content

In the Main Banner Image section, you have to add the main background image.

After that, in the Select Character Image section, you have to add the image that you want to pop out on hover. 

Then, from the Select Type dropdown, you can select the content type that will be added above the main image. Here you’ll find two options – 

  • Text – With this option, you can add up to three different texts.
  • Image – With this option, you can add an image.

Based on your selection, you’ll find different options to add content.

Special Options

Under the Content tab, from the Select Type dropdown, when Text is selected as the content type, you’ll find toggles that, when enabled, allow you to add strokes to all three texts separately.

Note: You can see this tab only when Text is selected from the Select Type dropdown under the Content tab.

Extra Options

You can add a link to the entire box from the URL field.

By enabling the Tablet Link toggle, you can activate a link specifically for tablet devices.

By enabling the Mobile Link toggle, you can activate a link specifically for mobile devices.

From the Style tab, you can customize the style further.