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

¿Desea agregar un efecto de cambio de color de fondo suave en su sitio de WordPress? Es posible que haya visto en algunos sitios web populares donde el color de fondo de un área específica o la página web completa pasa automáticamente de un color a otro. Este hermoso efecto puede ayudarlo a atraer la atención de los usuarios y mejorar la participación en su sitio web. En este artículo, le mostraremos cómo agregar fácilmente un efecto de cambio de color de fondo suave en WordPress.

Agregar un efecto de cambio de color de fondo suave en WordPress

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

El suave efecto de cambio de color de fondo le permite realizar una transición automática entre diferentes colores de fondo. El cambio ocurre lentamente pasando por diferentes colores hasta que alcanza el color final. Se parece a esto:

Animación de efecto de cambio de color

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

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

Agregar un efecto de cambio de color de fondo suave en WordPress

Este tutorial requiere que agregue código en sus archivos de WordPress. Si no ha hecho esto antes, eche 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 en su navegador. Simplemente lleve el mouse al área que desea cambiar y haga clic derecho para seleccionar la herramienta Inspeccionar.

Encuentra la clase CSS

A continuación, debe escribir la clase CSS a la que desea apuntar. Por ejemplo, en la captura de pantalla anterior, queremos apuntar al área del widget en la parte inferior que tiene la clase CSS "encabezado de página".

En el siguiente paso, debe abrir un editor de texto sin formato en su computadora y crear un nuevo archivo. Debe 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:

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 hemos utilizado la clase CSS a la que queremos apuntar en el código. También hemos agregado cuatro colores. Nuestro efecto de fondo suave comenzará desde el primer color, luego pasará al siguiente color y continuará pasando por estos colores.

No olvide guardar sus cambios en el archivo.

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

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

Debe agregar el siguiente código al archivo functions.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.

Eso es todo, ahora puede visitar su sitio web para verlo en acción. Notará el suave efecto de cambio de color de fondo en el área que apuntó.

Hay muchas otras formas de usar colores de fondo en WordPress para captar la atención del usuario o hacer que su contenido se destaque. Por ejemplo, puedes probar:

  • Agregar imágenes de fondo a pantalla completa
  • Agregar fondos de video a pantalla completa
  • Colores de fondo aleatorios en cada carga de página
  • Agregue efectos de paralaje a cualquier tema de WordPress
  • Diseñar publicaciones individuales con diferentes fondos

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

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

Publicaciones relacionadas

Botón volver arriba