Design landing pages with external no-code editor

General Discussion
1

It is possible to create landing page and then host it with mautic.

  1. Create static html site with tools like Publii, Silex, teleportHQ (creates design from Figma)…
  2. Make 1 html file fom all css, javascript and html files with inliner GitHub - remy/inliner: Node utility to inline images, CSS and JavaScript for a web page - useful for mobile sites (with -i flag so images are not encoded, because mautic cannot save encoded images) command looks like:
    inliner -i “A:\download\web\index.html” > “A:\stiahnute tu\inlined.html”
    where first argument is path to your html frontpage and second argument is path to file that will be created.
  3. create landing page in Mautic, choose Code Mode theme and copy paste code from created html.
    Upload folder with images to mautic with media manager.
  4. link all images: in created html is path to image for example: src=“/public/image.jpg”. You already uploaded folder with media (in this case folder name is public - teleportHQ saves all media in public folder) so with CTRL+F find all “public” in code and add https://yoursite.com/media/images/ to the path so it will look: src=“https://yoursite.com/media/images//public/image.jpg”

This helps when you want to use hundreds of teplates available on the internet and want to A/B test landing pages within mautic

2

If you install this chrome extension Visual CSS Editor - Chrome Web Store you can easily design forms as well.

  1. Open form preview from Mautic
  2. design form with extension, you can design style of messages as well, only you can’t see them during designing
  3. copy css code
  4. When you are embedding form to your site, embed it with html (manual copy) and paste copied css inside existing bracket
3

Hello @marko008,

The simplest solution I can suggest is to utilize Mautic’s native page builder, which is GrapeJS Builder. I understand that it might not be the most ideal choice, as it can be challenging to create high-quality content with it, even for building emails.

Alternatively, you can use an external drag-and-drop page builder and then transfer the code to the Mautic builder. There are two approaches to this:

  • Copy the full code to the HTML and CSS section.
  • Or paste it into the “Edit code” section.

Please be carefull, as some automatic changes may occur with classes during the transfer after you save.

image
image845×216 12.8 KB

image
image839×197 12 KB

For any of the options mentioned, some familiarity with HTML and CSS will come in handy! I’d suggest considering Bootstrap as it’s open-source, offers responsiveness for both computers and mobile devices, and provides a diverse range of elements to enhance your landing page. You might want to explore a Bootstrap builder. I hope this information is helpfull!

Best regards,
Ricardo