How do I use image panels?

Hi, this is Sandra from GREYD. GREYD.Forms is a form generator for WordPress that is natively integrated in GREYD.SUITE. In this video I am going to show you the setting options for our image panel block. Image panels are very handy module in GREYD.Forms. They allow you to offer your user very stylish selection options with images instead of only simple checkboxes or radio buttons. This also pushes your conversion rates. After placing the block in your form, you can directly edit the label – the text above the field – as well as the text in the individual panels in the editor.

You can also add additional panels and by clicking on the plus symbol here, you can also directly select an image, icon or similar for the panels. Here on the left, you can also choose one of your global field styles or also work without any preset styling. You can define the alignment and you will find several text formatting options for the label. On the right, you can now overwrite the individual field name as it will be submitted in the backend. You can also make the field mandatory and decide whether the user should be able to select more than one option at once. Under layout, you can define whether you want the panels to be placed below each other or next to each other and how you’d like the text and image to be placed. You can have the image on top, on the right, below or on the left of the text.

Down here you can edit the label in terms of color and size including the possibility to create a hover effect. If necessary, you can also add an info text that will be available via such an info icon. Next is the appearance of the individual panels. You can define colors for both the panel and its text including a toggle for the opacity. Here you now have 3 different states that can be styled individually: the normal state, the hover state and the active state, which is when the panel was clicked.

Next is the size. You can define the height and width of the panel and also stretch the panels to full width. The padding – which is the inner space between the border and the content of the panel – can be defined individually for each side and also individually for each breakpoint. Here we can edit the font size for the text with different units. And with the border radius you can make the corners of the panels round – again possible for each side individually. Same here for the border itself, which you can define in size, type and color – again for all sides and 3 individual states.

And last but not least we’ll now have a look at the settings for the individual panels. At first you can overwrite the field value to be submitted in the backend. You might already have uploaded an image for the normal state. If you’d like to, you can now upload up to 2 more images for the same panel to be shown on hover or after clicking on the panel. Here you can see some frontend examples of image panels with borders, hover effects, icons as well as clickable images.

For more videos and information please visit our Helpcenter.