Examples of Interactive Grids for Websites
A grid -in the web environment- is a layout with several elements that share a category and/or a common theme. For example, we can create a grid with our most prominent services, portfolio projects, products from our online store, or our latest blog posts.
In a grid, elements are arranged in rows, with a fixed or expandable number (You can add buttons like Load more, navigation arrows, or pagination boxes to continue viewing more rows) and in columns which can be configured to any number we decide.
The most common setup is to create grids with 4 or 5 columns, which adapt responsively to 2 columns on tablets and 1 column on mobile versions. However, we can create grids with any number of rows and columns and also assign the number of rows and columns for their responsive versions as needed.
At Marabelia, we work with a WordPress extension called Essential Grid. This plugin allows us to create very attractive grids with countless interactions with almost any element at our disposal. It offers a multitude of customization and configuration options, both technically and visually.
What is a Basic Grid?
A basic grid is one whose template is already preconfigured, so you only need to make a few programming adjustments to get it working on your website. You can see the list of preconfigured grids that Essential Grid offers by browsing the “usage examples” menu on the plugin’s website.
Here we show you an example grid with posts from the “creativity and design” category of our blog:
What is a Custom Programmed Grid?
Unlike the basic grid, in a custom grid we program the interactivity and design tailor-made according to the client’s specific requirements. We can change colors, functions, and interactions to create truly amazing effects. Have you seen the call to action in the footer of our home page? It’s a customized Essential Grid grid.
We are capable of creating any interactivity and design you ask for. The only limit is our imagination.
