¿Desea agregar un efecto de cambio de color de fondo suave a 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 toda la página web cambia automáticamente de un color a otro. Este hermoso efecto puede ayudarlo a captar 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.
¿Qué es el efecto de cambio de color de fondo suave?
Contents
El efecto de cambio de color de fondo suave le permite cambiar automáticamente entre diferentes colores de fondo. El cambio se produce pasando lentamente 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 que atraen la vista. Dicho esto, veamos cómo agregar este efecto de cambio de color de fondo suave en cualquier tema de WordPress.
Agregar un efecto de cambio de color de fondo suave en WordPress
Este tutorial requiere que agregue código a sus archivos de WordPress. Si no lo ha hecho antes, consulte nuestra guía sobre cómo copiar y pegar código en WordPress. Primero, necesita encontrar la clase CSS para el área que desea modificar. Puede hacer esto usando la herramienta Inspeccionar en su navegador. Simplemente pase el mouse sobre el área que desea editar y haga clic 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 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 con el nombre wpb-background-tutorial.js en su escritorio. Luego, debe agregar 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 hemos utilizado la clase CSS 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 esos colores. Recuerde guardar sus cambios en el archivo. Luego, 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, debe crear una.
Una vez que haya subido su archivo JavaScript, es hora de subirlo a 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’, verdadero); } 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 efecto de un cambio de color de fondo suave en el área que ha seleccionado. 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, puede probar: Esperamos que este artículo le haya ayudado a aprender cómo agregar fácilmente un efecto de cambio de color de fondo suave en WordPress. También puede consultar nuestra lista de los mejores complementos de creación de páginas de WordPress que puede probar. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.
Originally posted 2021-02-24 06:56:00.
