Comment créer des modules flottants qui entrent en collision dans l'espace 3D dans Divi

Il est toujours amusant d'explorer de nouveaux designs possibles avec Divi. Et aujourd'hui, nous utiliserons Divi pour explorer l'espace 3D ! Techniquement, nous explorerons comment concevoir des modules flottants qui semblent entrer en collision dans l'espace 3D. Cette conception fonctionnera bien comme moyen créatif d'impressionner les visiteurs en montrant que vous avez une « étendue » de services, de produits ou de ressources sur votre site Web.

Évidemment, ce tutoriel ne sera pas comparable à ce que j'imagine que serait l'exploration spatiale réelle. Mais, espérons-le, vous, les explorateurs Divi, pourrez apprendre quelques choses en cours de route.

Aperçu

Voici un aperçu du design que nous allons construire ensemble.

Téléchargez GRATUITEMENT les modules flottants qui entrent en collision dans la disposition de l'espace 3D

Pour mettre la main sur le design construit dans 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 ?

Abonnez-vous à notre chaîne Youtube

Premiers pas avec une mise en page prédéfinie

Pour commencer, assurez-vous que le thème Divi est installé et actif. Créez ensuite une nouvelle page, donnez un titre à la page et déployez le Divi Builder (sur le front-end). Sélectionnez l'option « Choisir une mise en page prédéfinie ». Sélectionnez ensuite la disposition de la page de destination du jeu vidéo et importez-la dans votre nouvelle page.

Pour avoir une longueur d'avance sur notre conception, nous allons utiliser la section intitulée « Caractéristiques du jeu » qui contient les textes de présentation que nous allons utiliser pour notre conception. Comme il s'agit de la seule section dont nous avons vraiment besoin, supprimez toutes les sections et lignes, à l'exception des deux lignes de présentation.

Implémentation des Blurbs flottants dans la conception d'espace 3D dans Divi

Création de la première rangée de présentations

À l'intérieur de la section de la mise en page prédéfinie contenant les deux rangées de textes de présentation, créez une nouvelle rangée à une colonne et faites-la glisser vers le haut de la section.

Maintenant, en utilisant la fonction multisélection de Divi (maintenez ctrl/cmd tout en sélectionnant chaque texte de présentation), sélectionnez 5 des textes de présentation dans les deux colonnes ci-dessous et faites-les glisser dans la nouvelle ligne d'une colonne en haut de la section.

Vous pouvez maintenant supprimer les deux lignes fournies avec la mise en page prédéfinie ci-dessous. Après cela, vous ne devriez avoir qu'une seule ligne sur une colonne contenant 5 textes de présentation.

Ajout de perspective à notre section

Pour obtenir l'effet 3D que nous recherchons dans cette conception, nous devons ajouter la propriété perspective css à notre section. Cela ajoutera la perspective 3D à notre ligne chaque fois que nous ferons pivoter la ligne à l'aide des options de transformation.

Ouvrez les paramètres de la section et ajoutez le CSS personnalisé suivant à l'élément principal :

perspective: 1000px;

Plus tard, vous souhaiterez peut-être augmenter ou diminuer la valeur de perspective pour rapprocher ou éloigner les éléments 3D (dans ce cas, les lignes) de la perspective de l'utilisateur lorsqu'il regarde l'écran.

Pour plus d'informations, découvrez comment la perspective fonctionne avec les options de transformation dans Divi.

Personnalisation de la ligne

Avant de commencer à styliser nos textes de présentation, configurons d'abord nos paramètres de ligne. Il y a trois choses principales que nous devons changer au niveau de la ligne pour cette conception :

1. Nous devons aligner nos textes de présentation horizontalement en utilisant « display:flex ». Cela gardera notre conception cohérente et réactive sur tous les appareils (par opposition à l'utilisation d'une disposition à 5 colonnes qui se brisera sur la tablette et le téléphone).
2. Nous devons nous débarrasser des marges de colonne par défaut en définissant la largeur de la gouttière sur 1.
3. Nous devons utiliser la rotation de transformation pour faire pivoter la ligne de 45 degrés sur l'axe X. Avec la propriété perspective ajoutée au parent (la section), la ligne et tous ses éléments ont l'effet 3D que nous recherchons.

Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Largeur de gouttière : 1
Largeur : 80 % (ordinateur de bureau), 100 % (tablette), 100 % (téléphone)
Transformer Rotation Axe X: 45deg

Élément principal de la colonne CSS :

display: flex;
justify-content: center;

Ajustement du style de présentation et de l'espacement

Il est maintenant temps d'ajuster un peu le contenu et le style de nos textes de présentation.

Étant donné que nous souhaitons appliquer les mêmes personnalisations à tous nos textes de présentation, utilisez à nouveau la sélection multiple pour sélectionner tous les textes de présentation et déployer le modal des paramètres d'élément.

Tout d'abord, supprimez le contenu du corps.

Ajoutez ensuite une couleur d'arrière-plan :

Couleur d'arrière-plan : rgba (20 241 217 0,16)

Mettez ensuite à jour l'espacement suivant :

