Dashicons (icones cachées de WordPress)

📖 Documentation du Widget Dashicons - Métal Rouge SAMR

Vue d'ensemble

Le widget Dashicons est un composant Elementor qui affiche les icônes natives de WordPress (Dashicons) avec des effets visuels avancés et une personnalisation complète. Il permet d'ajouter facilement des icônes professionnelles à vos pages.

---

🚀 Fonctionnalités principales

✨ Bibliothèque d'icônes complète

• Dashicons WordPress : Plus de 300 icônes natives WordPress

• Aperçu en temps réel : Visualisation directe dans l'éditeur

• Recherche intégrée : Trouvez rapidement l'icône souhaitée

• Qualité vectorielle : Icônes nettes à toutes les tailles

🎨 Personnalisation avancée

• Tailles flexibles : De 16px à 200px et plus

• Couleurs personnalisées : États normal, hover, active

• Effets de rotation : Rotation continue ou au survol

• Animations : Pulsation, zoom, rebond

• Bordures et ombres : Styles complets configurables

🔗 Interactivité

• Liens cliquables : Navigation vers pages, sections, emails, téléphones

• Ouverture d'onglet : Contrôle de l'ouverture des liens

• Accessibilité : Navigation clavier et textes alternatifs

• Hover effects : Feedback visuel au survol

---

📋 Installation et ajout du widget

Prérequis

• WordPress 5.0+

• Elementor Pro 3.0+

• Plugin Metal Rouge SAMR Extension activé

Ajout sur une page

1. Ouvrir l'éditeur Elementor sur votre page

2. Rechercher "Dashicon" dans le panneau widgets

3. Glisser-déposer le widget dans votre section

4. Le widget se trouve dans "Métal Rouge SAMR"

---

⚙️ Configuration du contenu

🎯 Onglet Contenu > Icône

Sélection de l'icône

Icône : Cliquer pour ouvrir le sélecteur
Recherche : Taper des mots-clés (ex: "email", "phone", "star")
Catégories : Administration, Contenu, Éditeur, Images, etc.

💡 Icônes populaires :

• Communication : dashicons-email, dashicons-phone, dashicons-admin-comments

• Navigation : dashicons-arrow-right, dashicons-arrow-left, dashicons-external

• Social : dashicons-share, dashicons-twitter, dashicons-facebook

• Business : dashicons-businessman, dashicons-building, dashicons-cart

• Outils : dashicons-admin-tools, dashicons-admin-settings, dashicons-search

Propriétés de base

Taille de l'icône : 48px (16px - 200px+)
Alignement : Gauche / Centre / Droite

🔗 Onglet Contenu > Lien

Configuration du lien

URL : https://example.com ou #section-id ou mailto:[email protected]
Ouvrir dans un nouvel onglet : Oui/Non
Attribut nofollow : Oui/Non (pour liens externes)

Types de liens supportés :

• Pages web : https://metal-rouge.fr

• Sections page : #section-contact

• Emails : mailto:[email protected]

• Téléphones : tel:[phone]

• Téléchargements : # avec attributs personnalisés

Texte alternatif

Titre : "Contactez-nous" (tooltip au survol)
Description : Texte pour l'accessibilité

---

🎨 Personnalisation visuelle

🎭 Style de l'Icône

Couleurs

