Take a closer look …
This column has a heading, text and an optional link.
Custom Markers
Choose from 100s of HTML symbols to create the list markers.
The box links widget can create up to 48 links to open internal or external pages and have a new window option. As can be seen from the example, each link can have a different background color.
The links are in a grid layout so the number of items per row can be specified for each device type and the grid gap and all around padding can be adjusted.
Vertical Adjust
The links themselves have auto alignment so thay will all the links in a row maintain the same height despite varying vontent, The link text is in a span which is aligned vertically in the center.
To make the links more prominent, they can be assigned a minimum height - in this case the min height is set to 60px and the top/bottom padding to 10px.
Hovers
The text itself can be assigned a hover color and there is an option to assign a hover background. In the example, the hover color is set the same as the link color and the hover background is black. The hover have a transiton animation to give a better UX (user experience).
Text Align
Text is aligned center but there is an option to align it left on mobile phones in portrait mode if required if the blocks are set to one per row.
Inline list items
Individual backgrounds
CSS symbol list markers
Adjustable items per row
Marker adjust & vertical align
Optional inline block links with new window option
The grid can have up to 48 inline list items with a custom marker. The widget can be used to list items or to create links to other pages or sites.
Layout
The layout is similar to the BoX Links shown above with the addition of a custom marker. The marker uses the CSS equivalent of any of the hundreds of HTML symbols. The marker can be aligned vertically at the top center or end of the box and has controls for size, color, spacing and vertical adjustment to compensate for the effect of the marker size.
Markers
Click the tab in the widget settins panel to go to the website with the HTML symbols. Fine the required symbol and double click it to open it in a window with the code options. Copy the CSS code and paste it into the box in the widget settings.