The grid has controls to set the number of items per row for each device.
The images have alt text and a lazy loading option when the item is not in view at page load.
The content area has a heading and text with the option for a styled span.
Links are indicated by the icon at the top right & can be switched globally from internal to external.
The more/less function is set by entering the total number of items and the number items to show on clicking the button.
All the items can be seen on the EverWeb design canvas by setting the number to show equal to the total number of items.
Showing a larg numbe of grid items may be OK for those using computers butnot so much for those using small mobile devices. A more/less function helps to resolve this and prevent phone users giving uup and leaving.
In general it is never a good idea to show more than about a dozen items in any kind of grid - especially one designed to encourage visitors to click through to other pages of the website.
A different style or layout of a row of links can add a touch of character to a web page layout.
Links in text or not good pratice in a responsive website since they cannot comply with Google's criteria for space around.
Links relating to text content should be at the bottom of any text widget or added as a link bar immediately below the item.
Layout
The auto grid is created without using media queries using the min-max keyword and the auto-fill property. The number of links per row depends on the value for link min width and the grid max width setting or the browser/device window width.
The links can have the same background color or - by checking a box - up to four different colors. The chevron right icon is an option.
The links have the option for a scale on hover animation and to show a box shadow on hover when viewed on conputers.
MENU