Utilisation des contrôles de transformation de Divi pour créer des dispositions de module Blurb uniques

Les commandes de transformation de Divi facilitent le positionnement et le style des éléments de votre page pour créer des mises en page uniques. Le module de présentation de Divi est l'un des éléments les plus courants pour présenter des éléments sur un site Web. J'ai donc pensé que je montrerais comment utiliser ces effets de transformation en créant quelques mises en page uniques avec le module de présentation. Bien sûr, vous pouvez accomplir un positionnement similaire en utilisant des marges et un rembourrage, mais le processus serait beaucoup plus complexe et moins amusant. De plus, les commandes de transformation vous permettent d'ajouter un style supplémentaire pour mettre à l'échelle et faire pivoter vos textes de présentation pour des conceptions encore plus uniques.

Dans ce tutoriel, je vais vous montrer comment positionner et faire pivoter les textes de présentation de manière créative à l'aide des commandes de transformation de Divi.

Commençons.

Mise en route

Pour ce tutoriel, tout ce dont vous avez vraiment besoin est Divi. Pour configurer les choses, allez-y et créez une nouvelle page. Donnez un titre à votre page et déployez le constructeur Divi sur le front-end pour créer une page à partir de zéro.

Vous êtes maintenant prêt à commencer.

Création de la mise en page Blurb #1

Dans cette première mise en page, nous allons structurer nos textes de présentation en utilisant deux lignes différentes. Ensuite, nous allons utiliser les options Divi Transform pour mettre à l'échelle et positionner les modules de présentation afin de créer une disposition de module de présentation unique.

Créer la première ligne

Pour commencer, créez une section régulière puis ajoutez la disposition de colonne suivante pour la ligne : 1/2 1/6 1/6 1/6

Ajouter et styliser le module de texte

Dans la 1/2 colonne de gauche, ajoutez un module de texte avec le contenu suivant :

<h2>Our Services</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Mettez ensuite à jour les paramètres de conception suivants :

Couleur d'arrière-plan : #ffffff
Largeur : 500px
Marge personnalisée (bureau): -70px à gauche
Marge personnalisée (tablette) : 20 pixels restants
Rembourrage personnalisé : 20 pixels en haut, 20 pixels en bas

Mettre à jour le remplissage de la section

Ensuite, nous devons ajouter du rembourrage à notre section. Ouvrez les paramètres de la section et mettez à jour les éléments suivants :

Rembourrage personnalisé: dessus 20vw

Mettre à jour les paramètres de la première ligne

Ensuite, mettez à jour les paramètres de ligne comme suit :

Largeur de gouttière : 1
Rembourrage personnalisé : 10vw en haut, 0px en bas
Largeur de la bordure : 5 px
Couleur de la bordure : #eeeeee

Ajouter la deuxième rangée

Ajoutez ensuite une autre ligne sous la ligne que vous venez de personnaliser. Donnez-lui une disposition à six colonnes.

Créer et styliser les modules Blurb

Il est maintenant temps de commencer à créer les modules de présentation que nous positionnerons éventuellement à l'aide des commandes de transformation. Ajoutez une colonne de module de présentation 2 de la première ligne (supérieure) que vous avez créée.

Dans les paramètres du texte de présentation, supprimez le contenu et mettez à jour le texte du titre avec le mot « Services ». Cliquez ensuite pour utiliser une icône au lieu d'une image. Pour cet exemple, j'utilise l'icône de nuage.

Mettez à jour le reste des paramètres de présentation comme suit :

Couleur de l'icône : #ffffff
Icône de cercle : OUI
Couleur du cercle : #5e89fb
Police du titre : Nunito
Alignement du texte du titre : Centre
Taille du texte du titre : 16px
Rembourrage personnalisé : 1vw en haut, 1vw en bas, 1vw à gauche, 1vw à droite

Mettez ensuite à jour la marge par défaut sous l'icône de présentation en ajoutant le CSS suivant à la zone CSS de l'image de présentation sous l'onglet avancé :

margin-bottom: 5px

Ensuite, copiez le module de présentation que vous venez de créer et collez-le dans chacune des colonnes en vous assurant d'avoir deux modules de présentation dans la colonne 3 de la rangée supérieure et laissez les colonnes 5 et 6 vides dans la deuxième rangée.

Ajouter des effets de transformation pour mettre à l'échelle et positionner les éléments de présentation

Nous sommes maintenant prêts à utiliser les commandes de transformation pour positionner et mettre à l'échelle les textes de présentation dans un design unique.

Tout d'abord, ouvrez le paramètre de présentation du texte de présentation dans la colonne 2 de la ligne supérieure et mettez à jour les commandes de transformation comme suit :

Axe X de l'échelle de transformation : 242 %
Axe Y de l'échelle de transformation : 242 %

Transformer Traduire l'axe X : -96px
Transformer Traduire l'axe Y : -44px

Ensuite, mettez à jour les paramètres du module Blurb supérieur dans la colonne 3 de la première ligne comme suit :

Axe X de l'échelle de transformation : 192 %
Axe Y de l'échelle de transformation : 192 %

Transformer Traduire l'axe X : -70px
Transformer Traduire l'axe Y : -13px

Ensuite, mettez à jour le module de présentation dans la colonne 4 de la ligne supérieure comme suit :

Axe X de l'échelle de transformation : 158 %
Axe Y de l'échelle de transformation : 158 %

Transformer Traduire l'axe X : 33px
Transformer Traduire l'axe Y : -13px

Ensuite, mettez à jour le module de présentation du bas dans la colonne 3 de la ligne du haut comme suit :

Axe X de l'échelle de transformation : 132 %
Axe Y de l'échelle de transformation : 132 %

Transformer Traduire l'axe X : 89px
Transformer Traduire l'axe Y : 39px

Donnez-lui ensuite la couleur d'arrière-plan suivante pour créer une rupture dans la bordure de la ligne pour un élément de conception subtil :

Couleur d'arrière-plan : #ffffff

C'est ça!

Pour un élément de design supplémentaire, vous pouvez augmenter progressivement l'opacité de la couleur du cercle sur chacune des icônes utilisées tout au long de la mise en page.

Ajustements mobiles

Pour ajuster la disposition du module de présentation pour les écrans de tablette et de téléphone, nous pouvons simplement rétablir les effets de transformation à leur état d'origine afin que les présentations reprennent leur taille d'origine et soient bien positionnées à l'intérieur des colonnes. Pour ce faire, nous pouvons utiliser la fonction de multi-sélection de Divi. Comme il peut être difficile de cliquer sur les modules qui ont été positionnés avec la propriété transform, c'est le bon moment pour activer le mode grille dans les paramètres de votre générateur. Cela vous permettra de voir les modules de présentation dans leur position d'origine. Une fois que vous êtes en mode grille, continuez et maintenez ctrl ou cmd enfoncé, puis cliquez sur chacun des modules qui ont un effet de transformation. Cliquez ensuite sur l'icône d'engrenage de l'un des modules sélectionnés pour ouvrir le modal des paramètres des éléments.

Dans le modal Paramètres des éléments, mettez à jour les éléments suivants :

Axe X de l'échelle de transformation : 100 %
Axe Y de l'échelle de transformation : 100 %

Transformer Traduire l'axe X : 0px
Transformer Traduire l'axe Y : 0px

Cela restaurera la position et l'échelle d'origine des textes de présentation sur les écrans des tablettes et des téléphones.

Résultat final

Voici la conception finale.

Création de la disposition du module Blurb #2

Dans cet exemple suivant, je vais vous montrer une disposition de module de présentation unique à l'aide des options de transformation d'échelle, de traduction et de rotation de Divi. Je vais également ajouter un extrait CSS bonus qui ajoute une perspective à chacun des textes de présentation. Voici comment procéder.

Créer le titre

Tout d'abord, ajoutez une nouvelle section régulière avec une ligne à une colonne. Ajoutez ensuite un module de texte à la ligne avec le contenu suivant :

<h2>Our Process</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Mettez ensuite à jour le reste des paramètres du module de texte comme suit :

Police du titre 2 : Nunito
Titre 2 Poids de la police : semi-gras
Titre 2 Taille du texte : 50px
Espacement des lettres de l'en-tête 2 : 7px
Largeur : 500px

Création de la mise en page Blurb avec une ligne à six colonnes

Cela s'occupe de l'en-tête. Il est maintenant temps d'ajouter la ligne pour notre disposition de module de présentation. Allez-y et créez une nouvelle ligne avec une disposition à six colonnes directement sous la ligne actuelle.

Styliser le module Blurb

Dans la première colonne, ajoutez un nouveau module de présentation et mettez à jour les paramètres comme suit :

Supprimez le corps du texte dans la zone de contenu et mettez à jour le texte du titre avec le mot « étape ».

Cliquez ensuite pour utiliser une icône et choisissez l'icône en forme de cercle.

Donnez au Blurb une couleur d'arrière-plan blanche comme suit :

Couleur d'arrière-plan : #ffffff

Mettez ensuite à jour les paramètres de conception :

Couleur de l'icône : #ffffff
Icône de cercle : OUI
Couleur du cercle : #3d0dad
Police du titre : Nunito
Poids de la police du titre : gras
Style de police du titre : TT
Alignement du texte du titre : Centre
Espacement des lettres du titre : 4px

Ensuite, donnez au texte de présentation une ombre de boîte comme suit :

Box Shadow : voir la capture d'écran
Couleur de l'ombre : rgba(0,0,0,0.12)

Et enfin, ajoutez l'effet de transformation de rotation au module de présentation :

Transformer Rotation Axe X : -3deg
Transformer Rotation Axe Y: -10deg
Transformer Rotation Axe Z: 31deg

Cela prend en charge notre premier module de présentation.

Mettre à jour les paramètres de ligne

Maintenant, avant de commencer à dupliquer notre module de présentation, nous devons mettre à jour les paramètres de ligne comme suit :

Largeur de gouttière : 2
Rembourrage personnalisé : 11vw en haut, 0px en bas

