# Landing page editor - general questions howto build responsive designs

**URL:** <https://forum.mautic.org/t/landing-page-editor-general-questions-howto-build-responsive-designs/31733>\
**Category:** Mautic 5 Install/Upgrade Support\
**Created:** [April 18, 2024, 6:31am UTC](https://forum.mautic.org/t/landing-page-editor-general-questions-howto-build-responsive-designs/31733 "2024-04-18T06:31:18Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![stefan-franz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/stefan-franz/32/12758_2.png) [@stefan-franz](https://forum.mautic.org/u/stefan-franz)\
**Post date:** [April 18, 2024, 6:31am UTC](https://forum.mautic.org/t/landing-page-editor-general-questions-howto-build-responsive-designs/31733/1 "2024-04-18T06:31:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dirk\_s](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/dirk_s/32/748_2.png) [@dirk\_s](https://forum.mautic.org/u/dirk_s)\
**Post date:** [April 18, 2024, 6:52am UTC](https://forum.mautic.org/t/landing-page-editor-general-questions-howto-build-responsive-designs/31733/2 "2024-04-18T06:52:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![stefan-franz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/stefan-franz/32/12758_2.png) [@stefan-franz](https://forum.mautic.org/u/stefan-franz)\
**Post date:** [April 18, 2024, 6:56am UTC](https://forum.mautic.org/t/landing-page-editor-general-questions-howto-build-responsive-designs/31733/3 "2024-04-18T06:56:32Z")

</div>

How can i activate one or more of these templates

 ![Templates for Landingpages](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/0/0fae237a69667b2e913d6935e3a1567a627805e2.png)

for using here in the landing page builder?

 ![No Templates](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/5/51247ce5f8ddf05e4855f8eac5b62add9a2b248c.png)

---

<div class="post-metadata">

**Author:** ![jakobpersson](https://avatars.discourse-cdn.com/v4/letter/j/5e9695/32.png) [@jakobpersson](https://forum.mautic.org/u/jakobpersson)\
**Post date:** [April 18, 2024, 7:14am UTC](https://forum.mautic.org/t/landing-page-editor-general-questions-howto-build-responsive-designs/31733/4 "2024-04-18T07:14:13Z")

</div>

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.

> **[MJML - The Responsive Email Framework](https://mjml.io/)**
>
> The only framework that makes responsive email easy. MJML is a markup language designed to reduce the pain of coding a responsive email.

---

<div class="post-metadata">

**Author:** ![stefan-franz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/stefan-franz/32/12758_2.png) [@stefan-franz](https://forum.mautic.org/u/stefan-franz)\
**Post date:** [April 18, 2024, 7:32am UTC](https://forum.mautic.org/t/landing-page-editor-general-questions-howto-build-responsive-designs/31733/5 "2024-04-18T07:32:25Z")

</div>

The Builder is activated. Bug? in 5.0.4?

 ![GrapesJS](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/1/1ab3f41c6dd850fc7e6a787ef7c64a7a15e7f798.png)

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?

---

<div class="post-metadata">

**Author:** ![dirk\_s](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/dirk_s/32/748_2.png) [@dirk\_s](https://forum.mautic.org/u/dirk_s)\
**Post date:** [April 18, 2024, 7:37am UTC](https://forum.mautic.org/t/landing-page-editor-general-questions-howto-build-responsive-designs/31733/6 "2024-04-18T07:37:00Z")

</div>

Did you clear the cache?

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

---

<div class="post-metadata">

**Author:** ![stefan-franz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/stefan-franz/32/12758_2.png) [@stefan-franz](https://forum.mautic.org/u/stefan-franz)\
**Post date:** [April 18, 2024, 7:49am UTC](https://forum.mautic.org/t/landing-page-editor-general-questions-howto-build-responsive-designs/31733/7 "2024-04-18T07:49:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![stefan-franz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/stefan-franz/32/12758_2.png) [@stefan-franz](https://forum.mautic.org/u/stefan-franz)\
**Post date:** [April 18, 2024, 8:06am UTC](https://forum.mautic.org/t/landing-page-editor-general-questions-howto-build-responsive-designs/31733/8 "2024-04-18T08:06:27Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![stefan-franz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/stefan-franz/32/12758_2.png) [@stefan-franz](https://forum.mautic.org/u/stefan-franz)\
**Post date:** [April 18, 2024, 9:56am UTC](https://forum.mautic.org/t/landing-page-editor-general-questions-howto-build-responsive-designs/31733/9 "2024-04-18T09:56:05Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![stefan-franz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/stefan-franz/32/12758_2.png) [@stefan-franz](https://forum.mautic.org/u/stefan-franz)\
**Post date:** [April 18, 2024, 10:27am UTC](https://forum.mautic.org/t/landing-page-editor-general-questions-howto-build-responsive-designs/31733/10 "2024-04-18T10:27:10Z")

</div>

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

View on my monitor

 ![Landingpage - Text Monitor](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/0/0df0effba6efc2d024171011b0e2754b613dee8f.jpeg)

Smartphone (Responsive) view.

 ![Spartphone View](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/4/40e24dce3b8cfca74f933efd70afc84e3e91ee25.jpeg)

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?

---

<div class="post-metadata">

**Author:** ![stefan-franz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/stefan-franz/32/12758_2.png) [@stefan-franz](https://forum.mautic.org/u/stefan-franz)\
**Post date:** [April 18, 2024, 10:51am UTC](https://forum.mautic.org/t/landing-page-editor-general-questions-howto-build-responsive-designs/31733/11 "2024-04-18T10:51:37Z")

</div>

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

 ![Landinpage Smartphone with YT Video](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/b/bc873f1a715f7da9395964e79304a576709636e5.jpeg)

---

<div class="post-metadata">

**Author:** ![ricfreire](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ricfreire/32/14973_2.png) [@ricfreire](https://forum.mautic.org/u/ricfreire)\
**Post date:** [April 18, 2024, 5:23pm UTC](https://forum.mautic.org/t/landing-page-editor-general-questions-howto-build-responsive-designs/31733/12 "2024-04-18T17:23:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![stefan-franz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/stefan-franz/32/12758_2.png) [@stefan-franz](https://forum.mautic.org/u/stefan-franz)\
**Post date:** [April 18, 2024, 5:38pm UTC](https://forum.mautic.org/t/landing-page-editor-general-questions-howto-build-responsive-designs/31733/13 "2024-04-18T17:38:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dirk\_s](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/dirk_s/32/748_2.png) [@dirk\_s](https://forum.mautic.org/u/dirk_s)\
**Post date:** [April 18, 2024, 6:29pm UTC](https://forum.mautic.org/t/landing-page-editor-general-questions-howto-build-responsive-designs/31733/14 "2024-04-18T18:29:45Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![stefan-franz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/stefan-franz/32/12758_2.png) [@stefan-franz](https://forum.mautic.org/u/stefan-franz)\
**Post date:** [April 18, 2024, 6:57pm UTC](https://forum.mautic.org/t/landing-page-editor-general-questions-howto-build-responsive-designs/31733/15 "2024-04-18T18:57:48Z")

</div>

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.
