fbpx

Comment ajouter une animation de texte en cercle à votre page Divi ?

texte-en-cercle
achats-en-ligne

Être au courant des tendances dans le secteur du web design est l’un des meilleurs moyens de rester à jour en tant que web designer. Cela 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 ce tutoriel nous allons vous montrer comment vous familiariser avec le concept de création des textes en cercles animés. Désormais vous serez capable de l’intégrer sur vos pages Divi.

Pour en créer un, il vous suffit d’avoir

– Un compte ordinaire de Canva

– Le thème Divi installé et activé sur votre WordPress

– Une page en front end (visual builder) de Divi

 

Création du design sur Canva

Afin de créer le texte courbé, accédez à votre compte Canva, cliquez sur “Créer un design”, ensuite “Dimension personnalisée” et remplissez les champs, en indiquant 230px pour la largeur et 240px pour l’hauteur.

Accédez à la section “Texte” et cliquez sur “Ajouter un sous titre”. 

Personnalisez votre texte en cliquant deux fois sur le texte apparu. Ensuite cliquez sur “Effets” en haut à droite de votre page. Sur le côté gauche vous verrez des différents effets, dont l’effet “Courber”. Choisissez cette option et ensuite vous pouvez mettre en forme votre texte en cercle comme vous le souhaitez en ajoutant un arrière-plan, changeant la couleur du texte ou d’arrière- plan, ou le police de votre texte. Tenez en compte que pour avoir un cercle parfait, il vous faudra utiliser environ 40 caractères, dépendant de votre police utilisée.

texte-en-cercle-canva

Après avoir fait toutes les modifications, vous pouvez télécharger votre image en format PNG en cliquant sur le bouton “Télécharger” en haut à droite.

Intégration du design sur Divi

Maintenant, nous allons nous rendre sur la page WordPress  pour insérer notre image sur le site. 

Sur votre page Divi, créez une nouvelle section et nouvelle ligne, ensuite insérez un module “Image”. Après avoir chargé votre image, vous pouvez l’aligner, changer la taille, etc. 

Ajustez le dimensionnement de votre image en vous rendant sur Style – Dimensionnement – Largeur maximale en le baissant jusqu’à 20%. 

personaliser-le-dimensionnement-d-image

Afin d’ajouter l’animation à votre image, ouvrez les paramètres d’image et cliquez sur Avancé – Personnaliser CSS”. Copiez et collez le code suivant sur le champ « Elément principal” .

tutoriel-text-en cercle

  animation: rotation 8s infinite linear;

}

@keyframes rotation {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(359deg);

  }

Vous pouvez changer la vitesse de rotation, ainsi que la direction.

texte-en-cercle

Et voilà votre texte en cercle animé est prêt.

Loading...