Créer un module Divi de fluide réactif

Afin de simplifier davantage le processus de mise en œuvre d’une conception cohérente de la réponse pour le module Divi, nous pouvons appliquer la pratique de conception web fluide. Contrairement aux méthodes de conception réactive plus traditionnelles, la conception web fluide ne s’arrête pas à différents points d’arrêt ou ne saute pas brusquement à différentes tailles \/ styles. Contient des unités de longueur de réponse par rapport à la largeur de la fenêtre afin que la conception puisse être ajustée (ou redimensionnée) en douceur de sorte que la conception soit cohérente sur tous les appareils. Dans ce tutoriel, nous vous montrerons comment créer un module Divi fluide. En utilisant des pratiques de conception de fluides similaires pour créer une typographie de fluide et \/ ou des boutons de fluide, nous créerons un module Divi de fluide qui s’adapte parfaitement à la fenêtre du navigateur. Comme nous le verrons, la combinaison secrète consiste à ajouter une taille de police de corps avec des unités de longueur relative (ou fluide) dans le module, puis à intégrer des unités de longueur em (par rapport à la taille de police de corps) dans l’ensemble du module de configuration au besoin.
Allons – y! Voici une brève introduction à la conception que nous allons construire dans ce tutoriel. Il s’agit d’un stylo de code qui démontre cette fonctionnalité du module fluide. Téléchargement gratuit mise en page pour obtenir les dessins de ce tutoriel, vous devez d’abord les télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier Inscrivez – vous au communiqué de presse Divi et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre de
Comme l’unit é de longueur EM est relative à la taille de la police racine, toute conception utilisant l’unité de longueur em hérite de la fluidité de la taille de la police et la Redimensionne en douceur au besoin. Corps de texte la taille de police racine personnalisée que nous avons ajoutée précédemment a été créée spécifiquement à partir du corps de texte. Ainsi, nous pouvons spécifier une valeur 1EM pour le corps du texte qui héritera de la valeur exacte de la taille du caractère racine. Nous pouvons également augmenter la hauteur des lignes du corps. Pour ce faire, mettre à jour ce qui suit:
Taille du texte du corps: 1EM hauteur de la ligne du corps: 1,8 em Texte de l’en – tête pour l’élément texte de l’en – tête de formulaire, nous pouvons utiliser l’unit é de longueur em pour lui donner une plus grande taille. Mise à jour comme suit: taille du texte de l’en – tête: 1.7emheader Line height: 1.3em Pour vous donner une idée de la taille réelle du texte du titre, il suffit de multiplier la valeur de la longueur em par la valeur du caractère racine. N’oubliez pas que la taille de police principale utilise Clamp () pour déterminer la taille minimale de police (16px), le fluide (2vw) et la taille maximale de police (24px). Par conséquent, la taille minimale du texte du titre sera 1,7 fois 16 pixels, soit près de 27,2 pixels. Les polices fluides seront 1,7 fois plus grandes et plus petites que 2vw (2% de la largeur de la fenêtre). La taille maximale de la police sera 1,7 fois plus grande que 24 pixels, soit près de 69,36 pixels.
Le troisième élément du module de conception des boutons est le bouton. Nous pouvons mettre à jour les paramètres de conception des boutons en utilisant les valeurs des unités de longueur em pour inclure la conception des fluides. Mettre à jour les paramètres de bouton suivants: taille du texte du bouton: 1,3 em largeur du bord du bouton: 0,12 em rayon du bord du bouton: 1,5 em
Contenu: Centre;
Les CSS suivants sont ensuite ajoutés à l’élément principal de l’écran du téléphone: display: Grid;
Colonne du modèle de grille: automatique;
Aligner le contenu: centré;
Ceci définit deux modules (chaque module a une largeur automatique) dans une grille à deux colonnes sur le Bureau. Ensuite, sur le téléphone, le module retourne à une colonne de grille (Largeur automatique). Les résultats vont maintenant vérifier les résultats. Une fois le module fluide terminé, vous pouvez mettre à jour le style du module en utilisant les paramètres de conception intégrés pour lui assigner des caractères, des couleurs, etc. Voici le résultat final en utilisant différentes polices, couleurs de police, couleurs de bouton et couleurs de fond. Comme nous l’avons vu dans ce tutoriel, l’intégration de la conception de fluides sur les modules Divi est un moyen pratique de s’assurer que les modules sont beaux et uniformes dans toutes les tailles de navigateur sans avoir à mettre à jour la conception à un point d’arrêt particulier. N’oubliez pas de consulter nos autres articles sur la conception des fluides, y compris notre guide de composition des fluides et de création de boutons de séparation des fluides. J’ai hâte d’entendre vos commentaires. Bonjour!