Cómo añadir un efecto de cambio de color de fondo suave en WordPress

¿Desea añadir un efecto de cambio de color de fondo suave en su sitio WordPress? Usted puede haber visto en algunos sitios web populares donde el color de fondo de un área específica o toda la página web cambia automáticamente de un color a otro. Este hermoso efecto puede ayudarle a atraer la atención de los usuarios y mejorar el compromiso en su sitio web. En este artículo, le mostraremos cómo añadir fácilmente un efecto de cambio de color de fondo suave en WordPress.

¿Qué es el efecto de cambio de color de fondo suave?

El efecto de cambio de color de fondo suave permite la transición automática entre diferentes colores de fondo. El cambio ocurre lentamente pasando por diferentes colores hasta llegar al color final. Se parece a esto:

Esta técnica se utiliza para captar la atención del usuario con efectos suaves y agradables a la vista.

Dicho esto, echemos un vistazo a cómo añadir este suave efecto de cambio de color de fondo en cualquier tema de WordPress.

Añadiendo el Efecto de Cambio de Color de Fondo Suave en WordPress

Este tutorial requiere que añada código en sus archivos de WordPress. Si no lo has hecho antes, por favor, echa un vistazo a nuestra guía sobre cómo copiar y pegar código en WordPress.

Primero, debe averiguar la clase CSS del área que desea cambiar. Puede hacerlo utilizando la herramienta Inspeccionar de su navegador. Simplemente lleve el ratón al área que desea cambiar y haga clic con el botón derecho para seleccionar la herramienta Inspeccionar.

A continuación, debe escribir la clase CSS a la que desea dirigirse. Por ejemplo, en la captura de pantalla de arriba queremos apuntar al área de widgets en la parte inferior que tiene la clase CSS page-header.

En el siguiente paso, necesita abrir un editor de texto plano en su computadora y crear un nuevo archivo. Necesita guardar este archivo como wpb-background-tutorial.js en su escritorio.

A continuación, debe agregar el siguiente código dentro de su archivo JS:

123456789101112jQuery(function($){ $(.page-header).each(function(){ var$this= $(this), colors = [#ec008c, #00bcc3, #5fb26a, #fc7331]; setInterval(function(){ varcolor = colors.shift(); colors.push(color); $this.animate({backgroundColor: color}, 2000); },4000); }));

Si estudias este código, entonces te darás cuenta de que hemos usado la clase CSS a la que queremos dirigirnos en el código. También hemos añadido cuatro colores. Nuestro efecto de fondo suave comenzará desde el primer color, luego la transición al siguiente color y seguirá pasando por estos colores.

No olvide guardar los cambios en el archivo.

A continuación, debe cargar el archivo wpb-bg-tutorial.js en la carpeta /js/ de su tema de WordPress mediante FTP. Si su tema no tiene una carpeta js dentro, entonces necesita crear una.

Después de subir su archivo JavaScript, es hora de cargarlo en WordPress.

Necesitas añadir el siguiente código al archivo functions.php de tu tema.

1234functionwpb_bg_color_scripts() { wp_enqueue_script( wpb-background-tutorial, get_stylesheet_directory_uri() . /js/wpb-background-tutorial.js, array( jquery-color), 1.0.0, true ); } add_action( wp_enqueue_scripts, wpb_bg_color_scripts);

Este código carga correctamente el archivo JavaScript y el script jQuery dependiente que necesita para que este código funcione.

Eso es todo, ahora puede visitar su sitio web para verlo en acción. Usted notará el efecto de cambio de color de fondo suave en el área a la que se dirigió.

Hay muchas otras maneras de usar los colores de fondo en WordPress para captar la atención del usuario o hacer que su contenido aparezca. Por ejemplo, puede intentarlo:

  • Agregar imágenes de fondo a pantalla completa
  • Agregar fondos de vídeo a pantalla completa
  • Colores de fondo aleatorios en cada carga de página
  • Agregar efectos de paralaje a cualquier tema de WordPress
  • Estilo de mensajes individuales con diferentes fondos

Esperamos que este artículo le haya ayudado a aprender a añadir fácilmente el efecto de cambio de color de fondo suave en WordPress. También puedes ver nuestra lista de los mejores plugins de WordPress que puedes probar.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja un comentario