Elementor Hidden Elements Guide : Contrôles simples pour afficher et cacher les éléments de la page

La méthode Hide if Empty d'Elementor Pro utilise le CSS, ce qui signifie que l'élément est rendu invisible (affichage) même s'il existe toujours dans le code source.

L'avantage est qu'il fonctionne avec tous les fournisseurs de champs personnalisés tels que ACF, JetEngine, Pods, Metabox, etc.

Si vous voulez une méthode Elementor hide (if empty) qui supprime complètement les balises du document, vous devrez utiliser Dynamic.ooo, JetEngine, ou un autre plugin.

Tout d'abord, ajoutez l'extrait de code suivant au fichier functions.php du plugin ou du thème enfant sélectionné. Comme il s'agit d'un code PHP, il ne peut pas être ajouté directement au code personnalisé d'Elementor.

1、Utilisation de plug-ins

Si vous choisissez d'utiliser le plugin Code Snippets, suivez les étapes suivantes :

1. Naviguez vers le tableau de bord de WordPress, Plugins > Ajouter un nouveau plugin, et dans la barre de recherche, entrezExtraits de codeInstallez et activez le plug-in.

2. Rafraîchissez le tableau de bord de WordPress et allez dans "Snippets" > "Add New".

3. Collez le code suivant dans la boîte de code.

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. Ajoutez une description telle que "Cacher le widget Elementor s'il est vide".
4. Cliquez sur "Enregistrer les modifications et activer".

garantir quevotre_clé_de_champRemplacer par la clé du champ à vérifier. Ainsi, si le champ est vide, le widget sera caché.

Utilisation d'Elementor

Pour masquer un élément dans la page Elementor si le champ est vide, vous pouvez suivre les étapes ci-dessous :

1. Aller à la page ou au modèle: Allez sur la page ou le modèle Elementor où l'élément doit être caché.
2. Sélectionner l'élément à masquer: Sélectionnez l'élément qui est caché lorsque le champ est vide.
3. Aller à Paramètres de l'élémentDans l'éditeur Elementor, recherchez l'élément sélectionné dans le champ "Paramètres des éléments"et sélectionnez "niveau élevé".
4. Ajout de classes CSSDans l'onglet "Avancé", recherchez le paramètre "Classes CSS" et entrez un nom de classe dans la zone de saisie, par exemple "hide-if-empty".

5. Sauvegarder la page: Sauvegarder la page ou le modèle.
6. Ajouter une feuille de style CSS personnaliséePour ce faire, vous devez vous rendre dans la section "Additional CSS" dans WordPress Appearance > Customise (l'emplacement exact peut varier) et ajouter le code CSS suivant :

.hide-if-empty {
    display : none ;
}

Et si vous voulez un nom de classe ?

Si vous souhaitez utiliser plus d'un nom de classe sur le même élément, il vous suffit de suivre les étapes suivantes :

1. Allez à l'élément de votre choix dans l'éditeur Elementor.
2. Sélectionnez l'onglet Avancé dans le panneau Paramètres de l'élément à droite.
3. Dans le paramètre "Classes CSS", entrez votre premier nom de classe, terminez par un espace, puis entrez votre deuxième nom de classe.

4. Veillez à ce que chaque nom de classe soit séparé par un espace afin qu'Elementor les reconnaisse correctement.
5. Enregistrez votre page ou votre modèle.

3. ajouterCode court

Si vous souhaitez masquer des éléments en fonction de la présence d'une image vedette ou du contenu de l'article en cours, vous pouvez suivre les étapes suivantes :

1. Sélectionner l'élément à masquerSélectionnez les éléments que vous souhaitez masquer en fonction de la condition dans l'éditeur d'Elementor.
2. Aller à Paramètres de l'élémentPour plus d'informations, consultez le site web de la Commission européenne.
3. Ajout de classes CSSDans le paramètre "CSS Classes", entrez le nom de la classe, terminez par un espace, puis entrez un deuxième nom de classe. Veillez à séparer chaque nom de classe par un espace.
4. Ajouter une condition de code courtAprès avoir ajouté le nom de la classe, entrez ce qui suit dans le champ "Shortcode" :

[elementor_if has_post_thumbnail="yes"]

Vérifie si l'article courant a une image en vedette. Si vous voulez vérifier si le contenu de l'article est vide, vous pouvez utiliser le shortcode suivant :

[elementor_if has_excerpt="yes"]

Ajoutez au code le nom de la classe à masquer lorsque la condition est remplie. Par exemple, si vous souhaitez masquer des éléments, le code complet pourrait ressembler à ce qui suit :

[elementor_if has_post_thumbnail="yes"] votre-nom-de-classe [/elementor_if]

5. Sauvegarder la page: Sauvegarder la page ou le modèle.

Résumé :

Dans Elementor, les éléments peuvent être cachés en fonction de conditions spécifiques en utilisant des classes CSS et des conditions de shortcode. Non seulement cette méthode est facile à utiliser, mais elle ne nécessite aucun plugin supplémentaire, seulement Elementor Pro. L'affichage des éléments de la page peut être contrôlé de manière flexible en définissant des conditions basées sur le fait qu'un champ est vide ou que l'article en cours a une image vedette ou un contenu d'article. Cette fonctionnalité permet non seulement d'améliorer la flexibilité de la conception des pages, mais aussi d'optimiser la vitesse de chargement des pages et l'expérience des utilisateurs.