FAQ > Widgets

Retour à la FAQ
Retour
Table des matières

Accordéon

Accordéon :

Personnaliser la couleur au survol (CSS)

Dans Pages > Elementor > Réglages du site > CSS personnalisés >
  1. Copier le code CSS ci-dessous pour personnaliser la couleur au survol des titres du widget Accordéon : 
				
					/*
-- Accordéon - Lien au survol
*/

.elementor-widget-accordion .elementor-accordion .elementor-accordion-item .elementor-accordion-title:hover {
   color: #CODEHEX;
}
  1. Important Remplacer #CODEHEX par le code de la couleur désirée.
Accordéon :

Fermer tous les éléments par défaut (Script)

Dans Elementor > Code personnalisé >
  1. Cliquer sur le bouton Ajouter
    • Titre : Widget Accordéon – Pour les fermer par défaut
    • Emplacement : <head>
    • Priorité : 10
    • Copier et coller le code suivant :
				
					<!-- Accordéon fermé par défaut - v.2024-08-29 -->
<style id="msw-accordion-closed-on-load">
.elementor-widget-accordion .elementor-tab-content.elementor-active {
    display: none !important;
}
</style>
<script>
    document.addEventListener('DOMContentLoaded', function(event) {
        if (document.querySelector('.elementor-widget-accordion')) {
            var style = document.getElementById('msw-accordion-closed-on-load');
            var checkAccordeon = setInterval(function() {
                var content, items = document.querySelectorAll('.elementor-tab-title.elementor-active');
                if (items.length) {
                    for (var i = 0; i < items.length; i++) {
                        items[i].classList.remove('elementor-active');
                        items[i].setAttribute('aria-expanded', false);
                        items[i].removeAttribute('aria-selected');
                        content = items[i].parentNode.querySelector('.elementor-tab-content');
                        content.classList.remove('elementor-active');
                        content.removeAttribute('style');
                    }
                    if (style) {
                        style.remove();
                    }
                    clearInterval(checkAccordeon);
                }
            }, 100);
        }
    });
</script>
  1. Au dessus du premier widget Accordéon de la page, ajouter un widget HTML.
  2. À l’aide du panneau Navigateur, renommer ce widget : HTML – Accordéon – Script
  3. Dans ce nouveau widget, coller le script suivant :
				
					<!-- Accordéon fermé par défaut - v.2024-08-27 -->
<style class="accordion-closed-on-load">
.elementor-widget-accordion .elementor-tab-content.elementor-active {
    display: none !important;
}
</style>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        if (document.querySelector('.elementor-widget-accordion')) {
            var style = document.querySelector('.accordion-closed-on-load');
            var checkAccordeon = setInterval(function() {
                var content, items = document.querySelectorAll(".elementor-tab-title.elementor-active");
                if (items.length) {
                    for (i = 0; i < items.length; i++) {
                        items[i].classList.remove("elementor-active");
                        items[i].setAttribute("aria-expanded", false);
                        items[i].removeAttribute("aria-selected");
                        content = items[i].parentNode.querySelector(".elementor-tab-content");
                        content.classList.remove("elementor-active");
                        content.removeAttribute("style");
                    }
                    if (style) {
                        style.remove();
                    }
                    clearInterval(checkAccordeon);
                }
            }, 100);
        }
    });
</script>
				
			
				
					<!-- 
Accordéon fermé par défaut - v.2024-01-31
-->
<style class="accordion-closed-on-load">
body:not(.elementor-editor-active) .elementor-widget-accordion .elementor-tab-content {
    display: none !important;
}
</style>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        if (document.querySelector('.elementor-widget-accordion')) {
            var checkAccordeon = setInterval(function() {
                document.querySelector('.accordion-closed-on-load').remove();
                var items = document.querySelectorAll(".elementor-tab-title.elementor-active");
            
                if (items.length) {
                    for (i = 0; i < items.length; i++) {
                        items[i].classList.remove("elementor-active");
                        items[i].parentNode.querySelector(".elementor-tab-content").style.display = "none";
                    }
                    clearInterval(checkAccordeon);
                }
            }, 100);
        }
    });
</script>
				
			
				
					<!-- 
Accordéon fermé par défaut
-->
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var checkAccordeon = setInterval(function() {
            var items = document.querySelectorAll(".elementor-tab-title.elementor-active");
            
            if (items.length) {
                for (i = 0; i < items.length; i++) {
                    items[i].classList.remove("elementor-active");
                    items[i].parentNode.querySelector(".elementor-tab-content").style.display = "none";
                }
                clearInterval(checkAccordeon);
            }
        }, 100);
    });
</script>
  1. Important Ajouter votre site à la liste des Sites web clients WP qui utilisent ce script.

Liste d'icônes

Liste d'icônes :

Modifier la couleur des liens d'une liste d'icônes (CSS)

