The Hover Card block from Nexter Blocks lets you easily build complex layouts by placing multiple elements inside a single container. You can combine images, text, buttons, and other elements to create engaging designs that capture attention and enhance user interaction.
To check the complete feature overview documentation of the Nexter Blocks Hover Card block, click here.
Requirement – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.
To do so, add the Hover Card block on the page and open the repeater item.
To create the container that will contain other elements, select the appropriate option from the Open Tag dropdown, ideally choose Div.
If you want, you can add a class name in the Enter Class field.
Then set None as the Close Tag. So the tag will remain open.
Note: You must have knowledge of HTML nested elements to create complex layouts.
In the Content, ideally, you should select None because it is a container.
Now, whichever element you add before closing the previous tag will be placed inside the container.
Let’s add an image and text content inside the container.
Click on the +Add Structure button to add an item and select None from the Open Tag dropdown if you don’t want to wrap the image inside any other tag, or you can select any appropriate tag you want.
If you want, you can add a class name in the Enter Class field.
Then set None as the Close Tag, but if you have selected any other tag as the opening tag, select Default as the Close Tag.
From the Content section, select Image.
Follow the same process to add Text content.
Once done, click on the +Add Structure button to add another item to close the container.
To do so, in the Open Tag, select None and Div or the tag you’ve used to open the container as the Close Tag, this will close the previously opened tag.
Set None in the Content section as well.
hover-card-nested-element-structure.gif
Now, the image and text content is inside a div. You can use the browser inspect element to check the structure.
Following this process, you can create complex layouts using nested elements.
