Comment concevoir des mises en page personnalisées en plein écran dans Divi

Les mises en page plein écran peuvent être très utiles dans le monde de la conception Web. L'un des principaux avantages d'une mise en page plein écran est la visibilité. Avec les pages plein écran, tout le contenu de votre page reste dans la fenêtre du navigateur. Dans un monde où les utilisateurs font défiler rapidement, avoir tout votre contenu contenu dans la fenêtre d'affichage du navigateur dès le début peut être rafraîchissant pour le spectateur et peut également aider avec les conversions.

Si vous connaissez Divi, vous devriez déjà connaître le module d'en-tête pleine largeur qui intègre une fonctionnalité plein écran. C'est une solution formidable pour créer des pages plein écran avec un contenu minimal. Mais si vous souhaitez profiter de la création d'une mise en page en plein écran à l'aide d'une section régulière avec plusieurs lignes et modules, cet article est fait pour vous. Je vais vous montrer quelques astuces simples pour vous assurer que le contenu de votre page (même la barre d'en-tête et de pied de page) s'adapte à la fenêtre de votre navigateur, puis s'adapte bien aux différentes tailles de navigateur.

Commençons.

Aperçu

Voici un aperçu de la mise en page finale en plein écran que nous allons créer dans ce didacticiel.

Remarquez comment la hauteur de la page s'ajuste à la hauteur de la fenêtre du navigateur afin que tout reste en place.

De quoi as-tu besoin

Pour ce tutoriel, tout ce dont vous avez vraiment besoin est Divi. J'utiliserai également le pack Fitness Gym Layout accessible depuis le Divi Builder.

Abonnez-vous à notre chaîne Youtube

Comment faire une page plein écran personnalisée dans Divi

Avant de me lancer dans la conception principale de ce tutoriel, j'ai pensé vous montrer l'idée de base derrière la création d'une page plein écran dans Divi. Après tout, vous pourriez être surpris de voir à quel point cela peut être simple.

L'idée de base expliquée

Dans une nouvelle page, choisissez le modèle de page vierge. Cela empêchera l'en-tête principal et la barre de pied de page inférieure de s'afficher sur la page (je vous montrerai comment les inclure plus tard).

Déployez maintenant le Divi Builder sur le front-end pour créer votre page à partir de zéro. Ajoutez ensuite une section régulière avec une ligne à une colonne.

