The Material Box is an element that allows you to add an icon along with a header, a paragraph and a button to your page.

By default, you can have two columns when adding the Material Box element. However, you can easily duplicate and delete as many boxes as you want. 


Adding the Material Box

1. Find the Material Box element in the toolbar on the left-hand side under "More elements".


2. Drag-and-drop it into a form or anywhere on your landing page.


Adding a link to the Material Box

3. Make certain elements and text areas clickable and interactive by adding an external link to it.

Highlight an image, an icon, a single word or phrase in the text area, click the Chainlink icon in the formatting toolbar and choose a link type.

You can create a link to another website, an email client, one of your popups or pages. 

Tip: You can also add links to icons, images and text areas.


Formatting the Material Box

4. Select an icon in the Material Box element to open the formatting toolbar. 

Click the Pencil icon to access the icon selection window where you can select a new icon.

You can edit the icon by going to the Inspector tab → Text Style.

Tip: You can edit every element contained in the Material Box, including IconsHeadersParagraphs and Buttons.


Customizing the Material Box

5. Find more customization options in the Inspector tab. Just select the element you want to edit.

You can add a background color, image or gradient, add shadows to texts and text containers, add borders and change their roundness, set padding and margin to adjust text position.

You can also change the text color using the color picker, make it bolder or thinner and adjust its size.

Tip: Make use of the breadcrumbs trail at the top of the Inspector tab to select the right element.