Explorer comment créer et animer des formes CSS dans Divi

La création de formes à l'aide de CSS dans la conception Web n'est en aucun cas un nouveau concept. En fait, la méthode classique de création de formes CSS a été largement éclipsée par d'autres solutions graphiques HTML comme Canvas et SVG. Cependant, les formes CSS (au moins les formes de base) sont beaucoup plus faciles à créer et peuvent toujours jouer un rôle important dans la conception de sites Web. De plus, lorsque vous ajoutez une animation de défilement à ces formes, un tout nouvel élément de conception peut apparaître.

Dans ce tutoriel, nous allons explorer comment créer et animer des formes CSS dans Divi. Une fois que vous avez compris le concept de base de la création de quelques formes à l'aide des options intégrées de Divi, vous pouvez animer ces formes pour créer des conceptions d'animation de défilement uniques pour votre site Web. Vous serez surpris de tout ce que vous pouvez faire !

Commençons.

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, 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 de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Explorer comment créer des formes CSS avec animation dans Divi

La structure des lignes et des colonnes

Tout d'abord, ajoutez une ligne de colonne d'un tiers à deux tiers à la section.

Avant de faire quoi que ce soit d'autre, ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : OUI
• Largeur : 95%
• Largeur maximale : 900 pixels

REMARQUE : Ces paramètres sont cruciaux pour la configuration de notre conception. Par exemple, la structure de colonne un tiers deux tiers combinée à une ligne d'une largeur maximale de 900 pixels sans aucune marge (largeur de gouttière 1), nous permet de savoir que la colonne de gauche fera exactement 300 pixels de large. De plus, si je garde mon design contenu dans cette colonne de largeur 300px, je peux également être assuré qu'il aura fière allure sur les tablettes et les appareils mobiles.

Ajout de l'entretoise du module diviseur

Ensuite, ajoutez un séparateur pour créer l'espacement nécessaire pour la colonne qui contiendra nos formes CSS.

À ce stade, vous devez ouvrir la vue modale des calques pour gérer les calques/modules à venir qui se trouvent dans le menu des paramètres de Divi Builder.

Ouvrez les paramètres du diviseur et mettez à jour la hauteur du diviseur comme suit :

• Afficher le diviseur : NON
• Hauteur : 150px

Étant donné que nos formes CSS seront positionnées de manière absolue, l'espacement réel de la zone de la colonne peut facilement être ajusté en ajustant la hauteur du séparateur. Personnellement, j'ai trouvé cela plus facile que d'essayer de manipuler la hauteur ou l'espacement de la colonne. De plus, il vous offre l'avantage supplémentaire de styliser le diviseur en tant qu'élément de conception (ou forme) supplémentaire. Pour le moment, vous pouvez le considérer comme un canevas pour vos futures conceptions CSS Shape.

Création de la première forme CSS à l'aide des options de bordure

Pour créer notre CSS Shape, nous allons utiliser un module diviseur. Techniquement, nous n'utilisons que les bordures qui entourent le module, pas la zone du module. (Vous pouvez donc utiliser d'autres modules, comme des modules de texte ou des modules de code).

Pour créer la CSS Shape, dupliquez le module diviseur déjà créé précédemment.

Retirez ensuite la hauteur et la largeur du module diviseur en réglant chacun sur 0px comme suit :

• Largeur : 0px
• Hauteur : 0px

Pour la première forme, nous allons créer un triangle rectangle qui pointe vers le haut à droite. Pour ce faire, mettez à jour les styles de bordure de séparation comme suit :

• Couleur de la bordure : rgba (245,44,143,0,5)
• Largeur de la bordure supérieure : 150 px
• Largeur de la bordure gauche : 150 px
• Couleur de la bordure gauche : transparente

Remarque : Donner à la couleur de la bordure une semi-transparence aidera à révéler les formes qui se chevauchent pour un élément de conception supplémentaire.

C'est également une bonne idée d'étiqueter ce nouveau séparateur comme « forme 1 » pour une identification facile plus tard.

Parce que nous allons ajouter une animation de défilement aux formes supplémentaires que nous allons créer, il est important de donner à cette forme (et aux formes supplémentaires dans cette colonne) une position absolue afin qu'elles s'empilent les unes sur les autres, par conséquent, aient le même point de départ pour l'animation.

Sous l'onglet Avancé, modifiez la position en absolue et conservez l'emplacement de la position par défaut en haut à droite :

• Position : Absolu
• Emplacement du poste : en haut à droite (par défaut)

REMARQUE : il est important de conserver l'emplacement de la position en haut à droite, car tout autre emplacement qui ajoute un emplacement centré (comme en haut au centre ou centré) entrera en conflit avec les options de transformation que nous ajouterons ultérieurement aux formes CSS.

Félicitations pour la création d'un triangle CSS ! Bien que ce ne soit pas si impressionnant en soi, cela s'améliore. Nous pouvons dupliquer ce triangle pour créer toutes sortes de nouveaux designs une fois que nous les avons déplacés avec une animation.