Dans Pages > Elementor >
Un site peut comporter plusieurs listes d’icônes affichées sur différentes couleurs d’arrière-plan, il est donc possible que la couleur des liens doive s’adapter selon celle-ci. On ajoutera donc des classes CSS pour identifier les couleurs d’arrière-plan :
  1. Dans le widget Section ou Colonne ou Container > Avancé :
    • Classes CSS : bg-1  ou  bg-2  ou  bg-3
Dans Pages > Elementor > Réglages du site > CSS personnalisé >
  1. Copier le code CSS ci-dessous dans son entièreté ou uniquement les portions dont vous avez besoin pour personnaliser la couleur des liens des widgets Liste d’icône.
				
					/* 
-- Liens des listes d'icônes 
*/

/* Listes d'icônes dans un conteneur AYANT la classe bg-1 */
.bg-1 .elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-item a .elementor-icon-list-text {
   color:#CODEHEX;
}

/* Listes d'icônes dans un conteneur AYANT la classe bg-2 */
.bg-2 .elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-item a .elementor-icon-list-text {
   color:#CODEHEX;
}

/* Listes d'icônes dans un conteneur AYANT la classe bg-3 */
.bg-3 .elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-item a .elementor-icon-list-text {
   color:#CODEHEX;
}
  1. Important Remplacer le code #CODEHEX par…
    • un code de couleur en hexadécimal, par exemple : 
      color: #000000;
    • une variable globale de couleurs, par exemple : 
      color: var( --e-global-color-primary );
      Voici quelques-unes des variables disponibles dans nos templates :
      Couleur Code à utiliser
      Principal --e-global-color-primary
      Secondaire --e-global-color-secondary
      Accentué --e-global-color-accent
Liste d'icônes :

Uniformiser la typographie entre les items avec et sans lien

Dans Pages > Elementor > Réglages du site > CSS personnalisé >
  1. Copier et coller le code CSS ci-dessous si votre liste d’icônes utilise la global font Texte.
				
					/* 
--- Liens dans les listes à puces 
*/

.elementor-widget-icon-list .elementor-icon-list-item > a .elementor-icon-list-text {
    font-size: var( --e-global-typography-text-font-size );
    line-height: var( --e-global-typography-text-line-height );
}

HA Unfold

HA UnFold :

Afficher uniquement dans certaines résolutions (CSS)

Dans Pages > Elementor >
  1. Dans le widget Unfold, mettre uniquement le contenu que vous désirez cacher dans certaines résolutions.
  2. Dans le widget Unfold > Contenu > Fold/Unfold Options :
    • Fold Height : 1
  3. Dans le widget Unfold > Style > Box :
    • Type d’arrière plan : Classique (pinceau)
    • Couleur : #ffffff00 (pour forcer le transparent)
    • Overlay Height : 0
  4. Dans le widget Unfold > Avancé > Disposition > Champ Classes CSS, écrire la ou les classes correspondant aux résolutions pour lesquelles vous désirez cacher le bouton :
    Classe Mobile [0, 768px[ Tablette [768px, 1024px] Desktop [1025px, [
    ha-unfold-hidden-mobile Hidden Visible Visible
    ha-unfold-hidden-tablet Visible Hidden Visible
    ha-unfold-hidden-desktop Visible Visible Hidden
  5. Dans le widget Unfold > Avancé > CSS personnalisé, coller le code CSS suivant :
				
					/* Réduire la marge en haut du bouton En savoir plus */

selector .ha-unfold-btn {
    margin-top:0; /* pas ouvert */
}
selector .ha-unfold-data.folded + .ha-unfold-btn {
    margin-top:20px; /* ouvert */
}

/* Cacher le bouton En savoir plus et afficher le contenu caché dans certaines résolutions */

@media (min-width:1025px) {
    .ha-unfold-hidden-desktop .ha-unfold-data {
        height:auto !important;
    }
    .ha-unfold-hidden-desktop .ha-unfold-btn {
        display:none !important;
    }
}

@media (min-width:768px) and (max-width:1024px) {
    .ha-unfold-hidden-tablet .ha-unfold-data {
        height:auto !important;
    }
    .ha-unfold-hidden-tablet .ha-unfold-btn {
        display:none !important;
    }
}

@media (max-width:767px) {
    .ha-unfold-hidden-mobile .ha-unfold-data {
        height:auto !important;
    }
    .ha-unfold-hidden-mobile .ha-unfold-btn {
        display:none !important;
    }
}
  1. Dans le code CSS ci-dessus, vous pouvez personnaliser les lignes surlignées si vous désirez ajuster la marge supérieure du bouton :
    • quand le texte est caché (/* pas ouvert */)
    • quand le texte est visible (/* ouvert */)
  2. Important Ajouter votre site à la liste des Sites web clients WP qui utilisent ce script.