Olivier Dufour, Auteur/autrice Sur Création De Site Internet Guadeloupe

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 😎

Divi builder d’ Elegant theme pour WordPress ⭐️⭐️⭐️⭐️⭐️

par Olivier Dufour | Déc 12, 2022 | Atouts

Divi builder pour WordPress

Les utilisateurs de WordPress qui recherchent un constructeur de page intuitif et convivial pour créer des sites web étonnants rapidement et facilement peuvent trouver ce dont ils ont besoin avec Divi Builder d’Elegant theme. Divi Builder est un constructeur de site intuitif et facile à utiliser qui permet aux utilisateurs de personnaliser l’interface utilisateur et l’expérience utilisateur sur les sites qu’ils créent et de concevoir des conceptions uniques grâce à ses outils de glisser-déposer.

Présentation de Divi

Divi Builder est un constructeur de site intuitif et simple à utiliser qui permet aux utilisateurs de WordPress de créer des sites web étonnants rapidement et facilement. Avec Divi Builder, les utilisateurs peuvent personnaliser le design de l’interface utilisateur et l’expérience utilisateur sur leurs sites web, et même concevoir des conceptions uniques à l’aide des outils de glisser-déposer.

Les outils de glisser-déposer sont faciles à apprendre et à utiliser, ce qui permet aux utilisateurs d’ajuster rapidement et simplement leur site web à leurs besoins.

Pourquoi Divi est-il le bon choix pour les utilisateurs de WordPress ?

Divi Builder est un bon choix pour les utilisateurs de WordPress car elle est très intuitive et offre une variété d’options pour créer des sites web attrayants. En plus des outils de glisser-déposer, Divi Builder offre également une variété d’options de personnalisation, notamment des conceptions prêtes à l’emploi, des modèles, des polices et des couleurs personnalisés, ainsi que la possibilité d’utiliser un code CSS ou HTML personnalisé.

En outre, Divi Builder offre aux utilisateurs de nombreuses fonctionnalités supplémentaires pour leur permettre de créer des sites web étonnants facilement. Il propose des fonctionnalités telles que les sections, les modules et les widgets – ce qui permet aux utilisateurs de créer des sites web très personnalisés. De plus, Divi Builder prend en charge une variété de plugins WordPress populaires afin que les utilisateurs puissent étendre les fonctionnalités de leurs sites web.

Ux et Ui design avec Divi

Divi Builder offre aux utilisateurs une variété d’options pour personnaliser l’interface utilisateur et l’expérience utilisateur sur leurs sites web.

Les outils de glisser-déposer permettent aux utilisateurs de concevoir des conceptions uniques en déplaçant des éléments sur leur site web.

En plus du glisser-déposer, Divi Builder propose également une variété d’options pour concevoir des conceptions personnalisées à l’aide d’outils tels que des conceptions prêtes à l’emploi, des modèles, des polices et des couleurs personnalisés, ainsi que la possibilité d’utiliser un code CSS ou HTML personnalisé.

Tableau représentant les couleurs marketing avec des marques connus

Les outils de glisser-déposer sont très intuitifs et faciles à apprendre, ce qui permet aux utilisateurs de concevoir facilement leur site web selon leurs besoins.

De plus, Divi Builder prend en charge une variété de plugins WordPress populaires afin que les utilisateurs puissent étendre les fonctionnalités de leur site web.

Création de sites web avec Divi

Divi Builder est un excellent moyen pour les utilisateurs de WordPress de créer rapidement et facilement des sites web étonnants.

Avec Divi Builder, les utilisateurs peuvent créer une variété de sites web différents, notamment des sites vitrines, des sites e-commerce, des sites one page, des blogs et des sites web réactifs.

Site Coral restoration st barth décliné sur plusieurs écrans

Les outils de glisser-déposer rendent la création d’un site web avec Divi Builder très simple.

Les utilisateurs peuvent facilement déplacer les éléments sur leur site web tels que les sections, les modules et les widgets pour concevoir des conceptions personnalisées. De plus,

Divi Builder prend en charge une variété de plugins WordPress populaires afin que les utilisateurs puissent étendre les fonctionnalités de leur site web.

Conclusion

Divi Builder est une excellente solution pour les utilisateurs de WordPress qui recherchent un constructeur de page intuitif et convivial pour créer des sites web étonnants rapidement et facilement.

Divi Builder offre aux utilisateurs une variété d’options pour créer et personnaliser leur site web, notamment des conceptions prêtes à l’emploi, des modèles, des polices et des couleurs personnalisés, ainsi que la possibilité d’utiliser un code CSS ou HTML personnalisé.

De plus, Divi Builder prend en charge une variété de plugins WordPress populaires afin que les utilisateurs puissent étendre aisément les fonctionnalités de leur site web.

Avec Divi Builder, les utilisateurs peuvent créer une variété de sites web différents rapidement et facilement, y compris des sites vitrines, des sites e-commerce, des sites one page, des blogs et des sites web réactifs

