tl;dr: Wer Inhalte in WordPress ausblenden will hat es mit dem Block-Editor nicht gerade einfach: eine einfache Funktion ist nicht eingebaut. Mit Elementor und Elementor Pro hingegen installiert man ich auch ein Werkzeug, mit dem sich jedes Element beliebig ausblenden lässt. Wer noch mehr benötigt sollte sich die kostenlose Erweiterung Dynamic Visibility anschauen, die volle Funktionalität bekommt man dann mit der Kauf-Version von Dynamic Content for Elementor.
Inhalt
Elemente ausblenden –
Responsive in Elementor
Dynamic Visibility
Grundeinstellungen für Visibility
Trigger Post & Page
Trigger User & Role
Trigger Archive
Trigger Dynamic Tags
Trigger Device & Browser
Trigger Date & Time
Trigger Geotargeting
Trigger Context
Trigger WooCommerce
Trigger My FastAPP
Trigger Random
Trigger Custom Condition
Trigger Events
Fallback
Fazit
Kaum zu glauben aber wahr: etwas nicht anzuzeigen kann eine Herausforderung sein. So schnell sich der Blockeditor von WordPress auch entwickelt, eine einfache Lösung um einen Block nicht anzuzeigen gibt es noch nicht. Natürlich gibt es eine Reihe von Ansätzen, diese Funktionalität zu erreichen (wie zB bei haurand.com beschrieben), doch das ist weder intuitiv noch rasch durchzuführen.
Wer mit Elementor arbeitet hat es hier bedeutend einfacher.
Egal ob bei einem einzelnen Widget oder einem Abschnitt (veraltet!) oder Container. Unter
… Erweitert > Responsive
kann für jedes Element die Darstellung für jeden Ansichtsmodus (Desktop | Tablet | Mobil, wenn zusätzliche Breakpoints definiert wurden auch dafür) ausgeblendet werden.
Der HTML-Aufbau in Elementor macht es möglich, dass man wirklich alles mit diesen Einstellungen ausblenden kann. Manchmal muß oder will man sich so helfen, wenn man zB. unterschiedliche Versionen eines Elementes für die Desktop- und die Mobil-ansicht gestalten will.
Hat man nun ein Element ausgeblendet so wird es ausgegraut, der Bereich wird dezent schraffiert dargestellt. Das kann auch störend sein: will man unsichtbare Elemente auch im Editor-Modus unsichtbar schalten so findet man unter
Einstellungen (links oben) > Benutzer-Einstellungen | Responsive Vorschau
die Option Verborgene Elemente: zeigen/verstecken
Somit werden diese auch im Editor unsichtbar.
Für viele Anwendungen sind die Möglichkeiten von Elementor ausreichend, was aber, wenn man mehr Flexibilität benötigt? Wenn man zB. bestimmte Dinge zu einem bestimmten Datum, einer Uhrzeit oder nur einer bestimmten Benutzergruppe zeigen will?
Die Antwort heisst Dynamic Visibilty. Dieses kostenfreie Plugin ist eine abgespeckte Version eines Bestandteils von Dynamic Content for Elementor, einer Funktionssammlung mit über 140 verschiedenen Features.
Bei aktiviertem Plugin oder aktiviertem Feature in der Pro-Version taucht nun ein 4., zusätzlicher Tab im Panel auf – damit kann man nun die Sichtbarkeit von Widgets und Layout-Strukturen (Container, Abschnitte) beieinflussen.
Die Voreinstellung ist sinnvoller Weise deaktiviert, dh. nur wenn ich die Funktionalität benötige wird Code erzeugt. Der Schalter hierfür heisst einfach Visibility.
Die erste Option bei aktivierter Visibility heisst Always hide this element. Das ist also ein genereller Aus/Einschalter für eben jedes Element, das ich mit dem Elementor platziere.
Die Option Keep HTML bedeutet, dass zwar das Element nicht angeziegt wird, der HTML-Code hingegen innerhalb der ausgelieferten Seite verbleibt und vom Browser oder dem Bot auch gelesen werden kann. Die Ausblendung des Elements erfolgt hier einfach durch CSS.
Um die nächste Option Display Mode zu verstehen muß man sich die Arbeitsweise dieser Erweiterung vorstellen: verschiedene Auslöser (Triggers) sorgen dafür, dass der Display Mode (zeigen oder verstecken) angewandt wird. Diese Triggers können kombiniert werden, wobei die Logical connective dieser Kombination oder (OR) oder und (AND) sein kann.
Es gibt 13 Trigger, wobei 2 davon (MyFastApp und Custom Condition) der Pro-Version vorbehalten sind.
Übersetzt als Beispiel: Wenn man will, dass ein bestimmter Inhalt nur eingeloggten Abonennten angezeigt wird setzt man den Display mode auf show und den Trigger bei User & Role auf Subscriber.
Um zu erkennen wo man eine Visibility-Einstellung vorgenommen hat wird im Navigator der betroffene Bereich des Dokumentes mittels gestricheltem Rahmen gekennzeichnet. Das Beispiel zeigt: die Einstellung wurde im Container durchgeführt, betroffen sind der Container und die darin platzierten Widgets Überschrift und Bild.
Mit Post & Page als Trigger wird man vermutlich in Templates arbeiten. Über Post ID lassen sich eine bestimmte IDs auswählen um etwas auszublenden (oder anzuzeigen).
Die Post-Type Einstellungen erlaubt die Anzeige in bestimmen Beitragstypen (zB. nur in Beiträgen oder eignen Post-Typen).
Die Page/Post Auswahl erlaubt eine Selektion aus bestehenden Inhalten der Website.
Taxonomy lässt eine Auswahl nach zB: Kategorien oder Schlagworten zu.
Post Field erlaubt die Auswahl nach Überprüfung eines Feldwertes, also zB ob ein ACF-Feld befüllt ist oder einen bestimmten Wert hat. Damit lässt sich zum Beispiel steuern, dass ein Link nur dann angezeigt wird wenn das entsprechende URL-Feld auch gesetzt wurde.
Mit Multiple Metas kann man die Existenz mehrere Feldwerte überprüfen.
Format überprüft, ob das Element dem ausgewählten WordPress-Format zugeordnet ist. (Mehr über WordPress Formate hier).
Die Navigation-Tree-Triggers erlauben die Überprüfung, wo das Element aktuell in einem Post als Eltern- oder Childpage angewandt wird (mit jeder Menge Variationen).
Die User & Role Trigger erlauben genaues Ansprechen des Besuchers über seine ID, IP, Rolle oder auch den Referrer.
Roles – hier wähl man aus, welche Benutzerrolle (vom Administrator bis hin zum Visitor, also den nicht eingeloggten User) Auslöser für das Anzeigeverhalten sein soll. Es können mehrere Benutzerrollen gewählt werden.
Selected Users erlaubt die spezifische Auswahl einzelner User als Trigger. Es können ID, Username oder E-Mail zur Selektion verwendet werden.
Wer sich mit den Berechtigungen seiner User beschäftigt hat kann auch diese mittels User can als Trigger verwenden.
User Field wiederum erlaubt die Überprüfung einzelner (auch eigener) Felder auf Existenz oder Wert. Funktioniert logischer Weise nur mit eingeloggten Usern.
Remote IP erlaubt die Angabe einer oder mehreren IP-Nummern, für welche ein Inhalt angezeigt wird. Das kann in Intranet-Umgebungen oder bei Webseiten die von einer Agentur mit statische IP verwaltet werden hilfreich sein.
Der Referrer kann verwendet werden, um User die von einer bestimmten Seite kommen (zB von facebook oder linkedIn) mit besonderem Inhalt zu versorgen.
Max per User erlaubt zu limitieren, wie oft ein Visibility-Setting für einen User funktionieren soll.
Der Archive Trigger erlaubt die Anzeige von Inhalten abhängig von der Einordnung Archiv-Typen (Kategorien, Schlagwörter, Autoren, Datumsarchive etc) bzw. den Taxonomy-Terms.
Wer eine Anwendung dafür hat bitte das Beispiel in den Kommentaren posten!
Die Dynamischen Attribute sind – besonders bei der Arbeit mit Templates – hilfreich. Mit Hilfe des Dynamic Tags – Triggers lassen sie sich auch zur Anzeigenkontrolle von Inhalten verwenden. Das funktioniert in 2 Schritten: zuerst wird der Tag ausgewählt (das kann vom einfachen Fall eines Datums eines Beitrags bis hin zur Verwendung eines Tokens gehen. Im Zweiten Schritt wird dann der Wert überprüft, möglich ist:
Im Unterschied zu den oben beschriebenen Responsive-Einstellungen im Elementor verwendet diese Responsive Option nicht die Pixel im Viewport zur Erkennung des aktuellen Gerätes sondern die WordPress eigene Geräte-Erkennung. Diese setzt auf das Auslesen des Strings $_SERVER[‚HTTP_USER_AGENT‘].
Browser erlaubt die Definition eines oder mehrerer Browser als Trigger für die Anzeige. Bestimmte Versionen können hier nicht ausgewählt werden.
Datums- und zeitabhängige Anzeigen sind vermutliche die häufigsten Anwendungen für Dynamic Visibility. Das Tool benutzt die in den WordPress-Einstellungen festgelegte Uhrzeit bzw. Zeitzone.
Zuerst muss die Option Use Dynamic Dates gesetzt werden, soferne man die Werte nach denen angezeigt werden soll dynamisch auswählen will (Token, Systemzeiten etc.).
Die Anzeigeoptionen sind immer paarweise, wobei nicht immer beide Werte gesetzt werden müssen. Date FROM und Date TO legen fest ab welchen und/oder bis zu welchem Datum ein Inhalt angezeigt werden soll.
Period FROM und Period TO machen das selbe, nur dass zur Eingabe kein Datumsauswahl-PopUp erscheint (anderes Eingabeformat).
Days of the Week lässt eine Anzeige nach Wochentagen zu.
Time FROM und Time TO erlaubt die Anzeigesteuerung nach Uhrzeit.
Mit diesen Optionen lassen sich Weihnachtswünsche, Urlaubsanzeigen, Tagesabhängige Speisekarten etc. so steuern, dass der User die relevanten Informationen bekommt wenn es notwendig ist – und sonst eben nicht.
Damit die Anzeigesteuerung über Geotargeting funktioniert muss zuvor das kostenfreie Plugin Geolocation IP Detection installiert werden. Danach stehen Auswahlfelder bereit.
Country erlaubt die Auswahl eines oder mehrerer Länder zur Anzeige von Inhalten.
City erlaubt eine Stadtauswahl.
Wie immer beim Geotargeting gilt zu berücksichtigen, dass hier die IP-Nummer des Users herangezogen wird und nicht der physische Standort, wie es zB. bei einem Mobil-Device über eine Standortabfrage möglich wäre.
Wer Sichtbarkeit über Server-Variablen GET, POST, COOKIE und SERVER umsetzen will benötigt den Context Trigger Parameter. Hier wird zuerst der Variablen-Name definiert und danach die Request-Methode, danach kann Status (Wert) des Parameters überprüft werden. Damit kann man wertabhängige Anzeigen umsetzen, je nachdem ob eine Parameter den Wert 1, 100 oder 1000 hat. Spannend.
Site fragt nach den WP-eigenen Conditional Tags
Die beiden Limiter Max per Day und Max Total erlauben die entsprechende Limitierung, ein Anwendungsbeispiel hierfür wäre die Anzeige eines Rabattcodes nur für die ersten 100 Besucher.
Language schliesslich ist nur bei entsprechendem Mulitilingual-Plugin verfügbar (Polylang, WPML, TranslatePress, Weglot) und erlaubt die Anzeige nach Sprache die im Sprachenplugin definiert wurde.
WooCommerce Shops haben eigene Optionen, die als Trigger abgefragt werden können.
Cart is empty / not empty erlaubt die Anzeige abhängig davon, ob der User Produkte im Warenkorb hat.
Product Type is erlaubt die Abfrage nach dem ProduktTyp (einfaches, gruppiert, externens, variables Produkt)
Product in the cart und Product Category in the cart checkt den Warenkorb und erlaubt abhängige Anzeigen zu den gewählten Produkten.
Die Software My FastAPP benutzt WordPress als Backend um eine Mobile-App für iOS und Android zu erzeugen. Dieser Trigger erlaubt die Auswahl, ob ein Element auf der Site, in der App oder bei beidem gezeigt werden soll. Pro Funktion.
Ein einfacher Schieberegler erlaubt die Eingabe von 0-100 und ermöglicht so einen Prozentsatz anzugeben. Und genau so oft wird der Inhalt angezeigt. Wer also unterschiedliche Inhalte mixen will oder bei jedem Aufruf eine andere Seite erzeugen will findet hier ein Werkzeug.
Und wer jetzt immer noch nicht genug hat kann sich seine Anzeigebedingungen auch selber basteln. Der Trigger Custom Condition erlaubt die Eingabe von PHP-Code, wobei auf alle WordPress-Variablen zugegriffen werden kann. Ein Beispiel für eine Anwendung habe ich hier Beschrieben: die Anzeige nach eingestellter Browsersprache. Pro Feature.
Wer in den Einstellungen zur Visibility (siehe oben) die Option Keep HTML aktiviert hat kann den Event-Trigger nutzen. Durch setzen eines Events (click, mousover, doubleclick, touchstart oder touchmove und der Engabe der ID des Elements (Trigger on this Element) , der das Event auslösen soll, kann hier die Sichtbarkeit beeinflusst werden.
Dabei lässt sich einstellen ob eine Animation erfolgen soll (Show Animation) und ob andere Elemente (Hide other elements) ausgewählt per ID gleichzeitig ausgeblendet werden sollen.
ein Toggle Schalter macht die Ein/Ausblendung umkehrbar.
Ausserdem lässt sich auch On Page Load aktivieren.
Wer vermeiden will, dass eine unerwünschte Leere im Falle von ausgeblendeten Inhalten entsteht kann sich mit dem Fallback-Feature eine Absicherung einbauen. Dieser lässt HMTL und also auch Shortcodes zu, man kann also auch hier wiederum Templates zur Gestaltung verwenden.
Die Sichtbarkeit von Inhalten zu kontrollieren kann sehr hilfreich sein, wenn man mit möglichst wenigen Templates auskommen will. Ausserdem kann man mit den vielen Features dem User nur jene Dinge zeigen, die gerade in der aktuellen Situation von Bedeutung sind. Das kann beim Shoppen ebenso wichtig sein wie zu einer bestimmten Tageszeit oder für einen aktuellen Status, eine Loginaufforderung etc.
Wie so oft: mit Elementor und Know-How wird die Website rasch besser.
Veröffentlicht am: 30. Oktober 2023
Letztes Update: 23. November 2023