Comment ajouter et animer votre logo SVG dans votre en-tête global avec le générateur de thème de Divi et Anime.js

Votre logo est un élément central de l'identité de votre marque. C'est pourquoi il est presque toujours inclus dans tout en-tête de site Web que vous rencontrez. Lorsque vous ajoutez un logo à votre en-tête, vous pouvez choisir de télécharger un fichier PNG ou d'opter pour une intégration SVG à la place. Pour une approche plus personnalisée, vous pouvez également animer votre logo SVG. C'est exactement ce que nous allons vous montrer dans cet article. Nous allons d'abord vous montrer comment l'ajouter à votre en-tête global construit par Divi, puis l'animer à l'aide de la bibliothèque Anime JS. Nous utiliserons un design simple pour notre exemple, mais une fois que vous aurez compris l'approche, vous pourrez animer n'importe quel logo !

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

Téléchargez GRATUITEMENT le modèle d'en-tête global

Pour mettre la main sur le modèle d'en-tête global, 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 !

1. Créez un logo SVG dans Adobe Illustrator et obtenez le code SVG

Ouvrez Illustrator et créez un nouveau document

Dans la première partie de ce didacticiel, nous allons créer un logo simple dans Adobe Illustrator. Si vous avez déjà votre propre logo SVG, n'hésitez pas à l'utiliser. Alternativement, vous pouvez également accéder au fichier d'exemple de logo Illustrator dans le dossier de téléchargement ci-dessus. Si vous préférez créer l'échantillon de logo à partir de zéro, commencez par ajouter un nouveau document avec un rapport de 1:1.

• Largeur : 500px
• Hauteur : 500px

Ajouter un cercle au calque existant

Le premier élément que nous ajouterons est un cercle. Nous utiliserons une couleur de remplissage qui correspond à la palette de couleurs du pack de mise en page Spice Shop. Nous veillerons également à ce que le cercle soit aligné au centre de notre toile.

• Remplir : #0C1019
• AVC : aucun

Créer un nouveau calque et ajouter du texte de logo

Ensuite, nous allons ajouter un nouveau calque.

Nous utiliserons ce calque pour ajouter du texte de logo.

• Police : Montserrat
• Poids de la police : noir
• Taille de la police : 110 pt

Créer des contours pour le logo

Une fois que vous avez terminé de modifier le texte du logo, vous pouvez cliquer avec le bouton droit sur l'élément et cliquer sur « Créer des contours » pour transformer le texte en contour.

Aligner les contours du texte

Nous veillerons également à ce que les contours du texte soient alignés au centre.

Exporter en SVG

Maintenant que nous avons tous les chemins en place, nous pouvons exporter le SVG. Pour ce faire, nous allons survoler l'option « Fichier » en haut, aller dans « Exporter » et cliquer sur « Exporter sous… ».

Obtenir le code SVG

Une fois que vous avez cliqué sur le bouton « Exporter », vous verrez une fenêtre apparaître avec des options SVG supplémentaires. Là, vous pourrez copier le code SVG. Assurez-vous de garder le SVG à portée de main pour une utilisation ultérieure dans ce didacticiel.

2. Commencez à créer un en-tête global/personnalisé dans Divi Theme Builder

Accédez à Divi Theme Builder et commencez à créer un en-tête global

Maintenant que nous avons parcouru la première partie de ce tutoriel, obtenir le code SVG de notre logo, il est temps de passer à Divi ! Nous allons créer un nouvel en-tête global en accédant au générateur de thèmes dans le backend WordPress.

Paramètres de section

Couleur de l'arrière plan

Une fois que vous avez entré le modèle d'en-tête global, vous remarquerez une section. Ouvrez cette section et appliquez une couleur d'arrière-plan.

• Couleur de fond : #eaeaea

Espacement

Passez à l'onglet Conception et supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

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

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne, accédez à l'onglet conception et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur : 95%
• Largeur maximale : 100 %

Espacement

Supprimez également tous les rembourrages supérieur et inférieur par défaut.

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

