Übersicht LeadPage PowerSet 2

PowerSet Varianten und Versionen

Die Evalanche PowerSets gibt es in drei verschiedenen Varianten. Beachten Sie hierzu das Lizenzmodell sowie die jeweils gültigen Preislisten.

• Die Leadpage PowerSet Demo ist ausschließlich für Demo- und Vertriebszwecke gedacht. Die kommerzielle Nutzung, Vervielfältigung der Objekte oder des Codes ist nicht gestattet.
• Das Leadpage PowerSet als Standard Lizenz ist für die kommerzielle Nutzung eines einzelnen Templates vorgesehen. 

• Das Leadpage PowerSet als Pro Lizenz ist für die kommerzielle Nutzung multivarianter bzw. multilingualer Templates vorgesehen. 

   

Standardmodule des Leadpage PowerSets

Das LeadPage PowerSet Design-System gliedert Module in drei Kategorien, die beliebig miteinander kombiniert werden können:

Layout-Module

Komponenten

• Header (Kopfbereich mit Logo und Navigation). Dieses Modul muss in den Header-Bereich des Canvas (der linke Bereich) gezogen werden. Es ermöglicht die Gestaltung einer Navigation Linkliste, einem oder zwei Logos sowie anpassbaren Buttons und Farben.
• Highlight Banner (Flexibles Modul für Header-Bild-Text-Kombinationen). Ermöglicht die Platzierung von Überschriften, Fließtext und einem Button über einem Hintergrundbild. Position und Farbe der Elemente sind editierbar.
• Editorial (Begrüßungstext mit Datum, Anrede, Überschrift und Fließtext)
• Formular (Modul zum Einfügen eines Formulars). Dient der Einbindung eines Formulars auf der Leadpage. Pro Leadpage kann nur ein Formular verwendet werden.
• Inhalt (flexibles Modul für Bild-Text-Kombinationen mit Überschrift, Unterüberschrift, Text, Bild und Button) 
• Event (ähnlich wie Inhalt, jedoch ohne Bild und mit Datum/Uhrzeit-Feldern) 
• Artikel (CMS) (zum Einbinden von Artikel-Objekten mit Hilfe von Slots) 
• Artikel (Liste) (zum direkten Einbinden von Artikel-Objekten ohne Slots) 

• Footer (Abspann mit z.B. Logo und wählbarer ein- oder zweispaltiger Darstellung)

   

Elemente

• Bild (einzelnes Bild mit Alt-Text und optionalem Link)
• Bildergalerie (mehrere Bilder nebeneinander, mit Alt-Texten und Links) 
• Überschrift und Unterüberschrift (einzeilige Texte mit einstellbarer Ausrichtung) 
• Text (mehrzeiliger Fließtext mit Ausrichtung)
• Button (CTA-Schaltfläche mit Link und definierter Ausrichtung)
• Kategorie (Kategorie-Titel/Label)
• 2-Klick Abmeldung (ermöglicht die Übergabe der Email ID via TAL. Dieser Button ist nur in Verbindung mit der 2-Klickabmeldefunktion aus dem eMailing-Template zu nutzen. Dort muss die Funktion aktiviert und die URL der Leadpage hinterlegt sein)
• Trenner (Linie bzw. Abstandhalter, mit einstellbarer Höhe)
• Navigation (CTA-Schaltfläche mit Link und definierter Ausrichtung)

• Universell (Modul zur Einbindung von eigenem HTML)

   

 Durch zusätzliche Layout-Module können beliebige Layouts erstellt und miteinander kombiniert  werden. 

Globales StyleSet (Grundeinstellungen)

Typischerweise werden hier die Farben, Schriftarten und andere Designparameter zentral festgelegt, um konsistente Styles sicherzustellen. So kann der Template-Entwickler z.B. Firmenfarben als Farbschema hinterlegen (Primärfarbe, Sekundärfarbe, Hervorhebungsfarben etc.), die dann im gesamten Objekt (z.B. als Hintergrundfarbe für Module oder als Button-Farbe) verwendet werden.
 

 

Arbeiten mit dem Leadpage PowerSet

Das LeadPage PowerSet bietet eine Vielzahl flexibler, vorkonfigurierter Module, die auf bewährten Best Practices basieren. Die Module sind so konzipiert, dass sie vielseitig nutz- und konfigurierbar sind. Im Vorfeld kann das Template nach individuellen Vorgaben und Anforderungen angepasst werden.

Als Module werden die konfigurierbaren und verwendbaren Inhaltsbausteine des Editors bezeichnet, die auf der LeadPage verwendet werden können. Die Module werden per Drag & Drop auf dem Canvas platziert und anschließend inhaltlich und optisch bearbeitet. Sobald ein Modul auf dem Canvas platziert wurde, wird es als Modul-Instanz bezeichnet und kann bearbeitet werden.

Der Canvas und die Sidebar im Content Creator

Canvas

Im Canvas wird eine Vorschau der LeadPage dargestellt. Es werden alle Inhaltsbausteine (Modul-Instanzen) und Artikel angezeigt, aus denen die LeadPage besteht. Mit den Griffleisten können Artikel und Modul-Instanzen auf dem Canvas verschoben werden. Durch die Verschachtelung von Layout-Modulen können auch komplexere, mehrspaltige Designs realisiert werden. Der Canvas kann zu Beginn leer sein oder bereits vordefinierte Module enthalten.

Für eine korrekte HTML-Struktur und zur Gewährleistung der Barrierefreiheit ist der Canvas in drei Master Drop-Areas (Page Regions) unterteilt:

• Header: In diesen Bereich wird die Header-Komponente platziert.
• Main: Dieser Bereich ist für die Hauptinhalte der Leadpage vorgesehen.
• Footer: Hier wird die Footer-Komponente eingefügt.

 Oben im Canvas liegt die Vorschau für Desktop, Tablet und Smartphone

Dropareas, Sub-Dropareas und Slots

Die aktiven Bereiche im Canvas, in denen Module per Drag & Drop platziert werden können, werden als Dropareas bezeichnet.

Manche Module können eigene Dropareas, sogenannte Sub-Dropareas enthalten. Diese erlauben wiederum das Platzieren von weiteren Modulen. Weitere Verschachtelungen sind nicht möglich.

Um ganze Artikel per Drag & Drop platzieren zu können, werden sogenannte Artikel-Slots benötigt. Diese Artikel-Slots erlauben ausschließlich die Platzierung von Artikel-Objekten.

Platzieren eines Bild-Moduls in den Canvas

Sidebar

Oberhalb der Sidebar befinden sich vier Reiter, die den Zugriff auf verschiedene Funktionsbereiche ermöglichen:

• Module: Dies ist der standardmäßig ausgewählte Reiter. Er enthält alle verfügbaren Drag-and-Drop-Module (Layouts, Komponenten, Elemente), die zur Erstellung der Leadpage verwendet werden.
• Artikel: Dieser Reiter listet Artikel-Objekte auf, die per Drag & Drop in das Artikel (CMS)-Modul auf den Canvas gezogen werden können. Diese Funktion ist primär für die Arbeit mit bestehenden Artikel-Objekten relevant.
• AI: In diesem Bereich können mittels KI-Funktionen generierte Inhalte und Bilder erstellt werden. 

• Einstellungen: Hier werden die globalen Einstellungen für die Leadpage vorgenommen. Diese umfassen Basiseinstellungen, Layout, Farben und Schriften.

   

Der Reiter "Module"

Hier befinden sich alle Module, die im LeadPage PowerSet verfügbar sind. Module können per Drag & Drop auf den Canvas in verfügbare Dropareas gezogen werden und erzeugen dort Modul-Instanzen (verwendete Module). Wenn ein Modul mehrfach auf dem Canvas platziert wird, entstehen mehrere voneinander unabhängige Modul-Instanzen.

 Der Module-Bereich der Sidebar mit Layouts, Komponenten und Elementen

Der Reiter "Artikel"

Hier werden die zuletzt im Mandanten bearbeiteten Artikel aufgelistet. Weitere Artikel können über das Suchfeld gesucht und anschließend verwendet werden. Artikel können per Drag & Drop in die verfügbaren Artikel-Slots gezogen werden. Um einen Artikel-Slot hinzuzufügen, muss zunächst die Komponente "Artikel (CMS)" auf dem Canvas per Drag & Drop positioniert werden. Es können auch mehrere dieser Artikel-Komponente verwendet werden.  
 

 
Der Artikel-Bereich der Sidebar

Der Reiter "AI"

An dieser Stelle können AI-Features wie beispielsweise das automatische Erstellen von Bildern, Texten oder Übersetzungen hinterlegt werden. Lesen Sie hierzu unser Kapitel in der Hilfe zum Thema "AI Content Framework"

Der Reiter "Einstellungen"

im Reiter Einstellungen können die Grundeinstellungen wie z.B. Breite, Farben und Schriftarten definiert werden, auf welche die Module zugreifen. Bei mehrsprachiger oder variantenreicher Nutzung können über Sprachcontainer verschiedene Versionen einer Leadpage verwaltet und ausgewählt werden. Dabei kann es sich sowohl um unterschiedliche Sprachvarianten als auch um inhaltliche oder gestalterische Abweichungen handeln.  

Der Reiter „Einstellungen“ ist in mehrere Kategorien unterteilt. Die verfügbaren Optionen können je nach Template-Konfiguration variieren.

Kategorie: Basiseinstellungen

• Titel Browser-Tab: Dieser Titel sollte für alle Benutzer editierbar sein, um jeder Leadpage einen aussagekräftigen Titel im Browser-Tab geben zu können. Dies ist ein wichtiger Aspekt für die Barrierefreiheit und eine saubere HTML-Struktur.
• Überschrift: Diese Überschrift (H1) wird auf der Seite nicht visuell dargestellt, ist aber für Screenreader und die Barrierefreiheit von entscheidender Bedeutung und sollte daher ausgefüllt werden.
• Sprachcontainer: Jeder Leadpage muss ein Sprachcontainer zugeordnet sein. Er definiert unter anderem das Datumsformat, die Sprache der Leadpage (wichtig für Screenreader), Texte für Buttons und die Anrede. Je nach Konfiguration können Redakteure dieses Drop-Down sehen bzw. Anpassungen vornehmen.

Kategorie: Layout

In dieser Kategorie werden globale Layout-Einstellungen definiert:

• Leadpage-Breite
• Abrundung von Bildern und Buttons
• Button-Stil (gefüllt, umrandet, Textlink)
• Button-Darstellung (volle Breite oder an Textinhalt angepasst)
   

Kategorie: Farben

Hier können die globalen Farbeinstellungen der Leadpage verwaltet werden:

• Hintergrundfarben
• Schriftfarben
• Buttonfarben
• Farbe von Trennelementen
• Anlage eigener Farbpaletten

Kategorie: Schrift

Diese Kategorie umfasst die globalen Typografie-Einstellungen:

• Schriftarten
• Schriftgrößen
• Zeilenabstände

Kategorie: Entwickleroptionen

• CSS Konfiguration: Hier kann benutzerdefiniertes CSS hinzugefügt werden, um das Design weiter anzupassen.

   Bereich "Einstellungen" der Sidebar (verkürzte Version zur Illustration)

Module: Einfügen von Inhalten (Content)

Das Grundprinzip des neuen Leadpage PowerSets basiert auf Modulen, die sich in drei Typen untergliedern: In die Layout-Module, Elemente und Komponenten. Es gibt unterschiedliche Möglichkeiten, Content-Inhalte in Modulen umzusetzen. Diese verschiedenen Herangehensweisen sind miteinander kombinierbar und decken somit eine Vielzahl an Fällen ab.

• Sie können eine LeadPage ausschließlich mit Einzelelementen (Elemente) umsetzen. Dabei sind Sie bei der Positionierung der Elemente weitestgehend frei, insbesondere wenn Sie zusätzlich Layout-Module zur Positionierung nutzen. Elemente sind einfache Module, die einzelne Bestandteile abbilden (z.B. Bild, Text, Button, Trenner, etc.).
• Alternativ oder ergänzend können Sie auch mit den bereits vorgefertigten Komponenten arbeiten. Mit nur einem Drag-and-Drop-Vorgang lässt sich beispielsweise das Editorial mühelos erstellen.
• Zusätzlich können Sie mit Artikeln arbeiten, die über die beiden Komponenten "Artikel (CMS)" und "Artikel (Liste)" eingebunden werden können. Dadurch werden Artikel, die als eigenständige Objekte in Evalanche vorhanden sind, im LeadPage PowerSet verwendet (siehe auch Canvas (Drop Area) / Artikel). Allgemeine Informationen zu Artikeln in Evalanche finden sie auch unter: Artikel erstellen und konfigurieren. Beim Artikel (CMS) Modul muss darauf geachtet werden, dass jedes verwendete Modul einen eigene Slot konfiguriert hat.
• Die zusätzlich vorhandenen Layout-Module unterstützen bei der Gestaltung. Es können beispielsweise zwei- oder dreispaltige Bereiche definiert werden, um einzelne Elemente flexibel zu positionieren. Auch können zwei- und dreispaltige Artikel eingebunden werden. Eine Vielzahl an Gestaltungsmöglichkeiten lassen sich hiermit umsetzen.

Bearbeitung einer Modul-Instanz

Wird eine Modul-Instanz, also ein im Canvas verwendetes Modul, angeklickt, wechselt die Ansicht der Sidebar in die individuelle Bearbeitungsmaske. Hierüber kann die Modul-Instanz bearbeitet werden. Je nach Modul-Instanz stehen unterschiedliche Eingabeelemente (Input-Widgets) zur Verfügung, um die verschiedenen Inhalte zu bearbeiten.

Jedes Modul verfügt zudem über grundlegende Verwaltungsfunktionen, die oben links bzw. rechts am Modulrahmen zu finden sind:

• Duplizieren (Copy-Icon): Erstellt eine Kopie des Moduls direkt unterhalb des Originals
• Löschen (Papierkorb-Symbol): Entfernt das Modul vom Canvas
• Einstellungen schließen (oben rechts)

Beispiel eines Moduls und seiner Einstellungsmöglichkeiten

Einfacher Inhalts-Baustein als Beispiel für ein Modul

In diesem Beispiel-Modul werden alle Inhalte wie Texte und Bilder in entsprechende Eingabefelder eingegeben. Spezielle Felder ermöglichen die Anpassung der Bildausrichtung oder des Teilungsverhältnisses (Bild/Text). Unter dem Reiter ‚Personalisierung‘ lässt sich eine Zielgruppe definieren, für die der Modulinhalt exklusiv angezeigt wird.

Die Input-Widgets können je nach Modul variieren

Das Formular-Modul (Komponente)

Ein Formular ist in den meisten Fällen das zentrale Element zur Lead-Erfassung und damit entscheidend für die Conversion. Daher dient das Formular-Modul an dieser Stelle als Beispiel, um exemplarisch zu zeigen, wie die Arbeit mit Modulen im Editor funktioniert. Es hat aufgrund seiner Konfigurationsoptionen und Integrationen einige Besonderheiten, die hier detailliert erläutert werden

Das Formular-Modul im Detail:

Zunächst erfordert das Formular-Modul die Verknüpfung mit einem Formular, das als eigenständiges Objekt innerhalb von Evalanche angelegt wird. Das Formular-Objekt selbst wird nicht im LeadPage-Editor erstellt oder konfiguriert.
 

1. Die URL des Formulars wird im Formular-Modul in das entsprechende Feld "Formular-URL" eingetragen.

2. Die URL des Formulars erhält man, indem man das Formular-Objekt in Evalanche öffnet und den Reiter „Integration“ auswählt (nicht im Editor des PowerSets!). Die URL befindet sich im ersten Feld „Direkte URL auf dieses Objekt“.

Alternativ kann die URL auch der Liste des Ordners entnommen werden, in dem sich das Formular befindet, sofern die URL dort angezeigt wird bzw. die Spalte „URL“ eingeblendet ist.

3. Im Formular muss im Reiter "Konfiguration" die Checkbox "Formular API aktivieren" aktiviert werden.

4. Innerhalb der Komponente im Editor können nun Layout- und Farbeinstellungen für das Formular vorgenommen werden (z.B. Buttonausrichtung, Hintergrundfarbe, Labelfarben). Auch besteht die Möglichkeit der Nutzung eines vorausgefüllten Formulars.