Création de la forme 2 avec l'animation de défilement

Pour créer la forme suivante (ou le triangle dans ce cas), dupliquez le module de séparation précédent (forme 1) pour ajouter un triangle supérieur droit identique qui se trouve directement sur la forme triangulaire précédente.

Puis nommez-le « forme 2 ».

Ouvrez les paramètres du diviseur « forme 2 » et ajoutez l'effet de transformation rotatif suivant :

• Effets de transformation de défilement : rotation
• Activer la rotation : OUI
• Rotation de départ : 0° (à 30%)
• Rotation moyenne : 45° (à 45 %)
• Rotation finale : 90° (à 60%)

Création de la forme 3 avec l'animation de défilement

Dupliquez le module diviseur "forme 2" et étiquetez le duplicata "forme 3".

Mettez ensuite à jour les paramètres de rotation de la transformation comme suit :

• Rotation moyenne : 90°
• Rotation finale : 180°

Pour créer la forme finale (quatrième), dupliquez le module diviseur de forme 3 et nommez-le « forme 4 ».

Mettez ensuite à jour les paramètres de rotation de la transformation comme suit :

• Rotation moyenne : 180°
• Rotation finale : 270°

À ce stade, vous devriez voir une forme carrée créée par les triangles qui se chevauchent et maintenant pivotés.

Test de l'animation de défilement

Pour tester l'animation de défilement de ces formes, ajoutons des marges temporaires en haut et en bas de la section. Ouvrez les paramètres de la section et mettez à jour les éléments suivants :

• Marge : 80vh haut, 80vh bas

Voici à quoi cela devrait ressembler lorsque vous faites défiler la page de haut en bas.

Avant d'explorer de nouvelles façons de personnaliser ces animations de formes, nous allons compléter notre conception avec un titre fictif dans la colonne de droite. N'hésitez pas à sauter cette étape si vous souhaitez continuer avec les conceptions de formes.

Ajout d'un titre fictif dans la colonne de droite (facultatif)

Pour vous donner une idée de la façon dont vous pouvez utiliser ces conceptions de formes animées sur une page, j'ai pensé que ce serait une bonne idée d'ajouter un titre fictif dans la colonne de droite. Ce serait un excellent exemple de la façon de compléter les titres de vos sections de page avec une animation de conception époustouflante à l'aide de formes CSS.

Colonne CSS personnalisée

Avant d'ajouter le titre, nous pouvons nous assurer que le texte est centré verticalement dans la colonne en utilisant la propriété display flex. Ouvrez les paramètres de la colonne 2 et ajoutez le CSS personnalisé suivant à l'élément principal :

display:flex;
flex-direction:column;
align-items:center;

Une fois la colonne CSS en place, ajoutez un nouveau module de texte à la colonne 2.

Ensuite, ouvrez les paramètres de texte et mettez à jour le contenu du corps avec un en-tête h2 comme suit :

<h2>elegant design</h2>

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Police de la rubrique 2 : Poppins
• En-tête 2 Alignement du texte : par défaut (ordinateur de bureau), central (tablette et téléphone)
• Titre 2 Taille du texte : 55px (ordinateur de bureau), 45px (tablette), 35px (téléphone)
• Largeur : 100 %

Pendant que nous y sommes, allez-y et ajoutez l'effet de "mouvement horizontal" de la transformation de défilement suivant au texte comme suit :

• Effets de transformation de défilement : mouvement horizontal
• Activer le mouvement horizontal : OUI
• Décalage de départ : 2 (à 20 %)
• Milieu de décalage : 1 (à 35 %)
• Décalage de fin : -0,6

Ensuite, ouvrez les onglets réactifs et mettez à jour le décalage de fin comme suit :

• Décalage de fin (tablette et téléphone) : 0

Explorer les animations de la forme du triangle supérieur droit

Poursuivant là où nous nous sommes arrêtés avant d'ajouter notre texte de titre, nous pouvons maintenant explorer les possibilités de conception/animation pour la forme actuelle du triangle supérieur droit.

Un moyen simple de le faire est d'utiliser la sélection multiple pour sélectionner les quatre formes CSS (construites avec des modules de séparation).

Ensuite, ouvrez les paramètres de l'une des formes pour afficher le modal des paramètres d'élément qui mettra à jour la conception des quatre modules à la fois afin que vous puissiez voir les résultats visuellement.

Sélectionnez ensuite l'onglet Conception et ouvrez l'onglet Origine de la transformation. Positionnez le modal de vue des calques et le modal des paramètres des éléments à gauche afin que vous puissiez voir les changements visuellement dans le Divi Builder.

Exploration des animations de conception de forme CSS en triangle ascendant

Maintenant que la configuration est en place, vous pouvez explorer la création de nouvelles formes et voir à quoi elles ressemblent avec les animations de défilement actuelles en place.

