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

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):

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;

}

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.

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.

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

Créer un bouton « Lire plus » ou « Lire la suite sur Divi

Pourquoi masquer un texte trop long.

Sur Internet, tous les mots comptent. Rien ne doit être laissé par hasard. De fait, chaque page Web doit avoir une certaine quantité de mots pour être référencée sur les moteurs de recherche de façon naturelle. C’est une base importante du référencement naturel, soit le SEO.

Le piège est d’écrire un texte trop court qui ne sera pas repéré par les moteurs de recherches, ou d’écrire un contenu trop long, qui n’incitera pas à la lecture et qui alourdira le visuel de votre site Web.

L’idéal est de conserver un texte long et d’en masquer une partie et le dévoiler dans son entier avec un bouton « Lire plus » ou « Lire la suite ».

Le tuto en vidéo

Tutoriel écrit

Nous allons commencer par ajouter un « module Texte » dans le Visual Builder de Divi pour y insérer notre contenu.

Une fois le texte écrit, nous allons nous rendre sur le troisième onglet « avancé » – « ID et Classe CSS » et écrire « texte-cache » dans « Classe CSS« 

On ajoute ensuite un « Module Bouton« 

Nous allons ensuite styliser notre « Module Bouton« 

Dans l’onglet « Style« , nous allons réduire le texte, mettre un fond transparent et retirer les bordures.

Puis, dans le troisième onglet « Avancé« -« ID et classe CSS« -« Class CSS » écrire « bouton-ouverture« .

Toujours dans le même onglet, juste en dessous dans « personnaliser CSS » on va écrire la ligne de code suivante : « cursor: pointer;« 

cursor:pointer;

On appelle ensuite un module « texte » pour y placer notre code jQuéry. Une fois le module texte ouvert, Aller sur l’onglet « Texte » à côté de l’onglet « Illustration« 

C’est à l’intérieur de ce code que vous pourrez changer le texte du bouton.

Par défaut, il est écrit « Lire plus » et « Lire moins » à vous de choisir le texte qui vous convient

CODE JQUÉRY

Vous pouvez maintenant enregistrer votre page et la quitter.

Ensuite, nous allons nous rendre dans notre Dashboard – Divi – Option du thème et ajouter un code CSS dans « personnaliser CSS« 

CODE CSS

Sauvegardez tous les paramètres et le tour est joué. 

Si vous avez 2 textes sur la même page et souhaitez avoir une ouverture différée :

Ajouter au module texte 1 dans ID et classe CSS la classe CSS « texte-cache1″

Ajouter au module bouton du texte 1 toujours dans ID et classe CSS la classe CSS « bouton-ouverture1 »

Puis la même chose pour le texte 2

Classe CSS :

Module texte « texte-cache2″

Module bouton « bouton-ouverture2 »

Ensuite, nous allons nous rendre dans notre Dashboard – Divi – Option du thème et ajouter un code CSS dans « personnaliser CSS« 

CODE CSS

Si vous souhaitez que le code ne s’opère que sur la version mobile, ajouter le code ci-dessous dans « personnaliser CSS

Comment créer un effet flip box pour un bouton (CTA)

Pourquoi personnaliser votre site web ?

Vous vous demandez pourquoi personnaliser votre site web est si important ? Et bien, laissez-moi vous le dire : C’est un peu comme avoir une tenue vestimentaire unique et personnalisée. Si votre site n’est pas personnalisé, il risque de ressembler à une tenue générique, sans originalité et sans style. Et qui voudrait porter une tenue comme ça ?

Mais si votre site est personnalisé, c’est tout le contraire ! Vous serez comme une tenue unique, qui reflète votre personnalité et votre identité. Vous serez remarqué par tous pour votre créativité et votre originalité, et vous serez fière de votre site, qui vous ressemble.

Mais pourquoi est-ce si important de personnaliser votre site web ?

Tout simplement parce que cela vous permet de vous démarquer de la concurrence et de montrer votre personnalité. Vos visiteurs apprécieront de découvrir un site qui reflète votre entreprise et qui sort de l’ordinaire. Et vous pourrez mieux vous connecter avec eux, en leur offrant une expérience unique et personnalisée.

En résumé, personnaliser votre site web est essentiel pour vous démarquer de la concurrence et offrir une expérience utilisateur unique et personnalisée à vos visiteurs. Alors, n’attendez plus et laissez votre créativité s’exprimer ! Vous serez la personne la plus stylée de la soirée, je vous le garantis.

Tutoriel écrit

Ouvrir un module texte, aller sur le deuxième onglet « texte » et copier le code HTML

Code HTML

<a href=« https://monsite.com/ » class= »btn2″>

<span class= »text »>Text</span>

<span class= »flip-front »>Recto</span>

<span class= »flip-back »>Verso</span>

</a>

Remplacer https://monsite.com par l’URL de redirection souhaité.

Remplacer Recto par le mot de votre choix

Remplacer Verso par un autre mot de votre choix

Sur votre Dashboard, cliquer sur « Divi », puis « Option de thème »

Copier le code CSS dans « personnaliser CSS » en bas de page

Code CSS

.btn2 a {

  text-decoration: none;

  display: inline-block;

}

.btn2 {

  height: 50px;

  line-height: 50px;

  text-align: center;

  position: relative;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  -webkit-transition: all .3s ease-out;

  -o-transition: all .3s ease-out;

  transition: all .3s ease-out;

}

.text {

  padding: 0 50px;

  visibility: hidden;

}

.flip-front, 

.flip-back {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    -webkit-transform-style: flat;

    transform-style: flat;

    -webkit-transition: -webkit-transform .3s ease-out;

    -o-transition: -o-transform .3s ease-out;

    transition: transform .3s ease-out;

}

.flip-front {

    color: #000;

    border: 2px solid #000;

    background-color: transparent;

    -webkit-transform: rotateX(0deg) translateZ(25px);

    -ms-transform: rotateX(0deg) translateZ(25px);

    -o-transform: rotateX(0deg) translateZ(25px);

    transform: rotateX(0deg) translateZ(25px);

}

.flip-back {

  color: #FFF;

  background-color: #000;

  border: 2px solid #000;

  -webkit-transform: rotateX(90deg) translateZ(25px);

  -ms-transform: rotateX(90deg) translateZ(25px);

  -o-transform: rotateX(90deg) translateZ(25px);

  transform: rotateX(90deg) translateZ(25px);

}

.btn2:hover .flip-front {

    -webkit-transform: rotateX(-90deg) translateZ(25px);

    -ms-transform: rotateX(-90deg) translateZ(25px);

    -o-transform: rotateX(-90deg) translateZ(25px);

    transform: rotateX(-90deg) translateZ(25px);

}

.btn2:hover .flip-back {

    -webkit-transform: rotateX(0deg) translateZ(25px);

    -ms-transform: rotateX(0deg) translateZ(25px);

    -o-transform: rotateX(0deg) translateZ(25px);

    transform: rotateX(0deg) translateZ(25px);

}

Vous pouvez changer toutes les couleurs : texte, bordure et fond. Il suffit d’aller dans le code CSS et remplacer les code hexadécimal par les vôtres.

Ci-dessous l’effet que vous aurez en suivant ce tuto.