Comment empiler magnifiquement les éléments du portefeuille avec les options de transformation de Divi

Les nouvelles options de transformation Divi ont ouvert une tonne de nouvelles portes vers la création d'une conception Web visuellement attrayante. Cela nous rapproche un peu plus du fait de ne pas avoir besoin de logiciel de retouche d'image lors de la conception d'un site Web à partir de zéro. Nous pouvons le transformer pour qu'il ressemble exactement à ce que nous voulons tout en ayant un design 100% réactif.

Dans cet article, nous allons utiliser les nouvelles options de transformation pour empiler magnifiquement les éléments du portefeuille. C'est une excellente approche pour présenter des sites Web précédemment créés, par exemple. Nous veillerons également à ce que les images restent là où elles se trouvent, quelle que soit la taille d'écran utilisée par les visiteurs. Nous espérons que ce tutoriel vous inspirera à faire preuve de créativité avec les nouvelles options de transformation de Divi lors de la personnalisation d'un site Web selon vos besoins.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Commençons à recréer !

Ajouter une nouvelle section

Fond dégradé

Commencez par ajouter une nouvelle section à votre page. Ouvrez les paramètres de la section et ajoutez-y un arrière-plan dégradé.

• Couleur 1 : #f4f4f4
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 30 %
• Position finale : 30 %

Espacement

Ensuite, accédez à l'onglet Conception et modifiez les valeurs de remplissage personnalisées dans les paramètres d'espacement.

• Rembourrage supérieur : 0px (ordinateur de bureau), 18vw (tablette), 40vw (téléphone)
• Rembourrage inférieur : 0px (ordinateur de bureau), 18vw (tablette), 40vw (téléphone)

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui

Espacement

Ensuite, accédez aux paramètres d'espacement et supprimez le rembourrage par défaut supérieur et inférieur.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Affichage

Nous veillons également à ce que les deux colonnes apparaissent l'une à côté de l'autre sur des écrans plus petits. Pour ce faire, nous devrons ajouter une seule ligne de code CSS à l'élément principal de la ligne.

display: flex;

Ajouter le module d'image n° 1 à la colonne 1

Télécharger une image

Nous pouvons maintenant commencer à ajouter les différents modules ! Pour pouvoir suivre ce tutoriel, allez-y et enregistrez l'écran d'impression suivant sur votre ordinateur :

Téléchargez l'écran d'impression vers un module d'image dans la première colonne.

Dimensionnement

Ensuite, allez dans l'onglet conception et activez l'option « Forcer la pleine largeur ». Une fois cela fait, l'image occupera toute la largeur de la colonne.

• Forcer la pleine largeur : Oui

Espacement

Pour réduire la taille de l'image, nous allons ajouter des marges gauche et droite personnalisées. Vous remarquerez que nous utilisons une unité de fenêtre d'affichage pour nous assurer que la taille de l'image reste intacte, quelle que soit la taille de l'écran.

• Marge supérieure : -10vw
• Rembourrage gauche : 11vw
• Rembourrage droit : 11vw

Frontière

Ajoutez ensuite « 2vw » à chacun des coins dans les paramètres de bordure.

Boîte ombre

Avec une ombre de boîte.

• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Transformer Traduire

Maintenant, nous pouvons commencer à transformer l'image ! Ajoutez les valeurs suivantes à l'onglet de traduction de transformation des options de transformation :

• Bas : -26vw
• Droite : -2vw

Les valeurs que vous ajoutez ici dépendent de la largeur et de la hauteur de votre image, donc si vous utilisez une image différente, vous devrez modifier les valeurs en conséquence. Assurez-vous que vous utilisez des unités de fenêtre pour vous assurer que la position de l'image reste la même pour toutes les tailles d'écran.

Transformer Rotation

Passez à l'onglet Transformer la rotation et faites pivoter l'image en conséquence :

• Gauche : 24 degrés
• Centre : 46 degrés
• Droite : -7 degrés

