Metronic 7 Demo1 Exported Layout Builder Help

Hello, I have used your Layout Builder in Metronic 7 Demo 1 (https://preview.keenthemes.com/metronic/demo1/builder.html). I have exported it and transferred the files in a working workspace (which is demo1). However after running the localhost, nothing would show up.

The generated index.html from the layout builder is a little bit different from the original index.html of demo1. The index.html from the layout builder uses reference tags to other files: example -

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)

Hi,

Please make sure that the assets are the HTML belong to the same Metronic v7 version.
Also, make sure you use a server-side language to generate the HTML page from the partials and that the assets are loaded properly without a 404 error.

Regards.

Hi Sean, this is my folder tree inside the dist folder, which is inside the demo1 folder of Metronic7 - making sure that the exported html files from the layout builder is in the same main directory with the assets folder. Then, I used gulp to run the localhost server: gulp localhost --demo1. The error does not happen though if I use the original index.html (from demo1) but, when I use the index.html from the layout builder (even though making sure that the files are correctly placed in their directories), it does not work. There are also no 404 errors when I inspect the page sad

Should I edit something with the gulp.config.json file so that the partials folder will be included when I compile demo1 with: gulp demo1?

dist:
+---index.html (from layout builder)
+---assets
| +---css
| +---js
| +---media
| \---plugins
+---crud
| +---datatables
| +---file-upload
| +---forms
| \---ktdatatable
+---custom
| +---apps
| \---pages
+---features
| +---bootstrap
| +---calendar
| +---cards
| +---charts
| +---custom
| +---icons
| +---maps
| +---miscellaneous
| \---widgets
+---layout
| +---layout.html (from layout builder)
| +---general
| +---subheader
| \---themes
\---partials (from layout builder)
+---_extras
\---_subheader

Hi,

It could be the version compatibility issue with your Metronic 7 version assets and the HTML code from the online layout builders.

Could you please try to use the latest stable version of Metronic 7 which is Metronic v7.2.9 here. The online layout builder uses Metronic v7.2.9 as well.

Regards.

Hello Sean, is the layout builder for Metronic7 Demo1 (https://preview.keenthemes.com/metronic/demo1/builder.html) working? The export button just keeps on loading. Also, I used the v7.2.9 using the link you gave but it still does not work sad

Hi,

We have fixed the issue. You can export using that link.

Thanks

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(