vielhuber / mjmlhelper Goto Github PK
View Code? Open in Web Editor NEW🌈 Lil' toolbox for mjml (send mails, CleverReach). 🌈
mjmlhelper's Introduction
mjmlhelper's People
Contributors
Stargazers
Watchers
mjmlhelper's Issues
Something goes wrong, when I compile the html with version 2.0.9 compared to version 2.0.7.
@vielhuber
I have the same mjml code that I compile with mjml v.4.12. But when I use mjml helper v.2.0.9. the elements in the CR backend are not editable after I upload the zip file. When I take the same mjml code paste into another project and use mjml helper v2.0.7 all elements are editable in CR backend.
Any idea why it is so?
The mjml code that I use is following:
<mj-head>
<mj-style>
.btn-block a {
display: block !important;
}
</mj-style>
<mj-attributes>
<mj-all/>
<mj-text color="#334419" font-size="15px" padding="0" line-height="1.2"/>
<mj-button font-family="Arial, sans-serif" font-weight="700" background-color="#ed7102" border-radius="0px" font-size="14px" text-transform="uppercase" color="#fff" inner-padding="10px 20px" href="https://www.welzhofer.eu/" align="left" padding="0"/>
<mj-section background-color="#ffffff" padding="5px 12px 10px 12px"/>
<mj-image padding="0px 0px 10px 0px"/>
</mj-attributes>
</mj-head>
<mj-body>
<mj-raw>
<!--#loop #-->
<!--#my_element name="Im web browser ansehen" #-->
</mj-raw>
<mj-section padding="15px 12px" full-width="full-width" background-color="#334419">
<mj-column>
<mj-text font-family="Arial,sans-serif" align="center" font-size="16px"><a href="{ONLINE_VERSION}" style="color:#fff; text-decoration: none;">Im Webbrowser ansehen</a></mj-text>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="logo" #-->
</mj-raw>
<mj-section>
<mj-column>
<mj-image src="https://www.welzhofer.eu/wp-content/uploads/WelzhoferLogoHeader.png"
width="139px" height="auto" align="center" padding="0px 0px 0px 0px">
</mj-image>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Bild zentriert volle Breite" #-->
</mj-raw>
<mj-section padding="0" background-color="#f1eee5" full-width="full-width">
<mj-column>
<mj-image padding="0"
src="https://www.welzhofer.eu/wp-content/uploads/HeaderbildWelzhofer.jpg">
</mj-image>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Ausgabe Nummer" #-->
</mj-raw>
<mj-section background-color="#a1ae87" full-width="full-width">
<mj-column>
<mj-text font-family="Arial,sans-serif" align="center" padding="5px 0 5px 0" text-transform="uppercase" font-size="12px"
color="#334419">Ausgabe 11/2019</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="H1 (weiß, zentriert)" #-->
</mj-raw>
<mj-section background-color="#a1ae87" full-width="full-width" padding="10px 12px">
<mj-column>
<mj-text align="center" color="#ffffff" font-family="Georgia, serif">
<h1 style="font-size: 27px; font-family: Georgia, serif; font-weight:700; margin:0;">Liebe Frau Mustermann</h1>
</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="H1 subline" #-->
</mj-raw>
<mj-section background-color="#a1ae87" full-width="full-width" padding="0px 12px 20px 12px">
<mj-column>
<mj-text align="center" text-transform="uppercase" font-size="18px" font-weight="700" font-family="Arial,sans-serif">
Helfen sie uns die Artenvielfalt zu erhalten
</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Einführungstext groß zentriert" #-->
</mj-raw>
<mj-section background-color="#a1ae87" full-width="full-width" padding="10px 12px 20px 12px">
<mj-column>
<mj-text align="center" font-size="18px" color="#ffffff" padding="5px 0px 5px 0px" font-family="Georgia,serif">Die Marke
WELZHOFER steht seit Jahren für Qualität, Innovation und vor allem echte Partnerschaft zum
beratenden Fachhandel. Unsere Fachhändler haben in den vergangenen Jahren beeindruckende
Erlebnisse geschaffen, die dafür gesorgt haben, dass die wichtige Ganzjahresfütterung heute
begeistert gelebt wird.
</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="H4" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width">
<mj-column>
<mj-text font-family="Arial, sans-serif" align="center" padding="20px 0px 15px 0px" color="#334419">
<h4 style="font-family: Arial, sans-serif; font-size:15px; font-weight:bold; margin:0;">h4: Sylvia wagt quick den Jux bei
Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. "Fix, Schwyz!".
</h4>
</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Text zentriert" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width">
<mj-column>
<mj-text font-family="Arial, sans-serif" align="center" font-size="16px" padding="5px 20px 5px 20px">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes. massa quis enim. Donec pede justo, fringilla vel,
aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae,
justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Button groß zentriert" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width">
<mj-column>
<mj-button align="center" inner-padding="15px 25px" font-size="17px">Mehr erfahren</mj-button>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Trenner dick" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width" padding="30px 0"></mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="H2, linksbündig, orange" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width">
<mj-column>
<mj-text color="#f07d23" padding="30px 0 10px 0" font-family="Georgia, serif">
<h2 style="font-family: Georgia,serif; font-size:22px; font-weight:bold; margin:0;">H2: Headline der Inhaltsblöcke
gegebenenfalls auch über 2 Zeilen
</h2>
</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Text linksbündig bold" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width">
<mj-column>
<mj-text font-weight="bold" padding="5px 0 5px 0" font-family="Arial, sans-serif">
Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt
und Quark. "Fix, Schwyz!".
</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="2 Spalten Bild links" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width">
<mj-column padding="0 20px 0 0">
<mj-image
src="https://www.welzhofer.eu/wp-content/uploads/BildBox_Links.jpg">
</mj-image>
</mj-column>
<mj-column>
<mj-text color="#af9d84" text-transform="uppercase" font-family="Arial,sans-serif">
<strong>Gourtmetknödel &-STangen</strong>
</mj-text>
<mj-text font-family="Georgia, serif">
<h3 style="font-family: Georgia, serif; font-size:18px; font-weight:bold; margin:0;">Diese Kugel tut der Umwelt richtig gut</h3>
</mj-text>
<mj-text font-size="15px" padding="5px 0 15px 0" font-family="Arial, sans-serif">
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.
Tongem pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer
tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean
leo ligula, porttitor eu, consequat vitae, eleifend ac.
</mj-text>
<mj-button>Mehr erfahren</mj-button>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Trenner dünn" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width" padding="10px 0"></mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="2 Spalten Bild rechts" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width" direction="rtl" padding-left="0px">
<mj-column>
<mj-image
src="https://www.welzhofer.eu/wp-content/uploads/BildBox_Rechts.jpg">
</mj-image>
</mj-column>
<mj-column padding="0 20px 0 12px">
<mj-text color="#af9d84" text-transform="uppercase">
<strong>Gourtmetknödel &-STangen</strong>
</mj-text>
<mj-text font-family="Georgia, serif">
<h3 style="font-family: Georgia,serif; font-size:18px; font-weight:bold; margin:0;">Diese Kugel tut der Umwelt richtig gut</h3>
</mj-text>
<mj-text font-size="15px" padding="5px 0 15px 0px" font-family="Arial, sans-serif">
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.
Tongem pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer
tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean
leo ligula, porttitor eu, consequat vitae, eleifend ac.
</mj-text>
<mj-button>Mehr erfahren</mj-button>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Trenner dick" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width" padding="30px 0"></mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="2 Spalten Bild links ohne Button" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width">
<mj-column padding="0 20px 0 0">
<mj-image
src="https://www.welzhofer.eu/wp-content/uploads/BildBox_Links.jpg">
</mj-image>
</mj-column>
<mj-column>
<mj-text color="#af9d84" text-transform="uppercase">
<strong>Gourtmetknödel &-STangen</strong>
</mj-text>
<mj-text font-family="Georgia, serif">
<h3 style="font-family: Georgia, serif; font-size:18px; font-weight:bold; margin:0;">Diese Kugel tut der Umwelt richtig gut</h3>
</mj-text>
<mj-text font-size="15px" padding="5px 0 15px 0" font-family="Arial, sans-serif">
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.
Tongem pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer
tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean
leo ligula, porttitor eu, consequat vitae, eleifend ac.
</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Trenner dünn" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width" padding="10px 0"></mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="2 Spalten Bild rechts ohne Button" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width" direction="rtl" padding-left="0px">
<mj-column>
<mj-image
src="https://www.welzhofer.eu/wp-content/uploads/BildBox_Rechts.jpg">
</mj-image>
</mj-column>
<mj-column padding="0 20px 0 12px">
<mj-text color="#af9d84" text-transform="uppercase">
<strong>Gourtmetknödel &-STangen</strong>
</mj-text>
<mj-text font-family="Georgia, serif">
<h3 style="font-family: Georgia, serif; font-size:18px; font-weight:bold; margin:0;">Diese Kugel tut der Umwelt richtig gut</h3>
</mj-text>
<mj-text font-size="15px" padding="5px 0 15px 0px" font-family="Arial, sans-serif" >
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.
Tongem pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer
tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean
leo ligula, porttitor eu, consequat vitae, eleifend ac.
</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Trenner dick" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width" padding="30px 0"></mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="H2, linksbündig, orange" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width">
<mj-column>
<mj-text color="#f07d23" padding="30px 0 10px 0" font-family="Georgia, serif">
<h2 style="font-family: Georgia, serif; font-size:22px; font-weight:bold; margin:0;">H2: Headline der Inhaltsblöcke
gegebenenfalls auch über 2 Zeilen
</h2>
</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Text linksbündig bold" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width">
<mj-column>
<mj-text font-weight="bold" padding="5px 0 5px 0" font-family="Arial, sans-serif">
Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt
und Quark. "Fix, Schwyz!".
</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Bild zentriert volle Breite" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width">
<mj-column>
<mj-image padding="0"
src="https://www.welzhofer.eu/wp-content/uploads/BildBreiterInhaltsblock.jpg">
</mj-image>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Text linksbündig" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width">
<mj-column>
<mj-text font-family="Arial, sans-serif">
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.
Tongem pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer
tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean
leo ligula, porttitor eu, consequat vitae, eleifend ac.
</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Button klein linksbündig" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width">
<mj-column>
<mj-button>Mehr erfahren</mj-button>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Button klein zentriert" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width">
<mj-column>
<mj-button align="center">Mehr erfahren</mj-button>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Trenner dick" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width" padding="30px 0"></mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Bild Promofeld auf Grün" #-->
</mj-raw>
<mj-section padding="50px 50px 0px 50px" background-color="#a1ae87" full-width="full-width">
<mj-column>
<mj-image align="center"
src="https://www.welzhofer.eu/wp-content/uploads/BildPromofeld.jpg">
</mj-image>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Promofeld Kopfzeile gelb auf Grün" #-->
</mj-raw>
<mj-section background-color="#a1ae87" full-width="full-width" padding="10px 50px 0px 50px">
<mj-column>
<mj-text align="center" color="#ffbe31" text-transform="uppercase" padding="20px 0px 15px 0px" font-family="Arial, sans-serif">
<strong>Zentrierte Headline des Promofeldes</strong>
</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Promofeld Headline auf Grün" #-->
</mj-raw>
<mj-section background-color="#a1ae87" full-width="full-width" padding="0px 50px 20px 50px">
<mj-column>
<mj-text align="center" color="#ffffff" font-family="Georgia, serif">
<h5 style="font-family: Georgia, serif; font-size:25px; font-weight:700; margin:0;">Bird watching vom heimischen Sofa</h5>
</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Promofeld Text auf Grün" #-->
</mj-raw>
<mj-section background-color="#a1ae87" full-width="full-width" padding="0px 50px 20px 50px">
<mj-column>
<mj-text font-family="Arial, sans-serif">Nulla consequat massa quis enim. Donec pede justo, fringilla
vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae,
justo. Nullam dictum felis eu pede mollis pretium.
</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Promofeld Button auf grün" #-->
</mj-raw>
<mj-section background-color="#a1ae87" full-width="full-width" padding="0px 50px 60px 50px">
<mj-column>
<mj-button align="center">Mehr erfahren</mj-button>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Trenner dick" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width" padding="30px 0"></mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="2 Spalten Bild links auf Grau" #-->
</mj-raw>
<mj-section background-color="#92a6a1" full-width="full-width" padding="20px 12px">
<mj-column vertical-align="middle">
<mj-image padding="5px 0px 15px 0" align="left"
src="https://www.welzhofer.eu/wp-content/uploads/ReporterBild.jpg">
</mj-image>
</mj-column>
<mj-column padding="0px 0px 0px 15px" vertical-align="middle">
<mj-text font-family="Georgia, serif" font-weight="700" color="#ffffff" padding="20px 0px 10px 0px">
<em>"Vögel im Winter und Herbst zu füttern, das kennt ein jeder. Diese auch im Frühling und Sommer zu füttern, ist vielen neu. Die Ganzjahresfutterung aber hilft den Vögeln ganz gezielt, ihren Energiebedarf besser zu decken und obendrein mehr Nachwuchs durchzubekommen."</em>
</mj-text>
<mj-text font-family="myriad-pro, Arial, sans-serif" font-weight="700" padding-bottom="10px">
Stefan Böhm, Diplom-Biologe & Vogelschützer
</mj-text>
<mj-button>Frag den Böhm</mj-button>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Trenner dick" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width" padding="30px 0"></mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Produkte" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width" padding="10px 12px">
<mj-column width="30%" padding="10px" background-color="#fcfaf7" inner-background-color="#ffffff">
<mj-image padding="0px" align="center"
src="https://www.welzhofer.eu/wp-content/uploads/Produktbild.jpg">
</mj-image>
<mj-text padding="0px 5px" font-family="Arial, sans-serif">
<strong>Insekten Menü</strong>
</mj-text>
<mj-text padding="0px 5px">
<hr></hr>
</mj-text>
<mj-text padding="10px 5px 0px 5px" font-size="22px" font-family="Arial, sans-serif">
22,95 €*
</mj-text>
<mj-button width="100%" css-class="btn-block" padding="15px 0px 0px 0px">Jetzt Kaufen</mj-button>
</mj-column>
<mj-column background-color="#f1eee5" width="5%"> <mj-raw> </mj-raw> </mj-column>
<mj-column width="30%" padding="10px" background-color="#fcfaf7" inner-background-color="#ffffff">
<mj-image padding="0px" align="center"
src="https://www.welzhofer.eu/wp-content/uploads/Produktbild.jpg">
</mj-image>
<mj-text padding="0px 5px" font-family="Arial, sans-serif">
<strong>Insekten Menü</strong>
</mj-text>
<mj-text padding="0px 5px">
<hr></hr>
</mj-text>
<mj-text padding="10px 5px 0px 5px" font-size="22px" font-family="Arial, sans-serif">
22,95 €*
</mj-text>
<mj-button width="100%" css-class="btn-block" padding="15px 0px 0px 0px">Jetzt Kaufen</mj-button>
</mj-column>
<mj-column background-color="#f1eee5" width="5%"> <mj-raw> </mj-raw> </mj-column>
<mj-column width="30%" padding="10px" background-color="#fcfaf7" inner-background-color="#ffffff">
<mj-image padding="0px" align="center"
src="https://www.welzhofer.eu/wp-content/uploads/Produktbild.jpg">
</mj-image>
<mj-text padding="0px 5px" font-family="Arial, sans-serif">
<strong>Insekten Menü</strong>
</mj-text>
<mj-text padding="0px 5px">
<hr></hr>
</mj-text>
<mj-text padding="10px 5px 0px 5px" font-size="22px" font-family="Arial, sans-serif">
22,95 €*
</mj-text>
<mj-button width="100%" css-class="btn-block" padding="15px 0px 0px 0px">Jetzt Kaufen</mj-button>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Trenner dick" #-->
</mj-raw>
<mj-section background-color="#f1eee5" full-width="full-width" padding="30px 0"></mj-section>
<mj-raw>
<!--#/my_element#--> <!--#loopsplit#-->
<!--#my_element name="Footer" #-->
</mj-raw>
<mj-section full-width="full-width" background-color="#5c6846" padding="45px 0px 35px 0px">
<mj-column>
<mj-image width="130px" align="center"
src="https://www.welzhofer.eu/wp-content/uploads/logo.png">
</mj-image>
<mj-text font-family="Arial, sans-serif" align="center" color="#ffffff" font-size="12px" padding="15px 40px 15px 40px"><a href="{UNSUBSCRIBE}" style="color: #ffffff; text-decoration: none;">Newsletter abbestellen</a></mj-text>
<mj-text font-family="Arial, sans-serif" align="center" color="#ffffff" font-size="12px" line-height="20px"
padding="5px 40px 10px 40px">Welzhofer GmbH - Heimat für Wildvögel<br/>
Zur Mühle 8, D-86473 Schönebach<br/>
Telefon: <a href="tel:+498284776300" style="color:#ffffff">+49(0)82 84 - 77 630 0</a> <br/>
Telefax: +49(0)82 84 - 77 630 99 <br/>
E-Mail: <a href="mailto:[email protected]" style="color:#ffffff">[email protected]</a>
</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<!--#/my_element#--><!--#/loop#-->
</mj-raw>
</mj-body>
mjml's font-size-0px hack makes the cleverreach drag and drop editor unusable (+ workaround)
When adding elements via drag and drop to an imported template on cleverreach.com, the added element has a height of 0 px (because of mjml's font-size: 0px on the td).
A workaround is to add:
<mj-style> .mce-content-body { font-size: 13px; } </mj-style>
to <mj-head>, the mc-content-body class should only be present in the editor view and not in the resulting email itself, so adding that should be harmless.
Conten that is placed inside of mj-hero element is not editable in Clever Reach
I tried mj-hero in my last template unfortunately I can'T edit text or pictures that are placed within mj-hero element in cleverreach after uploading .zip file. All other elements in the template are editable as usual. Is there anything I should do to get it work?
mjmlhelper v.2.0.7.
mjml 4.11.0
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.