With the Hover Card block from Nexter Blocks, you have the flexibility to design a completely custom layout that matches your unique preferences. You can effortlessly add and arrange elements, customize styles, and incorporate interactive hover effects to create visually stunning and engaging content.
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 create a custom layout using the Hover Cards block, ideally, you should have the design ready.
For example, here, we’ll create a simple profile card. Where we’ll have a profile image, name and designation.
For the layout structure, we’ll keep all the profile image, name and designation inside a div called “card”.
To create the layout, add the Hover Card block on the page and open the repeater item.
Set Div as the Open Tag and card as the class name since we want to add other elements inside the div, set None as the Close Tag. In the Content, select None because this div is just a container.
Click the +Add Structure button to add the next item, and select Div from the Open Tag dropdown.
Then set Default as the Close Tag, so the tag closes there.
From the Content section, select Image.
Again, click on the +Add Structure button to add the next item for the name, and select H3 from the Open Tag.
Then set Default as the Close Tag to close the h3 tag.
From the Content section, select Text and add the content in the Content field.
To add the designation, click the +Add Structure button to add an item, then select p from the Open Tag.
Then set Default as the Close Tag to close the p tag.
From the Content section, select Text and add the content in the Content field.
Now to close the main div i.e. “card” click the +Add Structure button to add another item. In the Open Tag, select None and Div as the Close Tag, this will close the div with the class name “card”.
Note: Make sure to style the elements according to your needs.
So the layout is ready, where we have an image, heading and text inside a div called “card”.
This is how you can create a custom layout.