Traduire l'inclinaison

Enfin, activez le décalage de traduction avec les valeurs suivantes :

• Bas : -4 degrés
• Droite : 24 degrés

Ajouter le module image #2 à la colonne 1

Télécharger une image

Passons au prochain module d'images ! Enregistrez l'écran d'impression suivant sur votre ordinateur ou utilisez un autre écran d'impression de votre choix :

Continuez en téléchargeant l'écran d'impression sur le deuxième module image de la colonne 1.

Dimensionnement

Ensuite, accédez aux paramètres de dimensionnement et activez l'option "Forcer la pleine largeur".

• Forcer la pleine largeur : Oui

Espacement

Nous réduisons la taille de l'image et la faisons chevaucher avec l'image précédente en utilisant des valeurs de marge personnalisées dans les paramètres d'espacement.

• Marge supérieure : -81vw (ordinateur de bureau), -50vw (tablette et téléphone)
• Marge gauche : 11vw
• Marge droite : 11vw

Frontière

Nous ajouterons ensuite « 2vw » à chacun des coins dans les paramètres de bordure.

Boîte ombre

Et nous ajouterons également une ombre de boîte. Remarquez comment nous utilisons une ombre de boîte plus sombre pour la deuxième image d'élément de portefeuille. Cela vous aidera à créer plus de profondeur entre les éléments du portefeuille.

• Force de flou d'ombre de boîte : 150px
• Couleur de l'ombre : rgba(0,0,0,0.6)

Transformer Traduire

Ensuite, accédez aux paramètres de transformation et modifiez les valeurs de traduction de transformation :

• Bas : -8vw
• À droite : 0px

Encore une fois, ces valeurs dépendent vraiment de la façon dont vous souhaitez positionner l'écran d'impression et des dimensions de votre écran d'impression. Plus l'image est petite, plus vous devrez la pousser vers la gauche en utilisant une valeur négative plus grande.

Transformer Rotation

Passez à l'onglet de rotation de transformation et jouez avec les trois valeurs.

• Gauche : 24 degrés
• Centre : 46 degrés
• Droite : -7 degrés

Traduire l'inclinaison

Enfin, modifiez les valeurs de décalage de traduction :

• Bas : -4 degrés
• Droite : 24 degrés

Ajouter le module d'image n° 3 à la colonne 1

Télécharger une image

Passons au prochain et dernier module image dont nous avons besoin dans la colonne 1. Enregistrez l'écran d'impression suivant sur votre ordinateur ou utilisez tout autre écran d'impression de votre choix :

Ajoutez l'écran d'impression que vous avez enregistré dans un nouveau module image.

Dimensionnement

Ensuite, accédez aux paramètres de dimensionnement et activez l'option "Forcer la pleine largeur".

• Forcer la pleine largeur : Oui

Espacement

Accédez ensuite aux paramètres d'espacement et modifiez les valeurs de marge en conséquence :

• Marge supérieure : -107vw
• Marge gauche : 19vw
• Marge droite : 19vw

Frontière

Continuez en ajoutant « 2vw » à chacun des coins du module Image.

Boîte ombre

Ajoutez ensuite une ombre de boîte. Encore une fois, nous utilisons une couleur d'ombre plus forte que celles que nous avons utilisées pour les deux modules d'image précédents.

• Force de flou d'ombre de boîte : 200px
• Couleur de l'ombre : rgba(0,0,0,0.82)

Transformer Traduire

Ensuite, accédez aux paramètres de transformation et modifiez les valeurs de traduction de transformation :

• Bas : -42vw
• À droite : 11vw

Transformer Rotation

Passez à l'onglet Transformer la rotation et apportez-y également quelques modifications.

• Gauche : 24 degrés
• Centre : 46 degrés
• Droite : -7 degrés

Traduire l'inclinaison

Enfin, modifiez les valeurs de décalage de traduction.

• Bas : -4 degrés
• Droite : 24 degrés

