New Bric: Modal Designer

hi @Whittfield - yeah, I have done it before when changing accordion etc - but can’t seem to get it working !..its something stupid i’m missing out ! lol

oh okay got it.

The interaction for the button. just make sure that’s set to open a url. but leave it blank. This way the button know what kind of button it is.

Then adding the attributes you have to put the # symbol in there. That’s how Bootstrap does it.

Just so you know, I am dedicating time this week and the next couple of weeks to work on video. I’ll share as much as I can asap.

I added the attributes as you show in the docs Whittfield.
The button still would not work?

Did it several times, FYI…

Rich The Weather Guy

I’ve just purchased this bric but it doesn’t show in preview. Is that normal?

Definitely should show in preview. I’m cutting video today so help is on the way!

1 Like

Mine doesn’t show in preview either? I guessed as it’s a Modal this wouldn’t?

The video coming from the main man himself with reveal all!

Hi @AdieJAM, when you say didn’t show, do you mean you can’t launch the modal in preview?

Hi @Whittfield - when i add the Modal designer and add an image and some text and preview it, the preview is blank - nothing at all - but I expect this as its a Modal and needs a trigger to open it…but can’t get that to open it.

Its probably something silly I am missing out on! It will all be clear when your video is out.

I have it working in preview and also able to close it, though it took a few attempts.

The part I am perplexed by is adding text content on the right hand side. By default the modal seems to have two parts and the image is on the left, while the right hand side has an empty container. When I first tried I found it impossible to add a paragraph bric, so I started from scratch and was then able to add text, but then found it impossible to edit.

modal-designer

EDIT: It seems I can edit the text now but the paragraph bric has to be accessed via the layer tree rather than the canvass.

yes, that’s normal! That’s how native Blocs modals also work, you have to trigger it.

You can easily switch the location of the image or remove it all together. This pattern of popup designs are high converting and it’s a pain to make a lot of them. So now it’s really easy.

I have noticed that it’s sometimes difficult to select the items you’ve added. That’s a Blocs issue that Norms going to address. But for now you can use the layer tree if you have trouble selecting. That has worked for me through much testing.

Modal Designer will improve as the api features does.

Yes, moving the image position seems easy enough. It took a couple attempts sorting out the data attributes but that is working reliably now. The only perplexing part was selecting and editing the text. At the first attempt it wouldn’t even let me add a text bric but now I have it working. Once this is set up with the final look I’ll save it as a custom Bloc, then just rinse & repeat changing the ID as needed.

1 Like

Nice glad things are smoothing out for you. This feature is so cutting edge to Blocs that it’s almost shouldn’t exist yet! :grinning:

A little extra work to get this one off the ground, and I’ll be making steady improvements and helping Norm any way that I can to strengthen this feature. It really is wonderful additional to the platform.

1 Like

Thanks, looking forward to the video.

Working on it now, but I’m gettin g a lot of pings after the sale so it’s stop and go!

1 Like

It is looking awesome and works perfect with Cadence! Just one question: How do I get rounded corners on each corner? I have them now only on one side…

2 Likes

That’s a CSS overflow fix. No doubt @Whittfield can address that easy.

I have purchased Modal Designer, looking forward to using it. :grinning_face_with_smiling_eyes:

Like you Adie, I can’t see it in preview, nor can I create a button link that opens it.

Rich the Weatherguy

I will check tis out asap, Could be an override maybe, in any case I’ll fix it right up.

2 Likes

Something I’ve just picked up on is that the modal will produce very odd results at full width or full screen, unless you also set the bloc to full width in the side panel. If I have the bloc width set to standard it’s completely wrong as you see in the screenshots.

I was hoping to achieve a correct looking full width result within the column width setting e.g 10 to line up with other content within the defined site width setting e.g 1140 pixels. That doesn’t seem to be possible.