Element (button) could not be rendered

Support
#1

Hi there.

So looking at my backend I get this error: This element could not render due to invalid template markup. This could be due to changes introduced by a third party plugin. The front end of your site should still function normally.

If you go to my front page (backend) you will see. Login credentials provided in secure note.

I do see others have experienced the same. I did update all templates, plugins, etc. I did try to deactivate all plugins. No solutions however. What’s next, please?

Thanks.

#2

Hello There,

Please follow up the steps below:

  1. Ensure everything is up to date according to our version compatibility list here. Please follow the best practices when updating your theme and plugins. Click here for more information.
  2. Go to X > Settings and click on the Clear Style Cache button.
  3. If you’re using a CDN(ex: CloudFlare), please clear the CDN’s cache and disable optimization services. For the CloudFlare you also need to follow the steps below besides the developer mode: https://xthemetips.com/using-cloudflare-rocket-loader-with-x-pro-and-x5/928/1
  4. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
  5. Remove custom CSS and Javascript from the options or Child Theme and test the case.
  6. Switch to the parent theme to check if the issue persists.
  7. Turn off all the cache plugins.
  8. Reset your htaccess file by renaming it to .htaccess-bak. Then in WP Admin Menu, go to Settings > Permalinks and just click the Save Changes button.
  9. Make sure that you’re running at least PHP v5.6.x or later to avoid any WordPress related incompatibility issues. If you’re not sure what your server configurations and settings are, install a plugin like WP-Serverinfo (https://wordpress.org/plugins/wp-serverinfo/) and check your server info by head over to Dashboard -> WP Serverinfo area.
  10. Check your PHP Max Execution Time and set it for 120 for optimal usage (https://thimpress.com/knowledge-base/how-to-increase-maximum-execution-time-for-wordpress-site/).
  11. Increase the PHP Memory Limit of your server. Click here for more detailed information and how to increase the PHP memory limit.

Let us know how it goes!

#3

Hi again,

Thanks for your input. I followed every step except #3 (I don’t use CDN). Unfortunately, the issue remains. Adding the same type of element / button (as a new element / button) does not replicate the issue. The .htaccess (clean version) and .wp-config.php (PHP memory limit + PHP Max Execution Time) files of the current setup are the ones with the changes proposed by you. What’s next?

Thanks.

#4

Further to the above: I sometimes receive the following message:

The preview could not load. This is most often related to a plugin conflict or aggressive page cacheing. Checking the developer console for errors could indicate what went wrong.

This occurs only on non-native language pages when the ‘WPML String Translation’ plugin is activated.

1
Would that be related to the above?

2
Do you have any recommendations concerning how to deal with it?

Thanks.

#5

Hey @nblund,

The errors are not related.

The “This element could not render due to invalid template markup”. error message is usually caused by broken HTML. I checked the content and you do have a syntax error.

Removing the extra double quotes " fixes the preview.

I’d recommend that before you insert custom HTML, you first check your code in a HTML checker tool like https://htmlhint.io/. That will quickly tell you if there’s a problem with your code.

I don’t get the “The preview could not load.” error but that is mostly due to caching. I see you’re using a caching plugin. Please clear all caches again then try to deactivate the plugin and monitor if the issue persists. Also contact the plugin support to learn how to exclude all the theme’s resources (CSS & JS).

Thanks.

#6

Hi there.

So concerning the ‘This element could not render due to invalid template markup’ error:

I have always worked with the Pro Theme as is only adding css and js. I wonder how the syntax error got there in the first place. Please elaborate, if you think that it was made by me - because I lack the knowledge to see how.

Also, if you would go to my backend you will see that I can’t acces the elements - they are invisible - only the said error text is visible. So, how do I change them - or even just delete them?

Thanks.

#7

That error message was introduced lately. Before, the builder was forgiving of syntax errors. But, syntax errors mostly resulted in broken front-end display that is why the builder warns of that now.

To access a broken element, you need to switch to the Skeleton Mode to get an overview of all the elements in your page.

Thanks.

#8

Hi there. Thanks so much. Very helpful. The errors still remains with regards to references to contact formulas. For example, the following

[contact-form-7 id=“11830” title=“Hi Mohocon 2 col”]

is not displayed. Can you explain the type of error occurring? Thanks.

#9

Hi @nblund,

Are you referring to the footer’s button connected to Contact Form? Or is it a different issue? Because I don’t see the error anymore as you have provided in your first post. Please provide more clarification and we’ll check it again.

Thanks!

#10

Hi @Rad

I am referring to the home page (local and english version). If you go to our website (choose the English version ‘/en’ for your convenience) and scroll down to the ‘prices ->’ button that element is not shown in the backend. Please see attached image. My question is why I get the syntax error here?

(Again, if you need to go to backend, login credentials were provided in a secure note in the beginning of this ticket).

Thanks.

#11

Hi There,

I’ve exported your English home page then imported to my local installation but still didn’t see the Price button on both frontend and backend as well.

It most likely the caching issue. Could you please temporarily turn off all the cache plugins (or all the 3rd party plugins) then double check again?

Let us know how it goes!

#12

Hi there.

That’s very strange. I cleared all cache and still see the price link front end. Backend I do see the following default error text - event as I switch to Skeleton Mode:

This element could not render due to invalid template markup. This could be due to changes introduced by a third party plugin. The front end of your site should still function normally.

What’s next? Thanks.

#13

Hi @nblund,

I was finally able to identify the issue why the Priser button is not showing up on Content builder, its because of invalid HTML mark up on your Form.

I did go ahead and fixed the Hej Mohocon 2 kol form which is for Danish page. Please fix the other form (for English page)

You can use this tool https://htmlhint.io/ provided by Christian above to identify where is the issue on your form markup.

Actually, I saw an invalid HTML markup on your text content as well, so you might want to check those text content too.

Please follow Christian’s advise above, to check your copied text first on https://htmlhint.io/ before you paste it on your page.

Thanks,

#14

Okay. I think I finally learned the lesson.
Thanks for your patience.

#15

You’re welcome!
We’re glad we were able to help you out.

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.