Cómo agregar un efecto de cambio de color de fondo en WordPress

¬ŅDesea agregar un efecto suave en el cambio de color de fondo a su sitio de WordPress? Es posible que haya visto en algunos sitios web populares que el color de fondo de un √°rea espec√≠fica o la p√°gina web completa cambia autom√°ticamente de un color a otro. Este hermoso efecto puede ayudarlo a atraer la atenci√≥n de los usuarios y mejorar la interacci√≥n con su sitio. En este art√≠culo, le mostraremos c√≥mo agregar f√°cilmente un efecto de cambio de color de fondo en WordPress.

<img title = "Agregue un efecto de cambio de color de fondo en WordPress" src = "https://blogging-techies.com/wp-content/uploads/2020/03/bgcolorchangewp.png" alt = "Agregue un efecto de cambio de color de fondo en WordPress" ancho = "550" altura = "340" clase = "alinear tama√Īo completo wp-image-50813" />

¬ŅCu√°l es el efecto suave en el cambio de color de fondo?

Con el efecto de cambiar el color de fondo, puede cambiar automáticamente entre diferentes colores de fondo. El cambio se realiza lentamente a través de diferentes colores hasta que se alcanza el color final. Se ve así:

  

<img title = "Animación para efectos de cambio de color" src = "https://blogging-techies.com/wp-content/uploads/2020/03/bganimate.gif" alt = "Animación para efectos de cambio de color" width = "550 ″ height = "231 ″ class =" alignnone size-full wp-image-50814 ″ />

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

Echemos un vistazo a cómo puede agregar este efecto de cambio de color de fondo suave a cualquier tema de WordPress.

Agregue un efecto para cambiar el color de fondo de WordPress

En este tutorial, agregue c√≥digo a sus archivos de WordPress. Si a√ļn no lo ha hecho, consulte nuestra gu√≠a para copiar y pegar c√≥digo en WordPress.

Primero, determine la clase CSS para el área que desea cambiar. Puede hacerlo con la herramienta de inspección en su navegador. Simplemente coloque el cursor sobre el área que desea cambiar y haga clic con el botón derecho para seleccionar la Herramienta de inspección.

<img title = "Buscar clase de CSS" src = "https://blogging-techies.com/wp-content/uploads/2020/03/findcssclass.png" alt = "Buscar clase de CSS" ancho = "550 ″ height = "303 ″ class =" alignnone size-full wp-image-50810 ″ />

A continuaci√≥n, escriba la clase CSS que desea orientar. Por ejemplo, en la captura de pantalla anterior, nos gustar√≠a se√Īalar el √°rea de widgets a continuaci√≥n que contiene la clase CSS "Encabezado".

El siguiente paso es abrir un editor de texto plano en su computadora y crear un nuevo archivo. Debe guardar este archivo como wpb-background-tutorial.js en su escritorio.

Luego, inserte el siguiente código en su archivo JS:

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

Si estudia este c√≥digo, notar√° que usamos la clase CSS, a la que nos referiremos en el c√≥digo. Tambi√©n agregamos cuatro colores. Nuestro efecto de fondo suave comienza con el primer color, luego cambia al siguiente color y contin√ļa con esos colores.

No olvide guardar sus cambios en el archivo.

Luego cargue el archivo wpb-bg-tutorial.js en el directorio / js / de su tema de WordPress a trav√©s de FTP. Si su tema no contiene un directorio js, ‚Äč‚Äčcree uno.

<img title = "uploadjs" src = "https://cdn3.wpbeginner.com/wp-content/uploads/2018/02/uploadjs.png" alt = "Cargue su archivo javascript" width = "550 ″ height = "278 ″ class =" alignnone size-full wp-image-50811 ″ />

Una vez que haya subido su archivo JavaScript, es hora de subirlo a WordPress.

Debe agregar el siguiente código al archivo features.php de su tema.

function wpb_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.

Esto es lo que ahora puede visitar su sitio para verlos en acción. Verá el efecto del suave cambio de color de fondo en el área a la que apunta.

Hay muchas otras formas de usar los colores de fondo de WordPress para llamar la atención de los usuarios o resaltar su contenido. Por ejemplo, intente:

  • Agregar im√°genes de fondo a pantalla completa
  • Agregar fondos de pantalla de video al modo de pantalla completa
  • Cargue colores de fondo aleatorios en cada p√°gina
  • Agregue efectos de paralaje a cualquier tema de WordPress
  • Dise√Īa publicaciones individuales con diferentes fondos

Esperamos que este artículo te haya ayudado a aprender cómo agregar fácilmente un efecto suave al cambio de color de fondo en WordPress. También es posible que desee ver nuestra lista de los mejores complementos del creador de sitios de WordPress que puede probar.

Si te gustó este artículo, suscríbete a nuestro canal YouTube para ver videos tutoriales de WordPress. También nos puede encontrar en Twitter y Facebook.