Comment ajouter une animation SVG de chemin de texte en cercle à votre conception Divi

Publié: 2021-07-07

Se tenir au courant des tendances dans l'espace de conception de sites Web est l'un des meilleurs moyens de rester à jour en tant que concepteur de sites Web. Il vous permet de créer des sites Web modernes qui impressionneront vos clients et vous aideront à faire passer vos compétences au niveau supérieur. Dans le tutoriel d'aujourd'hui, nous allons vous montrer comment vous familiariser avec une tendance que vous voyez souvent de nos jours dans les sites Web avancés ; animations SVG de texte de cercle. Nous vous montrerons comment les ajouter dans la conception de votre page Divi, et même les utiliser comme bouton également. Vous pourrez également télécharger le fichier JSON gratuitement !

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

animation svg cercle texte

Mobile

animation svg cercle texte

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur la mise en page gratuite, 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.

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 !

Créer un design de héros

Ajouter une nouvelle section

Couleur de l'arrière plan

Commençons par créer le design du héros. Ouvrez une page nouvelle ou existante avec Divi et ajoutez-y une nouvelle section régulière. Ouvrez les paramètres de la section et appliquez une couleur d'arrière-plan de votre choix.

Couleur d'arrière-plan : #f3eee8

animation svg cercle texte

Espacement

Passez ensuite aux paramètres d'espacement et modifiez les valeurs de remplissage supérieur et inférieur.

Rembourrage supérieur : 30px
Rembourrage inférieur : 30px

animation svg cercle texte

Ajouter une nouvelle ligne

Structure des colonnes

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

animation svg cercle texte

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne, accédez à l'onglet Conception, ouvrez les paramètres de dimensionnement et effectuez les ajustements suivants :

Largeur : 95%
Largeur maximale : 2580px

animation svg cercle texte

Paramètres de la colonne 1

Une fois les paramètres de ligne généraux en place, vous pouvez ouvrir les paramètres de la première colonne.

animation svg cercle texte

Image de fond

Dans les paramètres d'arrière-plan, téléchargez une image d'arrière-plan de votre choix. Cette image apparaîtra sous l'animation SVG du texte du cercle plus loin dans le didacticiel.

Taille de l'image d'arrière-plan : couverture
Position de l'image d'arrière-plan : Centre
Répétition de l'image d'arrière-plan : aucune répétition

animation svg cercle texte

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

Ajouter du contenu H1

Il est temps d'ajouter des modules, en commençant par un premier module de texte dans la colonne 2. Ajoutez du contenu H1 de votre choix si vous utilisez cette section comme héros, ou du contenu H2 si vous l'utilisez ailleurs sur votre page.

animation svg cercle texte

Paramètres de texte H1

Stylisez ensuite les paramètres de texte d'en-tête de ce module.

Police de titre : Affichage Playfair
Couleur du texte du titre : #212121
Taille du texte de l'en-tête :
- Bureau : 100 pixels
- Tablette : 60px
- Téléphone : 45 pixels

animation svg cercle texte

Dimensionnement

Ensuite, allez dans les paramètres de dimensionnement et appliquez une largeur maximale.

Largeur maximale : 600 px

animation svg cercle texte

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

Ajouter du contenu

Sous le premier module de texte, nous ajouterons un autre module de texte. Cette fois, nous inclurons du contenu de description.

animation svg cercle texte

Paramètres de texte

Accédez à l'onglet Conception et stylisez le texte comme suit :

Police du texte : Montserrat
Taille du texte : 15 pixels
Hauteur de la ligne de texte : 2 em

animation svg cercle texte

Dimensionnement

Utilisez également une largeur maximale dans les paramètres de dimensionnement.

Largeur maximale : 520px

animation svg cercle texte

Espacement

Ensuite, accédez aux paramètres d'espacement et utilisez des valeurs réactives.

Marge supérieure:
- Ordinateur de bureau : 20 vh
- Tablette et téléphone : 50px
Rembourrage gauche : 5 %

animation svg cercle texte

