Des moyens créatifs de combiner des effets de défilement de rotation avec des éléments circulaires dans Divi

Nous sommes toujours à la recherche de moyens nouveaux et créatifs de présenter des articles en vedette (comme des produits et des services) lors de la conception d'un nouveau site Web. Et, avec les effets de défilement de Divi, de nouvelles portes ont été ouvertes pour amener vos mises en page de présentation à un tout autre niveau. Dans ce didacticiel, nous allons vous montrer comment créer une disposition de module de présentation avec des éléments circulaires rotatifs lors du défilement. Cette mise en page unique présente une utilisation intelligente des combinaisons de couleurs avec plusieurs éléments circulaires qui tournent derrière les textes de présentation lorsque l'utilisateur fait défiler la page. Nul doute que cette conception aurait de nombreuses applications pour à peu près n'importe quel contenu.

Prendre plaisir!

Aperçu

Voici un aperçu rapide de la mise en page du texte de présentation avec des éléments circulaires rotatifs que nous construisons dans ce didacticiel.

Téléchargez GRATUITEMENT la mise en page Blurb des éléments circulaires rotatifs

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 sur votre page, extrayez simplement le fichier zip et faites glisser le fichier JSON 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.

Création de la mise en page Blurb avec des éléments circulaires en rotation sur le défilement dans Divi

Ajout de la ligne

Tout d'abord, ajoutez une ligne de trois colonnes à la section.

Marge de section temporaire

Ensuite, ajoutez des marges supérieure et inférieure à la section afin de créer de l'espace pour faire défiler.

Création d'un design de présentation d'élément circulaire rotatif #1

Pour notre première conception, nous allons créer un module de présentation avec trois modules de séparation colorés qui se placeront derrière le présentation et pivoteront au fur et à mesure que l'utilisateur fait défiler. Ce premier design servira de bon modèle pour les deux prochains designs que nous ajouterons aux autres colonnes.

Voici comment le construire.

Ajouter un module Blurb

Dans la colonne 1, ajoutez un module de présentation.

Contenu de la présentation 1

Ouvrez les paramètres du module de présentation et mettez à jour le contenu du corps avec les éléments suivants :

<p>Your content goes here. Edit or remove this text inline or in the module Content settings.</p>

Ajoutez ensuite une icône de votre choix pour remplacer l'image par défaut.

Paramètres de conception Blurb 1

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

• Couleur d'arrière-plan : #121212
• Couleur de l'icône : #41828d
• Utiliser la taille de la police de l'icône : OUI
• Taille de la police de l'icône : 75 px
• Alignement du texte : au centre
• Police du titre : Oswald
• Style de police du titre : TT
• Couleur du texte du titre : #ffffff
• Taille du texte du titre : 22px
• Couleur du corps du texte : #ffffff

Pour rendre le texte de présentation circulaire, mettez à jour la taille et les coins arrondis comme suit :

• Largeur : 300px
• Largeur maximale : 300 px
• Remplissage : 25 pixels en haut, 25 pixels en bas, 25 pixels à gauche, 25 pixels à droite
• Coins arrondis : 50 %

La combinaison d'une largeur et d'une hauteur égales combinées aux coins arrondis est ce qui rend le texte de présentation circulaire.

Mettez ensuite à jour la position avec un décalage.

• Position : Relatif
• Décalage vertical : 25px
• Décalage horizontal : 25px
• Indice Z : 1

Cela centrera le texte de présentation dans les séparateurs que nous ajouterons plus tard. L'index Z s'assurera que le texte de présentation se trouve également au-dessus des autres diviseurs.

Ensuite, ajoutez un effet de défilement rotatif au texte de présentation.

Sous l'onglet Effets de rotation…

