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ô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

🔗 Onglet Contenu > Lien

Configuration du lien

Types de liens supportés :

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

  • Sections page : #section-contact

  • Emails : mailto:[email protected]

  • Téléphones : tel:+33123456789

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

Texte alternatif

🎨 Personnalisation visuelle

🎭 Style de l'Icône

Couleurs

Dimensions

🎪 Effets Visuels

Rotation

Animations

📐 Bordures et Espacement

Bordures

Espacement

✨ Effets Avancés

Ombre portée

États interactifs

🎯 Cas d'usage courants

📞 Icônes de contact

🔗 Navigation sociale

🎯 Call-to-action

🏠 Navigation interne

🔧 Configuration avancée

📱 Responsive Design

Tailles recommandées

Espacements responsives

🎨 Cohérence visuelle

Palette de couleurs

Styles harmonieux

🔒 Bonnes pratiques SEO

Attributs essentiels

Accessibilité

🧪 Tests et vérifications

✅ Checklist avant mise en ligne

Fonctionnement

Apparence

Performance

🔍 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

PrécédentBouton WordPress amélioréSuivantNavigation par sections

Mis à jour