Cómo cambiar el color de fondo en WordPress (Guía para principiantes)

¿Busca una manera fácil de cambiar el fondo de su sitio de WordPress? El color de fondo de su sitio web juega un papel importante en el diseño y la marca y la mejora de la legibilidad del contenido. En este artículo, le mostraremos cómo cambiar fácilmente el color de fondo de su sitio de WordPress.

¿Por qué cambiar el color de fondo en WordPress? Un tema de WordPress viene con un color de fondo predeterminado. Cambiar el color de fondo puede ayudar a personalizar el diseño de su sitio web y mejorar la legibilidad. Por ejemplo, puede hacer una determinada sección de una página prominente utilizando un color de fondo diferente. Esto le ayuda a resaltar el impulso (CTA) y aumentar las conversiones.
Puede usar diferentes colores de fondo para diferentes publicaciones en su blog de WordPress basado en autores, comentarios o categorías. Esto ayuda a diferenciar los artículos de otro contenido en su sitio web. También hay una forma de agregar fondos de video para captar instantáneamente la atención de los visitantes y aumentar su participación. Dicho esto, echemos un vistazo a cómo cambiar el color de fondo en WordPress. Le mostraremos diferentes formas de personalizar el color de fondo para que pueda pasar a cualquier sección que prefiera:
Cambiar el color de fondo usando Customizer WordPress
Cambiar el color de fondo utilizando CSS personalizado
Cambiar al azar los colores de fondo
Cambiar el color de fondo para publicaciones individuales
Use un video en segundo plano
Crear una página de destino personalizada
Cambie el color de fondo utilizando el personalizador de temas de WordPress de acuerdo con su tema, puede cambiar el fondo utilizando el personalizador de temas de WordPress. Le permite editar el aspecto de su sitio en tiempo real y sin tener que editar el código. Para acceder a WordPress Temo Customizer, puede conectarse a su sitio web y luego acceder a la apariencia »Personalización. Esto abrirá el personalizador del tema, donde encontrará más opciones para cambiar su tema. Esto incluye menús, colores, página inicial, widgets, imagen de fondo y más. Las opciones específicas disponibles dependerán del tema de WordPress que utilice su sitio para este tutorial, utilizamos el tema predeterminado de veintise veintise veinte oen. Para cambiar el color de fondo de su sitio web, continúe y haga clic en la pestaña “Modo de color y oscuro” en su menú izquierdo.
Luego deberá hacer clic en la opción “Color de fondo de pantalla” y elegir un color para su sitio web. Puede usar la herramienta de selección de color o ingresar un código hexagonal de color.

Cuando haya terminado sus cambios, no olvide hacer clic en el botón “Publicar”. Ahora puede visitar su sitio web para ver el nuevo color de fondo en acción.

