Visual Bricks Builder

I saw this the other day on an Elementor plugin called ElementsKit:

They offer a Widget(Element) builder for Elementor in their package. I thought this was a clever way to offer easy access and a simple approach to encapsulate a CSS/JS/HTML “Bricks” and offer some controls to make them reusable.

They demo it here: https://youtu.be/-Q6Hrs19fVs?t=1380

6 Likes

I’d love something like this I’ve been using unlimited elements for elementor to do mine and currently using html element to create widgets myself and saving as templates.

I’ve requested something like this via help email and it doesn’t seem to be something that’s going to be worked on.

This would be very interesting. I’ve tried both the ElementsKit version and the Unlimited Elements version and Unlimited Elements widget builder is much better / you can do more with it.

If that is the case, I hope they reconsider as it is a killer feature. There is also a Gutenberg Plugin doing something similar and CSS tricks has so many useful snippets that could be converted into these simple kind of blocks (and many more sources):

This is very cool - and so easy to add controls.

No limitation to what could be done, beyond coding skill - or, for some, ability to lift code from other sites :slight_smile:

That sounds like stealing… :grimacing:

But most of the CSS and UI examples are anyway MIT or CC0… so its more a “porting tool” for the builder as there are limitations. As these type of bricks would mostly be visual and bricks doing deeper integrations would probably still require a developer … but for many UI stuff this would make it easy to create and given a community tab probably easy to share these bricks (maybe, bricklets?).

I can see the use of term bricklets having a big future

1 Like

Will be greate if with the marketplace of templates, this function will also be added with support for the marketplace. More designers and developers will be able to sell their templates and widgets with a commission for the sale (just not such that there would be a war like Apple with Fortnite)

1 Like

Yes it came up in a discussion recently. I also agree… having something like this could benefit the builder as it resides below professional “Bricks” add-ons and hence, allows custom “Bricklets” in a matter of minutes and is very design and client specific. Much like playing around with a code pen.

Maybe something like https://app.wp-monkey.com/tools/bricks-widget-creator could be added to Bricks.

1 Like

Letting all the controversy aside around Breakdance/Oxygen and discussion about having classes front and center… the Breakdance Elements Builder is just what I was asking for when I initially made the post on May 21. This is a pretty smart move by Louis and I know that there is a Bricks Widget Creator plugin (third party, I’ll be checking out soon), but I still think Bricks should include something similar natively to stay on pair with what Breakdance just announced.

4 Likes

Yes … fully agree. Not priority #1 for now, but on the long run it should be a native feature.

2 Likes

Yes. Not a priority right now. You can re-use the templates/elements for right now. Code based API is already available since a long time. I am sure a GUI can come up later when the priority features are done.

I think all exist today… you can create your elements with bricks and save this like global element. You can create for example blog post card.

  1. you add main div

  2. add image and link dynamic data from where will be get image

  3. add second div for heading and description

  4. add heading and text widget set HTML tag for heading H4 or any, and add p tag for text and set dynamic data for this

  5. you cand add CSS class for every part of element (is nasteble widget) and your own state for hover, focus, etc.

and finally

  1. I click on main div and select save like global element, or in template you can create a template like section, and import / export all you template for elements

if you need to add custom javascript you can add in this element customer code widget and write your script

2 Likes

@davidovmihail Ofcourse you can do that. It’s more than that though. It’s like creating your custom element with only the properties you need. You can do the same right now via dev api or a 3rd party plugin right now.

Guys I am totally aware of the possible options and experienced enough to use them.

For me it falls into the realm of … „you can build a theme just using CSS, PHP/HTML and JS“. Ultimately it’s about the most convenient way … just like Bricks makes it easier to build a page/theme. Take that thought and marry it with a code pen like interface. Then you have a element builder to extend the builder on the fly. Bricks Widget Creator goes in that direction. I consider it also a feature request that is inline with the announcement of the new slider element etc. as it offer a way to easily create customer specific functionality. In one example I’d imagine we could copy paste code pen examples field by field and then link some values to controls in a convenient form.

I find myself scattering bits and pieces of CSS and JS and any means of “packaging” them into reusable units while directly in the builder would be welcome.

@MaxZieb I believe you might also being going through the Breakdance builder in thorough. How do you see it stacking against Bricks?

I have Breakdance running on an instaWP instance it is easy enough to use and strikes a nice balance between a simple interface and hidden powerful features. Although CSS classes etc. are currently hidden in a tab and not front and center like in Oxygen, but it is all there . It still isn’t production ready, but I see myself trying it out in some builds. Only concern I have is Louis. He is a great developer and certainly a sharp mind but also somewhat clumsy when it comes to marketing. His personality certainly radiates through the product with many high ambitions and a lot of enthusiasm but also the attached uncertainties this type of personality brings. Let’s not forget that he created Oxygen + Breakdance in a short time frame and surpassed Gutenberg development already twice with features and approaches. I currently use Bricks and am looking forward to 1.5 and beyond (it’s a keeper)… the influence of Oxygen users and professionals is certainly felt. I also like the way it is developing and the developer. Both use VUE… and I really like that framework. Should have also been the basis for Gutenberg in my opinion.

I watched the Breakdance element studio tutorial - all nice, but nothing for me. The very idea I am using builders is to have it ready waiting for me in the library. Building my own elements? Nah. Sure, build your sections, save them as templates - for god’s sake, just copy and paste them and then hit that publish button.

For me, it is a matter of efficiency vs. uniqueness. I, personally, love adding a little extra playfulness and integrating JS, CSS etc. beyond the available or only suitable for a single build. If it’s only about efficiency, I see your point in only using the available Bricks and means to build it. If you also start considering uniqueness and playfulness, there is the matter of having a way to create new “Bricklets” and still using them in an orderly way across pages. I wouldn’t be so quick to curse such feature request away. The other day I needed animated arrows with some situational features and I added them using CSS and some SVG. I’d had loved to just build a little brick from them with some essential parameters I can control, as I used them in several templates. It works without, but would have been nicer with controls. I guess that is a matter of taste.