Couleur normale : #333333 (par défaut)
Couleur au survol : #dc2626 (rouge Metal Rouge)
Couleur active : Plus foncée que hover
Transition : 300ms (durée de l'animation)

Dimensions

Taille responsive :
- Desktop : 48px
- Tablette : 40px  
- Mobile : 32px

Largeur personnalisée : Auto / Personnalisée
Hauteur personnalisée : Auto / Personnalisée

🎪 Effets Visuels

Rotation

Type de rotation :
- Aucune : Pas de rotation
- Continue : Rotation constante 360°
- Au survol : Rotation uniquement au hover

Vitesse : 2s (1s = rapide, 5s = lent)
Direction : Horaire / Anti-horaire

Animations

Type d'animation :
- Aucune : Statique
- Pulsation : Effet de battement
- Zoom : Grossissement/réduction
- Rebond : Effet élastique
- Oscillation : Balancement gauche/droite

Durée : 1.5s (0.5s - 5s)
Répétition : Infinie / 1 fois / N fois

📐 Bordures et Espacement

Bordures

Type de bordure : Aucune / Solide / Pointillé / Double
Largeur : 2px (responsive)
Couleur : Personnalisable
Rayon : 50% (cercle) / 0% (carré) / valeur personnalisée

Espacement

Padding : Espacement interne autour de l'icône
Margin : Espacement externe du widget

✨ Effets Avancés

Ombre portée

Ombre normale :
- Décalage horizontal : 0px
- Décalage vertical : 2px
- Flou : 4px
- Étalement : 0px
- Couleur : rgba(0,0,0,0.2)

Ombre au survol :
- Décalage augmenté
- Couleur plus prononcée

États interactifs

État Focus (navigation clavier) :
- Contour de focus visible
- Couleur d'accessibilité

État Active (clic) :
- Feedback visuel instantané
- Légère réduction de taille

---

🎯 Cas d'usage courants

📞 Icônes de contact

Email : dashicons-email + mailto:[email protected]
Téléphone : dashicons-phone + tel:[phone]
Adresse : dashicons-location + lien Google Maps

🔗 Navigation sociale

Partage : dashicons-share + URL de partage
Téléchargement : dashicons-download + lien fichier
Liens externes : dashicons-external + target="_blank"

🎯 Call-to-action

Inscription : dashicons-yes + page d'inscription
Information : dashicons-info + section FAQ
Service : dashicons-admin-tools + page services

🏠 Navigation interne

Accueil : dashicons-admin-home + #top
À propos : dashicons-groups + #about
Services : dashicons-admin-tools + #services
Contact : dashicons-email-alt + #contact

---

🔧 Configuration avancée

📱 Responsive Design

Tailles recommandées

Desktop (>1024px) : 48-64px
Tablette (768-1024px) : 40-48px
Mobile (<768px) : 32-40px

Espacements responsives

Desktop : Margin 20px, Padding 15px
Tablette : Margin 15px, Padding 12px
Mobile : Margin 10px, Padding 8px

🎨 Cohérence visuelle

Palette de couleurs

Couleur principale : #dc2626 (rouge Metal Rouge)
Couleur secondaire : #333333 (gris foncé)
Couleur accent : #ffffff (blanc)
Couleur hover : #b91c1c (rouge plus foncé)

Styles harmonieux

Bordures rondes : 8px ou 50% (cercle)
Ombres subtiles : 0 2px 4px rgba(0,0,0,0.1)
Transitions fluides : 300ms ease

🔒 Bonnes pratiques SEO

Attributs essentiels

Titre descriptif : "Contactez notre équipe"
Texte alternatif : Description de l'action
Liens nofollow : Pour liens externes non-endorsés

Accessibilité

Contraste minimum : 4.5:1 pour la lisibilité
Navigation clavier : Tous les liens accessibles via Tab
Focus visible : Contour net pour la navigation clavier

---

🧪 Tests et vérifications

✅ Checklist avant mise en ligne

Fonctionnement

• Icône sélectionnée et visible

• Lien configuré correctement

• Ouverture d'onglet selon les besoins

• Hover effect fonctionnel

• Navigation clavier opérationnelle

Apparence

• Taille appropriée sur tous les appareils

• Couleurs cohérentes avec la charte

• Animations fluides et non-distrayantes

• Bordures harmonieuses si utilisées

• Ombres subtiles pour la profondeur

Performance

• Temps de chargement acceptable

• Rendu correct sur différents navigateurs

• Pas de conflits avec autres plugins

• Responsive design fonctionnel

🔍 Test complet du widget

Test basique

1. Ajouter le widget dans une section

2. Sélectionner une icône populaire (ex: email)

3. Configurer un lien simple (ex: mailto:)

4. Tester le clic et la navigation

5. Vérifier l'apparence sur mobile

Test avancé

1. Configurer des animations subtiles

2. Ajouter des effets hover attractifs

3. Tester la navigation clavier (Tab + Entrée)

4. Vérifier les contrastes avec outil accessibilité

5. Valider sur différents navigateurs

---

💡 Conseils d'utilisation

🎯 Choix des icônes

• Cohérence : Utiliser le même style d'icônes sur tout le site

• Lisibilité : Choisir des icônes universellement comprises

• Contexte : Adapter l'icône au contenu environnant

• Simplicité : Éviter les icônes trop détaillées à petite taille

🎨 Design harmonieux

• Espacement uniforme : Même distance entre icônes similaires

• Tailles proportionnelles : Hiérarchie visuelle claire

• Couleurs limitées : Maximum 3 couleurs pour les icônes

• Effets subtils : Animations discrètes et professionnelles

📱 Responsive design

• Tailles adaptées : Plus grandes sur desktop, plus petites sur mobile

• Espacement adaptatif : Réduire les marges sur petit écran

• Touch-friendly : Minimum 44px pour les éléments cliquables sur mobile

• Test régulier : Vérifier sur vrais appareils mobile

---

📝 Checklist rapide d'utilisation

➕ Ajouter une icône simple

1. Glisser le widget dans votre section

2. Cliquer sur "Sélectionner l'icône"

3. Rechercher votre icône (ex: "email")

4. Définir la taille appropriée (48px par défaut)

5. Configurer le lien si besoin

6. Personnaliser la couleur selon votre charte

🎨 Personnaliser l'apparence

1. Onglet Style > Couleurs

2. Ajuster la taille pour le responsive

3. Ajouter une animation subtile si souhaité

4. Configurer l'effet hover pour l'interactivité

5. Tester sur différents appareils

🔗 Créer un lien fonctionnel

1. Onglet Contenu > Lien

2. Saisir l'URL complète : https://exemple.com

3. Choisir ouverture onglet selon le contexte

4. Ajouter titre descriptif pour l'accessibilité

5. Tester le lien avant publication