Cómo añadir efectos de estilo al texto en WordPress: implementación de colores, sombras y animaciones

Añadir efectos de texto a una página o entrada de WordPress no sólo mejora la estética de la página, sino que también mejora la experiencia del usuario al captar su atención. Con un simple CSS o algunas técnicas avanzadas, podemos añadir diferentes efectos visuales al texto sin necesidad de utilizar plugins. En este artículo, explicaremos en detalle cómo añadir diversos efectos de estilo al texto en WordPress.

El papel del efecto texto y cómo aplicarlo

Los efectos de texto pueden ser cambios de color, sombras, animaciones, etc., y pueden conseguirse de las siguientes maneras:

CSS: Incruste CSS personalizado directamente en una página o entrada.
Características del editor: Si utiliza el editor de bloques de WordPress (Gutenberg) o el Editor clásico para añadir HTML y CSS específicos.
CSS personalizado para temas: Aplicado globalmente en los temas de WordPress.

A continuación, practicamos estos métodos con ejemplos.

Efectos de texto habituales y cómo conseguirlos

1. Cambiar el color del texto

Establezca un efecto de cambio de color hover para el texto para aumentar la interactividad.

Código de ejemplo:

Este es un texto de muestra.

Corresponde a CSS:

.efecto-color {
  color: #333.
  transición: color 0.3s ease;
}

.efecto-color:hover {
  color: #007bff; /* se vuelve azul al pasar el ratón por encima */
}

Demo: Uso del editor de bloques (Gutenberg)

Crear una nueva entrada o editar una existente::
- En el backend de WordPress, seleccione Artículos > Añadir nuevo artículo o edite una página existente.

Añadir bloques HTML::
- En el editor, haga clic en + seleccione Bloques HTML.
- Pegue el siguiente código en el bloque HTML:

<p class="color-effect">Este es un texto de muestra.</p>

Añadir CSS personalizado::
- cambiar a Apariencia > Personalización > CSS Extra.
- Pegue el siguiente código CSS en el panel Extra CSS:

.efecto-color {
  color: #333;
  transición: color 0.3s ease;
}

.efecto-color:hover {
  color: #007bff; /* se vuelve azul al pasar el ratón por encima */
}

2. Añadir sombras de texto

El sombreado de texto añade dimensión al texto.

Código de ejemplo:

Este es un texto con sombra.

Corresponde a CSS:

.efecto-sombra {
  sombra de texto: 2px 2px 5px rgba(0, 0, 0, 0, 0,3);
}

Efecto: El texto mostrará una sombra suave y parecerá más prominente.

3. Añadir animación de subrayado

El subrayado se expande dinámicamente de izquierda a derecha cuando el usuario pasa el ratón por encima.

Código de ejemplo:

Pase el ratón por encima para ver la animación de subrayado

Corresponde a CSS:

.efecto-subrayado {
  display: inline-block;
  posición: relativa;
  decoración del texto: ninguna;
  color: #007bff.
}

.underline-effect::after {
  contenido: '';
  posición: absoluta;
  anchura: 0;
  altura: 2px;
  color de fondo: #007bff.
  izquierda: 0;
  inferior: -2px;
  transición: anchura 0.3s ease;
}

.underline-effect:hover::after {
  width: 100%; /* el subrayado se expande al pasar el ratón por encima */
}

4. Animación de máquinas de escribir

El efecto de animación que simula la aparición del texto palabra por palabra resulta muy atractivo para la atención del usuario.

Código de ejemplo:


  Este es el efecto de animación de la máquina de escribir.

Corresponde a CSS:

.typewriter p {
  display: inline-block;
  overflow: oculto;
  white-space: nowrap;
  borde-derecho: 2px sólido #333;
  font-family: monospace;
  font-size: 1.5em;
  animación: tecleo 4s pasos(40, fin), parpadeo 0,5s paso-fin infinito.
}

@keyframes tecleando {
  de {
    anchura: 0;
  }
  a {
    anchura: 100%.
  }
}

@keyframes blink {
  de, a {
    color del borde: transparente;
  }
  50% {
    Color del borde: negro;
  }
}

5. Efecto de rotación del texto

Es posible hacer girar los títulos o el texto importante para su visualización.

Código de ejemplo:

Efecto de texto giratorio

Corresponde a CSS:

.efecto-rotación {
  display: inline-block;
  animación: rotación 2s lineal infinita;
}

@keyframes rotar {
  de {
    transformar: rotar(0deg);
  }
  a {
    transformar: rotar(360deg);
  }
}

Cómo aplicar el efecto a una página o entrada de WordPress

Método 1: Añadir a través del editor de bloques (Gutenberg)

Abra el backend de WordPress y edite su página o entrada.
Añada un "bloque HTML".
Copie el código de muestra (HTML y CSS) en un bloque HTML y guárdelo.

Método 2: A través de la función "CSS extra" del tema

En el backend de WordPress, vaya a Apariencia > Personalización > CSS Extra.
Pegue el CSS de ejemplo en el cuadro de texto.
Guarde y aplique.

Método 3: Modificar directamente en el archivo del tema

Abra el tema style.css Documentación.
Pegue el código del efecto CSS en el lugar adecuado.
Guarde y actualice la página.

Precauciones sobre los efectos del uso

Carga de página reducida: Intente evitar el uso de demasiados efectos dinámicos que puedan afectar a la velocidad de carga.
diseño sensible: Asegúrese de que los efectos de texto se muestran correctamente en los distintos dispositivos de pantalla.
Prueba de compatibilidad: Compruebe la coherencia en diferentes navegadores (se recomiendan Chrome y Firefox).

resúmenes

Con este artículo, podrá dominar fácilmente cómo añadir múltiples efectos visuales al texto de una página o entrada de WordPress, como colores, sombras, subrayado dinámico, animación de máquina de escribir y mucho más. Estos efectos no sólo realzan la estética de la página, sino que también mejoran la experiencia interactiva del usuario. Estos efectos pueden implementarse rápidamente mediante CSS, el editor de bloques o los ajustes personalizados del tema.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres