Guide des effets de texte de WordPress : mettre en place des couleurs de texte, des ombres et des animations pour améliorer facilement l'esthétique des pages

L'ajout d'effets de texte à une page ou à un article WordPress améliore non seulement l'esthétique de la page, mais aussi l'expérience de l'utilisateur en attirant son attention. Avec un simple CSS ou quelques techniques avancées, nous pouvons ajouter différents effets visuels au texte sans utiliser de plugins. Dans cet article, nous allons vous expliquer en détail comment ajouter différents effets de style au texte dans WordPress.

Le rôle de l'effet de texte et comment le mettre en œuvre

Les effets de texte peuvent être des changements de couleur, des ombres, des animations, etc :

1. CSSLes CSS personnalisés : intégrez des CSS personnalisés directement dans une page ou un article.
2. Caractéristiques de l'éditeurSi vous utilisez l'éditeur de blocs de WordPress (Gutenberg) ou l'éditeur classique pour ajouter des éléments HTML et CSS spécifiques.
3. CSS personnalisé pour les thèmes: Appliqué globalement dans les thèmes WordPress.

Ensuite, nous mettons en pratique ces méthodes à l'aide d'exemples.

Effets de texte courants et comment les obtenir

1. changer la couleur du texte

Définissez un effet de changement de couleur au survol du texte pour accroître l'interactivité.

Exemple de code :

 
Voici un exemple de texte. 

Correspond à CSS :

.colour-effect {
  couleur : #333.
  transition : colour 0.3s ease ;
}

.colour-effect:hover {
  colour : #007bff ; /* devient bleu au survol de la souris */
}

Démo : Utilisation de l'éditeur de blocs (Gutenberg)

1. Créer un nouveau message ou modifier un message existant: :
   • Dans le backend de WordPress, sélectionnez Articles > Ajouter un nouvel article ou modifiez une page existante.

2. Ajout de blocs HTML: :
   • Dans l'éditeur, cliquez sur + sélectionnez Blocs HTML.
   • Collez le code suivant dans le bloc HTML :

<p class="color-effect">Il s'agit d'un exemple de texte.</p>

3. Ajout d'une feuille de style CSS personnalisée: :
   • commutateur à Apparence > Personnalisation > Extra CSS.
   • Collez le code CSS suivant dans le panneau Extra CSS :

.colour-effect {
  couleur : #333 ;
  transition : colour 0.3s ease ;
}

.colour-effect:hover {
  colour : #007bff ; /* devient bleu au survol de la souris */
}

2. ajouter des ombres au texte

L'ombrage du texte ajoute de la dimension au texte.

Exemple de code :

 
Voici un texte avec une ombre. 

Correspond à CSS :

.shadow-effect {
  text-shadow : 2px 2px 5px rgba(0, 0, 0, 0, 0, 0.3) ;
}

Effet : le texte s'assombrit et devient plus visible.

3. ajouter une animation de soulignement

Le soulignement s'étend dynamiquement de gauche à droite lorsque l'utilisateur survole la page.

Exemple de code :

Survol pour voir l'animation du soulignement

Correspond à CSS :

.underline-effect {
  display : inline-block ;
  position : relative ;
  décoration du texte : aucune ;
  couleur : #007bff.
}

.underline-effect::after {
  contenu : '' ;
  position : absolute ;
  largeur : 0 ;
  hauteur : 2px ;
  couleur de fond : #007bff.
  gauche : 0 ;
  bas : -2px ;
  transition : width 0.3s ease ;
}

.underline-effect:hover::after {
  width : 100% ; /* underline expand on hover */
}

4. animation de machines à écrire

L'effet d'animation qui simule l'apparition mot à mot du texte est très attrayant pour l'attention de l'utilisateur.

Exemple de code :

  
 
Voici l'effet d'animation de la machine à écrire. 

Correspond à CSS :

.typewriter p {
  display : inline-block ;
  overflow : hidden ;
  espacement : nowrap ;
  border-right : 2px solid #333 ;
  font-family : monospace ;
  taille de la police : 1.5em ;
  animation : frappe 4s pas (40, fin), clignotement 0,5s pas-fin infini.
}

@keyframes typing {
  de {
    largeur : 0 ;
  }
  à {
    largeur : 100%.
  }
}

@keyframes blink {
  de, à {
    couleur de la bordure : transparent ;
  }
  50% {
    couleur de la bordure : noir ;
  }
}

5. effet de rotation du texte

Il est possible de faire pivoter les titres ou le texte important pour l'affichage.

Exemple de code :

Effet de rotation sur le texte

Correspond à CSS :

.rotate-effect {
  display : inline-block ;
  animation : rotation 2s linéaire infinie ;
}

@keyframes rotate {
  de {
    transform : rotate(0deg) ;
  }
  à {
    transform : rotate(360deg) ;
  }
}

Comment appliquer l'effet à une page ou à un article WordPress ?

Méthode 1 : ajouter via l'éditeur de blocs (Gutenberg)

1. Ouvrez le backend de WordPress et modifiez votre page ou votre article.
2. Ajoutez un "bloc HTML".
3. Copiez l'exemple de code (HTML et CSS) dans un bloc HTML et enregistrez-le.

Méthode 2 : via la fonction "Extra CSS" du thème

1. Dans le backend de WordPress, allez dans Apparence > Personnalisation > Extra CSS.
2. Collez l'exemple de CSS dans la zone de texte.
3. Économisez et appliquez.

Méthode 3 : Modifier directement dans le fichier du thème

1. Ouvrez le thème de la style.css Documentation.
2. Collez le code de l'effet CSS au bon endroit.
3. Sauvegardez et actualisez la page.

Mises en garde sur les effets de l'utilisation

1. Chargement réduit des pagesLes effets dynamiques : Essayez d'éviter d'utiliser trop d'effets dynamiques qui pourraient nuire à la vitesse de chargement.
2. conception réactiveLes effets de texte s'affichent correctement sur différents types d'écrans.
3. Test de compatibilitéVérifiez la cohérence entre les différents navigateurs (Chrome et Firefox sont recommandés).

résumés

Cet article vous permettra de maîtriser facilement l'ajout de plusieurs effets visuels au texte d'une page ou d'un article WordPress, tels que les couleurs, les ombres, le soulignement dynamique, l'animation de la machine à écrire, et bien plus encore. Ces effets améliorent non seulement l'esthétique de la page, mais aussi l'expérience interactive de l'utilisateur. Ces effets peuvent être obtenus rapidement, que ce soit par le biais du CSS, de l'éditeur de blocs ou des paramètres personnalisés du thème.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.