Infobox widget let you add title, description and icon in a single box for your web page with different style. You can build this widget easily with EnterAddons
Using Infobox Widget:
You can see the below video to get an insight into how you can use the Infobox Widget, Or you can follow the documentation whichever you find convenient.
Firstly, select the Infobox Widget from the menu bar on the left-hand side of your screen and drag and drop it in the selected area.
Step1
Secondly, from ‘Content’ Section you will get Infobox Content, Icon and Infobox Link/Button.
After that, from ‘Infobox Content’ section, you can edit title and description respectively. And that is given below.
Then, from ‘Icon’ section you add Icon Position , Icon Type and Icon ( svg and image ) respectively.
After that, from ‘Infobox Link / Button’ section you can edit button-text, link, button-icon-position ( top, left, right ) and button icon respectively.
Step2
From ‘Style’ section you can stylize the widget. You will get the options Wrapper Settings, Content Area Settings, Descriptions, Icon, Icon Divider Style and Link Button Style.
After that from ‘Wrapper Settings’ section, you can edit content alignment, margin, padding, border-type, box-shadow, border-radius and background-type respectively.
Moreover, you can find HOVER view effect from this section, like below.
Then from ‘Content Area Settings’ section you can edit margin, padding, border-type, box-shadow, border-radius and background-type respectively.
Then from ‘Title’ section, you can edit color, typography, margin, padding respectively, that is given below.
Moreover, you can find HOVER view effect from this section, like below.
Then from ‘Descriptions’ section, you can edit color, typography, margin and padding respectively in NORMAL view.
Moreover, you can find HOVER view effect from this section, like below.
Then from ‘Icon’ section, you can edit color, icon-size, icon-container-width, icon-container-height, margin, padding, text-color, border-type, box-shadow, border-radius and background-type respectively in NORMAL view.
Moreover, you can find HOVER view effect from this section, like below.
After that from ‘Icon Divider’ section, you can edit divider-width, divider-height, top-position, bottom- position, margin, padding and background-type respectively.
Then, from ‘Link / Button Style’ section you can edit content alignment, text color, border-type, typography, margin and padding respectively in NORMAL view.
Moreover, you can find HOVER view effect from this section, like below.
Step3
Finally, after finishing all the editing, click update and then click on ‘Preview > Preview in new tab’ to see your work live.
That’s it.