Es posible que su tema no tenga esta opción disponible en la costumbre de la tarea. En este caso, puede probar uno de los métodos a continuación. Cambie el color de fondo agregando CSS personalizado Otra forma en que puede cambiar el color de fondo de su sitio de WordPress es agregar CSS personalizado a WordPress Temo Customizer. Para comenzar, acceder a la apariencia »Personalizar y luego acceder a la pestaña” CSS Adicional “. Luego puede ingresar el siguiente código: Body {

Color de fondo: #FFFFFF;

}
Todo lo que tiene que hacer es reemplazar el código de color de fondo con el código de color que desea usar en su sitio web. Luego continúe e ingrese el código en la pestaña CSS adicional.
Cuando haya terminado, no olvide hacer clic en el botón “Publicar”. Ahora puede visitar su sitio web para ver el nuevo color de fondo. Para obtener más detalles, consulte nuestra guía sobre cómo agregar fácilmente CSS Custom a su sitio web de WordPress. Cambie al azar los colores de fondo en WordPress ahora, ¿está buscando una manera de cambiar al azar el color de fondo en WordPress?
Puede agregar un efecto suave de cambiar el color de fondo para pasar automáticamente entre diferentes colores de fondo. El efecto pasa por varios colores hasta que alcanza el color final. Para agregar el efecto, deberá agregar código a su sitio de WordPress. Lo guiaremos a través del siguiente proceso. Lo primero que debe hacer es descubrir la clase CSS del área donde desea agregar el efecto suave de cambiar de fondo. Puede hacerlo utilizando la herramienta de inspección del navegador. Todo lo que tiene que hacer es llevar el mouse en el área donde desea cambiar el color y hacer clic derecho para seleccionar la herramienta de inspección. Después de eso, deberá tener en cuenta la clase CSS a la que desea apuntar. Por ejemplo, en la captura de pantalla anterior, queremos apuntar al área con un “encabezado de página” de clase CSS. Luego debe abrir un editor de texto simple en su computadora como bloque de notas y crear un nuevo archivo. Deberá guardar el archivo como “WPB-Background-Tutorial.js” en el escritorio. Una vez que haya terminado, puede agregar el siguiente código al archivo JS que acaba de crear: jquey (function ($) {

$ (‘.
Var $ this = $ (this),

Colores = [‘#ec008c’, ‘#00bc3’, ‘#5fb26a’, ‘#fc7331’];
setInterval (function () {
color lima = colores.hift ();
Colores.push (color);
$ this.animate ({backgroundColor: color}, 2000);
}, 4000);
});
});
Si estudia el código, notará que hemos usado el “cabezal de página” de clase CSS, porque es el área al que queremos dirigir en nuestro sitio.
También verá que usé cuatro colores usando el código de color hexadecimal. Puede agregar cuántos colores desea para el fondo. Todo lo que tiene que hacer es ingresar los códigos de color en el fragmento y separarlos usando una coma y citas simples, al igual que los otros colores. Ahora que su archivo JS está listo, deberá cargarlo en su WordPress Top -Of -The -Word utilizando un Protocolo de transferencia de archivos (FTP). Para este tutorial, usamos Filezilla. Es un cliente FTP gratuito para Windows, Mac y Linux y es muy fácil de usar. Para comenzar, deberá iniciar sesión en el servidor FTP de su sitio web. Puede encontrar el inicio de sesión en el correo electrónico de su proveedor de host o en su panel de control Cpanel. Web en la columna “Sitio remoto”. Continúe y navegue por la carpeta JS desde el tema de su sitio.
Si su tema no tiene una carpeta JS, puede crear una. Simplemente haga clic correctamente: haga clic en la carpeta de su tema en el cliente FTP y haga clic en la opción “Crear director”.
Luego tendrá que abrir la ubicación de su archivo JS en la columna “Sitio local”. Luego, haga clic en el archivo y haga clic en la opción “Cargando” para agregar el archivo a su tema.
Para obtener más detalles, puede seguir nuestro tutorial sobre cómo usar FTP para cargar archivos en WordPress.
Luego deberá ingresar el siguiente código en el archivo Foundations.php del tema. Este código carga correctamente el archivo JavaScript y el script de jquey dependiente que necesita para que este código funcione.

wp_enqueue_script (‘wpb-background-tour’, get_stylesheet_directory_uri (). ‘/js/wpb-background-totorial.js’, array (‘jQuery-color’), ‘1.0.0’,};

add_action (‘wp_enqueue_scripts’, ‘wpb_bg_color_scripts’);

Le recomendamos que use los fragmentos de código de complementos para agregar de forma segura el código a su sitio para obtener más detalles, consulte nuestra guía sobre cómo pegar fragmentos de la web a WordPress. Ahora puede visitar su sitio web para ver los colores que cambian al azar en acción en el área al que estaba apuntando.
Cambie el color de fondo para publicaciones individuales también, puede cambiar el color de fondo de cada publicación de blog individual en WordPress en lugar de usar un solo color en todo su sitio utilizando CSS personalizado. Le permite cambiar la apariencia de ciertas publicaciones y personalizar sus fondos. Por ejemplo, puede personalizar el estilo de cada publicación basado en autores o mostrar un color de fondo diferente para la publicación más comentada. Incluso puede cambiar el color de fondo para las publicaciones en una determinada categoría. Por ejemplo, las publicaciones de noticias pueden tener diferentes colores de fondo en comparación con los tutoriales. Lo primero que debe hacer es encontrar la clase Post de identificación en su tema CSS. Puede hacerlo visualizando cualquier publicación de blog y luego haga clic con el derecho para usar la herramienta de inspección del navegador.
Aquí hay un ejemplo de cómo se vería:
Después de tener la ID de publicación, puede cambiar el color de fondo de una publicación individual utilizando el siguiente CSS.Simplemente reemplace la ID de publicación para que coincida con el código de fondo deseado … Post-104 {Background-Color: #D7DEB5;
Color: #ffffff;
}


Para agregar CSS personalizado, puede usar WordPress Temo Customizer.Primero, asegúrese de estar conectado a su sitio de WordPress.Luego visite la publicación del blog y haga clic en la opción “Personalizar” en la parte superior.Después de eso, vaya a la pestaña CSS adicional en el menú izquierdo.

Luego ingrese CSS personalizado y luego haga clic en el botón “Publicar”.
Ahora puede visitar la publicación del blog para ver el nuevo color de fondo. Si desea cambiar el color de fondo de acuerdo con el autor, los comentarios o la categoría, consulte nuestro tutorial detallado sobre cómo estilizar cada publicación de WordPress. Use un video en el fondo del fondo de videos como fondo de su sitio web es una excelente manera de atraer la atención de los visitantes y aumentar la participación de los usuarios. La forma más fácil de agregar un video al fondo es mediante un complemento de WordPress. Para este tutorial, utilizaremos MB.ytPlayer para videos de fondo. Es un complemento gratuito que le permite reproducir videos de YouTube en el fondo de su sitio de WordPress. También hay una versión premium disponible, que le permite eliminar la marca de agua MB.ytPlayer y proporcionar más características de personalización. Primero, deberá instalar y activar el complemento en su sitio web. Para obtener más detalles, puede seguir nuestro tutorial sobre cómo instalar un complemento de WordPress. Después de la activación, puede acceder a MB.ideas »ytplayer en el área de administración de WordPress. En la siguiente pantalla, deberá ingresar la URL de su video de YouTube y activar el video de fondo. Además, el complemento le permite seleccionar la ubicación para mostrar el video de fondo. Puede elegir una página de inicio estática, un inicio del índice del blog o ambos. También hay una opción para mostrar el video en todo el sitio, si selecciona “todo”. Después de ingresar a la URL de video y activar los antecedentes, continúe y visite el sitio web para ver los antecedentes de video en acción.
Cree una página de destino personalizada La creación de páginas de destino personalizadas en WordPress le permite generar clientes potenciales y aumentar las ventas para su negocio. Tiene un control completo sobre los antecedentes y el diseño de la página. La forma más fácil de crear una página de destino personalizada extremadamente atractiva es usar SeedProd. Es el mejor complemento para la página de destino de WordPress y ofrece un generador de página fácil de usar para crear páginas sin editar el código. Lo primero que debe hacer es instalar y activar SeedProd en su sitio web. Puede consultar nuestra guía sobre cómo instalar un complemento de WordPress. Nota: Utilizaremos la versión Seedprod Pro, ya que ofrece funciones más fuertes, plantillas y opciones de personalización. Sin embargo, también hay una versión gratuita disponible en wordpress.org. Una vez que el complemento esté activo, se le solicitará que ingrese la clave de licencia. Puede encontrar la clave en su área de cuenta Seedprod. Después de ingresar a la tecla, haga clic en el botón “Compruebe la tecla”. Luego puede acceder a las páginas de SeedProd “y haga clic en el botón” Agregar una nueva página de destino “.
Después de eso, deberá seleccionar un tema para su página de destino. Seedprod ofrece muchas páginas de destino hermosas para comenzar. También puede usar una plantilla vacía para comenzar desde cero. Sin embargo, le sugerimos que use una plantilla, ya que es una forma más fácil y rápida de crear una página de destino.
Al seleccionar una plantilla, se le pedirá que ingrese un nombre de página y elija una URL.
En la siguiente pantalla, verá el generador de página Seedprod. Aquí puede usar el generador de arrastrar y soltar para agregar bloques desde el menú izquierdo. Puede agregar un título, un video, una imagen, un botón, etc. Al desplazarse hacia abajo, hay varios bloques en la sección avanzada. Por ejemplo, puede agregar un cronómetro para crear emergencia, puede mostrar perfiles sociales para aumentar la cantidad de seguidores, puede agregar un formulario de opción para recopilar clientes potenciales y más. Al usar el generador de deslizamiento y colocación, es fácil cambiar La posición de cada bloque en su página de destino. Incluso puede cambiar la apariencia, el tamaño, el color y la fuente del texto. Para cambiar el color de fondo de su página de destino, simplemente seleccione cualquier sección de la página. Ahora verá opciones en el menú a su izquierda para editar el estilo de fondo, colorear y agregar una imagen.

Después de haber terminado de editar la página de destino, no olvide hacer clic en el botón “Guardar” en la parte superior. Luego puede acceder a la pestaña “Iniciar sesión” y puede integrar la página con diferentes servicios de marketing por correo electrónico. Por ejemplo, puede conectarse al contacto constante, SandInblue y otros.

Después de eso, continúe y haga clic en la pestaña “Configuración de la página”. Aquí puede cambiar la condición de la página en el boceto en publicación para transmitir su página en vivo.

Además, puede cambiar la configuración de SEO de la página, ver el análisis, agregar código personalizado en los scripts e ingresar un dominio personalizado. Una vez que haya terminado, puede salir del generador de páginas Seedprod y visitar la página de destino personalizada.