Ensuite, ajoutez un module de compte à rebours (ou n'importe quel module) à la ligne d'une colonne.

Pour rendre les choses plus agréables pour les yeux, supprimez la couleur d'arrière-plan du compte à rebours et ajoutez une couleur d'arrière-plan à la section afin que nous puissions mieux reconnaître la hauteur de la section sur la page. Actuellement, la hauteur de la section est relative à la hauteur du contenu qu'elle contient. Dans ce cas, le seul contenu que nous avons est une seule ligne avec un module de chant.

Ouvrez maintenant les paramètres de la section, accédez à l'onglet avancé et ajoutez le CSS personnalisé suivant à l'élément principal :

min-height: 100vh;
display: flex;
flex-direction: column;

Le réglage de la hauteur minimale de votre section à 100vh (100% de la hauteur de la fenêtre d'affichage) garantira que votre section s'étend sur toute la fenêtre du navigateur (ou la fenêtre d'affichage). La propriété « display:flex » est un moyen simple et rapide de centrer verticalement le contenu de votre section.

Consultez ce guide utile pour plus d'informations sur l'unité de longueur vh.

Affichez votre page en direct dans un navigateur incognito pour voir le résultat car si vous êtes connecté à WordPress, la barre d'administration supérieure modifiera légèrement la hauteur du navigateur.

Et bien voilà. C'est l'idée de base de la création d'une mise en page personnalisée en plein écran dans Divi.

Intégrer l'en-tête et le pied de page dans votre page plein écran.

Si vous souhaitez que l'en-tête et la barre de pied de page inférieur soient inclus dans la page plein écran, vous devrez effectuer un petit ajustement. Tout d'abord, remplacez votre modèle de page par le modèle par défaut sur le backend de votre éditeur de page.

L'ajout de l'en-tête et du pied de page inférieur ajoutera de la hauteur à la fenêtre de votre navigateur, de sorte que la section ne s'adaptera plus parfaitement comme autrefois. C'est parce que votre page est maintenant composée d'une hauteur de section qui correspond à 100 % de la hauteur de la fenêtre PLUS la hauteur de votre barre d'en-tête et de pied de page inférieur. C'est trop. Pour résoudre ce problème, nous devons ajuster le CSS personnalisé dans notre section comme suit :

min-height: calc(100vh - 133px);
display: flex;
flex-direction: column;

La seule différence est la valeur min-hauteur. Il existe maintenant un calcul qui tient compte de la hauteur supplémentaire (en pixels) de l'en-tête et de la barre de pied de page inférieure collectivement.

Le 132px est basé sur le total de la hauteur par défaut de l'en-tête (80px) et de la hauteur par défaut de la barre de pied de page inférieure (53px).

Maintenant que nous avons une compréhension de base de la création d'une page plein écran personnalisée dans Divi, plongeons-nous dans une conception plus complexe.

Construire une conception de page complète en plein écran

Pour commencer pour cette conception, créez une nouvelle page, donnez un titre à votre page et déployez le Divi Builder. Sélectionnez l'option Choisir une disposition prédéfinie et dans la fenêtre contextuelle Charger à partir de la bibliothèque, sélectionnez la page Disposition de la salle de fitness. Cliquez ensuite pour utiliser la page de tarification.

Une fois la mise en page chargée dans le générateur, cliquez sur le bouton pour construire sur le front-end (The Visual Builder) et vous êtes prêt à commencer.

Création d'une nouvelle section

La mise en page prédéfinie est là pour aider à démarrer la conception. Nous utiliserons ces éléments de conception de mise en page en cours de route et supprimerons le reste de la mise en page une fois que nous aurons terminé. Pour créer la section principale de notre mise en page plein écran, continuez et créez une nouvelle section régulière et faites-la glisser tout en haut de la page. Ajoutez ensuite une structure de colonne d'un quart d'un quart d'un demi à la ligne. Ce sera la base de notre page plein écran.

Ajouter des modules à vos colonnes

En utilisant Multiselect (maintenez ctrl/cmd et cliquez), sélectionnez tous les modules dans les deux premières lignes de la première section de la mise en page et faites-les glisser dans la première colonne de la nouvelle section en haut de la page.

Ensuite, utilisez la sélection multiple pour copier tous les modules de la troisième ligne de cette même première section de la mise en page et collez-les dans la deuxième colonne de la nouvelle section en haut de la page.

Le texte sera masqué à cause du fond blanc mais nous changerons la couleur de fond plus tard.

Dans la troisième colonne, ajoutez un module de curseur. Ce curseur finira par s'étendre sur toute la hauteur de l'écran, mais pour l'instant, configurons simplement le contenu. Dans les paramètres du curseur, supprimez l'une des deux diapositives par défaut qui s'y trouvent par défaut, puis cliquez pour ouvrir les paramètres de la diapositive unique.

Dans les paramètres de la diapositive, ajoutez une image d'arrière-plan en vous assurant qu'elle est suffisamment grande pour couvrir toute la hauteur du navigateur.

Cela prend en charge tous nos modules dont nous avons besoin pour le moment. Nous reviendrons sur les paramètres de conception plus tard, mais pour l'instant, personnalisons notre ligne.

Personnalisation des paramètres de ligne

Ouvrez les paramètres de ligne et commencez par ajouter une couleur d'arrière-plan à la colonne 2 :

Couleur de fond de la colonne 2 : #2a2e40

Accédez à l'onglet Conception et mettez à jour les éléments suivants :

Faire cette ligne pleine largeur : OUI
Largeur de gouttière : 1
Égaliser les hauteurs de colonne : OUI
Rembourrage personnalisé : 0 pixels en haut, 0 pixels en bas

Personnalisation des paramètres de section

La seule chose nécessaire à ce stade pour nos paramètres de section est de supprimer tout rembourrage par défaut, mais j'ai pensé qu'il serait bien d'ajouter un séparateur de section qui encadre le haut de la première colonne. Ouvrez les paramètres de la section et mettez à jour les éléments suivants :

Style de séparateur supérieur : voir capture d'écran
Couleur du séparateur supérieur : #2a2e40
Hauteur du diviseur supérieur : 8vw
Répétition horizontale du diviseur supérieur : 0,8 x
Top Divider Flip : vertical et horizontal

Rembourrage personnalisé : 0px en haut, 0px en bas

Étant donné que le séparateur est configuré pour afficher sous le contenu de la section, il se cachera derrière le curseur de la colonne 3 et ne s'affichera pas dans la colonne 2 car il correspond à la couleur de l'arrière-plan des colonnes. Cela crée un bel élément de conception de cadrage pour la colonne 1.

Supprimer le reste de la mise en page prédéfinie

À ce stade, notre section supérieure a tout en place pour notre mise en page en plein écran afin que nous puissions supprimer toutes les sections restantes fournies avec la mise en page prédéfinie. Voici à quoi devrait ressembler votre page jusqu'à présent.

Nous sommes maintenant prêts à commencer à personnaliser notre page pour qu'elle devienne plein écran.

Ajout de CSS personnalisé pour rendre la page plein écran

Dans l'exemple de base au début de cet article, j'ai ajouté le css personnalisé directement à la section. Cependant, pour m'assurer que notre fonctionnalité plein écran ne s'applique qu'au bureau (et recourt au style par défaut sur mobile), je l'ajouterai au CSS sous les paramètres de la page. Cela me permettra d'ajouter un CSS externe qui s'applique uniquement à cette page, mais me donne également la possibilité d'ajouter une requête multimédia qui limite le style au bureau uniquement.

Dans le menu des paramètres en bas du générateur de front-end, ouvrez les paramètres de la page. Sous l'onglet Avancé, saisissez le CSS personnalisé suivant :

@media (min-width: 980px){

/*If CSS IDs are added, this makes the element the same height as the browser window taking into account the header and the bottom footer bar*/
  #fullsection, #fullslide .et_pb_slide {
    height: calc(100vh - 133px);
  }
/*This centers the content of the section when the CSS ID is applied*/
  #fullsection { 
    display: flex;
    flex-direction:column;
    overflow: hidden;
  }
/*This makes the bottom footer bar fullwidth to match the fullwidth header if applied*/
  #footer-bottom .container {
    width: 100%;
    max-width: 100%;
    padding-right: 30px;
    padding-left: 30px;
  }
}

