Der Alert-Block ermöglicht es Ihnen, auffällige, farbige Warnmeldungsfelder zu Ihren SeedProd-Seiten hinzuzufügen. Dieser Block hilft Ihnen, wichtige Nachrichten, Ankündigungen, Warnungen oder Erfolgsmeldungen auf visuell hervorstechende Weise an Ihre Besucher zu kommunizieren.
Warnmeldungsfelder eignen sich perfekt, um kritische Informationen hervorzuheben, die sofortige Aufmerksamkeit erfordern, wie z. B. Sonderangebote, wichtige Updates, Systembenachrichtigungen oder zeitkritische Ankündigungen. Mit anpassbaren Stilen und Farben können Sie sicherstellen, dass Ihre Nachrichten hervorstechen und die Aufmerksamkeit Ihrer Besucher auf sich ziehen.
Hinzufügen des Alert-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Alert-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke den Alert-Block per Drag & Drop in den gewünschten Bereich Ihrer Seite.
Der Alert-Block befindet sich unter Design > Erweitert und kann in jeden Bereich Ihrer Seite gezogen werden.
Schritt 2: Inhaltseinstellungen konfigurieren
Sobald Sie ihn hinzugefügt haben, klicken Sie auf den Alert-Block, um seine Einstellungen zu öffnen. Im Tab Inhalt können Sie Ihre Warnmeldung und deren Darstellung anpassen.
Alarm:
- Typ: Wählen Sie aus vordefinierten Alert-Stilen – Info (blau, für allgemeine Informationen), Erfolg (grün, für positive Bestätigungen), Warnung (gelb/orange, für Vorsichtshinweise) oder Gefahr (rot, für kritische Alarme). Jeder Typ verfügt über entsprechende Farben, um den richtigen Ton für die Nachricht zu vermitteln.
- Schaltfläche zum Schließen: Aktivieren Sie diese Option, um eine Schließen-Schaltfläche anzuzeigen oder auszublenden, mit der Besucher die Warnmeldung schließen können. Aktivieren Sie dies für nicht-kritische Nachrichten, die Benutzer möglicherweise ausblenden möchten.
- Titel: Geben Sie die Hauptüberschrift für Ihre Warnmeldung ein. Diese sollte prägnant und aufmerksamkeitsstark sein.
- Beschreibung: Fügen Sie detaillierten Text hinzu, um Ihre Warnmeldung zu erläutern. Dies liefert Kontext und zusätzliche Informationen über den Titel hinaus.
- Titel-Ausrichtung: Legen Sie die horizontale Ausrichtung für Ihren Alert-Titel fest (links, zentriert oder rechts).
- Beschreibung-Ausrichtung: Legen Sie die horizontale Ausrichtung für Ihren Alert-Beschreibungstext fest.
- Titel-Schriftgröße: Passen Sie die Größe des Titels an, um sicherzustellen, dass er auffällig und gut lesbar ist.
- Beschreibung-Schriftgröße: Steuern Sie die Größe des Beschreibungstextes für optimale Lesbarkeit.
- Titel-Tag: Wählen Sie das HTML-Überschriften-Tag für Ihren Titel (h1, h2, h3, h4, h5 oder h6). Dies wirkt sich sowohl auf SEO als auch auf die visuelle Hierarchie aus.
- Symbol anzeigen: Aktivieren Sie diese Option, um ein Symbol neben Ihrer Warnmeldung anzuzeigen oder auszublenden. Symbole bieten schnelle visuelle Hinweise auf den Alert-Typ.
- Symbol: Wählen Sie ein benutzerdefiniertes Symbol, das mit Ihrer Warnmeldung angezeigt werden soll. Wählen Sie ein Symbol, das dem Zweck Ihrer Nachricht entspricht.
Im Tab Inhalt können Sie den Alert-Typ, den Nachrichteninhalt, die Ausrichtung und die Symbol-Einstellungen konfigurieren.
Schritt 2a: Wählen Sie einen Vorlagenstil
Im Tab Vorlagen können Sie aus vordefinierten Alert-Stilen auswählen, um das Gesamterscheinungsbild Ihres Alert-Blocks schnell zu ändern.
- Wählen Sie aus vier verschiedenen Vorlagendesigns, jedes mit einzigartigen Layouts und visuellen Behandlungen. Vorschau jedes Stils, um denjenigen zu finden, der am besten zu Ihrem Seitendesign passt.
Die Registerkarte "Vorlagen" bietet vier vordefinierte Stile, um das Erscheinungsbild Ihres Alerts schnell anzupassen.
Schritt 3: Design anpassen
Auf der Registerkarte Erweitert können Sie das visuelle Erscheinungsbild Ihres Alert-Blocks anpassen:
Stile:
- Typografie: Steuern Sie die Schriftarteigenschaften für Ihren Alert-Titel, einschließlich Schriftfamilie, -stärke und -stil.
- Texttypografie: Passen Sie die Schriftarteigenschaften für den Beschreibungstext Ihres Alerts an.
- Farbe: Legen Sie die Farbe für den Titeltext Ihres Alerts fest.
- Beschreibung Farbe: Wählen Sie die Farbe für den Beschreibungstext Ihres Alerts.
- Schließfarbe: Legen Sie die Farbe für die Schließen-Schaltfläche (X-Symbol) fest, die den Alert schließt.
- Titelhintergrund: Fügen Sie eine Hintergrundfarbe speziell für den Titelbereich Ihres Alerts hinzu.
- Hintergrundfarbe: Legen Sie die allgemeine Hintergrundfarbe für den gesamten Alert-Bereich fest.
- Textschatten: Fügen Sie Ihren Alert-Text Schatteneffekte für Tiefe und Lesbarkeit hinzu. Wählen Sie aus Keine, Haarlin, Klein, Mittel, Groß, X-Groß, 2X-Groß oder Benutzerdefiniert.
Abstand:
- Abstand: Steuern Sie den äußeren Abstand um Ihren Alert-Block (Oben, Rechts, Unten, Links). Dies bestimmt, wie viel Platz zwischen dem Alert und den umgebenden Elementen erscheint.
- Innenabstand: Passen Sie den inneren Abstand innerhalb Ihres Alert-Bereichs an (Oben, Rechts, Unten, Links). Dies schafft Freiraum zwischen dem Inhalt und den Rändern des Alerts.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Alert-Block an. Diese ID wird automatisch von SeedProd für benutzerdefinierte Stile oder JavaScript-Ziele erstellt.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie dem Alert-Wrapper-Element beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in eine neue Zeile im Format ein: attribut-name|wert (z. B. role|alert).
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blenden Sie den Alert-Block auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blenden Sie den Alert-Block auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blenden Sie den Alert-Block auf Mobilgeräten aus.
Animationseffekte:
- Eingangsanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Alert ins Sichtfeld gescrollt wird. Optionen sind Bounce, Fade In, Zoom In, Rotate In und viele mehr. Dies lenkt sofort die Aufmerksamkeit auf Ihre wichtigen Nachrichten.
Die Registerkarte "Erweitert" bietet umfangreiche Styling-Optionen, einschließlich Typografie, Farben, Abstände und Animationseffekte.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Alert-Blocks abgeschlossen und sein Erscheinungsbild angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Alert-Block zu Ihrer Seite hinzugefügt! Dieser leistungsstarke Block hilft Ihnen, wichtige Informationen effektiv zu vermitteln und die Aufmerksamkeit der Besucher mit auffälligen, farbcodierten Nachrichten zu gewinnen. Experimentieren Sie mit verschiedenen Alert-Typen, Vorlagenstilen und benutzerdefinierten Farben, um Alerts zu erstellen, die zu Ihrer Marke passen und Ihre Botschaft klar kommunizieren.