La section héros du site est l’un des meilleurs candidats pour la conception de fluides. Contrairement à la conception réactive traditionnelle qui s’adapte à différents points d’arrêt, la conception Fluid s’adapte parfaitement à la fenêtre du navigateur et est cohérente sur n’importe quel appareil. Après tout, la section héros est la première chose que les utilisateurs voient sur le site. Vous avez peut – être vu la conception des fluides dans des exercices antérieurs de mise en page des fluides, de modules de fluides et \ ou de boutons de fluides. Dans ce tutoriel, nous vous montrerons comment créer une partie entière de Fluid Hero dans Divi. La clé pour créer cette conception de fluide est d’ajouter la taille de police racine du fluide pour chaque module utilisé, puis d’intégrer les unités de longueur em (liées à la taille de police du corps racine) dans tous les paramètres du module.
Allons – y! Voici une brève introduction à la conception que nous allons construire dans ce tutoriel. Remarquez comment la conception des fluides s’adapte uniformément à la largeur de la fenêtre du navigateur. 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 à Divi Newsletter 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 d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour vous connecter
Redessiner le bord du fluide et mettre à jour ce qui suit: largeur du bord: 1 em couleur du bord: # FFFFFF couleur du bord inférieur: transparent couleur du bord gauche: transparent
Créer une bordure d’accent pour créer une bordure d’accent, nous pouvons copier un formulaire de texte existant. Supprimez le contenu existant du corps et mettez à jour les paramètres de conception comme suit: largeur maximale: 6,5emheight: 3,25cm Edge width: 0,5emedge color: # ff2000 Rappelez – vous que ce module de copie contient la même taille de police que la racine du fluide. Ensuite, nous pouvons utiliser l’unit é de longueur em pour ajuster la taille et la largeur des bords. Cela permettra de s’assurer que la conception correspond à la conception du formulaire de texte d’en – tête.
Pour positionner un bord d’accent, ajoutez une position absolue décalée par la largeur du bord dans le formulaire de texte de titre (1EM). Sur l’onglet avancé, mettre à jour les options de position suivantes: position: position absolue: décalage vertical supérieur droit: décalage horizontal 1EM: décalage horizontal 1EM Créez le texte du corps du sous – titre fluide sous le texte du titre, et nous ajouterons le texte du corps du sous – titre fluide. Comme ce texte est plus petit, nous ajouterons une taille de police racine de fluide plus petite. Ajouter un nouveau formulaire de texte pour créer du texte sous – titré, ajoutez un nouveau formulaire de texte sous le formulaire de texte sous – titré existant. Vous pouvez ajouter la phrase de texte de remplissage suivante: contenu du corps: vestibule AC Diameter sit amet quam Vehicle element sed sit amet Dui. Lorem ipsum dolor sit amet, concept adipiscing Elit. Ajouter la taille de la police racine du fluide ensuite, nous devons ajouter une nouvelle taille de police du fluide, qui est mieux adaptée au texte plus petit. Sur l’onglet avancé, collez le clip CSS suivant sous l’élément principal: font size: clam
Image sur l’onglet conception, mettre à jour les paramètres suivants: alignement de l’image: gauche (bureau et tablette), milieu (téléphone) largeur maximale: 48% (bureau et tablette), 70% (téléphone) remplissage: 4% gauche Enfin, utilisez l’unit é de longueur vmin pour spécifier une position absolue pour l’image avec les décalages suivants: position absolue (bureau et tablette), position relative (téléphone mobile): décalage vertical 30vmin (bureau et tablette), 0px (téléphone mobile) dans le coin supérieur gauche (bureau et tablette) Le résultat final ici est le résultat final sur la page en direct.
Voici comment la conception des fluides correspond parfaitement à la largeur de la fenêtre du navigateur. Le support du Navigateur pour la fonction CSS Clamp () (utilisé pour la taille des polices fluides dans ce tutoriel) est étonnamment bien supporté par tous les navigateurs grand public sauf ie. Il y a un étrange bogue Safari qui ne Redimensionne pas dynamiquement la fenêtre du navigateur, mais qui s’affiche correctement lors du chargement de la page. Pour résoudre ce problème, vous n’avez évidemment besoin que d’une hauteur minimale de 0 VW par module. L’ajout d’un design fluide à la section Hero est un moyen pratique de s’assurer que les plis ci – dessus sont cohérents dans toutes les tailles de navigateur sans avoir à mettre à jour le design à un point d’arrêt particulier ou à utiliser des requêtes multimédias. N’oubliez pas de consulter nos autres articles sur la conception des fluides, y compris la création de la typographie des fluides, des formes de fluides et des boutons fluides. J’ai hâte d’entendre vos commentaires. Bonjour!