Cela vous aidera à espacer les textes de présentation dans la mise en page.

Dupliquer et styliser le reste de la présentation

Nous sommes maintenant prêts à dupliquer et à personnaliser le reste des textes de présentation. Allez-y et copiez le module de présentation dans la colonne 1 et collez-le dans toutes les colonnes restantes, à l'exception de la dernière colonne (colonne 6). Nous laisserons la colonne 6 vide pour laisser plus d'espace pour les textes de présentation à déplacer vers la droite.

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

Couleur du cercle : #62de9d

Axe X de l'échelle de transformation : 120 %
Axe Y de l'échelle de transformation : 120 %

Transformer l'axe Y de la translation : -10 % (assurez-vous de saisir la valeur en pourcentage ici)

Ensuite, mettez à jour le module de présentation dans la colonne 3 comme suit :

Couleur du cercle : #5e89fb

Axe X de l'échelle de transformation : 140 %
Axe Y de l'échelle de transformation : 140 %

Transformer traduire l'axe Y : -20 %
Transformer Traduire l'axe X : 10 %

Mettez à jour le module de présentation dans la colonne 4 comme suit :

Couleur du cercle : #2a3fc9

Axe X de l'échelle de transformation : 160 %
Axe Y de l'échelle de transformation : 160 %

Transformer traduire l'axe Y : -30%
Transformer traduire l'axe X : 30 %

Et enfin, mettez à jour le module de présentation dans la colonne 5 comme suit :

Couleur du cercle : #62de9d

Axe X de l'échelle de transformation : 180 %
Axe Y de l'échelle de transformation : 180 %

Transformer traduire l'axe Y : -40%
Transformer traduire l'axe X : 55 %

Comme vous pouvez le voir, chacun des textes de présentation augmentera de 20 % de gauche à droite. Et les valeurs de pourcentage de conversion de transformation garantissent que les textes de présentation restent bien alignés.

Puisque la conception déborde dans la dernière colonne (colonne 6), nous la laisserons vide. Mais vous pouvez toujours ajouter un autre texte de présentation dans la colonne 6 si vous augmentez la taille de la ligne.

Ajout de la propriété Perspective à chaque colonne

En CSS, la propriété perspective est utilisée pour donner une perspective à un élément positionné en 3D dans Z-Space. Fondamentalement, il définit à quelle distance l'objet apparaît loin de l'utilisateur lorsqu'il regarde l'écran. La propriété perspective doit être appliquée au conteneur parent de celui qui a la position 3D qui dans ce cas est notre module de présentation. Par conséquent, nous devons ajouter la perspective à chacune des colonnes en utilisant un petit extrait de CSS comme suit.

Ajoutez le CSS suivant à la zone CSS de l'élément principal de la colonne pour chacune des 5 colonnes comme suit :

Colonne 1 Élément principal :

perspective: 1000px

Élément principal de la colonne 2 :

perspective: 1000px

Élément principal de la colonne 3 :

perspective: 1000px

Élément principal de la colonne 4 :

perspective: 1000px

Élément principal de la colonne 5 :

perspective: 1000px

Dans ce cas, le changement est très subtil mais vaut l'effort supplémentaire à mon avis.

Voici la conception de la mise en page du module de présentation sans perspective.

Et le voici avec la perspective en place.

Si vous souhaitez que les textes de présentation apparaissent plus près de l'utilisateur, vous pouvez diminuer la valeur de perspective. Par exemple, voici à quoi ressembleront les textes de présentation avec « perspective : 400px » ajouté à chaque colonne.

Ajout d'un arrière-plan de séparation à la section

Afin de donner l'impression que les textes de présentation se tiennent sur une surface, nous pouvons ajouter un arrière-plan de séparation à la section. Ouvrez les paramètres de la section et mettez à jour les éléments suivants :

Style de séparateur inférieur : voir la capture d'écran
Couleur du séparateur inférieur : #dddddd
Hauteur du diviseur inférieur : 27vw
Répétition horizontale du diviseur inférieur : 0.8x
Bas diviseur Flip: horizontal

Pour ajuster la disposition des écrans de tablette et de téléphone, vous devrez sélectionner plusieurs fois chacun des modules de présentation et mettre à jour les options de transformation suivantes dans les paramètres d'élément pour l'affichage de la tablette :

Axe X de l'échelle de transformation : 100 %
Axe Y de l'échelle de transformation : 100 %

Transformer l'axe Y de la translation : 0 %
Transformer l'axe X de translation : 0 %

Résultat final

Voyons maintenant le résultat final de la mise en page du module de présentation.

Dernières pensées

Avec les commandes de transformation de Divi, vous avez la possibilité de placer vos modules de présentation dans des zones précises de votre page avec une grande facilité. Cela rend amusant d'expérimenter et de créer de nouvelles dispositions de modules de présentation pour présenter des services, des étapes de processus et d'innombrables autres utilisations. J'espère que ce tutoriel vous donnera un peu d'inspiration pour tester vous-même ces techniques de conception.

Pour plus d'inspiration, consultez ces 5 conceptions de modules de présentation créatifs.

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

À votre santé!