Verwendung: Newsletter-Anmeldung in Feature-Box integrieren

Jens Reichel's Avatar

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

    RockSolid Themes's Avatar

    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;
    }
    
  2. 2 Posted by Jens Reichel - ... on 07 Jan, 2021 11:53 AM

    Jens Reichel - DistincTravel's Avatar

    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

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

    RockSolid Themes's Avatar

    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.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac