New Bric: Modal Designer

This is Modal Designer!

Hello Everyone and Happy Holidays!

I wanted Modal Designer to be available in this Black Friday Sale so that as many people can take advantage of the discount that would like to do so. I’m not able to do lot’s of sales during the year so I thought this would be a nice treat for folks who’ve had their eyes on this project.

Modal Designer is available as part of the Black Friday Sale, and is available in both bundles that I’m offering. Please note that a video is being made to show off the features.

.
Modals are practically centric to content marketing and online sales funnels. They are great for promoting products, featuring new content or announcing that big sale. They can be a very important touchpoint for your website.

In Blocs, we have Bootstrap modals. They are a really flexible, and powerful tool in our design arsenal, but they are pretty generic “out of the box”. They don’t really look like modals you see in online marketing campaigns. You’ve got to style them according to your brand’s guidelines and personal taste.
.

Above: Example modals in Modal Designer for Blocs.

Now it’s a lot easier to crank out a stack of well crafted modals for yourself or your client. Best of all it’s 100% compatible with Cadence. Together you’ve got a complete and robust popup builder for Blocs.

" After 5 minutes of creating popups with Modal Designer you’ll be hooked. You might just have 5 completely unique modals completed."

Modal Designer Overview

Modal Designer takes the modal creation process to the next level. It’s a complete reimagining of how Bootstrap modals are structured and designed. There’s also several small (and seamless) improvements to the responsive behavior of Bootstrap modals.

Documentation Here: (just updated 11/27)

A video of Modal Designer will be uploaded very soon. Meanwhile you can get a sneak peek near the end of the Cadence video.

Add Content Brics to Modal Designer

Modal Designer takes advantage of the newest api capabilities. Modal Designer lets you add individual brics like headings, paragraphs and buttons to the modal as you normally would with a core Blocs modal. The feature is very new to Blocs api, so at the moment simple brics like the Blocs heading, paragraphs, buttons that sort of thing. As this api feature matures in Blocs, so will Modal Designer.

Layout Control

Move your modal’s “hero image” around or remove it altogether. Based on years of experience with clients requiring quick turnarounds and original designs per each campaign. The old way could take as much as a week of design comps and content revisions that impact design. Testing and tweaking for impact on responsiveness becomes a tedious and time consuming process. Let’s face it, at some point you won’t tailor those campaign modals so much. That’s why popup builders exist on other platforms! now Blocs has one that’ is both powerful and unique!

Responsiveness the Blochead way

The original Bootstrap modals needed some improvement, especially with the addition of a “hero image” to the mix. Also, now you can specify the additional behavior for smaller breakpoints.

Especially great with Cadence

Cadence and Modal Designer are a perfect pairing for a robust yet easy to implement popup builder on your Blocs website.

Modal Designer will have you looking like a pro marketer and converting like crazy in no time!
.

Black Friday Sale is Here. 30% Off Storewide

$30 $21

For a limited time only.

Get Modal Designer here.

.

4 Likes

I think Modal Designer has more options than Any Video. Looks fantastic.

Can Modal Designer and Any Video work together?

Thanks Pete, That new api feature is definitely a work in progress. Kicked my but a few times it did. :blush:

I’m super happy to see Any Video in the wild!

3 Likes

Just purchased this very well designed Bric. Thank you, for all the time and expertise you put into it for us. I’m looking forward to watching the video.

They do not, in what capacity are you thinking? It would seem to me that they each serve different purpose.

1 Like

Just curious if the Any Video could be put into the Modals. Might look cool having various Modal videos.

I did experiment with Any Video inside Any Video as it does have an experimental Bric Drop Zone.

It caused a rupture in the Space Time Continuum :rofl::rofl:

1 Like

That’s why I called it an experimental Bric Drop Zone. Well done implementing it though. Awesome.

Already purchased!!!

Rich the Weatherguy

1 Like

A job just came in for an artist client and this looked like it would be ideal for presenting the enlarged images, so I purchased Modal Designer and I’m looking forward to seeing the video. I’ll take a look at the documentation.

Hi Whittfield:

Here is your first stupid question…
If I drop a Modal designer bric into my webpage, can I call it up with a button for instance?
How would I do that?

Thanks

Rich the Weather Guy

Oh that’s my foul. Just added that to the docs of course.

  1. When using a button you’ll select “Navigate to Url” from the Interactions drop-down and leave that blank . (You can skip this step if you are using links)

Blocs 2021-11-27 14-05-17

  1. Next, add the following custom data-attributes to your button or link.

data-bs-target="#your-modal-id"
data-bs-toggle=“modal”

Blocs 2021-11-27 14-00-11

That’s it!

2 Likes

Thank you…

Rich the Weatherguy

Hi @Whittfield ,

I didn’t see your great promotion and I bought this Friday “smart nav” and “tab anything pro”. How can I benefit from your “top pick buddle” promotion knowing that I have already bought 2 of your products? Can I get my money back so I can buy your top picks bundle or do I pay the difference?

No worries, just pay the difference and Top Picks is yours.

Direct message me your email. I’ll email you a discount code to purchase the bundle for the value of the difference.

Glad you brought that to my attention. I definitely want you to get the good pricing!

Hi @Whittfield - I have treated myself to this bric as I have a client who is looking for some nice modals for upcoming promotions - so that was good timing !

I am having a moment where I can not see how to make this trigger to a button.

The Docs on the download are different to the docs posted above - but I still can not seem to add anything in the custom attributes.

Will you be doing one of your brilliant step by step videos showing how to do it from the start and do this with Cadence too ? - many thanks.

Hi @AdieJAM, I’m working on the videos for later this week. The best docs for Modal Designer at the moment are Modal Designer - Google Docs

I added the data-attribute info to that document.

The attributes go on the button and the button’s interaction set to URL, but leave them blank.

2 Likes

You am me both Adie…

Rich

Do you guys not know how to set data attributes in Blocs?