Archives Des Astuces Divi - Page 3 à 4 - Création De Site Internet Guadeloupe

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

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

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

5 tips & astuces sur Divi (Débutant) – Concevez vos sites plus vite !

par Olivier Dufour | Déc 15, 2022 | Astuces Divi

5 tips & astuces sur Divi builder

Vous cherchez des trucs et astuces sur le populaire plugin Divi Builder ?

Que vous soyez un utilisateur WordPress débutant ou expérimenté, Divi Builder peut vous aider à concevoir des sites Web magnifiques et attrayants.

Dans cet article de blog, nous couvrirons cinq tips et astuces essentielles pour vous aider à tirer le meilleur parti de votre expérience Divi Builder. Grâce à ces conseils, vous pourrez créer et personnaliser rapidement et facilement des sites époustouflants en un rien de temps.

Nous aborderons les sujets ci-dessous, et je vous montrerais comment réaliser ces tips et astuces, tout ça sans codage HTML ou CSS.

– Comment souligner un texte d’une couleur différente ?

– Comment changer la couleur d’un mot dans un texte ?

– Comment mettre une section en global comme le Header et le Footer ?

– Comment étendre le style d’une section, d’une rangée ou d’un module ?

– Comment rendre invisible une section sur différents écrans ?

Que vous soyez débutant ou professionnel, ces trucs et astuces seront inestimables dans votre cheminement pour créer et personnaliser facilement de beaux sites Web.

Les tips & astuces en vidéo

Les tips & astuces en image

Comment souligner un texte d’une couleur différente ?

Cliquez sur la roue crantée du module texte en gris

Allez dans le deuxième onglet « Style« , puis clickez sur le « U souligné« . Ce qui fera apparaître une nouvelle ligne avec un choix de couleur.

Vous n’avez plus qu’à choisir la couleur du soulignage.

Comment changer la couleur d’un mot dans un texte ?

Dans les paramètres du module texte, allez sur le deuxième onglet « Style » puis changez la couleur de votre texte à la couleur souhaitée (bleu dans l’exemple)

Retournez sur le premier onglet « Contenu » et sélectionnez la partie du texte que vous souhaitez mettre à la couleur initiale (en noir dans l’exemple).

Allez jusqu’au « A souligné » et choisissez la couleur noire.

Comment mettre une section en global comme le Header et le Footer ?

Ce tuto va vous permettre quand vous utilisez un élément global sur une page A, B et C et que vous le modifiez sur la page A, alors, les pages B et C qui ont cet élément seront également modifiées.

Cela signifie que si vous créez une section globale que vous utilisez sur plusieurs pages, vous pourrez modifier son apparence en un seul clic.

Pour réaliser cette option, rien de plus simple :

Clickez sur les trois petits points de votre section

Clickez sur « Sauvegarder dans la bibliothèque«

Nommez votre section, puis positionner « Sauvegarder en tant que Global«

Comment étendre le style d’une section, d’une rangée ou d’un module ?

Imaginez, après avoir personnalisé dans le moindre détail le module parfait, vous souhaitez le réaliser à nouveaux.

Allez-vous vous souvenirs de tous les changements effectués ? Pas sûr !

Il existe sur Divi builder la possibilité d’étendre le style d’une section, d’une rangée ou d’un module. Cette astuce va vous faire gagner un temps considérable pour la conception de vos sites.

Clickez sur les 3 petits points du module que vous souhaitez étendre

Descendez jusqu’à « Étendre les styles de résumé » et choisissez cette option.

Arrivé sur cette page, à vous de choisir d’étendre le style à toute la page, à une section, une rangée ou seulement le module.

Après avoir validé en cliquant sur « Étendre« , les modules auront exactement les mêmes paramètres.

Comment rendre invisible une section sur différents écrans ?

Divi builder nous offre la possibilité de masquer une section, une rangée ou même un module en fonction de la taille d’écran (ordinateur de bureau, tablette et smartphone).

Très pratique, quand vous souhaitez masquer un texte trop long sur mobile.

Clickez sur la roue crantée de la section, de la rangée ou du module que vous souhaitez masquer (le module dans l’exemple)

Allez dans le troisième onglet « avancé » et cochez les écrans sur lesquels vous souhaitez masquer le module.

Voilà pour ces tips & astuce qui j’espère vont bien vous aider dans la conception de vos sites web.

Enjoy 😎

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

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

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

<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;
}
}

Inverser les colonnes sur mobile avec du CSS sur Divi

par Olivier Dufour | Nov 12, 2022 | Astuces Divi

Inverser les colonnes sur smartphone