Frontière

Nous incluons également une bordure gauche dans les paramètres de bordure.

Largeur de la bordure gauche : 2px
Couleur de la bordure gauche : #000000

animation svg cercle texte

Ajouter une animation SVG de texte de cercle

Ajouter un module de code à la colonne 1

Maintenant que nous avons créé la base de notre conception de section, nous pouvons nous concentrer sur la création de l'animation SVG du texte du cercle. Pour ajouter l'animation SVG du texte du cercle, nous allons utiliser un module de code dans la colonne 1. Allez-y et ajoutez-en un.

animation svg cercle texte

Ajouter un lien

Si vous souhaitez que cette animation SVG de texte en cercle soit cliquable, vous pouvez ajouter une URL de votre choix dans les paramètres de liens du module.

animation svg cercle texte

Dimensionnement

Assurez-vous également que la largeur du module est définie sur « 100 % » dans les paramètres de dimensionnement.

Largeur : 100 %

animation svg cercle texte

Ajouter des SVG de cercle et de texte à la boîte de code

Retour à la zone de code dans l'onglet contenu. Ici, nous allons d'abord ajouter le cercle SVG et le chemin du texte à l'aide du code HTML suivant :

<svg viewBox="0 0 500 500">
<defs>
	<path d="M50,250c0-110.5,89.5-200,200-200s200,89.5,200,200s-89.5,200-200,200S50,360.5,50,250" id="circle">
	</path>
</defs>
	<text dy="70">
		<textPath xlink:href="#circle">View Portfolio • New Homes •</textPath>
	</text>
</svg>

animation svg cercle texte

Style SVG avec CSS

Bien sûr, nous devrons styliser le chemin du texte SVG pour qu'il corresponde à notre conception. Nous nous assurons également que le SVG est défini sur « 100 % ». Collez les lignes de code CSS suivantes dans la zone de code, entre les balises de style :

<style>
svg { 
	width: 100%;
}
svg textPath { 
  font-size: 39px;
	font-family:  "Montserrat";
	text-transform: uppercase;
	letter-spacing: 20px;
	fill: #fff;
}
</style>

animation svg cercle texte

Ajouter des balises HTML AnimateTransform

Maintenant, pour créer une rotation sans fin pour notre texte, nous allons utiliser l'élément de transformation animé qui nous permet de créer l'animation sans avoir besoin de code JavaScript externe. Voici les attributs que nous attribuons à notre SVG :

  <animateTransform
            attributeName="transform"
            begin="0s"
            dur="15s"
            type="rotate"
            from="0 250 250"
            to="360 250 250"
            repeatCount="indefinite" 
			/>

Vous pouvez modifier ces attributs comme bon vous semble, pour créer l'animation de votre choix. Remarquez comment le dernier attribut, repeatCount, est défini sur « indéfini ». Cela nous permet de créer une boucle de rotation sans fin pour notre SVG.

animation svg cercle texte

Modifier le chemin du texte pour votre propre usage

Bien sûr, vous voudrez modifier le texte pour qu'il corresponde à votre propre site Web, vous pouvez le faire facilement entre les balises de chemin de texte. Cependant, une fois que vous avez modifié la longueur de la copie, vous devrez modifier les paramètres pour vous assurer de créer un cercle parfait. Vous pouvez jouer avec la valeur "dy", qui indique un décalage le long de l'axe des y et modifier la taille de la police et l'espacement des lettres du chemin de texte jusqu'à ce que vous obteniez le résultat souhaité. C'est ça!

animation svg cercle texte

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

animation svg cercle texte

Mobile

animation svg cercle texte

Dernières pensées

Dans cet article, nous vous avons montré comment maintenir votre site Web à jour avec les tendances du design. Plus précisément, nous vous avons montré comment créer une animation SVG de texte en cercle et l'utiliser avec élégance dans votre design Divi. Une fois que vous avez compris l'approche, vous pouvez utiliser cet élément pour afficher le texte de votre choix et l'adapter à votre propre conception. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.