Pour ceux d'entre vous qui ne sont pas familiers avec CSS, notez que le code est enveloppé par une requête multimédia qui applique le style lorsque le navigateur fait au moins 980 pixels de largeur. Avec les crochets, le premier extrait comprend un identifiant CSS nommé « fullsection » suivi d'un identifiant CSS nommé « fullslide ». Ces deux identifiants CSS sont importants à retenir car nous devrons les ajouter à notre section et à notre slider. Une fois que nous l'avons fait, le CSS "hauteur: calce (100vh - 133px)" sera appliqué, ce qui les rendra tous les deux plein écran (couvrant toute la hauteur de la fenêtre du navigateur).

Le deuxième extrait appliquera la propriété display flex à la section, en centrant tout le contenu de la section verticalement. Pour plus d'informations à ce sujet, consultez notre article sur la façon d'aligner verticalement le contenu dans Divi.

Le troisième extrait est complètement facultatif. Cela rend simplement la barre de pied de page inférieure pleine largeur pour s'adapter un peu mieux à la conception et également pour correspondre au style d'en-tête pleine largeur que nous ajouterons.

Maintenant que vous avez le CSS externe en place, nous pouvons ajouter nos identifiants CSS à notre section et à notre curseur. Accédez aux paramètres de la section et ajoutez l'ID CSS suivant :

ID CSS : section complète

Ouvrez maintenant les paramètres du module Slider pour le curseur dans la colonne 3 et ajoutez l'ID CSS suivant :

ID CSS : diapositive complète

Touches finales

À ce stade, la fonctionnalité de page plein écran est en place et devrait fonctionner. Vous pouvez le vérifier dans un navigateur incognito pour être sûr. Il ne reste plus que quelques touches finales.

Ajouter de l'espacement à nos colonnes

Ouvrez vos paramètres de ligne pour ajouter un peu de remplissage en haut de la colonne 1 et de la colonne 2 comme suit :

Rembourrage personnalisé de la colonne 1 : 12vh en haut, 1vw à gauche, 1vw à droite
Rembourrage personnalisé de la colonne 2 : 12vh en haut, 1vw à gauche, 1vw à droite

