Comment concevoir une section Fluid Hero dans Divi

La section héros d'un site Web est l'un des meilleurs candidats pour un design fluide. Contrairement à la conception réactive traditionnelle qui s'ajuste à différents points d'arrêt, la conception fluide s'adapte de manière transparente à la fenêtre du navigateur et maintient la conception cohérente sur n'importe quel appareil. Après tout, la section des héros est la première chose que les utilisateurs voient sur un site Web.

Vous avez peut-être vu la conception fluide démontrée dans des didacticiels précédents sur la typographie fluide, les modules fluides et/ou les boutons fluides. Dans ce tutoriel, nous allons vous montrer comment créer toute une section de héros fluide dans Divi. La clé pour créer cette conception fluide consiste à ajouter une taille de police racine fluide à chacun des modules utilisés, puis à incorporer l'unité de longueur em (qui est relative à la taille de police du corps racine) dans les paramètres du module.

Commençons!

Aperçu

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

Remarquez comment la conception fluide s'adapte en douceur à la largeur de la fenêtre du navigateur.

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.

TÉLÉCHARGER

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.

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

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

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

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

Comment concevoir une section Fluid Hero dans Divi

Pour créer la section Fluid hero, nous allons ajouter une taille de police racine fluide à chacun des trois modules. Ces modules constitueront le titre, le sous-titre et le bouton. Ensuite, nous allons utiliser l'unité de longueur em dans les paramètres de conception des modules pour nous assurer que les éléments de conception sont relatifs à la taille de police de la racine fluide. Ensuite, nous allons positionner l'image sur le côté gauche de la page avec une position absolue et un décalage. Le résultat sera une section de héros fluide qui s'adapte parfaitement à la largeur de la fenêtre d'affichage afin que la conception soit cohérente sur tous les appareils.

Paramètres de section

Pour commencer, mettons à jour les paramètres de conception existants pour la section. Ouvrez les paramètres de la section et mettez à jour les éléments suivants :

• Couleur d'arrière-plan du dégradé de gauche : #ff2000
• Dégradé de fond à droite : #121212
• Direction du gradient: 45deg
• Position de départ : 30 %
• Position finale : 0%

Sous l'onglet Conception, mettez à jour le rembourrage :

• Remplissage : 0px en haut, 0px en bas

Créer une ligne

Ensuite, ajoutez une ligne à une colonne à la section.

Paramètres de ligne

Ouvrez les paramètres de la ligne et mettez à jour les éléments suivants sous l'onglet Conception :

• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 1700px
• Hauteur minimale : 100 vh (ordinateur de bureau), aucun (tablette et téléphone)
• Remplissage : 0px en haut, 0px en bas

Créer un texte à en-tête fluide avec bordure

Maintenant que la section et la ligne sont terminées, nous pouvons ajouter le texte de titre fluide à la section héros. Nous allons également ajouter une bordure fluide au module de texte pour un élément de design créatif.

Ajouter un module de texte

Pour créer le texte d'en-tête et la bordure, ajoutez un nouveau module de texte à la colonne.

Paramètres de texte

Sous l'onglet Contenu, mettez à jour le contenu du corps avec le code HTML suivant :

<h1>Fluid Fullscreen Page Design<span style="color: #ff2000;">.</span></h1>

Pour rendre les éléments de conception fluides, nous devons d'abord ajouter une taille de police racine fluide au module à l'aide de la fonction CSS Clamp(). Sous l'onglet Avancé, passez l'extrait CSS suivant :

font-size: clamp(32px, 4.1vw, 70px);

Avec la taille de police de la racine fluide en place, nous sommes prêts à mettre à jour les paramètres de conception. Il est important d'utiliser l'unité de longueur em partout car l'unité de longueur em est relative à la taille de la police racine de l'élément.

Sous l'onglet Conception, mettez à jour les paramètres de conception de texte d'en-tête suivants :

• Type de titre : H1
• Police de titre : Montserrat
• Poids de la police d'en-tête : lourd
• Couleur du texte du titre : #ffffff
• Taille du texte de l'en-tête : 1em
• Espacement des lettres d'en-tête : 0,1 em
• Hauteur de la ligne de cap : 1,2 em

Mettez également à jour le remplissage des modules comme suit :

• Rembourrage : 1em (haut, bas, gauche, droite)

Pour créer la conception de bordure fluide, mettez à jour les éléments suivants :

• Largeur de la bordure : 1 em
• Couleur de la bordure : #ffffff
• Couleur de la bordure inférieure : transparente
• Couleur de la bordure gauche : transparente

Création de la bordure d'accent

Pour créer la bordure d'accent, nous pouvons dupliquer le module de texte existant.

Retirez le contenu du corps existant et mettez à jour les paramètres de conception comme suit :

• Largeur maximale : 6,5 em
• Hauteur : 3,25 em
• Largeur de la bordure : 0,5 em
• Couleur de la bordure : #ff2000

N'oubliez pas que la même taille de police racine fluide est incluse dans ce module en double. Ainsi, nous pouvons utiliser l'unité de longueur em pour ajuster la taille et la largeur de la bordure. Cela garantira que la conception s'ajustera avec la conception du module de texte d'en-tête.

