Hi,
hope everybody feeling well.
is there a way to do diagonal pictures and use it as a button ? See my screenshot. Every color should be a picture …
tom
You will have to create this as an image map. Basically, you create your image (as a single image with all colours and labels in place) and then place clickable polygon shapes over each portion of the image, each one pointing to a specific URL. You can create image maps online - one simple to use generator can be found HERE. Upload your image then define the clickable areas using the simple editing tools. Once its done, grab the code and save it. In your Blocs project, insert a code bric where you want your image map to appear and paste in the code.
You won’t see the map at this point, but if you add the image to your page just above the code bric and make it invisible, the image will get saved as an asset in your project and will be saved to the img directory. If you adjust the image path in the code you pasted to point to the img folder, you will see the image map when you preview the page.
HERE is one I created from your image.
If you hover your mouse over each link, a tooltip appears to say where the link goes.
NOTE: This won’t necessarily respond in all breakpoints so you will have to create a separate image map for each of the device breakpoints. You can then use the visibility options in blocs to display the correct version for each breakpoint.
2 Likes
My first thought was same as @hendon52, but an alternative is just using CSS.
A quick search came across this, which gives you a basic guide to start with… just modify some margin and the angle and sort your text spacing out and away you go.
Either method will work well.
1 Like