Pour cet exemple suivant, nous allons créer une forme CSS de triangle vers le haut (techniquement un triangle isocèle).

Pour ce faire, assurez-vous de multi-sélectionner toutes les formes et de mettre à jour les styles de bordure pour chacune comme suit :

• Largeur de la bordure droite : 100 px
• Couleur de la bordure droite : transparente
• Largeur de la bordure inférieure : 100 px
• Couleur de la bordure inférieure : rgba (245,44,143,0,5)
• Largeur de la bordure gauche : 100 px
• Couleur de la bordure gauche : transparente

Mettez à jour Transform Origin pour explorer de nouvelles conceptions d'animation de défilement

Maintenant que nous avons une nouvelle forme/un nouveau triangle en place, l'animation de rotation qui en résulte sera également différente. Pour explorer les différentes possibilités de conception d'animation de défilement, assurez-vous de conserver les quatre formes en sélectionnant à l'aide de la sélection multiple, puis ajustez l'origine de la transformation pour afficher les résultats.

Exploration des animations de conception de forme CSS Teardrop

À présent, vous devriez comprendre comment fonctionne ce processus. Pour cette prochaine conception, nous allons créer une forme de larme qui peut être réalisée en créant un triangle inférieur droit avec un rayon de bordure.

Pour ce faire, assurez-vous de multi-sélectionner toutes les formes et de mettre à jour les styles de bordure pour chacune comme suit :

• Coins arrondis : 0px en haut à droite, 50 % en haut à droite, 50 % en bas à droite, 50 % en bas à gauche
• Largeur de la bordure inférieure : 150 px
• Couleur de la bordure inférieure : rgba (245,44,143,0,5)
• Largeur de la bordure gauche : 150 px
• Couleur de la bordure gauche : transparente

Ajustez ensuite la valeur d'origine de la transformation pour explorer les conceptions d'animation de défilement pour la larme.

Exploration du secteur (ou de la tranche de pizza) Animations CSS Shape Design

À présent, vous devriez comprendre comment fonctionne ce processus. Pour cette prochaine conception, nous allons créer une forme de secteur qui peut être réalisée en créant un triangle inférieur droit avec un rayon de bordure.

Pour ce faire, assurez-vous de multi-sélectionner toutes les formes et de mettre à jour les styles de bordure pour chacune comme suit :

• Coins arrondis : 0px en haut à droite, 0px en haut à droite, 50 % en bas à droite, 50 % en bas à gauche
• Largeur de la bordure droite : 75 pixels
• Couleur de la bordure droite : transparente
• Largeur de la bordure inférieure : 75 pixels
• Couleur de la bordure inférieure : rgba (245,44,143,0,5)
• Largeur de la bordure gauche : 75 pixels
• Couleur de la bordure gauche : transparente

Ajustez ensuite l'origine de la transformation pour explorer les différentes conceptions d'animation de défilement.

Exploration des animations de conception de forme CSS trapézoïdale

Pour notre conception de forme CSS finale, nous allons créer une forme CSS trapézoïdale qui peut ajouter une largeur supplémentaire à un triangle ascendant (ou isocèle).

Pour ce faire, assurez-vous de multi-sélectionner toutes les formes et de mettre à jour les styles de bordure pour chacune comme suit :

• Coins arrondis : 0px
• Largeur de la bordure droite : 100 px
• Couleur de la bordure droite : transparente
• Largeur de la bordure inférieure : 100 px
• Couleur de la bordure inférieure : rgba (245,44,143,0,5)
• Largeur de la bordure gauche : 100 px
• Couleur de la bordure gauche : transparente

Mettez ensuite à jour la largeur des formes/modules comme suit :

• Largeur : 100 pixels

Une fois la forme trapézoïdale en place, vous pouvez à nouveau utiliser la mise à jour de l'origine de la transformation pour chacun afin d'explorer les nouvelles conceptions d'animation de défilement.

Résultats finaux

Jetons un dernier coup d'œil à quelques-unes de mes conceptions préférées qui sont possibles à l'aide de ce didacticiel.

Dernières pensées

Explorer comment créer et animer des formes CSS dans Divi peut être un excellent moyen de faire jaillir ces jus créatifs tout en élargissant votre perspective de la puissance des capacités de conception intégrées de Divi. L'astuce consiste à comprendre comment utiliser les bordures pour créer différentes formes. Ensuite, vous pouvez ajouter une animation de défilement à ces formes. Mais n'oubliez pas la puissance de l'origine de la transformation, qui modifie la façon dont ces animations positionnent chaque forme. C'est, bien sûr, la pointe de l'iceberg lorsque vous pensez à toutes les différentes formes et animations que vous pouvez combiner pour créer des designs créatifs sans fin pour votre site Web.

Espérons que cela vous donnera quelques idées sur la façon d'ajouter l'animation CSS Shape parfaite à votre propre site.

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

À votre santé!