Hi,
How can I use X theme to create a grid layout like this website:
Each image I load will be linked to another page of the website.
This is my current website?
Do I use Essential Grid?
Hi There,
Options 1)
You could use The Grid or Essential GRID, those plugins which come bundled with X would allow you to build a grid like that with even more interaction and cool effects, you need to add featured images to your pages and use the pages as the source on your grid.
Option 2)
But actually, to replicate this exactly layout that would not be necessary, you could simple go to Cornerstone, Add a Section > Divide your row into 3 columns, click on the magnifying lens icon of your row, turn off column container, turn on marginless columns.
Option 2.a)
On the style box of each column you can add a background by adding :
background-image: url("http://example.com/paper.jpg");
You can use a custom headline element to add the name, a and gap elements above and below it to center it and form the squares.
To link your whole column you can use the following script 6x with different column ids.
To link the whole column you can add an id to each column, for example, column-link and add the following js code: jQuery("#column-link").wrap("<a href='http://www.example.co.uk/get-in-touch/'></a>"); to Cornerstone > JS
You need to repeat the script above for each column.
Option 2.b)
Alternatively you can skip all that and just add premade image to your column, which would work as well.
That said, I would use The Grid or Essential Grid because they give a nice modern effect to the website.
Hope it helps
1 Like