Ajouter un module de texte de titre à la colonne 2

Ajouter une copie H2

Passons à la deuxième colonne ! Ajoutez un module de texte avec du contenu H2 de votre choix.

Paramètres de texte H2

Accédez ensuite aux paramètres de texte H2 et apportez quelques modifications.

• Police de titre 2 : Roboto
• Titre 2 Poids de la police : fin
• En-tête 2 Alignement du texte : à gauche
• Titre 2 Couleur du texte : #000000
• Titre 2 Taille du texte : 5vw (ordinateur de bureau), 6vw (tablette), 7vw (téléphone)
• Espacement des lettres de l'en-tête 2 : -1px

Espacement

Continuez en ajoutant des valeurs de marge personnalisées dans les paramètres d'espacement.

• Marge supérieure : 35vw (ordinateur de bureau), 10vw (tablette), 0vw (téléphone)
• Marge gauche : -4vw
• Marge droite : 4vw

Ajouter le module diviseur à la colonne 2

Visibilité

Le prochain module dont nous avons besoin dans la colonne 2 est un module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Couleur

Ensuite, allez dans l'onglet conception et changez la couleur du séparateur.

• Couleur : #8193fa

Dimensionnement

Modifiez également les paramètres de dimensionnement.

• Poids du diviseur : 8px
• Largeur : 28%

Espacement

Et ajoutez des valeurs de marge personnalisées.

• Marge supérieure : 1vw
• Marge gauche : -4vw
• Marge droite : 4vw

Ajouter le module de texte de description à la colonne 2

Ajouter du contenu

Le prochain module dont nous avons besoin dans la colonne 2 est un autre module de texte. Ajoutez du contenu de paragraphe de votre choix.

Paramètres de texte

Ensuite, allez dans les paramètres de texte et apportez quelques modifications.

• Police de texte : Open Sans
• Taille du texte : 0.6vw (ordinateur de bureau), 1.2vw (tablette), 1.8vw (téléphone)
• Hauteur de la ligne de texte : 3,1 em (ordinateur de bureau), 2,7 em (tablette), 2,6 em (téléphone)
• Orientation du texte : à gauche

Espacement

Ajoutez ensuite des valeurs de marge personnalisées.

• Marge supérieure : 1vw
• Marge gauche : -4vw
• Marge droite : 4vw

Ajouter un module de bouton à la colonne 2

Ajouter une copie

Le prochain et dernier module dont nous avons besoin pour terminer la conception est un module de bouton. Ajoutez une copie de votre choix.

Paramètres des boutons

Ensuite, allez dans l'onglet conception et modifiez les paramètres du bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Couleur 1 : #5627ba
• Couleur 2: #8fb5fc
• Direction du gradient : 122 deg
• Largeur de la bordure du bouton : 0px
• Poids de la police : Ultra gras
• Style de police : majuscule

Espacement

Modifiez également les valeurs de marge et de remplissage personnalisées.

• Marge supérieure : 2vw (ordinateur de bureau), 3vw (tablette), 5vw (téléphone)
• Marge inférieure : 6vw (tablette), 8vw (téléphone)
• Marge gauche : -4vw
• Marge droite : 4vw
• Rembourrage supérieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage inférieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage gauche : 3vw (ordinateur de bureau), 5vw (tablette), 7vw (téléphone)
• Rembourrage droit : 3vw (ordinateur de bureau), 5vw (tablette), 7vw (téléphone)

Boîte ombre

Enfin, ajoutez une subtile ombre à paupières et le tour est joué !

• Force du flou d'ombre de la boîte: 40px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Dernières pensées

Dans cet article, nous vous avons montré comment faire preuve de créativité avec les nouvelles options de transformation de Divi. Plus précisément, nous avons empilé des éléments de portefeuille pour créer un design agréable et visuellement attrayant. Nous avons également veillé à ce que les images soient superbes sur toutes les tailles d'écran. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!