Le Web Design, qu’est-ce que c’est ? Les outils !

par Olivier Dufour | Déc 9, 2022 | Atouts

Le Web Design, qu’est-ce que c’est ?

Un homme et une femme devant des ordinateurs

Le web design est l’ensemble des techniques qui sont utilisées pour concevoir un site web ou une application web. Il comprend la mise en page, la navigation, les couleurs, les images, la typographie, les animations et l’utilisation de technologies telles que HTML, CSS et JavaScript. Le web design est une discipline qui combine à la fois l’art et la technologie et qui a pour but de créer des sites web qui sont à la fois esthétiques et conviviaux.

Avec le développement d’Internet et de la technologie web, le web design est devenu plus important que jamais. Les designers web doivent non seulement comprendre les technologies liées au web design, mais aussi savoir comment créer des designs qui s’adaptent aux différentes tailles d’écran et résolutions.

Comment créer un site web ?

Créer un site web peut paraître intimidant pour ceux qui n’ont pas de connaissances en programmation ou en design web. Heureusement, il existe plusieurs outils qui peuvent vous aider à créer un site web sans avoir à écrire du code ou à apprendre le web design.

Les étapes pour créer un site web sont :

Choisir un nom de domaine
Trouver un hébergeur pour votre site
Développer le design de votre site
Développer le contenu et le code
Mettre en ligne votre site
Référencer votre site

Il existe plusieurs outils disponibles pour créer un site web sans avoir à apprendre à programmer. Les plus populaires sont WordPress, Wix, Squarespace et Webflow.

Ces plateformes vous permettent de créer des sites web sans avoir à écrire du code ou à apprendre le web design.

Quels sont les différents types de sites web ?

Les différents types de sites web incluent :

Les sites vitrine (site présentant une entreprise ou une organisation),
Les sites e-commerce (site permettant l’achat et la vente en ligne),
Les sites one page (site avec une seule page)
Les blogs (site où les articles sont publiés régulièrement).

Chaque type de site web a ses avantages et inconvénients.

Par exemple :

le site vitrine permet une plus grande visibilité, mais ne permet pas l’achat ou la vente en ligne ;

Le site e-commerce offre une plus grande flexibilité dans le commerce en ligne, mais est plus complexe à mettre en place ;

Le site one page est simple et rapide à mettre en place, mais ne peut pas contenir beaucoup de contenu ;

Un blog est facile à mettre en place et permet d’ajouter du contenu régulièrement, mais nécessite des compétences techniques pour le gérer.

Les technologies associées au web design !

Pour créer un site web, vous avez besoin de connaissances en HTML, CSS et JavaScript. HTML est le langage de base des sites web ; CSS permet de modifier l’apparence des sites ; JavaScript permet d’ajouter des fonctionnalités interactives.

web design, femme devant 2 écrans d'ordinateur en train de travail - Dr Page Guadeloupe

Le Divi Builder est un constructeur de site Web très populaire qui permet aux utilisateurs de créer des sites Web sans avoir à écrire du code.

WordPress est un système de gestion de contenu très populaire qui permet aux utilisateurs de créer des sites Web sans avoir à apprendre à programmer.

Créer un design web responsive est une autre technique importante du web design. Un design responsive est un design qui s’adapte automatiquement à différents écrans et résolutions.

Un bon design responsive nécessite une bonne planification des éléments sur toutes les tailles possibles d’écrans.

Conclusion

En résumé, le web design est une discipline qui combine art et technologie pour créer des sites web esthétiques et conviviaux. Il existe différents types de sites web avec des avantages et inconvénients différents.

Pour créer un design web responsive, il faut une bonne planification des éléments sur toutes les tailles possibles d’écrans.

Le web design peut être utilisé pour créer des sites web esthétiques et conviviaux qui s’adaptent aux différents écrans et résolutions grâce aux technologies liées au web design telles que HTML, CSS et JavaScript. Les technologies liées au web design continuent d’évoluer rapidement, offrant aux concepteurs plus d’options pour créer des designs uniques.

De plus en plus d’entreprises recherchent des concepteurs capables de créer des designs riches en fonctionnalités avec une expérience utilisateur optimale sur tous les appareils.

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«

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

« Entrées précédentes

Entrées suivantes »

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 ?

Divi builder d’ Elegant theme pour WordPress ⭐️⭐️⭐️⭐️⭐️

Divi builder pour WordPress

Présentation de Divi

Pourquoi Divi est-il le bon choix pour les utilisateurs de WordPress ?

Ux et Ui design avec Divi

Création de sites web avec Divi

Conclusion

Le Web Design, qu’est-ce que c’est ? Les outils !

Le Web Design, qu’est-ce que c’est ?

Comment créer un site web ?

Quels sont les différents types de sites web ?

Les technologies associées au web design !

Conclusion

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

Infos légales

Services

Menu rapide

Contact