Home → Contao →

Verwendung: Newsletter-Anmeldung in Feature-Box integrieren

• Edit

Jens Reichel

05 Jan, 2021 05:28 PM

Produkt: Tao Contao

Liebes Rocksolid-Team,
bisher habe ich für die Newsletter-Anmeldung eine eigene Seite (https://www.distinctravel.de/newsletter), auf die ich von der Startseite verlinke.
Lieber wäre es mir, wenn sich Kunden direkt auf der Startseite für den Erhalt eintragen könnten. Das sollte dann jedoch innerhalb der von rechts hereinrutschenden Feature-Box möglich sein (siehe https://www.distinctravel.de/start, lila Modul über Google-Maps-Modul). Gibt es dafür einen Trick?
Vielen Dank!
Jens Reichel

1. Support Staff 1 Posted by RockSolid Theme... on 07 Jan, 2021 09:39 AM

   

   Vielen Dank für Ihre Frage.

   Sie können ein Frontend-Modul vom Typ „Newsletter-Abonnieren“ erstellen und es als Inhaltselement vom Typ „Modul“ in die Seite einbinden.

   Für den Animations-Effekt stellen Sie als CSS-Klasse für das Modul bitte is-animated does-repeat ein und fügen folgenden CSS-Code in die Datei files/tao/css/custom.css ein:

   .mod_subscribe.not-in-view {
     transform: translateX(100%);
     opacity: 0;
   }
   .mod_subscribe.in-view {
     transition: opacity 0.6s linear, transform 0.6s ease-out;
   }
   

   • Edit

2. 2 Posted by Jens Reichel - ... on 07 Jan, 2021 11:53 AM

   

   Das waren super Tipps, vielen Dank!

   Zwei Fragen noch:

   Auf mobilen Geräten sind das Feld für die E-Mail-Adresse und der Abonnieren-Button versetzt, das sieht unschön aus (https://www.distinctravel.de/newsletter). Lässt sich das verbessern, z. B. indem das Modul zentriert ausgerichtet wird?

   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"?

   Nochmals danke!

   Jens Reichel

   • Edit

3. Support Staff 3 Posted by RockSolid Theme... on 07 Jan, 2021 01:11 PM

   

   Lässt sich das verbessern, z. B. indem das Modul zentriert ausgerichtet wird?

   Der Button lässt sich mit folgendem CSS-Code zentrieren:

   @media screen and (max-width: 599px) {
       .mod_subscribe button {
           display: block;
           margin-right: auto;
           margin-left: auto;
       }
   }
   

   Kann ich beiden Bereichen denselben Effekt zuweisen, sodass sie gemeinsam "hereinrutschen"?

   In diesem Fall vergeben Sie die CSS-Klassen is-animated does-repeat bitte dem „Zentrierter Bereich Anfang“-Element anstatt dem Newsletter Modul und verwenden folgenden CSS-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;
   }
   

   Damit wird der gesamte Inhalt des zentrierten Bereichs animiert.

   • Edit