I want to make a bloc of pictures that are links to pages. I found something like this in the template producer from blocs templates, and downloaded is, but I am stuck. @Eldar
Hi @bonoman
What exactly is the problem? Do you want to connect the play icons to pages? Or make the whole images link to other pages?
@Eldar i like to make a grid like this of picures and a text upon it. The picture must link to a page. Thx!
I’ve done something like you want to do using icons instead of text, but I’m sure it will work with text if that’s what you prefer.
Start by placing a three column block on the page. Set it so that it has no padding.
Select the row and uncheck the “Include Gutters” option in the properties panel.
In the Brics panel, choose the image bric and place one in each of the columns.
Next, choose an icon (or text) bric and place immediately below the image brics.
There will now be a choice of what you do next, depending on whether you are using icons or text.
if you are using Icons, you will see in the tree panel on the left of the screen that the icon will be in a div container. Select this div container and create a custom class (name it icon-shift). In the class editor, apply a NEGATIVE top margin to position the div and its icon over the centre of the image. You should also add some bottom padding so that the div container extends to the base of the image.
Next, select the icon itself and create a custom class (name it icon-style), You can now set a colour for the icon, apply any translucency and a hover effect if required.
Apply your custom classes to the other divs and icons.
Once everything is how you like it, duplicate the bloc to create a second row of images. Replace the images in the second row.
Preview, and you should see your grid looking something like this. (note, the red icon is the hover colour I applied to the icon)
You can now go back to design mode. Select each of your icons and create an interaction that provides the links to the relevant page.
If you want to use text instead of icons. things are a little easier. Text won’t be placed in a div container, so create and apply the custom classes directly on the text container. Again, you would create an interactive link on the text and style it with a custom class if required.
2 Likes