Pourquoi et comment ajouter des icônes au menu de vos sites web ?

Pourquoi et comment ajouter des icônes au menu de vos sites web ?

Pourquoi ajouter des icônes dans le menu de vos sites web ?

 

Lorsqu’il s’agit de concevoir un site web, il est essentiel de créer une expérience utilisateur fluide et intuitive. Un élément clé de cette expérience est le menu du site. Traditionnellement, les menus étaient composés de simples liens texte, mais de nos jours, de plus en plus de sites web intègrent des icônes dans leurs menus. Dans cet article, nous allons explorer les raisons pour lesquelles il est avantageux d’ajouter des icônes dans le menu de vos sites web.

Le menu est un élément crucial de la navigation sur un site web. Il permet aux utilisateurs de trouver rapidement les informations dont ils ont besoin et de se déplacer facilement d’une page à l’autre. L’ajout d’icônes aux éléments du menu présente de nombreux avantages :

  1. Améliorer la lisibilité et la compréhension
  2. Accélérer la navigation
  3. Ajouter une touche visuelle attrayante
  4. Optimiser l’utilisation de l’espace
  5. Faciliter l’accessibilité
  6. Renforcer la reconnaissance de la marque
  7. Susciter l’engagement et l’interaction
  8. Améliorer la convivialité mobile
  9. Clarifier la signification des liens
  10. Suivre les tendances du design

Comment ajouter des icônes aux catégories du menu sur Divi ? En vidéo

Code CSS : 

.ld-menu-home > a:before {

font-family: 'ETMODULES';

content: '\e007'; /* change icon code here */

text-align: center;

margin-right: 10px;

margin-left: -10px;

color: #4d2def; /* change icon color here */

font-size: 1em; /* change icon size here */

transition: all .3s ease;

}

Liens pour les codes d’icônes Divi

Les icônes dans le menu peuvent-elles ralentir le chargement du site web ?

L’impact des icônes sur le temps de chargement dépend de la façon dont elles sont implémentées. En optimisant les icônes pour une taille de fichier réduite et en utilisant des techniques de chargement asynchrone, vous pouvez minimiser tout impact négatif sur les performances du site.

Faut-il utiliser des icônes uniquement dans le menu principal ou également dans les sous-menus ?

L’utilisation d’icônes dans les sous-menus peut être bénéfique pour améliorer la navigation et la compréhension de la hiérarchie du site. Cependant, il est important de ne pas surcharger le menu avec trop d’icônes, ce qui pourrait rendre la navigation confuse.

Comment choisir les icônes appropriées pour mon menu ?

Choisissez des icônes qui sont clairement compréhensibles et qui correspondent à la signification de chaque élément du menu. Vous pouvez utiliser des icônes génériques largement reconnues ou créer des icônes personnalisées pour correspondre à votre branding.

Les icônes doivent-elles être en couleur ou en noir et blanc ?

Cela dépend de la conception globale de votre site web. Les icônes peuvent être utilisées en couleur pour ajouter de la vie et de l’attrait visuel à votre menu. Cependant, les icônes en noir et blanc peuvent également être efficaces, en particulier si vous recherchez un design minimaliste ou si vous souhaitez une apparence plus sobre.

Dois-je utiliser des légendes avec les icônes dans mon menu ?

L’ajout de légendes avec les icônes peut être bénéfique, en particulier si vous souhaitez clarifier davantage la signification des icônes. Cependant, assurez-vous que les légendes n’alourdissent pas visuellement le menu et qu’elles ne créent pas de confusion avec les icônes elles-mêmes.

Les icônes doivent-elles être les mêmes sur tous les sites web ?

Non, il n’est pas nécessaire d’utiliser les mêmes icônes sur tous les sites web. Vous pouvez choisir des icônes qui correspondent à votre branding et à l’identité de votre site web. L’important est de maintenir la cohérence au sein de votre propre site web pour une expérience utilisateur fluide.

Divi : personnaliser la largeur des colonnes pour mettre en valeur vos contenus clés

Divi : personnaliser la largeur des colonnes pour mettre en valeur vos contenus clés

Créez une mise en page harmonieuse et professionnelle grâce à la personnalisation de la largeur des colonnes sur Divi

Personnaliser la largeur des colonnes sur Divi est important pour plusieurs raisons. Tout d’abord, cela permet de s’assurer que le contenu s’affiche correctement sur tous les appareils et toutes les tailles d’écran, ce qui est essentiel pour offrir une expérience utilisateur cohérente.

