Création d'une structure de conception diagonale avec les options de transformation de Divi (téléchargement gratuit !)

Nous cherchons toujours des moyens d'étendre les possibilités de conception que vous avez avec Divi. Et depuis la sortie de la mise à jour des options de transformation, de nombreuses nouvelles techniques sont devenues possibles, sans avoir besoin de connaissances en codage personnalisées.

Dans cet article, nous allons vous montrer comment créer une superbe structure de conception diagonale. Le design que nous allons recréer fonctionne parfaitement pour la section des héros et correspond à tout type de site Web que vous souhaitez configurer. A la fin du tutoriel, vous pourrez également télécharger gratuitement le fichier JSON !

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 créer une nouvelle page ou ouvrez une page existante et ajoutez-y une section régulière. Ouvrez les paramètres de la section et ajoutez-y un arrière-plan dégradé à l'aide des paramètres suivants :

• Couleur 1 : #ffd633
• Couleur 2: #efefef
• Direction du gradient : 217 degrés
• Position de départ : 45 %
• Position finale : 45 %

Espacement

Ensuite, accédez à l'onglet Conception et ajoutez un rembourrage supérieur et inférieur personnalisé.

• Rembourrage supérieur : 4vw
• Rembourrage inférieur : 12vw

Débordement

Nous devons nous assurer que les options de transformation ne dépassent pas le conteneur de section. Pour ce faire, nous allons ajouter une seule ligne de code CSS à l'élément principal de la section.

overflow: hidden;

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant la première ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de la ligne et laissez la ligne occuper toute la largeur de l'écran. Dans la prochaine étape de cet article, nous remplacerons l'espace que nous venons de supprimer en ajoutant des valeurs de remplissage gauche et droite personnalisées à l'aide d'une unité de fenêtre. Cela garantira que la conception reste réactive sur toutes les tailles d'écran.

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

Espacement

Allez-y et ajoutez ensuite des valeurs de remplissage personnalisées aux paramètres d'espacement.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Rembourrage gauche : 25vw (ordinateur de bureau), 16vw (tablette), 7vw (téléphone)
• Rembourrage droit : 25vw (ordinateur de bureau et tablette), 27vw (téléphone)

Affichage

Nous veillons également à ce que les colonnes apparaissent les unes à côté des autres sur des écrans plus petits en ajoutant une seule ligne de code CSS à l'élément principal de la ligne.

display: flex;

Ajouter le module Blurb à la colonne 1

Ajouter un titre

Il est temps de commencer à ajouter des modules ! Ajoutez un module Blurb à la colonne 1 et entrez un titre de votre choix.

Télécharger une illustration

Continuez en téléchargeant une illustration de votre choix. Ceux que nous utiliserons tout au long de ce didacticiel font partie du pack de mise en page du développeur d'applications. Vous pouvez télécharger les illustrations gratuitement en vous rendant sur la publication et en les téléchargeant à la fin.

Fond

Ensuite, ajoutez une couleur de fond entièrement blanche au module Blurb.

• Couleur d'arrière-plan : #ffffff

Paramètres du texte du titre

Passez à l'onglet Conception et modifiez les paramètres du texte du titre en conséquence :

• Police du titre : Poppins
• Poids de la police du titre : semi-gras
• Style de police du titre : majuscule
• Alignement du texte du titre : Centre
• Taille du texte du titre : 0,5 vw (ordinateur de bureau), 1,6 vw (tablette), 2,4 vw (téléphone)
• Espacement des lettres du titre : 1px
• Hauteur de la ligne de titre : 1,6 em

Espacement

Modifiez ensuite les paramètres d'espacement.

• Rembourrage supérieur : 1.3vw (ordinateur de bureau), 4vw (tablette), 6vw (téléphone)
• Rembourrage inférieur : 1.3vw (ordinateur de bureau), 4vw (tablette), 6vw (téléphone)
• Rembourrage gauche : 1vw (ordinateur de bureau), 7vw (tablette et téléphone)
• Rembourrage droit : 1vw (ordinateur de bureau), 7vw (tablette et téléphone)

Frontière

Continuez en ajoutant « 1vw » dans les coins supérieur gauche et supérieur droit du module Blurb.

Boîte ombre

Enfin, ajoutez une ombre de boîte au module en utilisant les paramètres suivants :

• Position verticale de l'ombre de la boîte : 10px
• Force du flou d'ombre de la boîte: 60px
• Couleur de l'ombre : rgba (39,39,52,0,37)

Cloner le module Blurb deux fois et placer les doublons dans les colonnes restantes

Une fois que vous avez personnalisé le module Blurb, vous pouvez le cloner deux fois. Placez les doublons dans les deux colonnes restantes de la ligne.

Changer le doublon #1

Modifier la copie et l'illustration

Modifiez la copie et l'illustration du premier duplicata.

Changer l'espacement

Avec les paramètres d'espacement.

• Marge supérieure : -3vw
• Rembourrage supérieur : 2.7vw (ordinateur de bureau), 8vw (tablette), 11vw (téléphone)
• Rembourrage inférieur : 2.7vw (ordinateur de bureau), 8vw (tablette), 11vw (téléphone)

Changer le doublon #2

Modifier la copie et l'illustration

Modifiez également la copie et l'illustration du deuxième duplicata.