Notez que j'ai utilisé l'unité de longueur vh pour mes valeurs de remplissage supérieures. Cela permettra au rembourrage de s'adapter à la hauteur de la fenêtre, créant plus de rembourrage à mesure que la fenêtre du navigateur s'agrandit et créant moins de rembourrage à mesure que le navigateur se raccourcit. J'ai utilisé l'unité de longueur vw (viewport width) pour mes valeurs de rembourrage gauche et droite afin que le rembourrage soit mis à l'échelle en fonction de la largeur du navigateur.

Ajouter des unités de longueur vh au texte volumineux pour maximiser l'espace de visualisation

Comme vous pouvez le voir, il existe quelques modules avec du texte très volumineux qui ne s'adaptent pas du tout à la fenêtre du navigateur. Pour résoudre ce problème, nous pouvons définir la taille du texte sur une unité de longueur vh. Cela permettra au texte de se réduire sur des écrans de navigateur plus courts.

Ouvrez les paramètres du module de texte en haut de la colonne 1 et mettez à jour la taille du texte de l'en-tête h1 à 7vh (pas vw).

Ensuite, ouvrez les paramètres du module de texte en haut de la colonne 2 et mettez à jour la taille du texte du titre 2 à 6vh.

Mettre à jour la conception du curseur

Pour terminer le design, vous pouvez copier le design du bouton du bouton dans la colonne 2 et le coller dans les styles de bouton du curseur. Pour ce faire, ouvrez les paramètres de bouton pour le bouton dans la colonne 2 et faites un clic droit sur la catégorie d'option de bouton et cliquez sur « copier les styles de bouton ».

Après cela, ouvrez les paramètres du curseur et collez les styles de bouton dans la catégorie d'options de bouton du curseur.

Vous pouvez également ajouter une superposition d'arrière-plan aux diapositives individuelles.

Ajustements de la barre d'en-tête et de pied de page inférieur

Vous vous souvenez peut-être que nous avons déjà ajouté un petit extrait de CSS personnalisé qui a étendu notre pied de page à toute sa largeur. C'était en prévision de la pleine largeur de notre barre de menu principale. Pour rendre votre barre de menu principale pleine largeur, accédez au tableau de bord WordPress et accédez à Divi > Personnalisateur de thème > En-tête et navigation > Barre de menu principale. Cochez ensuite l'option Faire toute la largeur.

Puisque nous affichons notre barre de pied de page inférieure sur notre page plein écran, nous pouvons mettre à jour la couleur d'arrière-plan de la barre inférieure pour qu'elle corresponde au design. Restez dans le personnalisateur de thème et accédez à Pied de page > Barre du bas. Définissez ensuite la couleur d'arrière-plan sur #2a2e40.

Ensuite, publiez vos modifications.

Le résultat final

Voici la conception finale. Remarquez comment tout s'intègre parfaitement dans la fenêtre du navigateur.

Et découvrez à quoi cela ressemble lorsque vous ajustez le navigateur à différentes tailles.

Et n'oubliez pas, puisque nous n'avons appliqué notre CSS personnalisé qu'aux largeurs de navigateur supérieures à 980 pixels, la conception reviendra à la normale sur les appareils mobiles.

Le voici sur tablette et smartphone.

Dernières pensées

Créer une mise en page personnalisée en plein écran dans Divi n'est pas si compliqué une fois que vous avez compris comment ajuster correctement la hauteur de votre section à la hauteur de votre navigateur avec quelques extraits de CSS. Mais une fois que vous avez cela, vous pouvez créer d'innombrables conceptions de page plein écran dans Divi Builder. Veillez simplement à réduire au minimum le contenu si vous prévoyez de tout garder visible dans la fenêtre du navigateur.

Ce type de conception fonctionne bien pour les sites personnels, les offres promotionnelles et toutes sortes de pages de destination. C'est également une excellente solution pour les pages qui ont peu de contenu et vous voulez éviter que la barre de pied de page inférieure s'affiche à mi-chemin de la page.

Et n'oubliez pas la possibilité d'utiliser le module d'en-tête pleine largeur de Divi. Bien que vous n'ayez pas la même flexibilité que la méthode utilisée dans cet article, elle est parfaite pour les pages avec un contenu minimal.

Voici quelques autres articles que vous pourriez apprécier au sujet des pages en plein écran.

• Comment créer des sections plein écran avec des liens de défilement haut et bas avec Divi
• Concevez une mise en page Divi unique en plein écran avec un bouton de défilement animé
• et plus

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

À votre santé!