2. Landingpage befüllen

Baukasten aufrufen

  1. Sucht in der "Landingpages Übersicht" die Seite die ihr bearbeiten wollt und klickt auf den Stift zum bearbeiten. how-to-30png
  2. Ihr werdet nun gefragt, welchen Titel ihr bearbeiten wollt. Wählt einfach einen aus. Die Titelauswahl hier, definiert später nur für welchen Titel die Vorschau angezeigt wird. Die Inhalte werden weiterhin für alle Titel angezeigt. how-to-31
  3. Ihr landet nun in unserem "Baukasten". Die Landingpage ist zu Beginn noch leer, lässt sich aber hier Stück für Stück mit den Elementen am rechten Rand befüllen. Die Module lassen sich einfach per Drag & Drop in die Mitte ziehen.how-to-32
  4. Bevor ihr startet, macht euch bitte mit den Elementen am oberen Rand vertraut. Diese unterstützen euch beim Befüllen der Seite: how-to-34
    • ganz links könnt ihr umschalten zwischen den Ansichten: Desktop | Tablet | Mobil
    • daneben seht ihr die Uhrzeit wann das System zuletzt automatisch gespeichert hat. Die automatische Speicherung greift alle 30 Sekunden.
    • von rechts nach links habt ihr:
    • image2024-10-8_10-32-18 = speichert eure Inhalte, schließt den Baukasten und führt euch zurück zur Landingpage Übersicht
    • image2024-10-8_10-32-54 = speichert eure Inhalte manuell
    • image2024-10-8_10-33-16 = öffnet die Vorschau
    • image2024-10-8_10-33-40 = öffnet den Datei-/ Grafikordner. Dieser wird für jede Seite automatisch angelegt. Hier ladet ihr eure Grafiken hoch.
    • image2024-10-8_10-34-1 = öffnet ein Fenster mit Platzhaltern. Platzhalter werden später in der Vorschau ersetzt.
    • image2024-10-8_10-34-19 = öffnet den Confluence Hilfeberiech
    • image2024-10-8_10-34-51%20%282%29 = geht in der Historie der Bearbeitung einen Schritt vorwärts
    • image2024-10-8_10-35-8%20%281%29 = geht in der Historie der Bearbeitung einen Schritt rückwärts
    • image2024-10-8_10-35-48 = aktiviert/ deaktiviert die Rasteransicht.
  5. Vom rechten Rand aus könnt ihr nun die Elemente in die Mitte ziehen. Beginnt mit dem Header. Die Header findet ihr in der Kategorie "Header".
  6. Baut so Stück für Stück eure Landingpage auf.
  7. Je nachdem welches Element ihr in die Mitte zieht, öffnet sich am rechten Rand ein weitere Ansicht, indem ihr das Element konfigurieren könnt. Folgende Grafik zeigt euch die Bearbeitungsmöglichkeiten für einen CTA image-2024-8-7_9-12-16


Texte und Platzhalter

  1. Texte werden eingefügt und bearbeitet, indem ihr einfach per Doppelklick in einen Text springt.
  2. Tippt nun euren Text ein oder fügt vorher kopierten Text mit folgender Tastenkombination ein: Strg + Shif + V
  3. Klickt nun auf Speichern oder wählt per Doppelklick ein anderes Textfeld aus um das aktuelle Feld zu verlassen.
  4. Überall wo ihr Text einfügen könnt, können Platzhalter eingesetzt werden.
  5. Platzhalter sehen im Bearbeitungsmodus zwar erst einmal komisch aus, werden aber in der Vorschau ersetzt. Platzhalter können für verschiedene Dinge genutzt werden:
    • Titel
    • Domains
    • Preise
    • Kontaktdaten
    • und viele mehr Bildschirmfoto%202025-03-28%20um%2011.31.59
  6. Per Klick auf das Buch (image2024-10-8_10-34-1) öffnet sich ein Fenster mit einer Liste an Platzhaltern. Hier seht ihr welche euch zur Verfügung stehen.
  7. Per Klick auf den Platzhalter wird diese automatisch in die Zwischenablage kopiert und ihr könnt ihn direkt per Einfügen Befehl in eure Texte platzierenimage-2024-8-7_9-8-3
  8. Wundert euch nicht, wenn einzelne Elemente im Baukasten in grau erscheinen. Dies ist ebenfalls ein Platzhalter und wird später durch Titelfarbe ersetzt.


