¿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.