Pour positionner la bordure d'accent, ajoutez une position absolue avec un décalage égal à la largeur de la bordure dans le module de texte de titre (1em). Sous l'onglet Avancé, mettez à jour les options de poste suivantes :

• Position : Absolu
• Localisation : en haut à droite
• Décalage vertical : 1 em
• Décalage horizontal : 1 em

Créer le corps du texte du sous-titre fluide

Sous le texte du titre, nous allons ajouter le corps du texte du sous-titre fluide. Comme ce texte est plus petit, nous allons ajouter une taille de police racine fluide plus petite.

Ajouter un nouveau module de texte

Pour créer le texte de sous-titre, ajoutez un nouveau module de texte sous le module de texte de titre existant.

Vous pouvez ajouter quelques phrases de texte de remplissage comme suit :

• Contenu du corps : Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ajouter une taille de police de racine fluide

Ensuite, nous devons ajouter une nouvelle taille de police fluide plus appropriée pour un texte plus petit. Sous l'onglet avancé, collez l'extrait de code CSS suivant sous l'élément principal :

font-size: clamp(14px, 1.4vw, 24px);

Paramètres de conception de texte

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Poids de la police de texte : demi-gras
• Texte Couleur du texte : #ffffff
• Taille du texte du texte : 1em
• Hauteur de la ligne de texte : 1,6 em

Mettez ensuite à jour la taille et l'espacement comme suit :

• Largeur maximale : 19 em
• Marge : 2 em en bas, auto à gauche, 5 em à droite

Créer le bouton fluide

Pour créer le bouton fluide, ajoutez un nouveau module de bouton sous le module de texte de sous-titre.

Ensuite, mettez à jour le texte du bouton pour lire « Essai gratuit de 7 jours ».

Ajouter une taille de police de racine fluide

Ensuite, nous devons ajouter une nouvelle taille de police fluide adaptée à un bouton. Sous l'onglet avancé, collez l'extrait de code CSS suivant sous l'élément principal :

font-size: clamp(20px, 2.35vw, 40px);

Paramètres de conception des boutons

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Alignement des boutons : à droite

• Couleur du texte du bouton : #ff2000
• Bouton Fond Dégradé Gauche Couleur: transparent
• Dégradé d'arrière-plan du bouton Couleur droite : #ffffff
• Direction du gradient: 45deg
• Position de départ : 25 %
• Position finale : 0%
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 0px
• Police des boutons : Montserrat
• Poids de la police du bouton : lourd
• Style de police des boutons : italique
• Icône du bouton : flèche triangulaire droite (voir capture d'écran)
• Emplacement de l'icône du bouton : à gauche

• Marge : 8em à droite
• Rembourrage : 0,2 em en haut, 0,2 em en bas, 1,5 em à gauche, 1 em à droite

Créer une image pour la section des héros

Avec tout le contenu de la section héros à la bonne taille de la page, nous sommes prêts à ajouter l'image de la section héros sur le côté gauche. Pour ce faire, ajoutez d'abord un module image sous le bouton.

Ouvrez les paramètres de l'image et téléchargez une image.

Paramètres de conception d'image

Sous l'onglet Conception, mettez à jour les paramètres suivants :

• Alignement de l'image : à gauche (ordinateur de bureau et tablette), au centre (téléphone)
• Largeur max : 48 % (ordinateur de bureau et tablette), 70 % (téléphone)
• Rembourrage : 4% restant

Enfin, donnez à l'image une position absolue avec un décalage en utilisant l'unité de longueur vmin comme suit :

• Position : absolue (ordinateur de bureau et tablette), relative (téléphone)
• Emplacement : En haut à gauche (ordinateur de bureau et tablette)
• Décalage vertical 30vmin (ordinateur de bureau et tablette), 0px (téléphone)

Résultat final

Voici le résultat final sur une page en direct.

Voici comment la conception fluide s'adapte en douceur à la largeur de la fenêtre du navigateur.

Prise en charge du navigateur

La fonction CSS clamp() (utilisée pour la taille de police fluide dans ce didacticiel) est étonnamment bien prise en charge par tous les principaux navigateurs, à l'exception d'IE. Il existe un bug de safari étrange qui ne s'adapte pas de manière dynamique lors du réglage de la fenêtre du navigateur, mais s'affiche correctement lors du chargement de la page. Pour résoudre ce problème, il vous suffit apparemment de donner à chacun des modules une hauteur minimale de 0vw.

Dernières pensées

L'ajout d'un design fluide à une section de héros peut être un moyen pratique de s'assurer que le dessus de la ligne de flottaison semble parfaitement cohérent sur toutes les tailles de navigateur, sans avoir à mettre à jour le design à des points d'arrêt spécifiques ou à utiliser des requêtes multimédias.

N'oubliez pas de consulter nos autres articles sur la conception fluide, notamment sur la création d'une typographie fluide, de modules fluides et de boutons fluides.

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

À votre santé!