De plus, la personnalisation de la largeur des colonnes permet de mettre en évidence certains éléments de contenu importants et de les rendre plus visibles pour les visiteurs. Par exemple, vous pouvez choisir de rendre une colonne plus large pour y afficher un appel à l’action ou un formulaire de contact, afin qu’il soit plus facilement repérable par les visiteurs.

Enfin, la personnalisation de la largeur des colonnes peut également contribuer à l’esthétique globale de votre site Web en créant un meilleur équilibre visuel entre les différentes sections et éléments de contenu. En ajustant la largeur des colonnes pour qu’elles soient en proportion avec les autres éléments du site, vous pouvez créer une mise en page harmonieuse et professionnelle qui attirera les visiteurs et renforcera votre image de marque.

Comment personnaliser la largeur des colonnes en vidéo ✅

ID CSS :

« ligne-personnalise »

CODE CSS :

@media all and (min-width:981px) {

#ligne-personnalise .et_pb_column:nth-child(1) {
width: 70%!important;
}
#ligne-personnalise .et_pb_column:nth-child(2) {
width: 20%!important;
}
#ligne-personnalise .et_pb_column:nth-child(3) {
width: 10%!important;
}
}

@media all and (max-width:980px) {

#ligne-personnalise .et_pb_column {
width: 100%!important;
}
}
Améliorez l’expérience utilisateur de votre site mobile avec un menu horizontal !

Améliorez l’expérience utilisateur de votre site mobile avec un menu horizontal !

Pourquoi un menu horizontal est-il meilleur qu’un icône hamburger sur mobile ?

Femme interrogative devant son smartphone

Lorsque vous naviguez sur un site web depuis votre téléphone portable, il est fréquent de trouver un petit icône représentant un hamburger dans le coin supérieur gauche de votre écran. Cet icône, lorsqu’il est cliqué, fait apparaître le menu de navigation du site.

Bien que cette méthode soit courante, elle peut être moins efficace qu’un menu horizontal pour les utilisateurs de téléphones portables. En effet, un menu horizontal est plus facile à utiliser car il permet aux utilisateurs de voir instantanément toutes les options de navigation disponibles. Avec un menu horizontal, les utilisateurs peuvent rapidement trouver ce qu’ils cherchent sans avoir à cliquer sur plusieurs options dans un menu déroulant.

De plus, l’utilisation d’un menu horizontal sur mobile est également bénéfique pour le référencement de votre site web. Les moteurs de recherche considèrent les menus de navigation comme faisant partie du contenu principal de votre site. Par conséquent, avoir un menu horizontal peut aider les moteurs de recherche à comprendre plus facilement le contenu de votre site et améliorer ainsi votre classement dans les résultats de recherche.

Comment créer un menu horizontal sur mobile avec divi ?

ID et Class CSS (module menu/Avancé) :

menu-scrollable

Code CSS (Divi/option du thème):

/*Menu horizontal*/

@media (max-width: 99999px) {

    #menu-scrollable .et_pb_menu__menu {

    display: block!important;

overflow-x : hidden;

    }

    #menu-scrollable nav.et-menu-nav.fullwidth-menu-nav::-webkit-scrollbar {

    width: 0!important;

    display: none;

    }

    #menu-scrollable .mobile_menu_bar {

display: none;

    }
#menu-scrollable nav {

display: flex;

    overflow-x: scroll;

}

#menu-scrollable .et_pb_menu__menu>nav>ul {

    -ms-flex-wrap: nowrap;

    flex-wrap: nowrap;

    }

#menu-scrollable .et_pb_row {

width: 100%;

padding-left: 20px!important

}

}
Créez des curseurs captivants pour votre site web avec Depicter

Créez des curseurs captivants pour votre site web avec Depicter

Découvrez les avantages uniques de Depicter : le générateur de curseurs professionnels

Vous voulez des curseurs professionnels et interactifs pour votre site web ? Découvrez Depicter, le générateur de curseurs réactifs pour améliorer votre référencement. Avec des fonctionnalités uniques comme le visual builder, la bibliothèque d’actifs gratuite et des options de flexibilité et de réactivité, vous pourrez créer des curseurs professionnels en quelques minutes. Lisez la suite pour en savoir plus!

