Comment créer un module Divi fluide réactif

Publié: 2021-06-30

Pour simplifier davantage le processus de mise en œuvre d'un responsive design cohérent pour un module Divi, nous pouvons appliquer les pratiques de la conception Web fluide. Contrairement aux méthodes plus traditionnelles de conception réactive, la conception Web fluide ne se brise pas ou ne passe pas brusquement à une taille/un style différent à différents points d'arrêt. Il intègre des unités de longueur réactives par rapport à la largeur de la fenêtre afin que la conception s'ajuste (ou s'adapte) de manière fluide, en gardant la conception cohérente sur tous les appareils.

Dans ce tutoriel, nous allons vous montrer comment créer un module Divi fluide. En utilisant des pratiques de conception fluide similaires pour créer une typographie fluide et/ou des boutons fluides, nous allons créer un module Divi fluide qui s'adaptera de manière transparente à la fenêtre du navigateur. Comme nous le découvrirons, la combinaison secrète consiste à ajouter une taille de police de corps racine avec une unité de longueur relative (ou fluide)) au module, puis à incorporer l'unité de longueur em (qui est relative à la taille de police du corps racine) dans l'ensemble du module paramètres en cas de besoin.

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Et voici un codepen qui démontre cette fonctionnalité de module fluide.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

boîte de notification divi

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

étendre les onglets d'angle

Pour commencer, vous devrez effectuer les opérations suivantes :

Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Comment créer un module Divi fluide réactif

La ligne

Pour commencer, créez une nouvelle ligne à une colonne dans la section régulière par défaut.
module divi fluide réactif

Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Utiliser une largeur de gouttière personnalisée : OUI
Largeur de gouttière : 1
Largeur: automatique
Largeur maximale : 100 %
Rembourrage: haut 5vw, bas 5vw

module divi fluide réactif

Concevoir un module d'appel à l'action fluide

Bien que les mêmes techniques de conception fluide puissent être ajoutées à à peu près n'importe quel module Divi, nous allons passer à l'un des modules d'appel à l'action de Divi pour ce tutoriel.

Ajoutez un nouveau module d'appel à l'action dans la colonne/ligne.

module divi fluide réactif

Paramètres de contenu

Sous les paramètres de contenu, ajoutez une URL de lien de bouton fictif et mettez à jour la couleur d'arrière-plan comme suit :

URL du lien du bouton : #
Couleur de fond : #5e6472

module divi fluide réactif

Ajout d'une taille de police de racine fluide au module

Lors de la conception d'un module fluide, nous devons ajouter une taille de police racine fluide au module. Une fois ajoutée au module, cette taille de police racine sera incorporée dynamiquement dans le reste de nos paramètres de conception de module à l'aide de l'unité de longueur em.

Pour ajouter la taille de police de la racine fluide au module, accédez à l'onglet avancé et ajoutez le CSS personnalisé suivant à l'élément principal :

font-size: clamp(16px, 2vw, 24px);

module divi fluide réactif

Pour cette taille de police, nous utilisons la fonction CSS Clamp() afin de définir une taille de police minimale, une taille de police fluide (si nécessaire) et une taille de police maximale.

module divi fluide réactif

Remplacement de tous les éléments avec un espacement par défaut avec des valeurs d'unité de longueur em

Bien que cela ne soit pas absolument nécessaire, pour obtenir une véritable conception fluide pour le module, nous devons remplacer tout espacement par défaut (en arrière-plan) que le module utilise actuellement avec une valeur d'unité de longueur em pour cette propriété. Vous pouvez les identifier en inspectant votre élément à l'aide d'outils de développement de navigateurs. Dans ce cas, le module d'appel à l'action a un remplissage inférieur à la fois sur la description de la promotion et sur l'élément de titre de la promotion. Étant donné que la propriété de remplissage inférieur utilise une unité de longueur en pixel (px), nous devons remplacer chacune par une unité de longueur em qui incorporera la taille de police du corps racine que nous venons d'ajouter à l'élément principal.

module divi fluide réactif

Mise à jour de la conception avec des unités de longueur em

Maintenant que notre taille de police racine fluide pour le module est en place, tout ce que nous avons à faire est de mettre à jour la conception du module en utilisant des unités de longueur em. Étant donné que l'unité de longueur em est relative à la taille de la police racine, toute conception utilisant l'unité de longueur em héritera de la fluidité de la taille de la police et évoluera de manière fluide avec la taille de la police si nécessaire.

Le corps du texte

La taille de police racine personnalisée que nous avons ajoutée précédemment est créée à dessein en gardant le corps du texte à l'esprit. Par conséquent, nous pouvons attribuer au corps de texte une valeur de 1em qui hérite de la valeur exacte de la taille de la police racine. Nous pouvons également ajouter une hauteur de ligne de corps. Pour ce faire, mettez à jour les éléments suivants :

Taille du corps du texte : 1em
Hauteur de la ligne du corps : 1,8 em