La solution ultime pour votre responsive.

Il existe une technique pour inverser vos colonnes sur smartphone qui consiste à rendre invisible certaine section sur bureau et visible sur smartphone.

Bonne option ? Pas si sûr !

Cette technique vous assurera bien un bon design, mais alourdira votre page et vous pénalisera auprès de Google qui n’apprécie guère les sections invisibles.

Vous trouverez ci-dessous la meilleure façon de le faire. Simple, rapide et efficace.

Le tuto en vidéo

Tutoriel écrit

Votre design su version desktop (ordinateur) va être de la façon suivante :

image-texte et sur la ligne du dessous texte-image

Cliquer sur la roue crantée de la deuxième ligne en vert

Allez dans le troisième onglet « Avancé » et dans « Classe CSS » écrivez le mot « inverse » puis sauvegardez.

Allez tout en bas de votre page et cliquer sur les 3 petits points, puis sur la roue crantée pour accéder au settings de la page.

Allez au troisième onglet « Avancé » « personnaliser CSS » et copier le code ci-dessous.

CODE CSS

@media screen and ( max-width: 980px ) {
.inverse {
display: flex;
flex-direction: column-reverse;
}
}

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

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

par Olivier Dufour | 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.

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

Text

Recto

Verso

</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.

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

Comment créer une page 404 personnalisé sur Divi ?

par Olivier Dufour | Oct 25, 2022 | Design Divi, Astuces Divi

Comment créer une page 404 personnalisée sur Divi ?

Pourquoi avez-vous besoin d’une page 404 personnalisée ?

Vous savez ce qui est encore pire qu’une page 404? Une page 404 banale et non personnalisée. C’est pourquoi il est important d’avoir une page 404 personnalisée sur votre site web.

Tout d’abord, une page 404 personnalisée peut aider à maintenir l’identité de votre marque. Si les visiteurs tombent sur une page 404 banale, ils pourraient avoir l’impression que votre site n’est pas professionnel ou que vous ne prenez pas la peine de personnaliser certaines parties de votre site.

En revanche, une page 404 personnalisée montre que vous avez pris le temps de réfléchir à cette page et que vous voulez que les visiteurs aient une expérience cohérente sur votre site, même s’ils tombent sur une page d’erreur.

De plus, une page 404 personnalisée peut être utile pour aider les utilisateurs à naviguer sur votre site.

Si vous avez une page 404 personnalisée qui inclut des liens vers d’autres pages de votre site ou vers votre page d’accueil, cela peut aider les utilisateurs à trouver ce qu’ils cherchent même s’ils tombent sur une page d’erreur. Cela peut également être utile pour vous, car cela peut aider à réduire le taux de rebond de votre site.

Enfin, une page 404 personnalisée peut être un moyen amusant de montrer votre personnalité et de montrer à vos visiteurs que vous êtes humain. Vous pouvez inclure un message d’excuses pour l’erreur et une touche d’humour pour détendre l’atmosphère. Cela peut aider à rendre votre site plus accueillant et à fidéliser les utilisateurs.

En résumé, avoir une page 404 personnalisée est important pour maintenir l’identité de votre marque, aider les utilisateurs à naviguer sur votre site et montrer votre personnalité.

Alors, la prochaine fois que vous créerez un site, n’oubliez pas de prendre le temps de créer une page 404 personnalisée pour votre site!

« Entrées précédentes

Entrées suivantes »

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 !

5 tips & astuces sur Divi (Débutant) – Concevez vos sites plus vite !

5 tips & astuces sur Divi builder

Les tips & astuces en vidéo

Les tips & astuces en image

Comment souligner un texte d’une couleur différente ?

Comment changer la couleur d’un mot dans un texte ?

Comment mettre une section en global comme le Header et le Footer ?

Comment étendre le style d’une section, d’une rangée ou d’un module ?

Comment rendre invisible une section sur différents écrans ?

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

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

Pourquoi masquer un texte trop long.

Le tuto en vidéo

Tutoriel écrit

CODE JQUÉRY

CODE CSS

CODE CSS

Inverser les colonnes sur mobile avec du CSS sur Divi

Inverser les colonnes sur smartphone

La solution ultime pour votre responsive.

Le tuto en vidéo

Tutoriel écrit

CODE CSS

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

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

Pourquoi personnaliser votre site web ?

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

Tutoriel écrit

Code HTML

Code CSS

Comment créer une page 404 personnalisé sur Divi ?

Comment créer une page 404 personnalisée sur Divi ?

Pourquoi avez-vous besoin d’une page 404 personnalisée ?

Infos légales

Services

Menu rapide

Contact