Big Button

I want to create a column with an Icon and heading inside … And the column change the color with the hover effect …
But I also want to open a modal bric by clicking. But I only get to work when I click on the Icon or the heading …Is there a way to open the modal bric by clicking the column ? Lika a big button ?

See screenshot

Thanks a lot

Yes you can do that. I answered a similar question just earlier today.

While @Malachiman has provided you with a good solution, if you don’t want to get into coding you could create some square images with the text and icon already in place. You could create normal state images and a set of hover state images.Any image processing application will do for this job.

You can then set up a set of buttons on your page and size them accordingly (If they are full width buttons in columns, select the button, hold the shift key and drag the bottom handle slightly) This process will automatically create a custom class for each button. Selecting each button in turn, click on the custom class name in the properties panel and select the paintbrush tab. You can now add your background images to the buttons. Use one image for the normal state and another image for the hover state. Repeat this for each button. Be sure to set the image to be 100% of the button width and set to no-repeat. If your image doesn’t fit the height of the button, simply re-adjust the size of the button by switching to the metrics tab, click on the three dots in the height box and use the slider to adjust the height of the button.

Tip: make your buttons with square corners if you don’t want them to look like buttons.

1 Like

Thats a great alternative solution @hendon52

@Malachiman Not as clean as your solution, but a nice option for those who may not be familiar with attributes and css. :+1::+1::+1:

1 Like

So many ways to do a lot of stuff. It does come down to what you are comfortable with, most of the time the outcome is the same. The custom attributes panel is so handy. Cuts down the Code Brics.

Hi @Malachiman and @hendon52
thanks for your help. I used the version with the code by @Malachiman. but I think I do something wrong. On desktop anything is fine but doesn’t work on tablet and smartphone …!?
thanks tom :smile:

Hey @tom2, Can you share your file to me and I’ll have a look.

By the way. Only the modal will work on touch devices, the hover becomes mute.