Landing page editor - general questions howto build responsive designs

Mautic 5.0.4 - Php 8.1.27

Hello colleagues, i search an easy template for a landing page which has a responsive view for smartphones, someone like in the e-mail tamplates the “Cofirm Me” template, which works in an the landing page editor nearly as the e-mail editor.

I saw many templates in mautic - but i want my system not fill up with templates.
Can anyone recommend a template or else how to create an easy landingpage for sales which contains e.g. a few images, a form, a button, and of couse some text for building a funnel from social media to Mautic.

Thanks in advance for your tips.

Is corporate identity important for your? From my experience, the provided templates are a good start. Then you need to edit code to make it look like your company. We developed a system, that generates a CI compliant template which has all you mentioned. Except I would use Landing Pages in Mautic only for confirmation and maybe for holding a form. Requirements for modern responsive websites can’t be fulfilled that easy with the editor and the templates.

If you are interested DM me and I send you the link.

How can i activate one or more of these templates

for using here in the landing page builder?

You need to enable the grapesjs plugin to use those themes. It’s not enabled by default.

I ended up creating a custom MJML theme. It was easier. MJML is a superset of HTML that lets you create responsive HTML emails and avoid a lot of the code you’d otherwise need. MJML compiles to email-compatible HTML.

1 Like

The Builder is activated. Bug? in 5.0.4?

About your MJML templates:
Do you have a template for a landing page to download and upload in the normal way Mautic provides?
Your Installing infos are to complicated for me. Does it work on a virtual ubuntu 22.04 server - access over SSH? If yes, how?

Did you clear the cache?

No its probably not a bug. Its working in 5.0.4.

I cleared the cache - is it somehow possible to “reindex” the plugins or have i install or activate the plugins?

The themes are all installed here like:

./themes/fresh-fixed
./themes/fresh-wide
./themes/fresh-center
./themes/fresh-left

What can i do to use them in the landingpage editor?

OK - found out the reason:
Why the templates are not showing is here described: If the Grape JS is active the old templates are not shown.
https://docs.mautic.org/en/5.x/builders/email_landing_page.html

For eMail the new GrapesJS Builder is working and some templates are there.

For the landing page the templates above i posted the screenshot, are for the old system. With the Grape JS Builder only the Blank can used. Because i need the Responsive design i will only use the Grape JS Builder.

I made a test from scratch with the GrapesJS Builder. Have some issues:

View on my monitor

Smartphone (Responsive) view.

What do i have to do, that automatically on smartphone view:

  1. The text makes a line feed and adapts to the width of the display?
  2. The image wide scales to the width of the display automatically?
  3. How can i (after finding the errors above) make a template for myself?

Here with an embeded Youtube video. How to bring all automatically to max width of the device display?

Hi @stefan-franz

My recommendation is to consider using a template that has already been developed by Mautic or a third party if you intend to, ensuring it aligns with your brand design. Alternatively, you could opt to build the landing page entirely via code, perhaps using Visual Studio, and then import it into GrapeJS. Creating a landing page from scratch directly in GrapeJS can be quite challenging.

Best regards,
Ricardo

1 Like

I think there are still bugs in the editor and normal it should be possible from scratch.
I wait 2 days, if someone has a solution for this - after that i think it makes sense to create a bug issue.

@stefan-franz If you do some research here in the forum - you will find similar discussions:

You are either very experienced with HTML, CSS and coding or you better look for a professional prepared template, where you leave the code of the modules unchanged and replace its content in the editor. Changes to elements and layout in the WYSIWYG editor will very likely break the code.

The editor is what it is - all web editors have their issues and people learn how to use them. I’m not aware of any web editor, supporting WYSIWYG for e-mail for the variety of mail clients without breaking things like the compatibility.

MJML coding is the closest you can get with compatibility.

Having said this - of course you can help improving editors, if one particular function is broken. You should specify it in detail and probably it needs to be addressed to the grape-js project, as this is the source for the editor used in Mautic.

For my understanding the landing page editor should be able to display accordingly what display is used the landing page in a proper view.

At least the width should automatically scaled. For text, images and video.

Without improvement the Landing Page feature is not really usable for me.