Depicter est un outil révolutionnaire pour créer des curseurs d’images et de vidéos performants, réactifs et conviviaux pour améliorer votre référencement. Il est compatible avec tous les principaux builder (Divi, Elementor, Gutenberg…) et offre des transitions accélérées par le matériel ultra-fluides. Depicter prend également en charge la navigation tactile avec un geste de balayage pur jamais vu auparavant.

Avec Depicter, vous pouvez créer des curseurs professionnels en utilisant son générateur visuel intuitif et simple à utiliser, le visual builder. Il vous offre également une bibliothèque d’actifs gratuite, avec plus de 3,2 millions d’images, 30 000 vidéos, des vecteurs, des maquettes et des modèles prédéfinis.

Image du site web Depicter

Depicter vous offre également des fonctionnalités de flexibilité et de réactivité, permettant de créer des curseurs réactifs et adaptés aux mobiles qui ont l’air parfait sur tous les appareils. Les animations et les interactivités, comme les animations super fluides et les actions interactives aux curseurs, vous permettent de captiver l’attention de vos utilisateurs.

Le lecteur vidéo polyvalent de Depicter vous permet de lire tout type de vidéo, y compris les vidéos auto-hébergées, YouTube et Vimeo, de manière réactive dans votre curseur. Il est également entièrement personnalisable, vous permettant de modifier les commandes vidéo, la sourdine, la boucle, la lecture automatique et basculez en plein écran en quelques clics.

Capture d'écran du Dqashboard de Depicter

Enfin, Depicter possède des commandes de navigation complètes pour ajouter des flèches, des puces, une minuterie de ligne, des commandes de diaporama et des indicateurs de défilement à votre curseur en utilisant un simple glisser-déposer.

Il prend également en charge la navigation par souris et clavier, les gestes de balayage tactile et de balayage de souris super naturels. Il est également entièrement responsive pour adapter le contenu et la présentation de votre curseur à chaque appareil. Il est également possible d’importer et de démarrer plus de 130 modèles de haute qualité en un seul clic. Si vous avez des questions, notre équipe d’assistance d’experts est à votre disposition pour vous aider

Depicter est un outil révolutionnaire qui vous permet de créer des curseurs d’images et de vidéos performants, réactifs et conviviaux pour améliorer votre référencement.

Il offre des fonctionnalités uniques comme son visual builder intuitif, sa bibliothèque d’actifs gratuite, et des options de flexibilité et de réactivité pour créer des curseurs réactifs et adaptés aux mobiles. Depicter vous permet également d’ajouter des animations super fluides et des actions interactives pour captiver l’attention de vos utilisateurs. N’attendez plus, essayez Depicter dès maintenant et découvrez comment il peut booster votre création de contenu !

Et le meilleur dans tout cela, c’est que vous pouvez profiter de toutes les fonctionnalités de base gratuitement avec l’offre « FREE« . Si vous voulez accéder à encore plus de fonctionnalités avancées, jetez un coup d’œil à l’offres « PRO » pour 1 ou 3 sites web. Avec des modèles premium, des animations haut de gamme, des options de personnalisation supplémentaires, et une assistance dédiée, vous serez en mesure de créer des curseurs professionnels en un rien de temps ! 

Grille de tarif Depicter

Pour commencer sur Depicter, rien de plus simple

Voici un tutoriel étape par étape pour installer Depicter sur votre site WordPress :

  1. Téléchargez l’extension Depicter depuis le repository officiel de WordPress ou depuis le site web de Depicter.
  2. Connectez-vous à votre tableau de bord WordPress et accédez à « Extensions > Ajouter nouveau »
  3. Cliquez sur « Téléverser extension » et sélectionnez le fichier Depicter que vous avez téléchargé dans l’étape 1.
  4. Cliquez sur « Installer maintenant » et attendez que l’installation soit terminée.
  5. Une fois l’installation terminée, cliquez sur « Activer » pour activer l’extension Depicter.
  6. Accédez à « Curseur Depicter » dans le menu de gauche de votre tableau de bord WordPress pour accéder aux options de configuration.
  7. Créez un nouveau curseur en cliquant sur « Ajouter un curseur » ou modifiez les curseurs existants en cliquant sur « Modifier ».
  8. Utilisez le Visual Builder pour créer ou personnaliser votre curseur en utilisant les différents éléments disponibles tels que les images, les vidéos, les textes, les boutons, etc.
  9. Ajoutez le curseur à votre site en utilisant le shortcode généré ou en utilisant le widget « Depicter » dans l’éditeur de page/post de wordpress
  10. Configurez les autres options comme vous le souhaitez et enregistrez vos modifications.

