tag:help.rocksolidthemes.com,2012-07-23:/discussions/contao/63697-verwendung-newsletter-anmeldung-in-feature-box-integrierenRockSolid Themes: Discussion 2021-01-07T13:11:45Ztag:help.rocksolidthemes.com,2012-07-23:Comment/489514642021-01-07T09:39:35Z2021-01-07T09:39:35ZVerwendung: Newsletter-Anmeldung in Feature-Box integrieren<div><p>Vielen Dank für Ihre Frage.</p>
<p>Sie können ein Frontend-Modul vom Typ „Newsletter-Abonnieren“ erstellen und es als Inhaltselement vom Typ „Modul“ in die Seite einbinden.</p>
<p>Für den Animations-Effekt stellen Sie als CSS-Klasse für das Modul bitte <code>is-animated does-repeat</code> ein und fügen folgenden CSS-Code in die Datei <em>files/tao/css/custom.css</em> ein:</p>
<pre>
<code>.mod_subscribe.not-in-view {
transform: translateX(100%);
opacity: 0;
}
.mod_subscribe.in-view {
transition: opacity 0.6s linear, transform 0.6s ease-out;
}</code>
</pre></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/489514642021-01-07T11:53:02Z2021-01-07T11:53:02ZVerwendung: Newsletter-Anmeldung in Feature-Box integrieren<div><p>Das waren super Tipps, vielen Dank!</p>
<p>Zwei Fragen noch:</p>
<p>Auf mobilen Geräten sind das Feld für die E-Mail-Adresse und der Abonnieren-Button versetzt, das sieht unschön aus (<a href="https://www.distinctravel.de/newsletter">https://www.distinctravel.de/newsletter</a>). Lässt sich das verbessern, z. B. indem das Modul zentriert ausgerichtet wird?</p>
<p>Idealerweise würde der Text über dem Anmeldemodul ebenfalls von rechts nach links sliden. Kann ich beiden Bereichen denselben Effekt zuweisen, sodass sie gemeinsam "hereinrutschen"?</p>
<p>Nochmals danke!</p>
<p>Jens Reichel</p></div>Jens Reichel - DistincTraveltag:help.rocksolidthemes.com,2012-07-23:Comment/489514642021-01-07T13:11:41Z2021-01-07T13:11:41ZVerwendung: Newsletter-Anmeldung in Feature-Box integrieren<div><blockquote>
<p>Lässt sich das verbessern, z. B. indem das Modul zentriert ausgerichtet wird?</p>
</blockquote>
<p>Der Button lässt sich mit folgendem CSS-Code zentrieren:</p>
<pre>
<code>@media screen and (max-width: 599px) {
.mod_subscribe button {
display: block;
margin-right: auto;
margin-left: auto;
}
}</code>
</pre>
<blockquote>
<p>Kann ich beiden Bereichen denselben Effekt zuweisen, sodass sie gemeinsam "hereinrutschen"?</p>
</blockquote>
<p>In diesem Fall vergeben Sie die CSS-Klassen <code>is-animated does-repeat</code> bitte dem „Zentrierter Bereich Anfang“-Element anstatt dem Newsletter Modul und verwenden folgenden CSS-Code:</p>
<pre>
<code>.centered-wrapper.not-in-view > .centered-wrapper-inner {
transform: translateX(100%);
opacity: 0;
}
.centered-wrapper.in-view > .centered-wrapper-inner {
transition: opacity 0.6s linear, transform 0.6s ease-out;
}</code>
</pre>
<p>Damit wird der gesamte Inhalt des zentrierten Bereichs animiert.</p></div>RockSolid Themes