Adding design/css variations to elements

Hi,

I have bought the agency version with the goal of creating a “website builder” type site and would like some advice on how to approach the task.

First off let me say I really like the system so far. It works very quick and produces clean code and the way you make content regress back to a standard post is very nice and the main reason I purchased.

My goal is to give the end user an easy way to add page components with multiple different types of design.

As a starting point I have looked at pricing tables. In my mind the user should have a way of opening up pricing tables content template category, viewing a list of different design and then clicking the one they want to insert.

The main problem with this is the pricing module just has one design. I’ve got at least 10-15 distinct designs I’d like to add.

I had a look at module code and I can see that I could add in a “design” option and then conditionally output different HTML & CSS but I would like to know if there is a quicker way.

I’ve got a good 40 or so landing pages I want to add in but half of them at least have various effects and such that would require some custom CSS. I know I can make a new theme but then the style changes are global and adding it to the header option in customizer isn’t appropriate.

Is there a quick way of me creating certain design blocks with html/css? Is there any additional module I can get for this purpose without having to roll my own?

Hey Mike! Thanks for reaching out with your questions!

There’s a couple different routes you could take. First and foremost, we’re working on an update to the pricing table module that will introduce a few new designs. We’re shooting to get that out in a few weeks.

Another option is to override the pricing table module in your theme. You can override the module and write your own code. There’s some information about doing that here: http://forum.wpbeaverbuilder.com/custom-module-documentation/#override-built-in

I am not sure if this would work or not, but another option might be to use our WordPress Customizer Import/Export plugin: https://wordpress.org/plugins/customizer-export-import/

As the name implies, you can import/export your theme settings (including any custom code). Maybe you could keep a library of theme export files and load those in?

I hope some of these answers are inspiring. There’s got to be a good way to do it. :slight_smile:

Let me know if you have any other questions.

Thanks for the reply.

I’d like to keep things modular and I think attaching the CSS to a theme export file will be the same issue as having multiple themes.

I had a look at your module and the way you are populating the HTML seems like I could replace that with a system that allowed multiple templates.

May I ask the approach you took to handling multiple designs?

I really like the way you laid out your modules. Instead of embedding your PHP inside the HTML you could seperate the view entirely and use a placeholder system like

Instead of:

<h1> <?php echo $settings->title ;?> </h1>

Have multiple template like:

<h1> {{tite}} </h1>

The H1 tag is an awful example but do you get what I mean? CSS could be added by naming convention.

A system like that would allow me to add element designs at a ridiculous speed. Because of the way you guys map settings I think something like that could work nicely.

I don’t want to get too in over my head too soon so I’ll wait for the update but I think long term I am going to work towards something like that.

Do you have any similar plans in-house?

I’m about to start coding this now. Would be good to get a heads up if you have anything like this planned.

Mike, I think I see what you mean here.

May I ask the approach you took to handling multiple designs?

The HTML and CSS that’s outputted varies depending on the style picked.

Regarding your suggestion to abstract the PHP variables, couldn’t you still have multiple templates and load them in dynamically using the PHP variables? What’s the advantage to using the Handlebars style markup? Can you elaborate a bit more for us please!? :slight_smile: