Plugin Piotnet Bricks

Plugin Piotnet Bricks: eigene Elemente und erweiterte Logik in Bricks Builder

Das Plugin Piotnet Bricks erweitert Bricks Builder um Werkzeuge zur Erstellung eigener Elemente, zur Steuerung der Sichtbarkeit von Inhalten sowie zum Aufbau komplexerer Formulare. Das Produkt richtet sich in erster Linie an Webdesigner, Integratoren und Entwickler, die individuelle Funktionen umsetzen möchten, ohne jede Komponente von Grund auf in den Theme-Dateien vorzubereiten.

Das wichtigste Modul des Plugins ist der Element Creator – eine Umgebung zum Erstellen eigener Elemente, die direkt im Bricks-Editor verfügbar sind. Sie definieren die Einstellungen der Komponente, Steuerfelder, die Rendering-Methode sowie den Code für Darstellung und Verhalten. Damit lässt sich ein Element passend für ein bestimmtes Projekt vorbereiten und anschließend wie ein Standardblock in Bricks Builder verwenden.

Element Creator und Kontrolle über die Komponentenstruktur

Der Element Creator trennt die Konfiguration eines Elements von seiner Präsentationsschicht. Das Panel umfasst die Bereiche Settings, Controls, Render, CSS, JS sowie Enqueue CSS und JS, sodass Sie an einer Stelle den Komponentennamen, die verfügbaren Bearbeitungsoptionen, den resultierenden Code sowie die benötigten Ressourcen festlegen können. Das Rendering kann in PHP oder Twig vorbereitet werden, was die Wahl der Syntax je nach Erfahrung des Projektverantwortlichen ermöglicht.

Die für ein eigenes Element erstellten Controls können den Tabs „Content“ und „Style“ in der Bricks-Oberfläche zugewiesen werden. Die verfügbaren Feldtypen wie Text, Textarea oder Number ermöglichen es, dem späteren Redakteur nur die Einstellungen bereitzustellen, die er tatsächlich ändern soll. Die fertige Komponente lässt sich als JSON-Datei exportieren und in einer anderen Website importieren, was den Aufbau einer Bibliothek wiederverwendbarer Lösungen für mehrere Projekte vereinfacht.

Neben dem Element Creator liefert das Plugin Piotnet Bricks visuelle Elemente und Logikerweiterungen für die Bricks-Builder-Umgebung. Die einzelnen Module decken konkrete gestalterische Anforderungen ab – von der Bildpräsentation bis hin zur Verarbeitung von Formularen, die von Benutzerdaten abhängen.

• Conditional Visibility: blendet Elemente ein oder aus – basierend auf Benutzerrollen, Datum, Uhrzeit, Beitragstyp, Taxonomie, benutzerdefinierten Feldern oder in der URL enthaltenen Informationen.
• Form Conditional Logic: steuert die Sichtbarkeit von Feldern im Standard-Bricks-Formular abhängig von den vom Benutzer eingegebenen oder ausgewählten Werten.
• Form Calculation: führt Berechnungen mit den über Formularfelder übermittelten Zahlen durch und ermöglicht so die Erstellung von Preis-, Kosten-, Flächen- oder Bedarfsrechnern.
• Form Abandonment: speichert teilweise eingegebene Daten aus nicht abgeschlossenen Formularen und ermöglicht dem Besucher, die Eingabe fortzusetzen.
• Range Slider: fügt dem Bricks-Formular ein Wertauswahlfeld per Schieberegler hinzu, nützlich unter anderem in Kalkulatoren und Konfiguratoren.
• Image Comparison: vergleicht zwei Bilder mithilfe eines verschiebbaren Trennelements in horizontaler oder vertikaler Ausrichtung.
• Hotspot: platziert auf einer Grafik aktive Punkte, die zusätzliche Informationen zu markierten Bereichen eines Bildes, Produkts oder Schemas vermitteln.
• Advanced Tabs: organisiert umfangreichere Inhalte in umschaltbaren Tabs und begrenzt so die Seitenlänge, ohne wichtige Informationen zu entfernen.

Bedingte Inhalte, Formulare und interaktive Elemente

Das Modul für bedingte Sichtbarkeit kann auf Bricks-Elemente, Layoutformate sowie Komponenten anderer mit dem Builder kompatibler Erweiterungen angewendet werden. Bedingungen können mit AND- und OR-Operatoren verknüpft und mit einer Aktion zum Einblenden oder Ausblenden des Elements versehen werden. Unterstützt werden unter anderem der Anmeldestatus, WordPress-Rollen, Zeitpläne nach Serverzeitzone, standardmäßige Custom Fields, ACF-Felder, URL-Parameter sowie Text- und Zahlenvergleiche.

Diese Logik bewährt sich bei der Erstellung von Bereichen für angemeldete Kunden, zeitgesteuerten Meldungen, kategorieabhängigen Angeboten sowie Kontaktformularen, die nur bei bestimmten Produktdaten angezeigt werden. In WooCommerce-Websites, die mit Bricks erstellt wurden, kann sie zur Differenzierung von Template-Abschnitten, zur Anzeige zusätzlicher Informationen für ausgewählte Benutzergruppen oder zur Steuerung von Inhalten auf Basis von Custom-Field-Daten dienen. Es handelt sich jedoch nicht um eine eigenständige Erweiterung des WooCommerce-Verkaufsmechanismus, sondern um ein Set von Design-Werkzeugen für Bricks Builder.

Die Bibliothek des Plugins umfasst außerdem Flex Slider, die scrollbare Logowand Marquee Logo Wall, einen Content Toggle, Tooltips, beim Scrollen ausgelöste Animationen sowie einen Scroll-To-Top-Button. Darüber hinaus stehen Überblendungen mehrerer Hintergrundbilder, ein synchronisierter Instagram-Feed sowie Schaltflächenelemente mit Animationseffekten zur Verfügung. Diese Funktionen ermöglichen den Aufbau interaktiver Bereiche, ohne für jeden einzelnen Effekt ein separates Plugin installieren zu müssen.

Das Plugin Piotnet Bricks ist besonders nützlich in Projekten, in denen der vorhandene Elementsatz von Bricks nicht alle funktionalen Anforderungen abdeckt. Die Möglichkeit, eine eigene Komponentenstruktur zu speichern, eine kontrollierte Bearbeitungsoberfläche hinzuzufügen und Elemente zwischen Websites zu übertragen, hilft bei der Standardisierung der Arbeit an Unternehmenswebsites, Landingpages, Katalogen, Content-Portalen und auf Bricks-Templates basierenden Shops.

Der Element Creator erfordert eine Umgebung mit PHP in Version 7.2.5 oder höher. In der Praxis lassen sich einige fertige Module ohne Programmierung konfigurieren, während die Erstellung vollständig eigener Elemente mindestens Grundkenntnisse in HTML, CSS sowie PHP oder Twig voraussetzt. Dadurch bleibt das Plugin für Anwender zugänglich, die fertige Erweiterungen nutzen, und bietet gleichzeitig technische Freiheit für diejenigen, die individuelle Komponenten erstellen.