I am new to Beaver Builder but have spent the last 2 days familiarising myself with it and rebuilding 40 pages from my site / LMS (moving from Runway Framework + Visual Composer). I have used the BB theme and Beaver Builder to re-create some really complex pages and I love it; complex full width layouts are very simple and quick to produce…
Unfortunately, however, I am having problems using BB on pages which have additional HTML functionality and shortcodes embedded into them (ironically, they are actually quite simple layouts but have more interaction)…
I am using shortcodes to hide sections of premium content in the page (subscribers only) and some simple HTML snippets for addition of ‘goodies’ (such as a bootstrap modal which works really well).
I have experienced a few problems though - as soon as I embed shortcodes and HTML snippets into the page, it seems that all of the rows get ‘messed up’ and BB builder becomes unusable as I cannot select some rows or modules - here are links to a couple of screenshots:
http://screencast.com/t/OP2hiAeF4IS (HTML module overlays accordion module and all subsequent modules)
http://screencast.com/t/CPfbWEpx (3 rows are all highlighted when hovering over one and do not behave normally - again selecting rows/modules is problematic)
This seems to happen as soon as I put an HTML module on the page. When I remove the HTML module the rows start behaving normally again. This seems to be a problem only with some HTML snippets / shortcodes (some shortcodes/HTML does not cause a problem).
I have two questions:
How can I use a two part shortcode eg [loggedin]xxxx[/notloggedin] that hides premium content? As BB runs the shortcode, BB hides the content I am trying to edit (and I have to be logged in to edit it).
I could ‘comment out’ the shortcode and add it back in but some pages have numerous shortcodes to hide various panels and this is quite a time-consuming approach.
Is there any way I can make it so that the shortcode does not actually render (other than commenting each one out)?
I also wanted to use a two part shortcode from a third party plugin such as Shortcodes Ultimate (for example, a nice box layout or a tabbed section or accordion [that is not one of your modules]). They work if I put the whole shortcode in a text/html module but I wanted to have the start/end shortcodes in separate HTML modules then use BB to edit the content inside it…however, this does not seem to work as the row / module overlays / selections see to go awry and on some occasions the closing shortcode seemed to disappear completely. Is there any way I can fix this?
What would really help is if there were a simple tick box option on the HTML module to stop it rendering / running when in edit mode…or a ‘developer mode’ option somewhere at the module or page level that could be toggled on or off…
Does this make sense? If so, do you have any suggestions that would make my development of these pages using BB a bit easier?
The problem with HTML modules in particular is that you can place opening/closing tags, shortcodes, and whatnot. A simple unclosed div tag, or extra closing div tag would wreck the entire structure of the builder. We indeed have several problems regarding this. All I can say is, just be extremely cautious when using dealing with div tags.
Re shortcodes, WP processes that and since we’re a frontend page builder, it gets processed even while still editing. The only workaround I could think of is to not let WP parse the shortcodes while you’re still editing. You can do so by adding the line below to your functions.php file. Once you’re done editing, simply remove it. remove_filter( ‘the_content’, ‘do_shortcode’, 11 );
Thanks for your frank answer. Well, I am glad it is not me being stupid! Now I understand the issue, I can try and develop workarounds.
Your suggestion of using a filter to stop running shortcodes is fine if a site is not live but will not work for HTML and is not an option when making modifications to a live production site…
This is a major problem for ‘serious’ application development as there are loads of times you might want to leave a div open (for a few rows) or have a shortcode that does not run during the page building activity…
What do you think about the idea of having a tick box in the HTML module to tell just that module not to run during editing? Rather than run the HTML, it could just render it as ‘commented out’ code on the page (which would be useful so you can see where it is in WYSIWYG mode).
Using this to ‘isolate’ and suspend rendering of that HTML module during editing would be an easy / quick fix to implement that would fix a whole bunch of issues and allow developers to use the builder for editing more complex pages without all of these problems.
I would appreciate your thoughts on this…ie whether you guys think this is a good idea.
Meanwhile, until there is an alternative option, I will manually comment out the offending HTML modules during development and go through them them to re-activate / test / to go live with the page or look at implementing a function ‘switch’ to selectively kill off the relevant bits of code in particular pages.
I think the main issue is that the way you’re using shortcodes will break the builder’s markup.
For example, when the layout is being rendered, all of the opening divs for the row, column and module will be rendered, but once your shortcode is reached, the closing divs will not be rendered. So adding a checkbox to the HTML module won’t work in this case, nor is that something we can implement quickly.
I think the optimal solution would be for us to give you a way to show/hide rows, columns and modules based on certain conditions like logged in and logged out. That’s on the roadmap, but unfortunately, I don’t have an ETA for when it will be done.
I rarely say this, and I hate saying it, but I don’t think we have a viable solution at this time.
Is there any way you can put the opening and closing shortcodes in a single HTML module with your content in between them?
Thanks for your answer - I see what you are saying / the issue with my last suggestion. I can put the shortcodes in a single HTML or text module but there is a lot of content in between and this is a backward step (and the TinyMCE content area in the text module is not that big in the modal).
As a developer what I really need is a module is like a ‘psuedo-row’…that can be placed outside of a row that does not render in the builder…that would be very cool and be the ultimate solution. That would give BB another serious USP over the competition too! Is that a feasible solution in the longer term?
If you want to make BB ultimately flexible, it really needs to be able to be used with third party shortcodes - as you know, most membership systems, learning management systems, shortcode ‘packs’ or other complex plugin functionality relies heavily on them for showing, hiding and formatting content…
A proprietary show/hide system would work for some people but would not be anywhere near as flexible as cracking the issue of embedding third party shortcodes as obviously, it is never a simple case of logged in or not logged in and third party shortcodes often have additional parameters etc…
I only say this to help influence your roadmap constructively!
It is a shame as I thought BB would allow all of this and I have just moved away from Visual Composer for the same reason…(the other reason was the horrendous amount of shortcodes it puts in the content).
That aside, I am still pleased I have made the move to BB and I have not given up trying to develop a workaround solution (eg a plugin that allows me to switch off the shortcodes page by page). This morning, I developed my first attempt and it almost works…I just need to find the time to work at it and I need to get my head around your classes/CSS a bit better as the output is not staying quite where I put it!
One other question I have: Is there a hook/filter that you would recommend that I can use to target some code at admin users in BB page edit mode?
I have been looking into this problem a bit more and used a bit of a lateral thinking - more modularisation…
Rather than trying to use BB directly in my custom post types (Action Plans) which contain various shortcodes for membership accesss control (WordPress Groups) and my LMS (LearnDash), I have set up a second custom post type called ‘content module’.
I have then embedded the ‘Content Modules’ in the original custom post (Action Plans) using the ‘Insert Pages’ plugin (I see you have spoken to Paul in his support threads a couple of months ago).
This almost works…it renders the BB content with all the HTML/divs intact - the only problem is that it looks like it can’t find the style sheet…
FYI - just to give me more programmatical control on this project, I am now using Genesis + Dynamik + Beaver Builder.
That said, I am still interested to know if I can modularise my BB formatted posts (in a custom post type) and embed them in parent pages using Insert Pages. This would have significant adavantages from a content management / re-usability point of view.
I see what you mean about shortcodes, we do support most, but ones that need to wrap rows typically break the builder (or any builder for that matter). I know LMS’ are popular, so we’ll definitely be brainstorming how we can handle this at some point.
One other question I have: Is there a hook/filter that you would recommend that I can use to target some code at admin users in BB page edit mode?
You can check current_user_can in the init action to see if a user is an admin.
This almost works…it renders the BB content with all the HTML/divs intact – the only problem is that it looks like it can’t find the style sheet…
That’s a great solution! You’ll need to use the fl_builder_global_posts filter to get the CSS/JS to load for posts that aren’t in the main loop.
That is fantastic news! Just tested it on a content module and it works a treat.
I am very grateful for your help and patience helping me to arrive at a solution.
The bonus point is that it made me think about my data (content) architecture again and by modularising it and using Insert Pages, I can re-use BB formatted content modules in different areas of the site (e.g. my mini-guides and full course).
I will now close/mark this thread as resolved - thanks again for all your help
Mark
PS. I am not a clever programmer like you guys but conceptually [in my simple world at least ;-)], it seems that this approach might be applicable to the page builder itself - ie to have a ‘abstracted meta layer’ above the builder…easy for me to say, not so easy to do I am sure!
