Leider ist es mir aus zeitlichen Gründen nicht mehr möglich, die Beiträge zu den Themes und Plugins aktuell zu halten, bzw. neue Inhalte zu schreiben…
Popup im Bricks Builder
Bis das Thema „Google Fonts werden mit YouTube geladen“ zufriedenstellend gelöst ist, binde ich keine Videos über YouTube direkt ein.
Link zum Beitrags-Video https://youtu.be/ByUXICviMLE
Seit der Version 1.6 gibt uns der Bricks Builder die Möglichkeit Popups zu erstellen. Dafür gehen wir ins Backend unter Bricks und erstellen ein Template vom Typ „Popup“.
Veröffentlichen und dann mit „Mit Bricks bearbeiten“.
Den Inhalt einfügen
Wir können nun anfangen, das Popup auszubauen. Ich füge eine Sektion inklusive Container ein, in den Container ein Icon, eine Überschrift, ein Textelement und einen Button. Fülle dein Popup wie du es brauchst, z.B. auch eine Newsletter Anmeldung oder einen Hinweis auf neue Waren, Dienstleistungen, Angebote usw.
In meinem Popup soll alles zentriert ausgerichtet sein, also wähle ich den Container an, indem meine Inhalte liegen und schalte in den Flex-Einstellungen den Inhalt auf Zentriert.
Das Ganze ist mir so zu breit. Um das Popup an sich zu bearbeiten, müssen wir in Einstellungen gehen und „Templates“ anwählen.
Hier gehen wir dann auf „Popup“. Unter „Inhalt“ bei Breite gebe ich 500 ein. Wenn wir keine Einheitsangabe schreiben wie %, em usw., nimmt Bricks automatisch px / Pixel.
Unter „Inhalt“ bearbeiten wir den Container, indem unsere Inhalte liegen. Im Panel darüber bearbeiten wir den Popup Layer, der das Browserfenster füllt.
Den Inhalt formatieren
Das Popup an sich bearbeiten wir in den Template / Popup Einstellungen, die Inhalte in den normalen Element-Optionen. Das kommt mir etwas umständlich vor und man muss teilweise darauf achten, wo man jetzt ist…
Ich springe zurück zu den Inhaltselementen und formatiere die Abstände. Die Elemente kommen etwas Margin unten. Und das Icon ändere ich zu einem Kreuz.
Der Close-Button
Das Icon soll ein „Close-Button“ werden, es soll rechts am Popup sitzen und auf Klick das Fenster schließen. Um es zu positionieren, gebe ich dem übergeordneten Container unter „Stil“ „Layout“ die Position „Relativ“.
Nun können wir das Icon anpassen, ich ändere die Größe und positioniere es am rechten Rand. Dafür stelle ich unter „Stil“ „Layout“ bei „Position“ „absolute“ ein und definiere einen Abstand von Oben und von der rechten Seiten mit 0px. Das Icon hat nun im Bezug zu seinem übergeordneten Container eine Postion rechts oben.
Etwas weiter unten unter „Sonstiges“ kann ich den Cursor von Pfeil auf Pointer ändern. Dann wird die Hand angezeigt, wenn ich die Maus über das Icon bewege.
Interaktion des Close Buttons
Damit das Icon als Close-Button funktioniert, weisen wir diesem eine Interaktion zu. Bei ausgewähltem Icon klicken wir auf „Interaktionen“. Mit dem „+“ können wir eine Interaktion hinzufügen. Darunter finden wir auch einen Link zur Dokumentation auf der Bricks Website (englisch).
Bei „Auslöser“ wählen wir „Klick“, bei Aktion „Element ausblenden“, bei „Ziel“ „Popup“ und dann können wir unser Popup Template auswählen.
Die Popup Einstellungen
Ich gehe wieder in die Popup Einstellungen unter „Einstellungen“ „Template Einstellungen“ „Popup“ und gebe dem Popup unter „Inhalt“ runde Ecken.
Mein Popup soll links unten im Fenster auftauchen. Hierfür wähle ich im oberen Feld in der Flexbox für „Ausrichtung Hauptachse“ und „Ausrichtung Querachse“ jeweils die Option „Ende“. Jetzt klebt es etwas sehr am Rand… Auch im oberen Feld gebe ich dem Container, in dem das Popup liegt, ein Padding von 30px. So lass ich es.
Hier können wir auch eine Hintergrundfarbe für den Layer, in dem das Popup liegt, auswählen. Standard ist Transparent Grau.
Den Innenabstand im Popup steuern wir über „Popup“ „Inhalt“ Padding.
Popup Limit – Anzeigedauer
Wie oft soll das Popup angezeigt werden, pro Seitenaufruf, pro Sitzung oder über Sitzungen hinweg.
- Pro Seitenaufruf – Reset ist beim Neuladen der Seite.
- Pro Sitzung – Reset ist nach dem Schließen des Tabs.
- Über Sitzungen hinweg – bis der Cookie im Browser gelöscht wird.
Popup laden
Damit das Popup geladen werden kann, müssen wir eine Interaktion zufügen. In den Popup Einstellungen gehen wir auf „Interaktionen“ und wählen bei „Auslöser“ „Browser Fenster“ „Inhalt geladen“. Hier finden wir viele Auslöser…
Wir können ein „Delay“, eine Verzögerung in Sekunden einstellen z.B. 1s. Eine halbe Sekunde wäre 0.5s (mit Punkt, nicht Komma) Als „Aktion“ nehmen wir „Element anzeigen“ und als „Ziel“ „Popup“ mit unserem Template.
Bedingungen
Unten finden wir die Bedingungen, wo das Popup angezeigt werden soll. Hier wählen wir das gewünschte, z.B. „Ganze Website“…
