Création d'une mise en page plein écran avec des transitions d'image d'arrière-plan de parallaxe dans Divi

La création d'une page Web avec des sections en plein écran est un excellent moyen d'améliorer l'expérience utilisateur avec des transitions fluides et des dispositions de section propres qui couvrent toute la largeur et la hauteur du navigateur. En règle générale, cela fonctionne bien pour présenter des produits ou des services une section à la fois, ce qui permet à l'utilisateur de se concentrer facilement sur chacun d'eux tout en faisant défiler la page. Ce type de conception fonctionne également très bien avec des images d'arrière-plan qui parlent au contenu et fournissent un bel accent de conception. Et si vous voulez faire preuve d'un peu de créativité, vous pouvez ajouter des fonctionnalités de parallaxe à vos images d'arrière-plan pour créer des transitions assez uniques lors du défilement d'une section plein écran à une autre.

Dans ce tutoriel, je vais vous montrer comment ajouter des transitions d'image de fond de parallaxe à une mise en page plein écran dans Divi. Le processus est simple et avec lui, vous pouvez créer des résultats puissants.

Aperçu

Jetez un œil à quelques-uns des modèles que nous allons construire ensemble.

Commencer

Abonnez-vous à notre chaîne Youtube

Pour ce tutoriel, tout ce dont vous avez besoin est Divi et une collection d'images à utiliser pour les différentes images de produits et images d'arrière-plan. J'utilise les images des images de notre pack de mise en page Juice Shop. Vous pouvez télécharger le fichier zip avec ces images au bas de l'article de blog présentant ce pack de mise en page. Cliquez simplement sur le bouton "Télécharger les ressources d'image en résolution complète".

Préparer votre nouvelle page

Une fois que vous avez vos images prêtes. Créez une nouvelle page et donnez un titre à votre page. Déployez ensuite le Divi Builder et sélectionnez « Build from Scratch ». Cliquez ensuite sur le bouton pour construire sur le front-end.

Vous êtes maintenant prêt à rouler !

L'idée de base

L'idée de base derrière ce concept consiste à empiler plusieurs sections pleine largeur, chacune avec un module d'en-tête pleine largeur. Chaque module d'en-tête se voit attribuer une largeur personnalisée qui peut être alignée à gauche, au centre ou à droite tout en exposant l'arrière-plan de la section. Ensuite, chaque section reçoit une image de fond avec une certaine méthode de parallaxe. Cela crée différents effets de transition d'image d'arrière-plan lorsque vous faites défiler la page.

Voici comment procéder.

Création de la section d'en-tête pleine largeur

Tout d'abord, vous devrez créer une nouvelle section pleine largeur, puis ajouter un module d'en-tête pleine largeur à la section.

Mettez à jour les paramètres d'en-tête pleine largeur avec du contenu avec les éléments suivants :

Titre : « Jus de tomate »
Texte du lien du bouton n° 1 : « Voir la recette »
Contenu : « Votre contenu va ici. Modifiez ou supprimez ce texte en ligne ou dans les paramètres de contenu du module.
Image du logo : [voir capture d'écran] (l'image mesure 240 pixels sur 300 pixels)

Continuez maintenant à mettre à jour la conception de votre en-tête comme suit :

Couleur d'arrière-plan : rgba(255,255,255,0.92)

Faire plein écran : OUI

Afficher le bouton de défilement vers le bas : OUI
Icône : voir capture d'écran
Couleur de l'icône de défilement vers le bas : #222222

Couleur du texte : foncé

Titre Titre Niveau : H2
Police du titre : Raleway
Taille du texte du titre : 50px

Police de caractère : Lato
Taille du corps du texte : 16px
Espacement des lettres du corps : 1px

Bouton One Taille du texte : 16px
Bouton fOne Couleur du texte : #ffffff
Couleur d'arrière-plan du bouton 1 : #222222
Rayon de bordure du bouton un : 50px
Espacement des boutons d'une lettre : 2px
Style de police du bouton One : TT

Largeur : 45 % (ordinateur de bureau), 60 % (tablette), 100 % (smartphone)

Enregistrer les paramètres.

Les principaux éléments de conception clés ici sont l'option « Créer le plein écran » et la « Largeur : 45 % ». Cela permettra à la section de s'étendre sur toute la largeur et la hauteur de la fenêtre du navigateur à tout moment. Et la largeur personnalisée réduit le module d'en-tête pour exposer l'arrière-plan de la section que nous ajouterons ensuite.

Ajout de l'arrière-plan de la section