Grafiken hochladen und einfügen

Grafiken hochladen

  1. Öffnet per Klick auf das Foto (image2024-10-8_10-33-40%20%281%29) den Datei-/ Grafikordner.

  2. Öffnet ihr den Ordner aus dem Baukasten heraus, dann öffnet sich immer der Ordner der passenden Landingpage. Es gibt auch noch pro Region einen "Allgemein" Ordner. Diese unterscheiden sich wie folgt:

    • Landingpageordner (aufrufbar über das Foto Icon): Grafiken die hier hochgeladen werden, sind nur für diese Landingpage abrufbar
    • "Allgemein" Ordner (aufrufbar über das Nextcloud Dateisystem): Grafiken die hier hochgeladen werden, sind für alle Landingpages der Region abrufbar

    HINWEIS: Bitte ladet nur Grafiken im .webp Format hoch. Diese bieten bei sehr geringer Dateigröße eine sehr gute Qualität. So können wir geringe Ladezeiten der Landingpages sicherstellen.

  3. Bevor ihr Grafiken hochladet, müsst ihr diese noch so benennen, dass das System erkennt welche Grafik zu welchem Titel gehört. Dazu nutzen wie eine Grafik als Platzhalter. Anschließend müssen die Grafiken mit dem Titel bzw. einem Kürzel beginnen, gefolgt von einem Unterstrich und der Benamung der Grafik.
    Beispiel: Wir möchten für eine Digital-Paket Kampagne den Header "Hero - 1 Produkt" für NRW befüllen. Wir haben auf unserem Computer 5 verschiedenen Headergrafiken, 1 pro Titel + 1 Platzhaltergrafik. Die Dateien sind wie folgt benannt:

    • {TITEL}_header_digital_herbst24.webp
    • WAZ_header_digital_herbst24.webp
    • NRZ_header_digital_herbst24.webp
    • WP_header_digital_herbst24.webp
    • WR_header_digital_herbst24.webp

    Ladet nun diese Grafiken in den Ordner eurer Landingpage. Später müsst ihr nur die Platzhaltergrafik auswählen. Die Zuordnung der restlichen Grafiken erfolgt anhand der Titel und der Benamung der Dateien.

  4. Verwendet bitte folgende Kürzel für die Benamung der Titel bzw. deren Grafiken {TITEL} | BM | BZV | HK | HAB | BGZ | OTZ | TA | TLZ | NRZ | WAZ | WP | WR


Grafiken einfügen

  1. Zieht unter "Medien" eines der Grafikelement in den Baukasten. Wir unterscheiden die Grafiken in ihrem Bildformat. Es gibt Elemente für Grafiken und Bilder im 16:9 oder im 4:3 Format.

  2. Nun sehr ihr wieder einen grauen Platzhalter, welcher euch die Bildgröße anzeigt. Ihr benötigt jede Grafik zwei mal:

    • für die Ansicht auf Desktopgeräten
    • für die Ansicht auf Mobilgeräten

    image-2024-8-7_10-43-5

  3. Per Doppelklick auf den Platzhalter öffnet sich der Asset Manager. Ihr werdet nun gefragt, welche Grafik ihr für die Desktop Ansicht auswählen wollt. Klickt nun auf die entsprechende Grafik und bestätigt diese. Der Asset Manager fragrt euch nun nach der mobilen Version der Grafik. Wählt diese ebenfalls aus und bestätigt eure Auswahl.

    HINWEIS: Bitte kontrolliert in der Vorschau für Desktop und Mobil, ob eure Grafiken dort erscheinen. Bei einigen Elementen (solche die sich in der Art der Ansicht startk unterscheiden) kann es sein, die Grafik nochmal aus dem Asset Manager auszuwählen.

Weiter zu Elemente