• Activer la rotation : OUI
• Rotation de départ : 45 deg (à 0 % de la fenêtre d'affichage)
• Rotation moyenne : 0 degré (à 40 % - 60 % de la fenêtre d'affichage)
• Rotation finale : -45 deg (à 100 % de la fenêtre d'affichage)

Cela fera légèrement pivoter le texte de présentation en position verticale vers le milieu de la page, puis pivotera encore de 45 degrés lorsqu'il quittera le haut de la page.

Ajouter un diviseur circulaire #1

Nous allons maintenant ajouter le premier des trois modules de séparation qui composeront notre conception d'éléments circulaires rotatifs.

Ajoutez un module diviseur sous le module de présentation.

Paramètres du diviseur 1

Ouvrez les paramètres du diviseur et mettez à jour les éléments suivants :

• Afficher le diviseur : NON
• Dégradé de fond à gauche : #311847
• Dégradé de fond à droite : #ec4067
• Position de départ : 50 %
• Position finale : 50 %

Et maintenant, nous le rendons circulaire comme suit :

• Largeur : 350px
• Largeur maximale : 350px
• Hauteur : 350px
• Coins arrondis : 50 %

Notez que le séparateur est légèrement plus grand que le module de présentation, de sorte que nous pourrons voir le bord extérieur du séparateur une fois placé derrière le présentation.
Maintenant, nous mettons simplement à jour la position du diviseur en absolu et il se placera parfaitement derrière le texte de présentation.

• Position : Absolu

Si votre intercalaire se trouve au-dessus du texte de présentation, assurez-vous d'avoir mis à jour l'index z du texte de présentation à 1.

Ensuite, ajoutez les effets de défilement suivants au séparateur :

Sous l'onglet Effet de rotation…

• Activer la rotation : OUI
• Rotation de départ : 0 deg (à 0 % de la fenêtre d'affichage)
• Rotation moyenne : 45 deg (à 50 % de la fenêtre d'affichage)
• Rotation finale : -180 deg (à 100 % de la fenêtre d'affichage)

Ajouter un diviseur circulaire 2

Pour créer le deuxième diviseur circulaire, ouvrez la boîte des calques en cliquant sur l'icône des calques dans le menu des paramètres. Dupliquez ensuite le module diviseur pour en créer un nouveau.

Mettre à jour les paramètres de conception du diviseur 2

Pour ce séparateur, donnons-lui une couleur de fond dégradé différente comme suit :

• Couleur d'arrière-plan du dégradé gauche : rgba (160,26,125,0,5)
• Dégradé d'arrière-plan à droite : rgba(255,255,255,0)

REMARQUE : Il est important d'utiliser des couleurs semi-transparentes ici afin d'exposer l'arrière-plan derrière. Cela crée une belle combinaison de couleurs.

Ensuite, mettez à jour les effets de défilement comme suit :

Sous l'onglet Effets de rotation…

• Rotation moyenne : 90 degrés (à 50 % de la fenêtre d'affichage)
• Rotation finaleg : 180 deg (à 100 % de la fenêtre d'affichage)

Ajouter un diviseur circulaire 3

Continuez le même processus pour créer le troisième et dernier diviseur en dupliquant le diviseur 2.

Mettre à jour le diviseur 3 Paramètres de conception

Pour ce séparateur, donnons-lui également une couleur de fond dégradé différente comme suit :

• Couleur d'arrière-plan du dégradé de gauche : rgba(255,255,255,0)
• Dégradé de fond à droite : rgba (41,196,169,0,5)

Ensuite, mettez à jour les effets de défilement comme suit :

Sous l'onglet Effets de rotation…

• Rotation moyenne : 180 deg (à 50 % de la fenêtre d'affichage)
• Rotation de fin : 360 deg (à 100 % de la fenêtre d'affichage)

Sous l'onglet Mise à l'échelle vers le haut et vers le bas…

• Activer la mise à l'échelle vers le haut et vers le bas : OUI
• Échelle de départ : 110 % (à 0 % de la fenêtre d'affichage)
• Échelle moyenne : 110 % (à 50 % de la fenêtre d'affichage)
• Échelle de fin : 100 % (à 100 % de la fenêtre)

Création de l'élément circulaire rotatif Blurb Design #2

Puisque nous avons déjà une conception terminée dans la colonne 1, commençons la deuxième conception en dupliquant l'intégralité de la première colonne. Cela s'appliquera également aux quatre modules. Vous devrez supprimer l'une des colonnes vides afin de conserver la disposition en trois colonnes.

Mettre à jour la conception du module de présentation

Pour cette conception, nous allons utiliser un arrière-plan de texte de présentation blanc afin que nous puissions utiliser l'effet de filtre d'écran pour afficher les couleurs en mouvement derrière le texte de présentation. Nous allons également ajouter un effet de défilement de mise à l'échelle pour agrandir le séparateur arrière.

Voici comment procéder.

Ouvrez les paramètres du module de présentation dans la colonne 2 et mettez à jour les éléments suivants :

• Contexte : #ffffff

Ensuite, changez la couleur du titre et du corps du texte en noir.

• Couleur du texte du titre : #000000
• Couleur du corps du texte : #000000

Ajoutez ensuite le mode de fusion suivant :

• Mode de fusion : écran

Mettre à jour les effets de défilement du diviseur 1

Ouvrez les paramètres du module diviseur directement sous le module de présentation dans la colonne 2 et mettez à jour les effets de défilement suivants :
Sous l'onglet Effets de mise à l'échelle vers le haut et vers le bas…

• Activer la mise à l'échelle vers le haut et vers le bas : OUI
• Échelle de départ : 100 % (à 0 % de la fenêtre)
• Échelle moyenne : 120 % (à 40 % - 60 % de la fenêtre d'affichage)
• Échelle de fin : 100 % (à 100 % de la fenêtre)

Cela entraînera une croissance du diviseur de 20% par rapport à sa taille d'origine à mi-chemin lorsque l'utilisateur fait défiler la page.

Création d'un design Blurb d'éléments circulaires rotatifs #3

Pour cette dernière conception, nous allons créer un texte de présentation circulaire rotatif similaire à celui de la colonne 1. Cependant, nous ajouterons un mode de fusion différent pour afficher les couleurs à travers le texte blanc sur un fond sombre.

Voici comment procéder.

Dupliquer la colonne 1

Puisque nous avons déjà une conception terminée dans la colonne 1, commençons la troisième conception en dupliquant l'intégralité de la première colonne et déplaçons-la vers le placement de la troisième colonne à l'aide de la zone des calques. Supprimez ensuite la colonne vide supplémentaire.

Mettre à jour les paramètres du module Blurb

Tout d'abord, ajoutons le mode de fusion multiplié pour afficher les couleurs de séparation à travers le texte blanc comme suit :

• Mode de fusion : plusieurs

Ensuite, mettez également à jour la couleur de l'icône en blanc.

• Couleur de l'icône : #ffffff

Mettre à jour les paramètres du diviseur 3

Retirons maintenant l'effet de défilement d'échelle sur le dernier (troisième) diviseur de la colonne 3.
Ouvrez les paramètres du troisième diviseur et mettez à jour les éléments suivants :

Sous l'onglet Augmentation et diminution des effets…

• Activer la mise à l'échelle vers le haut et vers le bas : NON

Ajuster la position de la colonne 2 sur mobile

À l'heure actuelle, les trois modèles de présentation s'aligneront à gauche de l'écran sur les écrans des tablettes et des téléphones. Pour équilibrer la conception, nous pouvons déplacer facilement la colonne du milieu vers la droite en utilisant l'échelle de transformation.

Ouvrez les paramètres de la colonne 2 et mettez à jour les éléments suivants :

Transform Scale X Axis : 40 % (sur tablette), 15 % (sur téléphone)

Résultat final

C'est ça! Voyons le résultat final sur une page en direct.

Voici la conception sur le bureau lorsque l'utilisateur fait défiler la mise en page.

Voici le design sur tablette.

Et le voici au téléphone.

Dernières pensées

L'une des meilleures caractéristiques de cette mise en page est la créativité que vous pouvez obtenir avec les effets de défilement et les combinaisons de couleurs, chacun pouvant être facilement modifié à l'aide des options intégrées de Divi. Et une fois que vous maîtrisez mieux comment incorporer des effets de filtre, les choses commencent vraiment à apparaître. J'espère que cela vous donnera de l'inspiration pour la prochaine mise en page de présentation que vous créerez.

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

À votre santé!