5. Der Aufbau des Formulars (Felder, Logik etc.) wird im eigentlichen Formular-Objekt außerhalb des Editors definiert. Im Formular-Modul des PowerSets wird nur das Erscheinungsbild eingestellt. Weiterführende Informationen zum Umgang mit einem Formular-Objekt finden Sie hier.

 Im Formular-Objekt können die Felder im Reiter "Felder" eingesetzt und konfiguriert werden.

Im Reiter "Erscheinungsbild" des Formular-Objekts können Überschrift, Button-Text und die Fehler-Texte editiert werden.

Wichtige Hinweise für eine barrierefreie Leadpagegestaltung

Das Leadpage PowerSet wurde mit dem Ziel der Barrierefreiheit entwickelt. Der zugrunde liegende Code erfüllt alle erforderlichen Kriterien, um den Anforderungen an Barrierefreiheit gerecht zu werden.

Ihr Beitrag als Redakteur aber ist entscheidend, um Barrierefreiheit zu gewährleisten und sicherzustellen, dass alle Empfänger die Inhalte problemlos verstehen und nutzen können.

Folgende konkrete Schritte sind erforderlich, um Leadpages barrierefrei umzusetzen. Die beschriebenen Felder sollten daher vollständig ausgefüllt werden.

Das richtige Befüllen der Inhaltsbereiche ( Header / Main / Footer )

Der Canvas ist zur Sicherstellung einer korrekten HTML-Struktur und zur Gewährleistung der Barrierefreiheit in drei semantische Bereiche (Page Regions) unterteilt. Diese Einteilung sorgt für eine klare inhaltliche Struktur und eine technisch saubere Umsetzung.

Im Header-Bereich wird die Header-Komponente integriert. 

Der Main-Bereich ist für die Hauptinhalte der Leadpage vorgesehen. Hier werden ausschließlich die inhaltlich relevanten Module eingefügt.

Im Footer-Bereich wird die Footer-Komponente platziert.

 Module werden in diese drei Bereiche eingefügt.

Vergeben Sie einen Titel

Bei der Gestaltung barrierefreier LeadPages spielt die Vergabe von Dokumententiteln eine wichtige Rolle. Der Titel im dient als erste Orientierung für Nutzer von Screenreadern und erscheint in den Tabs des Browsers. Er sollte prägnant und aussagekräftig sein, um den Inhalt der Seite treffend zu beschreiben und eine schnelle Navigation zu ermöglichen.

Um einen Dokumententitel zu vergeben, klicken Sie auf den Reiter „Einstellungen“. Im Feld „Titel Browser-Tab“ kann der Titel eingetragen werden. Wichtig ist zu speichern, damit die Einstellungen übernommen werden.

 Im Reiter "Einstellungen" wird der Titel der LeadPage einegetragen.

Wählen Sie die Sprache

Die Vergabe der Sprache spielt ebenfalls eine wichtige Rolle bei der Erstellung barrierefreier LeadPages. Dies ermöglicht Screenreadern und anderen assistiven Technologien, den Inhalt korrekt zu interpretieren und auszusprechen. Durch die Sprachdeklaration wird sichergestellt, dass Nutzer mit Sehbehinderungen oder Leseschwächen den Titel der Seite in der richtigen Sprache vorgelesen bekommen, was das Verständnis und die Navigation erheblich erleichtert.

Die Sprache wird über den eingestellten Sprach-Container geregelt. Dieser ist bereits bei Neuanlage eines voreingestellt und wurde nach Ihren Vorgaben ausgefüllt. In den meisten Fällen müssen Sie nichts tun. Es sei denn Sie wollen die Sprache ändern. In einem solchen Fall gehen sie in den Reiter „Einstellungen“. Dort befindet sich ein Objektpicker mit einem bereits vorausgefüllten Sprachcontainer. Durch Klicken öffnet sich ein Drop Down Menü mit den vorhandenen Sprachcontainern, die ausgewählt werden können. 

 Im Reiter "Einstellungen" befindet sich der Sprach-Container der Leadpage.

 Im Reiter "Anrede" des Sprach-Containers kann die individualisierte Anrede eingetragen werden.

Vergeben Sie eine Hauptüberschrift

Die Verwendung einer H1-Überschrift ist ein wesentlicher Aspekt der Barrierefreiheit im Web. Sie dient als Hauptüberschrift und sollte den im Dokumententitel definierten Seiteninhalt widerspiegeln. Für Screenreader-Nutzer ist die H1 oft der erste inhaltliche Kontaktpunkt und hilft ihnen, sich schnell einen Überblick über den Hauptinhalt zu verschaffen. Eine klar definierte H1 verbessert zudem die Struktur und Lesbarkeit alle Nutzer.

Die Hauptüberschrift wird ebenfalls im Reiter „Einstellungen“ eingetragen. Nutzen Sie dafür das Feld „Überschrift“.

Verfassen Sie Alt-Texte für alle Bilder und Grafiken

Bei der Gestaltung barrierefreier LeadPages ist die Vergabe ausführlicher Alt-Texte für Bilder und Grafiken von entscheidender Bedeutung. Diese Textalternativen ermöglichen es sehbehinderten Nutzern, die visuelle Information zu erfassen, indem Screenreader den Inhalt vorlesen. Zudem dienen Alt-Texte als Fallback, falls Bilder nicht geladen werden können.

In allen Modulen, die Bilder enthalten, besteht die Möglichkeit Alt-Texte einzutragen. Das entsprechende Eingabefeld befindet sich in der Bearbeitungsmaske des jeweiligen Moduls und heißt „Bild (Text)".

Eingabefeld für den Alt-Text im Modul "Bild"
 

Nutzen Sie unsere Checkliste

Um umfassende Barrierefreiheit zu erreichen, ist es zudem ratsam, die dafür nötigen Richtlinien sorgfältig zu beachten. Dabei geht es um Aspekte, wie beispielsweise eine einfache verständliche Sprache zu verwenden, aussagekräftige Alt-Texte für alle Bilder zu verwenden, „sprechende Links“ zu verwenden die den Zielinhalt eindeutig beschreiben, usw. 

Wir haben daher folgenden Ressourcen für Ihre Unterstützung zusammengestellt:

• Unsere Hilfeseite zur Barrierefreiheit: https://help.evalanche.cloud/hc/de/articles/16889276390812-Leitfaden-Barrierefreiheit
• Eine ausführliche Checkliste "Barrierefreiheit für Redakteure" zum Download: https://help.evalanche.cloud/hc/article_attachments/17235527429404

Durch die sorgfältige Umsetzung dieser Richtlinien tragen Sie maßgeblich dazu bei, dass Ihre digitale Kommunikation für alle Empfänger zugänglich und nutzbar ist.

Erstellung von Vorlagen

Weitere Details zur Erstellung von Vorlagen

Glossar

Creator: Diejenige Person, die ein eMailing oder eine LeadPage erstellt oder bearbeitet und dabei die verfügbaren Module des Modul-Entwicklers sowie die Vorkonfiguration des Templates nutzen kann.

Canvas / Leinwand: Gesamte Fläche, links von der Sidebar, die die Vorschau der Leadpage anzeigt.

Sidebar: Fläche, rechts vom Canvas, welche alle Arten von Konfigurationen beinhaltet.

Input Widget: Eingabemöglichkeit für Werte in einem Modul. Z.B.:  Texteingabe, Texteingabe mehrzeilig, Checkboxen, Color-Picker, usw.

Droparea / Sub Droparea: Bereich im Canvas, in welchem Module via Drag & Drop platziert werden können.

Modul-Typ: Definition der Modul-Eigenschaften, wie Input-Widgets und Source-Code. Wird vom Modul-Entwickler erstellt.

Modul: Verfügbares Modul in der Side-Bar.

Modul-Instanz: In Benutzung befindliches Modul. Befindet sich im Editor bereits im Canvas.

Globales Konfigurations-Modul: Modul, welches für die globalen Einstellungen im Editor genutzt wird. Die Input-Widgets werden im Editor unter „Einstellungen“ angezeigt. Dieses Modul hat i.d.R. keine grafische Darstellung und benötigt daher im zugrunde liegenden Modul-Typen keinen Source-Code.

Artikel: eigenständiges Objekt innerhalb Evalanche, das in das LeadPage PowerSet übernommen werden kann. Ein Artikel kann nur mittels der Komponenten "Artikel (CMS)" oder "Artikel (Liste)" eingebunden werden.