Maintenant que nous avons conçu notre module d'en-tête, nous pouvons ajouter notre image d'arrière-plan de section. Accédez aux paramètres de votre section pleine largeur et ajoutez une image d'arrière-plan. Assurez-vous qu'il est suffisamment grand pour couvrir toute la largeur et la hauteur de la fenêtre du navigateur. Ensuite, choisissez d'utiliser la méthode CSS Parallax.

Duplication des sections

Étant donné que chaque section affichera un nouveau contenu, nous devons dupliquer notre section pleine largeur trois fois afin que vous ayez un total de quatre sections sur votre page, chacune avec un module d'en-tête.

Création d'une image d'arrière-plan statique en utilisant l'image d'arrière-plan de la même section avec CSS Parallax

Maintenant que nous avons quatre sections identiques, nous pouvons mettre à jour le contenu de l'en-tête pleine largeur avec de nouvelles images de logo et de nouveaux titres afin d'avoir une meilleure idée de la conception. Cependant, si nous gardons la même image d'arrière-plan en utilisant la parallaxe CSS pour les quatre sections, le résultat est une image d'arrière-plan statique qui reste en place lorsque vous faites défiler les différentes sections en plein écran. Et puisque nous utilisons un bouton de défilement vers le bas sur chaque en-tête, les utilisateurs ont la possibilité de cliquer sur la flèche pour faire défiler proprement chaque nouvelle section.

Découvrez le résultat.

Utilisation de différentes images d'arrière-plan avec des transitions de parallaxe CSS

L'utilisation d'une image d'arrière-plan différente (avec parallaxe CSS) pour chaque section changera la sensation de la conception lorsque vous faites défiler. Étant donné que nous avons déjà activé la parallaxe CSS pour nos images d'arrière-plan à quatre sections, tout ce que nous avons à faire est de changer chacune des images en quelque chose de différent. Dans ce cas, j'ajoute simplement une grande version du produit comme image d'arrière-plan pour chaque section.

Une fois que vous avez une image de fond différente (avec CSS Parallax) pour chacune des quatre sections, vérifiez le résultat.

Utilisation de différentes images d'arrière-plan avec de vraies transitions de parallaxe

Si vous souhaitez modifier l'effet de transition de l'image d'arrière-plan, vous pouvez modifier la méthode de parallaxe de CSS à True Parallax pour les quatre images d'arrière-plan de section.

Ouvrez l'un des paramètres de la section et changez la méthode CSS en "True Parallax".

Ensuite, vous devrez faire de même pour les trois sections restantes. Ou vous pouvez simplement cliquer avec le bouton droit sur l'option Méthode de parallaxe et sélectionner "Étendre la méthode de parallaxe" à tous les modules d'en-tête pleine largeur de la page.

Une fois cela fait, vérifiez l'effet de transition de l'image d'arrière-plan.

Explorer différents alignements de modules

Changer l'alignement de votre module d'en-tête pleine largeur est un jeu d'enfant. Étant donné que notre module d'en-tête pleine largeur a une largeur personnalisée de 45%, vous pouvez facilement ajuster l'alignement du module à gauche, au centre ou à droite pour obtenir une disposition différente. J'aime particulièrement l'alignement centré avec un fond statique.

Pour centrer le module, ouvrez les paramètres d'en-tête pleine largeur et mettez à jour l' alignement du module sur Centré .

Pour aligner le module à droite de la page, mettez simplement à jour l' alignement du module sur aligné à droite.

Une fois que vous avez défini un alignement, vous pouvez simplement étendre le style « alignement de module » au reste des modules d'en-tête de la page.

Voici un exemple d'alignement centré avec un fond statique (même image de fond pour chacun avec parallaxe CSS).

Voici un exemple d'alignement centré avec différentes images d'arrière-plan en utilisant la méthode CSS Parallax.

Voici un exemple d'alignement centré avec différentes images d'arrière-plan en utilisant la méthode True Parallax.

Voici un exemple d'alignement à droite avec différentes images d'arrière-plan en utilisant une combinaison de CSS et de vraie parallaxe.

Dernières pensées

Ces transitions d'image d'arrière-plan ont vraiment fière allure lorsqu'elles sont utilisées en combinaison avec des sections plein écran et des modules d'en-tête personnalisés. La fonctionnalité est propre et le design est subtil et unique. Au contraire, c'est un moyen rapide et facile de créer des arrière-plans statiques pour votre contenu. N'hésitez pas à explorer des conceptions plus avancées en utilisant des dégradés d'arrière-plan, des polices et des images !

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

À votre santé!