Die Hide if Empty-Methode von Elementor Pro verwendet CSS, was bedeutet, dass das Element auf unsichtbar (Anzeige) gesetzt wird, obwohl es im Quellcode noch existiert.

Der Vorteil ist, dass es mit allen benutzerdefinierten Feldanbietern wie ACF, JetEngine, Pods, Metabox usw. funktioniert.

Wenn Sie eine Elementor hide (if empty) Methode wünschen, die das Markup vollständig aus dem Dokument entfernt, müssen Sie Dynamic.ooo, JetEngine oder ein anderes Plugin verwenden.

Fügen Sie zunächst den folgenden Codeschnipsel in die Datei functions.php des ausgewählten Plugins oder Child-Themes ein. Da es sich um PHP-Code handelt, kann er nicht direkt in den benutzerdefinierten Code von Elementor eingefügt werden.

1、Verwendung von Plug-Ins

Wenn Sie das Code Snippets-Plugin verwenden möchten, gehen Sie folgendermaßen vor:

1. Navigieren Sie zum WordPress-Dashboard, Plugins > Add New Plugin, und geben Sie in der SuchleisteCode-SchnipselInstallieren und aktivieren Sie das Plug-in.

2. Aktualisieren Sie das WordPress-Dashboard und gehen Sie zu "Snippets" > "Add New".

3. Fügen Sie den folgenden Code in das Codefeld ein.

add_action( 'elementor/frontend/section/before_render', function( $section, $args ) {
    $settings = $section->get_settings_for_display();
    if ( empty( $settings['your_field_key'] ) ) {
        $section->add_render_attribute( '_wrapper', 'style', 'display:none;' );
    }
}, 10, 2 );

3. Fügen Sie eine Beschreibung hinzu, z. B. "Elementor-Widget ausblenden, wenn es leer ist".
4. Klicken Sie auf "Änderungen speichern und aktivieren".

garantieren, dassihr_feld_schlüsselErsetzen Sie durch den Schlüssel des Feldes, das Sie überprüfen möchten. Auf diese Weise wird das Widget ausgeblendet, wenn das Feld leer ist.

Elementor verwenden

Um ein Element auf der Elementor-Seite auszublenden, wenn das Feld leer ist, können Sie die folgenden Schritte ausführen:

1. Gehe zu Seite oder VorlageWechseln Sie zu der Elementor-Seite oder -Vorlage, auf der das Element ausgeblendet werden soll.
2. Wählen Sie das auszublendende ElementWählen Sie das Element, das ausgeblendet wird, wenn das Feld leer ist.
3. Gehen Sie zu Elementeinstellungen: Suchen Sie im Elementor-Editor das ausgewählte Element im Feld "Element-Einstellungen" und wählen Sie "hohes Niveau".
4. Hinzufügen von CSS-KlassenUnter der Registerkarte "Erweitert" finden Sie die Einstellung "CSS-Klassen" und geben einen Klassennamen in das Eingabefeld ein, z. B. "hide-if-empty".

5. Seite speichernSpeichern: Speichern Sie die Seite oder die Vorlage.
6. Benutzerdefiniertes CSS hinzufügenGehen Sie zu "Additional CSS" in WordPress Appearance > Customise (die genaue Position kann variieren) und fügen Sie den folgenden CSS-Code hinzu:

.hide-if-empty {
    Anzeige: keine;
}

Was, wenn Sie einen Klassennamen wollen?

Wenn Sie mehr als einen Klassennamen für dasselbe Element verwenden möchten, befolgen Sie einfach diese Schritte:

1. Gehen Sie zu dem Element Ihrer Wahl im Elementor-Editor.
2. Wählen Sie die Registerkarte Erweitert im Bereich Elementeinstellungen auf der rechten Seite.
3. Geben Sie in der Einstellung "CSS-Klassen" Ihren ersten Klassennamen ein, schließen Sie ihn mit einem Leerzeichen ab und geben Sie dann Ihren zweiten Klassennamen ein.

4. Stellen Sie sicher, dass jeder Klassenname durch ein Leerzeichen getrennt ist, damit Elementor sie richtig erkennt.
5. Speichern Sie Ihre Seite oder Vorlage.

3. hinzufügenKurzcode

Wenn Sie Elemente ausblenden möchten, die davon abhängen, ob der aktuelle Beitrag ein hervorgehobenes Bild oder einen Beitragsinhalt enthält, können Sie die folgenden Schritte ausführen:

1. Wählen Sie das auszublendende ElementWählen Sie die Elemente, die Sie ausblenden möchten, basierend auf der Bedingung im Elementor-Editor.
2. Gehen Sie zu ElementeinstellungenWählen Sie die Registerkarte Erweitert im Bereich Elementeinstellungen auf der rechten Seite.
3. Hinzufügen von CSS-KlassenCSS-Klassen": Geben Sie in der Einstellung "CSS-Klassen" den Klassennamen ein, schließen Sie ihn mit einem Leerzeichen ab und geben Sie dann einen zweiten Klassennamen ein. Achten Sie darauf, dass Sie jeden Klassennamen mit einem Leerzeichen trennen.
4. Shortcode Bedingung hinzufügenNachdem Sie den Klassennamen hinzugefügt haben, geben Sie in das Feld "Shortcode" Folgendes ein:

[elementor_if has_post_thumbnail="yes"]

Prüft, ob der aktuelle Beitrag ein Featured Image hat. Wenn Sie prüfen möchten, ob der Inhalt des Beitrags leer ist, können Sie den folgenden Shortcode verwenden:

[elementor_if has_excerpt="yes"]

Fügen Sie dem Shortcode den Namen der Klasse hinzu, die ausgeblendet werden soll, wenn die Bedingung erfüllt ist. Wenn Sie zum Beispiel Elemente ausblenden möchten, könnte der vollständige Shortcode so aussehen:

[elementor_if has_post_thumbnail="yes"] ihr-klassen-name [/elementor_if]

5. Seite speichernSpeichern: Speichern Sie die Seite oder die Vorlage.

Zusammenfassung:

In Elementor können Elemente basierend auf bestimmten Bedingungen ausgeblendet werden, indem CSS-Klassen und Shortcode-Bedingungen verwendet werden. Diese Methode ist nicht nur einfach zu verwenden, sondern erfordert auch keine zusätzlichen Plugins, sondern nur Elementor Pro. Die Anzeige von Seitenelementen kann flexibel gesteuert werden, indem Bedingungen festgelegt werden, die darauf basieren, ob ein Feld leer ist oder ob der aktuelle Beitrag ein Featured Image oder einen Beitragsinhalt hat. Diese Funktion verbessert nicht nur die Flexibilität der Seitengestaltung, sondern optimiert auch die Ladegeschwindigkeit der Seite und die Benutzerfreundlichkeit.