Comment utiliser les options de transformation pour concevoir des arrière-plans de séparation de section uniques dans Divi

Les styles de séparation de section intégrés à Divi ont toujours été un moyen populaire (et simple) d'ajouter des motifs d'arrière-plan créatifs à vos pages. Non seulement il fournit un moyen rapide et beau de diviser le contenu de la page, mais il peut également ajouter une texture d'arrière-plan abstraite pour différencier votre site Web. Et avec la sortie des options de transformation de Divi, il y a encore plus de choses intéressantes que vous pouvez faire avec ces diviseurs de section.

Dans ce tutoriel, je vais vous montrer comment utiliser les options de transformation pour concevoir des arrière-plans de séparation de section uniques dans Divi.

Commençons.

Aperçu

Voici un aperçu des designs que vous pourrez construire dans ce tutoriel.

Téléchargez GRATUITEMENT la mise en page des exemples d'arrière-plan du diviseur de section

Pour mettre la main sur ces exemples d'arrière-plans de séparation de section, 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 maintenant au tutoriel, voulez-vous ?

Commencer

Pour commencer avec ce tutoriel, tout ce dont vous avez besoin est le thème Divi et une image à utiliser pour l'exemple de contenu. Nous allons construire la conception à partir de zéro. Tout ce que vous avez à faire est de créer une nouvelle page et de déployer le constructeur Divi sur le front-end. Ensuite, vous êtes prêt à partir.

Création d'arrière-plans de formes abstraites avec des diviseurs de section

Ce premier exemple est un moyen vraiment sympa de créer des arrière-plans de formes abstraites pour votre contenu. Fondamentalement, cela implique de personnaliser une section vide avec un séparateur et de positionner ce séparateur de section n'importe où sur la page derrière un autre contenu.

Voici comment procéder.

Création de la section de contenu

Avant de commencer à ajouter nos diviseurs de section à notre page, ajoutons d'abord quelques exemples de contenu. Créez une nouvelle section régulière avec une ligne à deux colonnes.

Ajouter le module de texte

Ajoutez ensuite un module de texte à la colonne 1 avec le contenu fictif suivant :

<h2>About Divi Meetups</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>

Ensuite, mettez à jour la conception comme suit :

Taille du texte du texte : 16px
Hauteur de la ligne de texte : 1,9 em
Police de titre 2 : Roboto
Titre 2 Épaisseur de la police : Léger
Titre 2 Taille du texte : 50px (ordinateur de bureau), 40px (tablette), 32px (téléphone)
En-tête 2 Hauteur de ligne : 1.4em

Ajouter le module d'images

Ajoutez ensuite un module d'image à la colonne 2 et téléchargez l'image que vous souhaitez afficher. Dans cet exemple, j'utilise une image de l'un de nos packs de mise en page de 800 px sur 1156 px.

Réglez ensuite la largeur et l'alignement de l'image comme suit :

Largeur : 80 % (ordinateur de bureau), 70 % (tablette)
Alignement du module : à gauche

Ajouter un remplissage à la colonne 1

Avec notre texte et notre image en place, nous devons ajouter un rembourrage supérieur à la colonne 1 pour faire descendre notre module de texte. Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Remplissage personnalisé de la colonne 1 (bureau) : 250 pixels en haut
Remplissage personnalisé de la colonne 1 (tablette) : 50 pixels en haut

Ajout d'une section supérieure avec un diviseur de section

À ce stade, nous sommes prêts à ajouter notre première conception de diviseur de section. Pour ce faire, nous devons créer une nouvelle section. Alors allez-y et créez une nouvelle section régulière (n'ajoutez pas de colonne à la section car nous n'en aurons pas besoin) et faites-la glisser au-dessus de la section contenant notre texte et notre image.

Donnez ensuite la section et l'arrière-plan transparent et un séparateur supérieur en mettant à jour les éléments suivants :

Couleur d'arrière-plan : rgba(0,0,0,0)
Style de séparateur supérieur : voir capture d'écran
Couleur du diviseur : rgba (120 168 193 0,45)
Hauteur du séparateur : 500 px (ordinateur de bureau), 400 px (tablette), 300 px (téléphone)

Ensuite, accédez à l'onglet avancé et définissez la valeur de l'index Z sur 1 afin qu'il reste au-dessus de la section en dessous.

Mettez ensuite à jour la taille et l'espacement de la section comme suit :

Largeur : 500px (ordinateur de bureau), 400px (tablette), 320px (téléphone)
Alignement de la section : Centre
Marge personnalisée : -100px
Rembourrage personnalisé : 100 pixels en haut, 100 pixels en bas

Notez que la largeur est égale à la hauteur du séparateur que nous avons ajouté précédemment (500px pour le bureau, 400px pour la tablette et 320px pour le téléphone). Cela nous donnera un design parfaitement carré pour notre diviseur de section. Il est également important de réduire la largeur et la hauteur du séparateur pour s'adapter à la tablette et au téléphone, car si vous ne le faites pas, la section inclinera et cassera le design ou provoquera un débordement dans la fenêtre du navigateur.