Marge personnalisée (ordinateur de bureau) : 2vw à droite
Marge personnalisée (tablette et téléphone): 0vw right

Rembourrage personnalisé : 2% en haut, 2% en bas, 3% à gauche, 3% à droite

Ensuite, ajoutez une bordure comme suit :

Largeur de la bordure : 2px
Couleur de la bordure : rgba (20 241 217 0,66)

À ce stade, tous les textes de présentation ont le style en place. Nous devons toujours utiliser les options de transformation pour modifier l'échelle et la position de chacun des textes de présentation individuellement, ce qui ajoutera à l'effet flottant 3D des textes de présentation. Mais avant de faire cela, dupliquons la ligne pour créer notre deuxième ligne de textes de présentation.

Création de la deuxième rangée de textes de présentation

Pour créer la deuxième rangée de textes de présentation, dupliquez simplement la rangée de 5 textes de présentation que vous venez de personnaliser.

Pour créer un effet de collision, nous pouvons faire pivoter la ligne dupliquée dans le sens opposé (-45deg).

Ouvrez la ligne dupliquée et mettez à jour les éléments suivants :

Transformer l'axe X de rotation : -45 deg

Augmenter le rembourrage des sections supérieure et inférieure

À ce stade, les textes de présentation avant peuvent s'étendre à l'extérieur de la section. Pour résoudre ce problème, ajoutez le remplissage suivant à votre section :

Rembourrage personnalisé : 15 % en haut, 15 % en bas

Utilisation des options de transformation pour dimensionner et positionner chaque présentation individuellement

À ce stade, vous êtes prêt à faire preuve de créativité avec la façon dont vous voulez que chacun de vos textes de présentation «flotte» dans l'espace 3D. Pour ce faire, vous pouvez utiliser les options de transformation pour dimensionner et positionner chaque texte de présentation un par un exactement où vous le souhaitez. En faisant cela, vos textes de présentation sembleront avoir des profondeurs différentes dans l'espace 3D.

Pour faciliter les choses, je vais numéroter les textes de présentation de 1 à 10 en commençant par le texte de présentation d'extrême gauche dans la rangée du haut (Blurb #1) et en terminant par le texte de présentation d'extrême droite dans la deuxième rangée (Blurb n°10).

Présentation #1

Commençons par notre premier texte de présentation dans la rangée du haut. Ouvrez les paramètres de présentation et mettez à jour les éléments suivants :

Échelle de transformation (axes x et y) : 90 %

Présentation #2

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

Échelle de transformation (axes x et y) : 80 %
Transformer Traduire l'axe X : -10 %

Présentation #3

Échelle de transformation (axes x et y) : 80 %
Transformer Traduire l'axe X : 20 %

Présentation n° 4

Échelle de transformation (axes x et y) : 85 %
Transformer Traduire l'axe X : -30%

Présentation #5

Échelle de transformation (axes x et y) : 60 %

Une fois cela fait, votre première rangée devrait ressembler à ceci.

Continuez à personnaliser les options de transformation pour les textes de présentation 6 à 10, en commençant par le texte de présentation n° 6 à l'extrême gauche de la deuxième rangée.

Présentation #6

Échelle de transformation (axes x et y) : 60 %
Transformer Traduire l'axe X : -40%
Transformer l'axe Y de translation : -20 %

Présentation #7

Échelle de transformation (axes x et y) : 90 %
Transformer Traduire l'axe X : 20 %

Présentation #8

Échelle de transformation (axes x et y) : 70 %
Transformer Traduire l'axe X : -50%

Présentation #9

Échelle de transformation (axes x et y) : 80 %
Transformer l'axe X de translation : -20 %

Présentation #10

Échelle de transformation (axes x et y) : 70 %
Transformer Traduire l'axe X : -60%

Voyons maintenant à quoi ressemble la deuxième rangée lorsqu'elle entre en collision avec notre première rangée dans l'espace 3D.

Pour compléter la conception, nous pouvons ajouter une belle image d'arrière-plan de l'espace 3D à la section. J'utilise l'image d'arrière-plan de la section supérieure fournie avec la mise en page de la page de destination du jeu vidéo que nous avons utilisée pour ce didacticiel.

Conception finale

Voyons maintenant la conception finale de nos modules flottants 3D.

Bureau

Tablette

Téléphone

En raison des 5 textes de présentation qui s'étendent sur la rangée, il est un peu plus difficile d'adapter les 5 textes de présentation sans qu'ils ne s'étendent à l'extérieur de la fenêtre. Pour résoudre ce problème, vous pouvez simplement masquer le texte de présentation éloigné dans chaque rangée du téléphone. Ou vous pouvez donner à chacun de vos textes de présentation une taille plus petite sur le téléphone.

Dernières pensées

J'espère que ce tutoriel vous donnera de l'inspiration pour créer vos propres modules flottants dans l'espace 3D. Il suffit de quelques étapes pour faire pivoter toute votre rangée de modules en 3D à l'aide des options de perspective et de transformation. Après cela, vous pouvez positionner chacun des modules pour les faire flotter où vous le souhaitez.

Amusez-vous à explorer.

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

À votre santé!