Logo de Dr PAGE, représentant un globe bleu entouré d'anneaux avec l'inscription 'Dr PAGE', symbolisant l'expertise en automatisation IA et création de site web en Guadeloupe
Consultation gratuite
Comment personnalisez le curseur de votre souris sur votre site web !

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

par | Jan 19, 2023 | Astuces Divi, Design Divi

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

par | Jan 16, 2023 | Astuces Divi, Design 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

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

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

par | Nov 16, 2022 | Astuces Divi, Design Divi

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

Gif texte avec un bouton "Lire plus"

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« 

paramètre Module texte paramètre

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;

Paramètre module bouton divi builder

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

<script>
jQuery(document).ready(function ($) {
  $("a.bouton-ouverture").removeAttr("href"); // On supprime le lien de notre bouton 
	
  $('.bouton-ouverture').on('click', function(){ // lorsqu'on clique sur le bouton
  $('.texte-cache').toggleClass('ouvert'); // On ajoute ou retire la classe CSS "ouvert"
  
  if ($('.texte-cache').hasClass('ouvert')) { // Si le module texte a la classe "ouvert"
    $('.bouton-ouverture').html('LIRE MOINS'); // On affiche LIRE MOINS sur le bouton
  } else {
    $('.bouton-ouverture').html('LIRE PLUS'); // Sinon on affiche LIRE PLUS
  }
	});
});
</script>

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« 

Tableau représentant les couleurs marketing avec des marques connus

CODE CSS

/*CSS pour afficher/masquer un texte via un bouton*/

/*Style du module TEXTE*/
.texte-cache { 
  position: relative;
  max-height: 100px; /*Hauteur du texte visible avant le clic*/
  overflow: hidden; /*On cache tout ce qui dépasse des 100px*/
  transition: max-height 1s ease; /* Transition CSS entre l'ouverture et la fermeture*/
}
  
/*Style du module TEXTE lorsqu'il est ouvert*/
.texte-cache.ouvert {
    max-height: 100vh; /* On lui définit une hauteur max de tout l'écran si nécessaire pour qu'il affiche tout son contenu*/
  }

/*On stylise l'effet de flou lorsque le module TEXTE est fermé, donc il n'a pas la classe "ouvert"*/
.texte-cache:not(.ouvert)::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /*Couleur de notre effet*/
}

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

.texte-cache1, .texte-cache2 {
  max-height: 100px; /* Hauteur du texte visible par défaut */
  overflow: hidden;
  transition: max-height 1s ease; /* Temps de transition entre l'état ouvert et fermé */
}

.texte-cache1.ouvert, .texte-cache2.ouvert {
  max-height: 3000px; /* Hauteur du texte déroulé après le clic sur le bouton */
}

.bouton-ouverture1, .bouton-ouverture2 {
  /* Ici, vous pouvez ajouter du CSS pour styliser vos boutons */
}

