Utiliser des modules de division pour créer des formes d'arrière-plan avec les options de transformation de Divi

Chaque semaine, nous vous proposons de nouveaux packs de mise en page Divi gratuits que vous pouvez utiliser pour votre prochain projet. Pour l'un des packs de mise en page, nous partageons également un cas d'utilisation qui vous aidera à faire passer votre site Web au niveau supérieur.

Cette semaine, dans le cadre de notre initiative de conception Divi en cours, nous allons vous montrer comment utiliser les modules Divider pour créer des formes d'arrière-plan avec les options de transformation de Divi et le pack de mise en page Paralegal. Les modules de séparation sont très polyvalents et peuvent vraiment améliorer la conception globale de vos pages. Bien que nous recréions des exemples qui correspondent spécifiquement au pack de mise en page Paralegal, vous pouvez utiliser cette technique pour tout type de site Web que vous créez avec Divi.

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.

Bureau

Mobile

Créer une nouvelle page à l'aide de la page de destination du pack de mise en page Paralegal

Créez une nouvelle page et téléchargez-y la page de destination du Paralegal Layout Pack.

Recréer l'exemple #1

Débordement de section

Commençons à créer le premier exemple ! Allez-y et ouvrez les paramètres de la section héros et accédez à l'onglet conception. Ici, nous voulons nous assurer que rien ne dépasse le conteneur de section. Pour ce faire, nous allons ajouter une seule ligne de code CSS à l'élément principal.

overflow: hidden;

Ajouter le module diviseur à la colonne 2

Visibilité

Ensuite, allez-y et ajoutez un module diviseur à la deuxième colonne de la section de spécialité. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Couleur de l'arrière plan

Nous allons utiliser une couleur de la palette de couleurs du pack de mise en page comme couleur d'arrière-plan pour le séparateur.

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

Couleur

Ensuite, nous irons dans l'onglet Conception et modifierons également la couleur du séparateur.

• Couleur : #f3f1f2

modes

Passez aux paramètres de styles et modifiez le style de séparation.

• Style de diviseur : pointillé

Dimensionnement

Jouez également avec les paramètres de taille. Vous pouvez donner à ce module diviseur l'apparence que vous voulez, mais si vous voulez qu'il ressemble exactement à la façon dont il a été affiché dans l'aperçu de cet article, utilisez les paramètres suivants :

• Poids du diviseur : 4px
• Hauteur : 0px

Espacement

Maintenant, nous allons modifier la position et la taille du module de division en utilisant des valeurs de marge et de remplissage personnalisées. Assurez-vous de modifier les valeurs en fonction des différentes tailles d'écran afin que tout reste réactif.

• Marge supérieure : -30vw (ordinateur de bureau), -100vw (tablette et téléphone)
• Marge gauche : -100vw (ordinateur de bureau), -138vw (tablette), -300vw (téléphone)
• Rembourrage supérieur : 0px
• Rembourrage inférieur : 1.3vw (ordinateur de bureau), 2.2vw (tablette), 3vw (téléphone)

Transformer

Échelle de transformation

Il est temps de transformer le module ! La première chose que nous allons faire dans les paramètres de transformation est d'augmenter la taille du diviseur en ajoutant les valeurs d'échelle de transformation suivantes :

• Bas : 153%
• À droite : 500 %

Transformer Rotation

Nous allons également faire pivoter le module de division dans les paramètres de rotation de transformation. Comme vous pouvez le remarquer, le module Divider ne dépasse pas la section grâce à cette ligne de code CSS que nous avons ajoutée au début de ce didacticiel.

• Gauche : 348 degrés

Recréer l'exemple #2

Débordement de section

Passons à l'exemple suivant ! Encore une fois, nous voulons nous assurer que rien ne surpasse le conteneur de section en ajoutant une seule ligne de code CSS à l'élément principal de la section.

overflow: hidden;

Ajouter une nouvelle ligne à la fin de la section

Structure des colonnes

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

Espacement

Pour réduire la taille occupée par la ligne, nous allons supprimer le rembourrage supérieur et inférieur par défaut dans les paramètres d'espacement.

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

Ajouter un module diviseur

Visibilité

Il est temps d'ajouter et de styliser le module diviseur ! Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Couleur de l'arrière plan