Élément principal

Pour nous assurer que nos colonnes restent côte à côte sur des écrans de plus petite taille, nous ajouterons également une ligne de code CSS à l'élément principal de la ligne.

display: flex;

Colonne 1 Élément principal

Ensuite, nous nous assurerons que la structure des colonnes (1/4 et 3/4) est conservée sur des écrans de plus petite taille en ajoutant une ligne de code CSS à chaque colonne individuellement. Commencez par le premier.

width: 25% !important;

Colonne 2 Élément principal

Faites de même pour la deuxième colonne, mais utilisez un autre pourcentage de largeur.

width: 75% !important;

3. Ajouter le logo SVG (à l'intérieur du module de code)

Ajouter un module de code à la colonne 1

Il est temps d'ajouter des modules, en commençant par un premier module de code. Nous placerons ce module de code dans la colonne 1 et l'utiliserons pour ajouter notre code SVG.

Ajouter du code SVG copié

Structurez-le

Une fois que vous avez collé le code SVG (voir la partie 1 de ce tutoriel) dans le module de code, cela aide à tout structurer comme indiqué dans l'écran d'impression ci-dessous. De cette façon, vous aurez un aperçu clair des différents éléments à l'intérieur du SVG.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 465 465">
  
<defs>
  
<style>
.cls-1{
fill:#0c1019;  
}

.cls-2{
fill:#fff;
}
</style>
  
</defs>
  
<g id="Layer_1" data-name="Layer 1">
  
<circle class="cls-1" cx="232.5" cy="232.5" r="232.5"/>
  
</g>

<g id="Layer_2" data-name="Layer 2">
  
<path class="cls-2" d="M88,284.1a49.87,49.87,0,0,1-14.9-5.78l8.36-18.92a52.84,52.84,0,0,0,12.32,5.12,48.23,48.23,0,0,0,13.09,1.92c3.59,0,6.16-.34,7.7-1a3.36,3.36,0,0,0,2.31-3.14q0-2.42-3-3.63a66.69,66.69,0,0,0-9.95-2.64A111.94,111.94,0,0,1,89,252a25.32,25.32,0,0,1-10.34-7q-4.41-4.89-4.4-13.25a22.79,22.79,0,0,1,4.07-13.21q4.07-5.94,12.15-9.35t19.64-3.4a71.06,71.06,0,0,1,15.56,1.7,48.59,48.59,0,0,1,13.48,5l-7.81,18.8q-11.34-5.72-21.45-5.72t-10,4.84q0,2.31,3,3.47a62.92,62.92,0,0,0,9.79,2.47,101.06,101.06,0,0,1,14.85,3.8,25.9,25.9,0,0,1,10.5,7q4.46,4.84,4.46,13.2a22.59,22.59,0,0,1-4.07,13.15q-4.08,5.88-12.16,9.35t-19.63,3.46A80.82,80.82,0,0,1,88,284.1Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M204.13,227a27.32,27.32,0,0,1,10.56,11,36.64,36.64,0,0,1,0,32.94,27.42,27.42,0,0,1-10.56,10.89,28.9,28.9,0,0,1-14.57,3.79q-10,0-15.29-5.16v25.41H149.41V224.31h23.65v4.95q5.38-6,16.5-6A28.91,28.91,0,0,1,204.13,227Zm-13.47,36.14q2.75-3.09,2.75-8.69c0-3.75-.92-6.66-2.75-8.75a9.46,9.46,0,0,0-14.08,0c-1.84,2.09-2.75,5-2.75,8.75s.91,6.63,2.75,8.69a9.59,9.59,0,0,0,14.08,0Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M228,215.9a12.05,12.05,0,0,1,0-18.15q4.13-3.57,10.84-3.58t10.88,3.41a11,11,0,0,1,4.08,8.8,12.12,12.12,0,0,1-4.08,9.41q-4.07,3.69-10.88,3.69T228,215.9Zm-1.59,8.41h24.85v60.17H226.41Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M276.29,281.63a30.66,30.66,0,0,1-12.65-11.12,30.79,30.79,0,0,1,0-32.28,30.74,30.74,0,0,1,12.65-11.06,41.08,41.08,0,0,1,18.31-4q11,0,18.81,4.73A24.57,24.57,0,0,1,324.19,241l-19.25,9.46q-3.51-7.92-10.45-7.92a9.65,9.65,0,0,0-7.31,3.08c-1.95,2.06-2.92,4.95-2.92,8.69s1,6.75,2.92,8.81a9.65,9.65,0,0,0,7.31,3.08q6.93,0,10.45-7.93l19.25,9.46a24.49,24.49,0,0,1-10.78,13.09q-7.8,4.74-18.81,4.73A41.21,41.21,0,0,1,276.29,281.63Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M393.05,260.17h-41.8a10.13,10.13,0,0,0,4.4,5.23,15,15,0,0,0,7.7,1.81,19.75,19.75,0,0,0,6.66-1,23.5,23.5,0,0,0,5.88-3.42l13,13.09q-8.79,9.69-26.29,9.68a43.19,43.19,0,0,1-19.14-4,30.43,30.43,0,0,1-12.76-11.17,31.09,31.09,0,0,1-.05-32.17,30.46,30.46,0,0,1,12.21-11.06,40.22,40.22,0,0,1,34.1-.33,28.65,28.65,0,0,1,12,10.67,30.85,30.85,0,0,1,4.45,16.83Q393.38,254.9,393.05,260.17Zm-38.94-17.93a10,10,0,0,0-3.3,5.95h19.36a10.06,10.06,0,0,0-3.3-5.89,9.51,9.51,0,0,0-6.38-2.15A9.72,9.72,0,0,0,354.11,242.24Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M402,281.57a13.75,13.75,0,0,1-4.13-10.29A13.36,13.36,0,0,1,402,261.11a15.8,15.8,0,0,1,20.79,0,13.35,13.35,0,0,1,4.12,10.17,13.74,13.74,0,0,1-4.12,10.29,15.48,15.48,0,0,1-20.79,0Z" transform="translate(-17.5 -17.5)"/>
  
</g>
  
</svg>

Ajouter un trait et une largeur de trait aux éléments dans le code CSS

Dans Illustrator, nous n'avons utilisé que des couleurs de remplissage pour les éléments que nous avons ajoutés. La raison en est que nous voulons éviter de générer des chemins supplémentaires. Le code SVG n'est pas toujours aussi prévisible que vous ne le pensez, donc apporter des modifications manuelles au code CSS peut souvent aider à garder les chemins simples. Pour créer le même résultat que dans l'aperçu de cet article, nous devrons ajouter un trait à nos deux éléments. Pour ce faire, nous allons ajouter des lignes de code CSS aux deux classes à l'intérieur de notre code. La classe CSS "cls-1" qui a été générée dans AI représente le cercle, la classe CSS "cls-2" représente les contours du texte.

stroke: #0c1019;
stroke-width: 3px;

Diminuer le rayon du cercle

Parce que nous avons ajouté un trait supplémentaire à notre cercle, le cercle semble aller plus loin que le canevas SVG (visible sur les côtés), pour résoudre ce problème, nous allons simplement réduire le rayon à l'intérieur de notre balise de cercle. Au lieu d'utiliser le « 232,5 » d'origine, nous le réduisons à « 225 ». Vous pouvez déterminer vous-même quelle valeur vous préférez en jouant doucement avec ce nombre.

• r = "225"

Modifier les paramètres du module de code

Dimensionnement

Maintenant que notre code SVG est en place, nous pouvons apporter des modifications supplémentaires au module de code lui-même. Accédez à l'onglet conception et modifiez la largeur du module sur différentes tailles d'écran.

• Largeur:
  • Ordinateur de bureau : 25 %
  • Tablette : 50 %
  • Téléphone : 80 %

Espacement

Nous générons également un chevauchement inférieur en modifiant les paramètres d'espacement.

• Rembourrage supérieur : 5 %
• Rembourrage inférieur :
  • Ordinateur de bureau : -12%
  • Tablette : -20%
  • Téléphone : -35%

4. Utilisez Anime.js pour animer votre logo SVG

Ajouter un autre module de code sous le précédent

Notre logo SVG a été ajouté à notre en-tête Divi ! Dans la prochaine partie de ce didacticiel, nous animerons le logo SVG à l'aide de la bibliothèque Anime JS. L'animation de dessin que vous pouvez voir dans l'aperçu est l'une de leurs plus populaires, mais vous pouvez créer n'importe quel type d'animation avec cette bibliothèque. Ajoutez un nouveau module de code juste en dessous du précédent.

Ajouter une bibliothèque d'anime

La première chose à faire est d'ajouter la bibliothèque à l'intérieur des balises de script.

• src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"

Ajouter le code d'animation de la chronologie de l'anime

Juste en dessous, vous devrez ajouter le code anime JS entre les balises de script, comme indiqué dans l'écran d'impression ci-dessous :

jQuery(function($){
$(document).ready(function(){  
  
anime.timeline({loop: false})

.add({
duration: 2000,
})
.add({
targets: ['path.cls-2', 'circle.cls-1'],
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
})
.add({
targets: 'path.cls-2',
duration: 10,
fill: ['rgba(0,0,0,0)', '#fff'],
}) 
.add({
targets: 'circle.cls-1',
duration: 2000,
fill: ['rgba(0,0,0,0)', '#0c1019'],
});

});  
});

Chaque fonction « ajouter » représente une animation dans une chronologie d'animations. Vous pouvez modifier ces fonctions « ajouter » comme vous le souhaitez, en ajouter de nouvelles ou supprimer les fonctions actuelles, assurez-vous simplement que la dernière fonction d'ajout est correctement fermée avec un ';' à la fin (comme vous pouvez le voir dans le code ci-dessus). Vous pouvez ajouter différentes propriétés CSS à l'intérieur de ces fonctions « ajouter ». Vous pouvez en savoir plus sur les propriétés et leur utilisation dans les exemples de documentation anime.js.

5. Ajouter le module de menu à la colonne 2

Le seul élément dont nous avons besoin pour compléter notre en-tête global est un module de menu dans la colonne 2.

Sélectionnez le menu

Sélectionnez un menu de votre choix.

Supprimer la couleur d'arrière-plan

Ensuite, supprimez la couleur d'arrière-plan par défaut.

Paramètres du texte du menu

Passez à l'onglet Conception et modifiez les paramètres du texte du menu comme suit :

• Couleur du texte du menu : #000000
• Taille du texte du menu :
  • Ordinateur de bureau : 0.7vw
  • Tablette : 2.2vw
  • Téléphone : 3vw
• Alignement du texte : à droite

Paramètres de texte du menu déroulant

Modifiez également la couleur de la ligne du menu déroulant.

• Couleur de la ligne du menu déroulant : #ffffff

Paramètres des icônes

Avec la couleur de l'icône du menu hamburger.

• Couleur de l'icône du menu Hamburger : #0c1019

Dimensionnement

Ensuite, allez dans les paramètres de dimensionnement et assurez-vous que la largeur est de "100%".

• Largeur : 100 %

Position

Complétez les paramètres du module en repositionnant le module dans l'onglet avancé.

• Position : Absolu
• Emplacement : Centre droit

6. Enregistrer toutes les modifications du générateur de thème

Une fois que vous avez terminé la conception globale de l'en-tête, vous pouvez enregistrer toutes les modifications apportées au générateur de thème et afficher le résultat sur votre site Web !

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 pousser votre en-tête global Divi un peu plus loin dans votre parcours de développement Web. Plus précisément, nous vous avons montré comment ajouter et animer votre logo SVG à l'aide de Divi et de la bibliothèque Anime JavaScript. Vous avez également pu télécharger gratuitement le fichier JSON du modèle d'en-tête global ! 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.