Vous devriez désormais avoir installé et configuré Depicter sur votre site WordPress. Vous pouvez maintenant commencer à créer des curseurs attrayants et réactifs pour améliorer l’expérience utilisateur de votre site et améliorer le référencement.

Comment personnalisez le curseur de votre souris sur votre site web !

Comment personnalisez le curseur de votre souris sur votre site web !

Pourquoi personnaliser le curseur sur votre site web ?

Il y a plein de bonnes raisons de personnaliser son curseur de souris sur son site web ! Cela peut donner un look super cool et original à votre site, et le rendre plus accrocheur pour les gens qui le visitent.

De plus, cela peut rendre la navigation plus facile pour les utilisateurs en leur montrant plus clairement où ils peuvent cliquer. C’est également une bonne idée pour les personnes ayant des difficultés visuelles qui auront plus de facilité à repérer les liens.

Et enfin, cela peut renforcer votre marque en associant votre curseur à votre logo ou à votre charte graphique.

Vous pouvez voir l’effet en baladant la souris sur le menu de cette page !

❗️REGARDER LA VIDÉO POUR SAVOIR COMMENT FAIRE❗️

Durée de la vidéo : 5 minutes

🔻

CODE CSS :

/* changer l’apparence du curseur sur tous les liens du site */

a {

cursor:url(URL DE VOTRE IMAGE),auto;

}

Découvrez pourquoi et comment créer un bouton sticky sur mobile avec Divi

Découvrez pourquoi et comment créer un bouton sticky sur mobile avec Divi

Améliorer l’expérience utilisateur sur mobile : les avantages de la création d’un bouton sticky !

Avec l’augmentation de l’utilisation des appareils mobiles pour naviguer sur internet, il est de plus en plus important de s’assurer que votre site web est optimisé pour ces appareils.

L’un des éléments clés pour améliorer l’expérience utilisateur sur mobile est d’ajouter un bouton « sticky » (collant) en bas de page. Dans cet article, nous allons vous expliquer pourquoi et comment créer un bouton sticky sur mobile avec WordPress et le thème Divi.

page produit mobile Nike

Les plus grands sites tels que Nike utilise les boutons sticky

Tout d’abord, il est important de comprendre pourquoi un bouton sticky est utile pour les appareils mobiles. Les téléphones et les tablettes ont des écrans plus petits que les ordinateurs de bureau, il est donc plus difficile pour les utilisateurs de naviguer sur un site web. Un bouton sticky en bas de page permet aux utilisateurs de naviguer facilement vers les sections les plus importantes de votre site web, sans avoir à faire défiler toute la page.

En utilisant un bouton sticky, vous pouvez également améliorer votre taux de conversion. Si vous voulez que les utilisateurs effectuent une action spécifique sur votre site web, comme s’inscrire à une newsletter ou acheter un produit, un bouton sticky est un moyen efficace de les y inciter. Il est toujours visible et accessible, ce qui augmente les chances que les utilisateurs cliquent dessus.

Businessman désignant une courbe ascendante du chiffre d'affaires

Créer un bouton sticky sur mobile le thème Divi est relativement simple. Il suffit de suivre quelques étapes faciles pour ajouter un bouton à votre site web. Suivez-notre guide pas à pas

En plus de faciliter la navigation et d’améliorer le taux de conversion, un bouton sticky peut également aider à améliorer l’expérience utilisateur globale sur votre site web. Les utilisateurs seront en mesure d’accéder facilement aux sections les plus importantes de votre site web, ce qui les incitera à rester plus longtemps sur votre site et à revenir à l’avenir.

En utilisant un bouton sticky sur mobile, vous pouvez également améliorer votre référencement naturel. Si les utilisateurs passent plus de temps sur votre site web, cela signifie que Google et les autres moteurs de recherche considèreront votre site web comme pertinent et utile pour les utilisateurs, ce qui peut améliorer votre classement dans les résultats de recherche.

En résumé, ajouter un bouton sticky en bas de page sur mobile avec WordPress et le thème Divi est un excellent moyen d’améliorer l’expérience utilisateur sur votre site web. Il facilite la navigation, augmente le taux de conversion et peut même améliorer votre référencement naturel.

Il est facile à mettre en place, il vous suffit de suivre quelques étapes simples pour ajouter un bouton à votre site web. N’hésitez pas à expérimenter avec les options de personnalisation de votre thème Divi pour créer un bouton sticky qui convient à vos besoins spécifiques