.colonne {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

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

/* Masquer le bouton "Lire la suite" sur les grandes tailles d'écran */
@media (min-width: 768px) {
.read-more-wrap {
display: none;
}
}

/* Afficher le bouton "Lire la suite" sur les petites tailles d'écran */
@media (max-width: 767px) {
.read-more-wrap {
display: block;
}
}
Comment créer un effet flip box pour un bouton (CTA) sur Divi ?

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

par | Nov 8, 2022 | Astuces Divi, Design Divi

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.

Bouton CTA flip box divi

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.

Tableau représentant les couleurs marketing avec des marques connus

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

Un bouton Call To Action avec écrit "shop now"
6 règles d’or pour avoir un site web professionnel !

6 règles d’or pour avoir un site web professionnel !

par | Nov 3, 2022 | Astuces Divi, Design Divi

6 règles d’or pour avoir un site web professionnel !

Pourquoi avoir un site web professionnel ?

Tous les jours, des milliers de sites Web sont créés et lancés sur la toile. Mais combien sont-ils à utiliser un site professionnel pour promouvoir leurs produits et services ? 

Un site professionnel a pour but de vous aider à maximiser votre revenu, votre popularité et votre visibilité sur l’internet. Si vous n’avez pas encore de site Web, il est temps de passer à l’action et de commencer à préparer votre site Web. Si vous avez déjà un site Web, c’est le moment de le revoir et de le mettre à jour afin de vous offrir un avantage concurrentiel sur le marché.

Bureau avec ordinateur avec lumière violette derrière

1- Les couleurs

Choisir les bonnes couleurs pour votre site Web. Il y a quelques années, vous avez peut-être vu un site Web avec des couleurs vives et attrayantes. Et dans tous les cas, vous avez pensé que ce site était intéressant et amusant à utiliser. Mais il y a plusieurs facteurs qui font qu’un site Web attrayant est attrayant. 

Il y a d’abord le design, qui doit être intéressant et attirer l’œil en premier.

Les couleurs doivent être en corrélation avec votre niche et votre branding.

Tableau représentant les couleurs marketing avec des marques connus

2- Les polices de titre et de texte 

C’est toujours amusant et intéressant de connaître les préférences typographiques des utilisateurs. En effet, ils sont tellement dépendants des polices qu’ils ne se rendent pas compte de leur importance sur leur expérience. 

Il y a quelques années, j’ai remarqué qu’il y avait une tendance pour toutes les polices à devenir plus franches et plus épaisses. Les gens aiment les polices avec des contours très marqués et qui sont aussi très contrastés. 

3- Les photos et les images

Il est bien que vous vouliez utiliser des photos humoristiques et des images de haute qualité pour votre site Web. Pourtant, sur Internet, vous devez être très prudent quand vous choisissez les images que vous allez utiliser. 

Ne vous ruinez pas sur les images que vous allez utiliser. Vous pouvez trouver des images libres de droits et licites sur des sites comme canva ou Pexels.

4- Les boutons, CTA (Call To Action)

Les CTA sont devenus incontournables dans le marketing digital. Ils sont utilisés par les équipes marketing pour inciter leurs visiteurs à prendre une action spécifique. 

Ils ont une importance capital pour faire passer votre visiteur en acheteur, adhérent ou client. Il est donc nécessaire de les faire ressortir de votre site web.

Un bouton Call To Action avec écrit "shop now"

5- Header et Footer

Les informations dans le header et le footer de votre site web sont nécessaires et utiles. En tant que tel, l’information doit être facile à trouver et claire. Pour cela, utilisez des termes concis, des couleurs vives et des mots-clés pertinents dans votre header et votre footer. 

Miniature header et footer de Dr Page

6 – Le responsive

Dans le monde d’aujourd’hui, il est important de s’assurer que votre site Web peut être consulté sur tout type d’appareil.

Vous ne savez jamais quel type d’écran vos clients potentiels utiliseront pour consulter votre site. En rendant votre site responsive, vous pouvez être sûr que tout le monde aura une bonne expérience, quel que soit le type d’appareil qu’il utilise.

En résumé, avoir un site web professionnel est essentiel pour maximiser votre revenu, votre popularité et votre visibilité sur le web. Un site professionnel vous permet de montrer à vos clients et prospects que vous êtes une entreprise sérieuse et digne de confiance, et peut vous aider à fidéliser les visiteurs et à les convertir en clients. Alors, n’attendez plus et investissez dans un site web professionnel !

Pousser encore plus la personnalisation de votre site !

Pousser encore plus la personnalisation de votre site !

par | Oct 26, 2022 | Atouts, Design Divi

Poussez encore plus la personnalisation de votre site !

Logo Simply Divi Shortcode

SIMPLY DIVI SHORTCODE

Pourquoi personnalisez votre site web ?

 

Saviez-vous qu’il existe environ 2 milliards de sites Web dans le monde ? On s’attend à ce que le nombre augmente à un rythme rapide à partir d’ici.

Bien que cela soit monumental à considérer, cela signifie également que la concurrence est plus serrée pour les entreprises en ligne.

Plus votre site Web est personnalisé, plus vous semblez professionnel à votre public. Les créateurs de sites Web ne vous donneront pas l’individualité dont vous avez besoin.

Chaque entreprise devrait avoir quelque chose qui la distingue de la concurrence, et le site Web de l’entreprise est le meilleur endroit pour commencer. En personnalisant votre site Web pour répondre aux besoins des clients, vous vous démarquerez de la concurrence.

Qu’est-ce que vous trouverez dans la vidéo ?

Dans cette vidéo, je vous présente un plugin « Simple Divi Shortcode » qui va vous permettre de pousser encore plus la personnalisation de votre site web. Il va vous permettre d’insérer n’importe quel module de Divi dans un autre à l’aide d’un Shortcode généré automatiquement par le plugin. Vous pouvez par exemple insérer un module carte, blur « résumé », image dans un autre module. Incroyable !!! Je vous montre dans cette vidéo 2 petits exemples de ce que va faire pour vous ce plugin. 

Enjoy😎