Newsletter Pop-Up

Die App bietet dir zwei Layout-Optionen: Ein Basis-Layout, das wird dir direkt zur Verfügung stellen und ein erweitertes Layout, in der du das Pop-Up über die Erlebniswelten komplett frei gestalten kannst.

Basiskonfiguration

1. Begebe dich in deinem Admin zu "Erweiterungen > Meine Erweiterungen".

2. Installiere und aktiviere die App.

3. Öffne die Konfiguration und pflege alles im Abschnitt "Einstellungen" und ggf. "Logo".

4. Passe ggf. Textbausteine der App auf deine Bedürfnisse an.

5. Leere den Cache unter "Einstellungen > System > Caches & Indizes > Caches leeren"

Ergebnis: Du hast das Basis-Layout erfolgreich konfiguriert und kannst die App direkt verwenden.

Erweitertes Layout

Wenn du mehr Flexibilität über die Layout-Gestaltung haben möchtest, kannst du über die Konfigurationsoption "Layout", eine eigene Erlebniswelt verknüpfen. In dieser Anleitung werden wir das folgende Layout gemeinsam erstellen:

Schritt 1: Anlage der Erlebniswelt

Begebe dich zu "Inhalte > Erlebniswelten" und klicke auf den Button "Neues Layout anlegen". Wähle anschließend "Shopseite" und "Volle Breite" und vergib abschließend einen passenden Namen für die neue Erlebniswelt.

Schritt 2: Desktop Konfiguration

Klicke nun auf die Sektion, sodass sich die Sidebar öffnet und ziehe anschließend den Block "Zwei Spalten, Text" aus der Block-Kategorie "Text" in die Sektion. Wähle nun den Block aus und setze den oberen und unteren Abstand in den Block-Einstellungen im Abschnitt "Layout" auf "0".

Öffne jetzt die Einstellungen des linken Text-Elements über das Zahnrad-Symbol und wechsle den Bearbeitungsmodus über die rechte obere Ecke des Editors. Kopiere nun folgenden Code in den Editor:

<div style="text-align: center; padding: 3rem 1.125rem 3rem 3rem;">
    <h2 style="text-transform: uppercase;">Join Us</h2>
    <p style="font-size: 0.875rem; line-height: 1.4; margin-bottom: 1.625rem;">
        Abonniere unseren Newsletter und erhalte 10 % Rabatt auf deine erste Bestellung sowie Informationen zu Produktneuheiten.
    </p>
    {{ newsletter_form() }}
</div>

Neben dem Inline-Styling für ein besseres Aussehen ist an dieser Stelle die Variable {{ newsletter_form() }} besonders hervorzuheben. Diese wird über die App durch das Anmeldeformular ersetzt und ist essentiell, um das Pop-Up korrekt verwenden zu können.

Das rechte Textelement des Blocks ersetzen wir nun über das Pfeile-Symbol durch ein Bild-Element. Hier klicken wir ebenfalls auf das Zahnrad-Symbol um die Einstellungen zu öffnen. Zuerst hinterlegen wir das Bild und wählen anschließend den Anzeigemodus "Zugeschnitten", um nun den Wert "405px" in das Feld "Minimale Höhe" darunter einzutragen zu können.

Zum Abschluss müssen wir nun noch festlegen, dass der Block über die Block-Einstellungen im Abschnitt "Sichtbarkeit" für Mobil ausgeblendet wird.

Schritt 3: Mobile Konfiguration

Zu guter letzt ziehen wir nun noch den Block "Text" aus der gleichnamigen Block-Kategorie direkt unter unseren zuvor konfigurierten Block. Bei diesem Block entfernen wir ebenfalls den oberen und unteren Abstand. Anschließend kopieren wir folgenden Code in den Editor:

<div style="text-align: center; padding: 3rem;">
    <h2 style="text-transform: uppercase;">Join Us</h2>
    <p style="font-size: 0.875rem; line-height: 1.4; margin-bottom: 1.625rem;">
        Abonniere unseren Newsletter und erhalte 10 % Rabatt auf deine erste Bestellung sowie Informationen zu Produktneuheiten.
    </p>
    {{ newsletter_form() }}
</div>

Dieser ist ziemlich ähnlich zum Template zuvor, hat jedoch einen angepassten Innenabstand für ein einheitlicheres Aussehen auf mobilen Endgeräten. Dadurch dass dieser Block nun kein Bild-Element enthält und nicht zweispaltig ist, ist es für die mobile Darstellung durch die kompaktere Ansicht auch deutlich besser geeignet.

Zu guter Letzt müssen wir nun auch noch bei diesem Block die Sichtbarkeit einschränken. Der Block darf auf Tablet und Desktop nicht zu sehen sein. Speichere abschließend die Erlebniswelt um alle Einstellungen zu sichern.

Schritt 4: App Konfiguration

Im letzten Schritt begeben wir uns nun zurück in die Konfiguration der App. Dort können wir nun die soeben erstellte Erlebniswelt in der Konfigurationsoption "Layout" verknüpfen. Ebenfalls erhöhen wir die maximale Breite im gleichnamigen Feld auf "800", um dem Layout genügend Platz zu geben.

Herzlichen Glückwunsch! Du hast soeben dein komplett eigenes Newsletter-Layout erstellt.