GenerateBlocks Popup erstellen

Wie man mit GenerateBlocks, CSS und etwas JavaScript ein benutzerfreundliches Popup Hinweisfenster erstellt

In diesem Artikel zeige ich dir Schritt für Schritt, wie du mithilfe von GenerateBlocks und GeneratePress sowie etwas CSS und JavaScript ein ansprechendes Hinweisfenster für deine Website erstellen kannst. Diese Art von Einblendungen sind ideal, um wichtige Informationen hervorzuheben und die Aufmerksamkeit deiner Besucher zu lenken. Wir werden die Popup Dialogbox so konfigurieren, dass sie sich nach einigen Sekunden automatisch einblendet und dank Javascript mit einem klassischen »X«-Symbol weggeklickt werden kann. Dabei nutzen wir die Möglichkeiten von GenerateBlocks und passen das Aussehen mit individuellem CSS an.

DarkWolfCave.de

Warum ein Popup (Hinweisfenster) verwenden?

Die Verwendung einer solchen Dialogbox, oder auch Alert genannt, bietet zahlreiche Vorteile für die Benutzerführung und die effektive Kommunikation wichtiger Informationen auf deiner Website.

Erstens macht ein solcher Hinweis deine Website interaktiver und ansprechender für Besucher. Es ermöglicht dir, wichtige Nachrichten, Ankündigungen oder Aktionen hervorzuheben, sodass sie sofort ins Auge fallen.

Außerdem verbessert ein Hinweisfenster die Benutzererfahrung, indem es Besucher auf relevante Informationen aufmerksam macht, ohne sie zu überfordern. Stell dir vor, du möchtest deine Besucher über eine bevorstehende Aktion oder über Änderungen auf deiner Website informieren – ein Hinweisfenster ist der perfekte Weg, um dies zu tun, ohne die gesamte Seite zu überladen.

Weiterhin kann es dazu beitragen, die Konversionsraten zu steigern, indem es Besucher auf spezielle Angebote, Rabatte oder wichtige Seiten lenkt. Es ist eine effektive Möglichkeit, die Aufmerksamkeit deiner Besucher zu erfassen und sie zu Handlungen zu motivieren. Das Umsetzen ist dank GenerateBlocks dazu auch noch kinderleicht.

Vorbereitungen / Vorwort

Für meine Projekte nehme ich immer wieder die schnellen und vielseitigen Premium-Versionen von GeneratePress und GenerateBlocks. Diese Tools ermöglichen mir, Websites in Rekordzeit zu erstellen und dabei eine erstklassige Performance sicherzustellen.
Solltest du diese Premium-Versionen nicht verwenden, wirst du einige der hier gezeigten, erweiterten Funktionen bei dir vermissen.

Ich kann dir wirklich nur ans Herz legen, GeneratePress und GenerateBlocks zu verwenden. Ihre Kombination ist unschlagbar und stellt viele andere Page-Builder in den Schatten. Abgesehen davon bieten sie eine herausragende Performance, die für mich zum absoluten Pro-Tipp geworden ist!

Du kannst dir gerne auch ein Review zu GenerateBlocks auf meiner Website durchlesen

Daher würde ich zum Punkt »Vorbereitung« nur noch sagen: besorge dir die beiden, installiere und aktiviere sie 😉

Einrichten des Popup Fensters mit GenerateBlocks

Fangen wir also direkt an und erstellen ein neues Element. Und ja, ein Element! Da wir dieses später per Hook einfügen wollen.
Dazu gehst du über deine Menüleiste auf:

1. Design
2. Elements
3. Neues Element hinzufügen

und entscheidest dich im Pop-up für den Element-Typ »Block«. Dem Ganzen geben wir jetzt noch einen Namen – »Hinweisfenster« – oder halt etwas Kreativeres.

Ich versuche auf Erklärungen erst mal zu verzichten, damit das nicht zu lang und zu viel Text wird.
Daher eine Art Liste, in der ich dir die Einstellungen und Werte aufzeige, die ich auch bei mir verwendet habe.
Weiter unten dann auch als Bilder. Solltest du Fragen dazu haben, kannst du diese gerne in den Kommentaren (am besten die Antworten dann auch abonnieren) stellen, oder mich per Discord kontaktieren.

Insgesamt benötigen wir 4 Elemente:

• Container
  • Überschrift als p-Element
  • Zweite Überschrift als p-Element
  • Button

Füge zuallererst einen Container hinzu, dann erstellst du in diesem Container zwei GenerateBlocks Überschriften (also keine WordPress eigenen) und wählst bei ihnen das »p«-Element aus. Nach der Zweiten fügst du dann noch einen Button hinzu.
Optisch wird es final, also nach dem wir Einstellungen vorgenommen haben, in etwa so aussehen (Bei dir dürfte noch »Button« an der Stelle des »Icon« stehen, keine Sorge, ändert sich bald):

Kommen wir zu den verwendeten Einstellungen und Werten, die wir benötigen, um unser Hinweisfenster zu gestalten. Mit der ganz neuen Version von GenerateBlocks könnten wir uns auch globale CSS-Klassen anlegen und diese dann auf einzelne Elemente anwenden. Dennoch denke ich, dass es in diesem Fall generell einfacher ist, wenn wir den Elementen direkt Werte zuweisen.

• Container
  • Breite: 100 %
  • Maximale Breite: 480px
  • Innenabstand überall 24px
  • Außenabstand
    • oben: 0
    • links: auto
    • rechts: 16
    • unten: 16
  • Rand: überall 2px und Farbe leicht rot (#f50000)
  • Eckenradius überall 20px
  • Hintergrundfarbe dunkelgrau
  • Erweitert
    • zusätzliche CSS Klasse(n): hinweisfenster
• Überschrift p (erste Überschrift im Container)
  • Layout
    • Anzeigen: Flex
    • Elemente Ausrichten: center
    • Inhalte bündig machen: center
    • Spaltenlücke: 0.8em
  • Abstand
    • Aussenabstand unten: 10px
  • Typografie
    • Schriftstärke: fett
    • Schriftgröße: 22px
  • Farben
    • Text: helles weiß (#f9f9f9)
    • Icon: mattes gelb (#dede14)
  • Icon: Megafon
• Überschrift p (zweite Überschrift im Container)
  • Abstand
    • Aussenabstand links: 40px
    • Aussenabstand unten: 0px
  • Typografie
    • Schriftgröße: 16px
    • Zeilenhöhe 1.3em
  • Farben
    • Text: helles schwarz (#5e5e66)
    • Link: gelb (#d8d815)
    • Link hover: gräulich (#616169)
• Button
  • Layout
    • Anzeigen: Inline Flex
    • Elemente Ausrichten: Center
    • Spaltenlücke: 0.5em
  • Abstand
    • Innenabstand: 4px (alle)
  • Ränder
    • Eckenradius: 4px (alle)
  • Farben
    • Hintergrund (Mauskontakt): leicht Transparentes weiß rgba(247, 249, 250, 0.1)
    • Text:
      • Text grau/braun #62626d
      • Mauskontakt: weiß
  • Icon
    • Entweder fügst du dir ein neues X SVG-Icon hinzu, was bei GenerateBlocks ja wirklich einfach geht, oder du nimmst das normale »Plus«-Icon. Im ersten Fall fügst du es ein und passt vielleicht noch die Größe an. Mehr nicht. Im zweiten Fall musst du etwas mit der Ausrichtung tricksen, damit es aussieht wie ein X und nicht wie ein +
      Keine Sorge, dass das X noch an der falschen Position ist. Dies ändern wir später über custom-CSS.
    • Text entfernen
  • Effects (nur falls du bei Icon das Plus-Zeichen genommen hast)
    • Transform
      • Add Transform
        • Type: rotate
        • Device: all
        • State: normal
        • Target: Icon
        • Rotate 45 deg
  • Erweitert
    • zusätzliche CSS Klasse(n): btn_close

Was wir jetzt noch einstellen müssen, bevor wir uns dem CSS und Javascript zuwenden, ist die Art und Position, wo wir dieses Pop-up Banner anzeigen lassen wollen.
Dazu wählst du den Tab »Element« (der sich links neben »Block« befindet) aus und stellst in der Sektion »Element Typ« den Wert auf »Hook«.
In der Sektion »Hook-Name« stellst du die entsprechende Position ein, in meinem Fall nehme ich »before_footer«.

Bei Standort wählst du noch aus, auf welchen Seiten oder Beiträgen dieser Hinweis angezeigt werden soll.
Ich wähle »Komplette Seite« aus, sodass das Hinweisfenster überall angezeigt wird.
Mit diesen Einstellungen kannst du recht einfach deinen Besucher ein wenig leiten, indem du nur auf entsprechende Seiten einen dazu passenden Pop-up anzeigen lässt.

Anpassen des Aussehens mit individuellem CSS

Nachdem wir das Grundgerüst unserer Dialogbox erstellt haben, müssen wir es noch ein wenig anpassen. Dazu benutzen wir CSS, welches sich dank GeneratePress sehr einfach über den Customizer eintragen lässt. Zum Beispiel über den Menüpunkt »Design -> Customizer«. Dort angekommen wählen wir noch »Zusätzliches CSS« aus, und können mit unserer Eingabe beginnen. Du musst bei den Werten vielleicht ein wenig spielen, um sie auf deine Bedürfnisse anzupassen. Solltest du mal nicht weiterkommen oder generell Fragen haben, darfst du mich auch gerne per Discord kontaktieren.

/* Hier stellen wir ein wenig die Optik ein, also wie breit maximal, den transform sowie die Animation.
   Wichtig wäre noch z-index - ist dieser zu niedrig, könnte es hinter deinen anderen Elementen verschwinden. */
.hinweisfenster {
	max-width: 30%;
	overflow: auto;
	position: fixed;
	bottom: 0;
	right: 0;
	transform: translatey(100vh);
	animation: banner-fade-in 5s 1s ease-in forwards; 
  z-index: 9;
	
}

/* Media Query für Tablett und Mobile */
@media screen and (max-width: 860px) {
    .hinweisfenster {
      font-size: 11px; 
			max-width: 80%; 
			height: auto; /* Die Höhe des Banners passt sich dynamisch an den Inhalt an */
			padding-left: 10px; 
      padding-right: 10px; 
    }
}

/* hier formen wir unseren Exit/Close Button. Also das X und schreiben nich fix "schließen" davor. Außerdem geben wir dem ganzen noch einen leichten Glow-Effekt mit */
.btn_close::before {
    content: "Schließen";
    margin-right: 1px; /* Abstand zwischen dem zusätzlichen Text und dem Schließen-Symbol */
    font-size: 12px; 
    color: black; /* Farbe anpassen */
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Glow-Effekt */
	vertical-align: middle; /* Vertikale Ausrichtung */
}

/* etwas Ausrichten, damit er auch an der richigen Stelle ist */
.btn_close {
	position: absolute;
	top: 12px;
	right: 12px;
}

/* brauchen wir, damit die Animation läuft. */
@keyframes banner-fade-in {
	0%{
		transform: translatey(100vh);
	}
	100%{
		transform: translatey(0);
	}
}

/* bekommt unser Hinweisfenster später über das JavaScript, wenn das X angeklickt wird*/
.hide-me{
	display: none;
}

Nachdem du das Ganze gespeichert und veröffentlicht hast, sollte sich auf deiner Seite ein neues Pop-up-Fenster öffnen.
Allerdings könntest du jetzt stundenlang auf das Schließen (X) Feld klicken… und es würde nichts passieren. Aber das ändern wir jetzt!

Hinzufügen des Java Scripts für das Schließen des Pop-ups

Ein wirklich kleines und »leichtes« JavaScript benötigen wir auch noch. Denn ansonsten können wir nicht auf eine Aktion des Besuchers reagieren.
Und wir wollen ja, wenn der Besucher auf das X klickt (Aktion), das Hinweisfenster verschwinden lassen (Reaktion).

Außerdem möchten wir nicht unsere Besucher nerven, und dieses Hinweisfenster bei jedem Bewegen auf der Seite (Reload) erneut anzeigen lassen.
Bedeutet, wenn es einmal von dem Besucher weggeklickt wurde, soll es für diese Sitzung nicht mehr angezeigt werden.

Ich zeige dir kurz und grob die einzelnen Punkte auf:

• Eventlistener für DOMContentLoaded: Das Skript beginnt damit, auf das Ereignis DOMContentLoaded zu warten. Das bedeutet, dass es erst ausgeführt wird, wenn die gesamte Seite, einschließlich aller Inhalte und Elemente, vollständig geladen ist.
• Selektoren für den Schließen-Button und das Hinweisfenster (Banner): Das Skript verwendet document.querySelector(), um den Schließen-Button (btn_close) und das Banner (hinweisfenster) zu finden und sie als Variablen (closeButton und banner) zu speichern.
• Funktion zum Ausblenden des Banners: Hier wird eine Funktion namens hideBanner() definiert. Diese Funktion fügt der Klasse des Banners (hinweisfenster) die Klasse hide-me hinzu, um es auszublenden (du erinnerst dich? Die haben wir in unserem custom-CSS bereits erstellt).
  Außerdem setzt sie einen Eintrag im sessionStorage mit dem Schlüssel alertHidden und dem Wert true, um sich zu merken, dass das Banner ausgeblendet wurde.
• Überprüfen des sessionStorage: Bevor das Banner angezeigt wird, überprüft das Skript, ob im sessionStorage ein Eintrag mit dem Schlüssel alertHidden und dem Wert true existiert. Wenn ja, wird die Funktion hideBanner() aufgerufen, um das Banner sofort auszublenden.
• Eventlistener für den Schließen-Button: Das Skript fügt einen Eventlistener hinzu, der auf das Klicken des Schließen-Buttons reagiert. Wenn der Schließen-Button geklickt wird, wird die Standardaktion des Links (das Navigieren zu einer anderen Seite) verhindert, und die Funktion hideBanner() wird aufgerufen, um das Banner auszublenden, sowie den Wert im sessionStorage zu setzen.

Und hier das gesamte JavaScript für das GenerateBlocks PopUp:

document.addEventListener('DOMContentLoaded', function() {
    const closeButton = document.querySelector('.btn_close');
    const banner = document.querySelector('.hinweisfenster');

	// funktion sorgt dafür, dass bei einem weggeklickten Banner, dieses in der selben Sitzung nicht mehr angezeigt wird
    function hideBanner() {
        banner.classList.add('hide-me');
        sessionStorage.setItem('alertHidden', 'true');
    }

    // Überprüfen, ob sessionStorage den Schlüssel 'alertHidden' hat und ob sein Wert 'true' ist
    if (sessionStorage.getItem('alertHidden') === 'true') {
        hideBanner();
    }

    // Eventlistener für das Klicken auf den Schließen-Button
    closeButton.addEventListener('click', function(event) {
        event.preventDefault(); // Standardaktion des Link-Klicks verhindern
        hideBanner(); //Funktion aufrufen
    });
});

Du fragst dich vielleicht jetzt, wohin damit? Auch hier wird es unterschiedliche Möglichkeiten geben, allerdings bevorzuge ich für solche »Snippets«, immer das Plugin »Code Snippets«.
Ja, ich verwende dazu die Pro-Version, und kann sie jedem nur empfehlen. Vor allem, wenn es wieder ein Lifetime-Angebot gibt!
Das ist recht selten zu bekommen (ist es wirklich…). Aber auch die kostenlose Version hilft dir hier schon sehr gut weiter!

Also fix auf den Menüpunkt »Snippets« und »Add new« (oder Neues hinzufügen) klicken. Dann kannst du entweder bei »Scripts« (Pro) oder generell bei »Functions« das Snippet einfügen, einen Namen vergeben und mit der Option »Run snippet everywhere« abspeichern. Im Falle, dass du es bei Scripts hinzugefügt hast, ist es bei diesem Snippet recht egal, ob du es im Head oder Body Bereich hinzufügst. Speichern nicht vergessen und am besten im Inkognito-Modus testen.

Testen auf verschiedenen Bildschirmgrößen und Geräten

Um sicherzustellen, dass das Hinweis-Banner auf verschiedenen Bildschirmgrößen und Geräten korrekt funktioniert, gibt es ein paar einfache Schritte, die du befolgen kannst:

• Responsives Design testen: Öffne deine Webseite auf verschiedenen Geräten wie Desktops, Laptops, Tablets und Smartphones. Überprüfe, ob die Dialogbox auf jedem Gerät gut lesbar und sichtbar ist.
• Browser-Entwicklertools verwenden: Die meisten Browser bieten Entwicklertools, mit denen du deine Webseite auf verschiedenen Bildschirmgrößen simulieren kannst. Nutze diese Tools, um zu sehen, wie das Banner auf unterschiedlichen Auflösungen aussieht und sich verhält.
• Emulator-Tools verwenden: Es gibt auch Online-Tools und Emulatoren, mit denen du deine Webseite auf verschiedenen Geräten und Bildschirmgrößen testen kannst. Diese können dir helfen, ein besseres Verständnis dafür zu bekommen, wie dein Banner auf verschiedenen Endgeräten aussieht.

Überprüfen auf Benutzerfreundlichkeit und Ästhetik

Damit dein GenerateBlocks Popup nicht nur funktionell, sondern auch ästhetisch ansprechend ist und eine positive Benutzererfahrung bietet, solltest du Folgendes beachten:

• Ästhetisches Design: Achte darauf, dass das Design des Banners zu deiner Webseite passt und ansprechend aussieht. Verwende passende Farben, Schriftarten und Grafiken, um das Banner attraktiv zu gestalten.
• Platzierung und Größe: Stelle sicher, dass die Dialogbox nicht zu groß oder zu klein ist und an einer gut sichtbaren Stelle platziert ist, ohne den Inhalt der Webseite zu beeinträchtigen. Achte darauf, dass es nicht zu aufdringlich wirkt, aber dennoch leicht zu finden ist.
• Lesbarkeit und Verständlichkeit: Verwende klare und verständliche Sprache im Banner, damit die Nutzer sofort verstehen, worum es geht. Halte die Nachricht kurz und prägnant, damit sie leicht zu erfassen ist.
• Benutzerfreundlichkeit: Teste die Benutzerfreundlichkeit des Banners, indem du sicherstellst, dass der Schließen-Button leicht zu finden und zu verwenden ist.

FAQ´s

Warum sollte ich ein Hinweisfenster verwenden?

Die Verwendung eines Hinweisfensters bietet zahlreiche Vorteile für die Benutzerführung und die effektive Kommunikation wichtiger Informationen auf deiner Website. Es macht die Website interaktiver und ansprechender, verbessert die Benutzererfahrung, lenkt die Aufmerksamkeit der Besucher auf wichtige Informationen und kann die Konversionsraten steigern.

Welche Vorbereitungen sind für die Umsetzung des Hinweisfensters notwendig?

Für die Umsetzung des Hinweisfensters mit GenerateBlocks und GeneratePress empfehle ich die Verwendung ihrer Premium-Versionen, da einige erweiterte Funktionen benötigt werden. Die Kombination aus GeneratePress und GenerateBlocks ermöglicht eine schnelle Website-Erstellung und bietet eine herausragende Performance.

Wie richte ich das Hinweisfenster mit GenerateBlocks ein?

Du kannst ein neues Element erstellen, indem du über die Menüleiste zu “Design” -> “Elements” gehst und dort ein neues Element vom Typ “Block” hinzufügst. Anschließend kannst du das Hinweisfenster nach deinen Vorstellungen konfigurieren und die gewünschten Eigenschaften einstellen.

Wie passe ich das Aussehen des Hinweisfensters mit individuellem CSS an?

Nachdem du das Grundgerüst erstellt hast, kannst du das Aussehen des Hinweisfensters mit individuellem CSS anpassen. Über den Customizer kannst du zusätzliches CSS eingeben und die Optik des Hinweisfensters nach deinen Bedürfnissen gestalten.

Kann ich das Hinweisfenster so konfigurieren, dass es nur auf bestimmten Seiten oder Beiträgen angezeigt wird?

Ja, du kannst das Hinweisfenster mit GeneratePress Optionen so einrichten, dass es nur auf bestimmten Seiten oder Beiträgen angezeigt wird. Dies ermöglicht es dir, die Nachrichten gezielt dort anzuzeigen, wo sie am relevantesten sind.

Wie füge ich das JavaScript für das Schließen des Hinweisfensters hinzu?

Du kannst ein kleines JavaScript verwenden, um das Schließen des Hinweisfensters zu ermöglichen. Dieses JavaScript wartet auf das Ereignis “DOMContentLoaded”, sucht nach dem Schließen-Button und dem Hinweisfenster, fügt einen Eventlistener hinzu und sorgt dafür, dass das Hinweisfenster nach dem Klicken auf den Schließen-Button ausgeblendet wird. Mehr Details dazu findest du in diesem Artikel.

Meine Frage steht hier nicht!

Du hast weitere Fragen oder benötigst Hilfe? Gerne versuche ich im Rahmen meiner Möglichkeiten dich zu unterstützen. Dafür kannst du hier die Kommentar-Sektion (nicht vergessen Antworten zu abonnieren) nutzen oder du schaust auf meinem Discord-Kanal vorbei.