Le rembourrage personnalisé est juste pour donner à la section une certaine hauteur afin que nous n'ayons pas à ajuster les valeurs de conversion de transformation autant plus tard.

Maintenant que notre conception de section est en place, nous pouvons utiliser les options de transformation pour positionner et faire pivoter le séparateur de section où nous le voulons sur la page.

Mettez à jour les éléments suivants :

Transformer traduire l'axe X (bureau) : -100 %
Transformer l'axe Y de translation (ordinateur de bureau) : 200 %

Transformer traduire l'axe X (tablette) : -50%
Transformer traduire l'axe Y (bureau) : 100 %

Transformer l'axe Z de rotation : -45 deg

Section copier et coller

Nous allons ajouter un autre design de diviseur de section à la page. Mais pour prendre une longueur d'avance sur la conception, déployez le mode d'affichage filaire et copiez la section supérieure (avec le style de séparation de section) et collez-la sous la section contenant le texte et l'image.

Mettre à jour les paramètres de la section

Mettez ensuite à jour la marge personnalisée comme suit :

Marge personnalisée : -100px en bas

Ensuite, nous pouvons réduire la taille de la section en utilisant l'option d'échelle de transformation comme suit :

Échelle de transformation (axes X et Y) : 50 %

En utilisant transform translate, nous pouvons déplacer la section vers le haut et vers la droite comme suit :

Transformer traduire l'axe X (bureau) : -20 %
Transformer l'axe Y de translation (bureau) : -100 %

Transformer Translater l'axe X (tablette) : 80 %

Transformer Translater l'axe X (tablette) : 30 %

Faites maintenant pivoter la section comme suit :

Transformer Rotation Axe Z (bureau): 225deg

Transformer Rotation Axe Z (tablette): -225deg

Résultat final

Voyons le résultat final. Remarquez comment les sections sont repositionnées sur tablette et téléphone pour un beau design.

Et voici quelques exemples de différents styles de diviseurs utilisant la même mise en page. N'hésitez pas à expérimenter avec différents styles et rotations.

Création de séparateurs de section horizontaux

Les options de transformation de Divi nous permettent également de faire pivoter les diviseurs de section pour créer des conceptions de diviseur de section horizontale. Cela peut fournir un arrière-plan unique pour le contenu de votre page.

Voici comment procéder.

Dupliquer la section avec du contenu fictif

Pour cet exemple, nous pouvons utiliser la même section de contenu que nous avons créée pour le premier exemple ci-dessus. Allez-y et copiez et collez la section au bas de la page.

Mettre à jour la section de contenu

Ensuite, ouvrez les paramètres de section pour la section dupliquée et mettez à jour les éléments suivants :

Rembourrage personnalisé (bureau): 80px en haut, 80px en bas
Rembourrage personnalisé (tablette) : 0px haut

Création du diviseur de section horizontale

Pour créer le diviseur de section horizontale, créez d'abord une nouvelle section régulière directement au-dessus de la section de contenu.

Ensuite, mettez à jour les éléments suivants :

Couleur d'arrière-plan : rgba(0,0,0,0)
Style de séparateur supérieur : voir capture d'écran
Couleur du séparateur supérieur : rgba (120 168 193 0,45)
Hauteur du diviseur supérieur : 80vw
Haut diviseur Flip: vertical

Pour nous assurer que nous pouvons voir le diviseur de section au-dessus de la section en dessous, nous devons mettre à jour l'index Z à 1.

Ensuite, nous devons donner à notre section une largeur et un espacement personnalisés comme suit :

Largeur : 800px
Alignement de la section : à gauche
Marge personnalisée : -100px en haut
Rembourrage personnalisé : 100 pixels en haut, 100 pixels en bas

La largeur de la section (800px) deviendra la hauteur de la section une fois qu'elle pivotera pour servir de diviseur de section horizontal. Vous devrez donc peut-être ajuster cette hauteur en fonction de la quantité de contenu que vous avez dans la section en dessous.

Nous sommes maintenant prêts à positionner et faire pivoter la section à l'aide des options de transformation comme suit :

Transformer traduire l'axe X : -50%
Transformer l'axe Y de translation : 250 %

Transformer Rotation Axe Z : -90 degrés

Résultat final

Voici le résultat final de la conception.

Et voici quelques autres exemples de styles de séparateurs différents utilisant la même disposition.

Emballer

Il y a toujours de la place pour plus d'idées sur la façon d'ajouter un design unique à votre site Web. Avec les options de transformation de Divi et les diviseurs de section faciles à concevoir, vous pouvez faire des choses assez créatives. Espérons que les exemples de ce didacticiel vous inspireront pour créer des arrière-plans de séparation de section pour apporter une nouvelle touche à votre prochain projet.

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

À votre santé!