Nous utilisons, encore une fois, l'une des couleurs de la palette de couleurs du pack de mise en page comme couleur d'arrière-plan.

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

Couleur

Passez à l'onglet Conception et modifiez également la couleur du séparateur.

• Couleur : #f3f1f2

Dimensionnement

Nous jouons également avec les paramètres de dimensionnement.

• Poids du diviseur : 10px
• Hauteur : 0px

Espacement

Et nous allons créer la forme exacte que nous voulons en utilisant un rembourrage personnalisé que nous modifierons sur différentes tailles d'écran.

• Rembourrage supérieur : 2vw
• Rembourrage inférieur : 2.5vw (ordinateur de bureau), 3vw (tablette), 3.9vw (téléphone)

Transformer

Échelle de transformation

Il est temps de se transformer ! La première chose que nous allons faire est de mettre à l'échelle le module diviseur. Nous faisons cela pour nous assurer qu'il n'y a pas d'espace au début ou à la fin de la section. Ne vous inquiétez pas de trop mettre à l'échelle votre module de division, tout ce qui dépasse la section n'apparaîtra pas dans votre conception.

• Bas : 153%
• Droite : 153 % (ordinateur de bureau), 250 % (tablette), 500 % (téléphone)

Transformer Traduire

Ensuite, nous allons également modifier la position du module diviseur pour qu'il apparaisse sur le côté droit. Assurez-vous de faire correspondre ces valeurs aux différentes tailles d'écran.

• En bas : 25vw (ordinateur de bureau), 27vw (tablette et téléphone)
• À droite : 0px (ordinateur de bureau), -32vw (tablette et téléphone)

Transformer Rotation

Enfin, nous allons transformer le diviseur horizontal en un diviseur vertical en jouant avec les paramètres de rotation de transformation.

• Gauche : 270 degrés

Recréer l'exemple #3

Débordement de section

Passons au prochain et dernier exemple ! Encore une fois, assurez-vous que rien ne dépasse le conteneur de section en ajoutant une seule ligne de code CSS à l'élément principal de la section.

overflow: hidden;

Ajouter une nouvelle ligne au début de la section

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en haut de la section. Il est important que la ligne soit placée en haut afin qu'elle ne chevauche pas le contenu en dessous plus tard dans le didacticiel.

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et laissez la colonne 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 un module diviseur

Visibilité

Ajoutez ensuite votre module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Couleur de l'arrière plan

Passez aux paramètres d'arrière-plan et ajoutez une couleur d'arrière-plan de votre choix.

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

Couleur

Modifiez également la couleur du séparateur.

• Couleur : #f3f1f2

modes

Et modifiez le style de séparation dans les paramètres de styles.

• Style de diviseur : pointillé

Dimensionnement

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

• Poids du diviseur : 4px
• Hauteur : 0px

Espacement

Et créez la forme que vous souhaitez en utilisant des rembourrages supérieur et inférieur dans les paramètres d'espacement.

• Rembourrage supérieur : 3vw
• Rembourrage inférieur : 3vw

Boîte ombre

Nous ajouterons également de la profondeur à notre page en donnant au séparateur une ombre de boîte subtile.

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

Transformer

Échelle de transformation

Maintenant que nous avons stylisé le diviseur, nous pouvons commencer à le transformer. La première chose que nous allons faire est d'augmenter la taille du module de division dans les paramètres d'échelle de transformation.

• Bas : 140%
• Droite : 140%

Transformer Traduire

Ensuite, nous allons passer aux paramètres de traduction de transformation et modifier la position du module de division. Placer la rangée en haut de la section nous aide à maintenir un z-index plus bas que la rangée qui vient en dessous, ce qui crée ce beau chevauchement !

• Bas : 4vw
• À droite : 16vw (ordinateur de bureau), 26vw (tablette), 35vw (téléphone)

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.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment utiliser le module Divider et les nouvelles options de transformation de Divi pour créer des formes d'arrière-plan et améliorer l'apparence générale de vos pages. Ce tutoriel fait partie de notre initiative de conception Divi en cours, où nous essayons de mettre quelque chose de plus dans votre boîte à outils de conception chaque semaine. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!