module divi fluide réactif

Texte du titre

Pour l'élément de texte de titre du module, nous pouvons lui donner une taille plus grande en utilisant l'unité de longueur em. Mettez à jour les éléments suivants :

Taille du texte du titre : 1,7 em
Hauteur de la ligne de titre : 1,3 em

module divi fluide réactif
Pour vous donner une idée de la taille réelle du texte du titre, nous multiplions simplement la valeur de la longueur em par la valeur de la police racine. N'oubliez pas que la taille de la police racine utilise clamp() pour établir une taille de police min (16px), fluide (2vw) et max (24px). Par conséquent, la taille minimale du texte du titre sera de 1,7 fois 16px, ce qui est proche de 27,2px. La taille de la police fluide sera de 1,7 fois 2vw (2% de la largeur de la fenêtre). Et la taille de police maximale sera de 1,7 fois 24px, ce qui est proche de 69,36px.

Conception de bouton

Le troisième élément du module est le bouton. Nous pouvons mettre à jour les paramètres de conception du bouton en utilisant les valeurs d'unité de longueur em pour incorporer également la conception fluide.
Mettez à jour les paramètres des boutons suivants :

Taille du texte du bouton : 1.3em
Largeur de la bordure du bouton : 0,12 em
Rayon de la bordure du bouton : 1,5 em
Espacement des lettres des boutons : 0,1 em
Rembourrage des boutons : 0,1 em en haut, 0,1 em en bas, 2 em à gauche, 2 em à droite

module divi fluide réactif

Taille et espacement

Pour nous assurer que le module a une taille de fluide et un espacement de fluide, nous devons également utiliser des unités de longueur em pour ces valeurs.

Mettez à jour les paramètres de taille et d'espacement suivants :

Largeur maximale : 40 em
Hauteur minimale : 0vw
Marge : 0,5 em en haut, 0,5 em en bas, auto à gauche, auto à droite
Rembourrage : 2.5em haut, 2.5em bas, 2em gauche, 2em droite

module divi fluide réactif

Le résultat

Voyons maintenant le résultat de notre module fluide lors de l'ajustement de la largeur du navigateur sur une page en direct.

Ajout de plusieurs modules de fluide d'affilée avec la grille CSS

Afin d'ajouter plusieurs modules de fluide adjacents à une rangée, nous devons nous assurer que la conception de notre module de fluide n'est pas limitée ou arrêtée par des largeurs de conteneur parent. En d'autres termes, nous voulons que le conteneur parent de nos modules (la colonne) soit défini sur auto afin qu'il s'adapte à la taille du module. Nous pouvons le faire en utilisant CSS Grid au niveau de la colonne pour définir chacun des modules dans une grille avec chaque colonne ayant une largeur automatique.

Ajuster la taille et l'espacement du module

Avant de créer la grille CSS pour les modules, nous devons ajuster la largeur maximale et la marge de notre module à une taille plus adaptée à une disposition à deux colonnes avec deux modules.

Ouvrez les paramètres du module et mettez à jour les éléments suivants :

Alignement du texte : à gauche
Largeur maximale : 24 em
Marge : 0,5 em à gauche, 0,5 em à droite

module divi fluide réactif

Dupliquer le module

Dupliquez maintenant le module pour en créer un autre dans la même colonne.

module divi fluide réactif

Ajouter une grille CSS à la colonne

Nous pouvons maintenant ajouter le CSS personnalisé à la colonne pour créer la grille CSS pour les modules.

Sous l'onglet avancé, ajoutez le CSS suivant à l'élément principal sur la vue de bureau :

display:grid;
grid-template-columns: auto auto;
justify-content:center;

Ajoutez ensuite le CSS suivant à l'élément principal sur la vue du téléphone :

display:grid;
grid-template-columns: auto;
justify-content:center;

Cela définira les deux modules dans une grille à deux colonnes (chacun ayant une largeur automatique) sur le bureau. Ensuite, au téléphone, les modules reviendront à une grille à une colonne (largeur automatique).

module divi fluide réactif

Le résultat

Vérifiez maintenant le résultat.

Résultats finaux

Une fois le ou les modules fluides terminés, vous pouvez mettre à jour les styles de module à l'aide des paramètres de conception intégrés pour lui donner des polices, des couleurs, etc.

Voici un aperçu du résultat final en utilisant une police, une couleur de police, une couleur de bouton et une couleur d'arrière-plan différentes.

Dernières pensées

Comme nous l'avons vu dans ce didacticiel, incorporer une conception fluide sur un module Divi peut être un moyen pratique de garantir que le module est beau et cohérent sur toutes les tailles de navigateur, sans avoir à mettre à jour la conception à des points d'arrêt spécifiques.

N'oubliez pas de consulter nos autres articles sur le design fluide, notamment notre guide pour créer une typographie fluide et des boutons Divi fluides.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!