Ajouter la ligne n° 2

Structure des colonnes

Au rang suivant ! Utilisez la structure de colonnes suivante :

Fond dégradé

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez-y un arrière-plan dégradé.

• Couleur 1 : #fff20a
• Couleur 2: #ffb200
• Direction du gradient : 165 degrés

Dimensionnement

Ensuite, allez dans l'onglet Conception et activez l'option « Make This Row Fullwidth ».

• Faire cette ligne en pleine largeur : Oui

Boîte ombre

Enfin, ajoutez une ombre de boîte à la ligne.

• Position verticale de l'ombre de la boîte : 0px
• Force de flou d'ombre de boîte : 100px
• Couleur de l'ombre : rgba(0,0,0,0.39)

Ajouter un module diviseur

Visibilité

Nous n'utilisons cette ligne qu'à des fins de conception, pas pour présenter des modules. Mais pour nous assurer de savoir exactement à quoi ressemble la ligne, nous devrons y ajouter un module de division. Nous ne voulons pas que le module s'affiche, alors assurez-vous que l'option « Afficher le diviseur » est désactivée.

• Afficher le diviseur : Non

Appliquer des options de transformation aux lignes

Rangée #1

Transformer Traduire

Maintenant que nous avons terminé les deux premières rangées, nous allons les transformer pour qu'elles s'intègrent dans la structure de conception diagonale que nous visons à créer. Commencez par ouvrir les paramètres de la première ligne et modifiez les valeurs de conversion de transformation.

• Bas : 30vw
• A droite : 6vw

Transformer Rotation

Ensuite, modifiez la valeur de rotation de la transformation gauche.

• Gauche : 37 degrés

Rangée #2

Échelle de transformation

Continuez en ouvrant le paramètre de la deuxième ligne et modifiez les valeurs d'échelle de transformation.

• Bas : 133 % (ordinateur de bureau), 171 % (tablette), 176 % (téléphone)
• Droite : 133 % (ordinateur de bureau), 171 % (tablette), 176 % (téléphone)

Transformer Traduire

Avec la transformation, traduisez les valeurs.

• En bas : 12vw (ordinateur de bureau), 1vw (tablette), 3vw (téléphone)
• À droite : -2vw (ordinateur de bureau), -6vw (tablette), -4vw (téléphone)

Transformer Rotation

Et faites également pivoter la ligne dans les paramètres de rotation de transformation.

• Gauche : 37 degrés

Ajouter la ligne n° 3

Structure des colonnes

Au prochain et dernier rang ! Vous pouvez utiliser cette ligne et ses colonnes pour partager tout type d'informations que vous souhaitez. Pour recréer le design exact que vous avez vu dans l'aperçu de cet article, sélectionnez la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de la ligne et laissez la ligne occuper toute la largeur de l'écran.

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

Ajouter le module de texte n° 1 à la colonne 1

Ajouter du contenu H1

Il est temps de commencer à ajouter des modules ! Nous commencerons par un module de texte de titre. Saisissez du contenu H1 de votre choix.

Paramètres de texte H1

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

• Police de titre : Poppins
• Taille du texte de l'en-tête : 3vw (ordinateur de bureau), 5vw (tablette), 6vw (téléphone)
• Espacement des lettres d'en-tête : -2px

Espacement

Ajoutez ensuite des valeurs d'espacement personnalisées.

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

Ajouter le module de texte n° 2 à la colonne 1

Ajouter du contenu

Le deuxième module dont nous avons besoin est un autre module de texte. Ajoutez du contenu de votre choix.

Paramètres de texte

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

• Police de texte : Open Sans
• Taille du texte : 0.8vw (ordinateur de bureau), 1.5vw (tablette), 2.2vw (téléphone)
• Hauteur de la ligne de texte : 2,6 em

Espacement

Modifiez également les valeurs d'espacement.

• Marge supérieure : 3vw (téléphone), 5vw (téléphone)
• Marge gauche : 10vw
• Marge droite : 28vw (tablette), 20vw (téléphone)

Ajouter un module de bouton à la colonne 1

Ajouter une copie

Le prochain et dernier module dont nous avons besoin 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 : 0.9vw (ordinateur de bureau), 2.5vw (tablette), 3.5vw (téléphone)
• Couleur du texte du bouton : #000000
• Largeur de la bordure du bouton : 1px
• Couleur de la bordure du bouton : #000000
• Rayon de la bordure du bouton : 1px
• Police des boutons : Poppins
• Poids de la police : léger

Espacement

Enfin et surtout, façonnez votre module en utilisant des valeurs d'espacement personnalisées et le tour est joué !

• Marge supérieure : 2vw (ordinateur de bureau), 5vw (tablette et téléphone)
• Marge gauche : 10vw
• Rembourrage supérieur : 1vw
• Rembourrage inférieur : 1vw
• Rembourrage gauche : 3vw
• Rembourrage droit : 3vw

Téléchargez la section de conception diagonale GRATUITEMENT

Pour mettre la main sur la section gratuite de conception en diagonale, vous devrez d'abord la télécharger à l'aide du 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 !

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 créer une superbe structure de conception diagonale en utilisant uniquement les options intégrées de Divi. Nous espérons que ce tutoriel vous aidera à vous familiariser avec les nouvelles options de transformation Divi. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!