Estás leyendo la publicación: 4 formas fáciles de cambiar el color de fondo en WordPress
Seamos sinceros:
¡No hay nada más frustrante que quedarse con un fondo blanco cuando quieres un sitio web más vibrante, llamativo y atractivo!
Afortunadamente, no necesita ser un experto en tecnología para cambiar el color de fondo de su sitio web de WordPress.
En este artículo, lo guiaremos a través de cuatro métodos simples para cambiar el color de fondo en WordPress en un par de minutos.
Formas de cambiar el color de fondo en WordPress
Si desea darle vida a su sitio de WordPress, cambiar el color de fondo es un excelente lugar para comenzar. Puede realizar esta tarea de varias maneras, desde usar el personalizador de temas incorporado hasta instalar complementos especiales.
Aquí hay cuatro métodos simples para aplicar un nuevo color de fondo en su sitio web de WordPress.
1. Personalizador de temas
La forma más sencilla de cambiar el color de fondo de su sitio web es mediante el personalizador de temas de WordPress. Si bien la mayoría de los temas reservan esta característica para usuarios pagos, Astra lo ofrece gratis (lea la revisión completa del tema Astra aquí). Aquí le mostramos cómo probarlo usted mismo.
1. Inicie sesión en su panel de WordPress y seleccione Apariencia > Personalizar en el menú de navegación izquierdo.
2. Dependiendo de su tema, haga clic en las siguientes opciones para acceder a la opción de personalización de fondo:
- Astra: Global > Colores > Fondo del sitio
- dividir: Configuración general > Fondo > Colores de fondo
- OceanWP: Opciones generales > Estilo general > Colores de fondo
3. Seleccione cualquier color de la paleta y haga clic en Publicar en la barra de menú superior.
2. CSS personalizado
El color de fondo predeterminado de su sitio web está determinado por un tipo de código llamado CSS. Puede aplicar cualquier color al fondo de su sitio ajustando este código.
Pero primero, debe convertir el color elegido en un código hexadecimal de seis dígitos. Utilice esta herramienta de selección de color gratuita para generar un código de color hexadecimal personalizado antes de seguir adelante.
1. Inicie sesión en su cuenta de WordPress y vaya a Apariencia > Personalizar.
2. Haga clic en CSS adicional en la barra de menú de la izquierda.
3. Introduzca el siguiente código CSS personalizado en el cuadro de texto:
.sitio { color de fondo: #XXXXXX; }
Reemplace la ‘XXXXX‘ con un código de color hexadecimal de su elección.
Nota: si el primer código no funciona, intente reemplazar ‘sitio’ con ‘cuerpo’ en el código CSS personalizado.
4. Seleccione Publicar desde la barra superior para guardar su configuración.
3. Editor completo del sitio
WordPress presentó su Full Site Editor en 2022 con nuevas funciones de edición para páginas individuales. Esta actualización permite a los usuarios modificar la imagen o el color de fondo de su sitio web sin comprar temas o complementos premium.
Estos son los pasos para hacerlo:
1. Inicie sesión en su tablero y vaya a Apariencia > Temas.
2. Seleccione un tema de WordPress que admita Full Site Editor y haga clic en Activar. (Usaremos Twenty Twenty-Three para este ejemplo).
3. Haga clic en Editor de la barra de menú izquierda. Después de que la pantalla se vuelva a cargar, presione el botón Editar botón.
4. Para cambiar el color de fondo, haga clic en el azul + en el menú superior y busca el Cubrir bloquear. Haga clic en el icono para aplicar.
5. Seleccione un color de la paleta de colores predeterminada.
Nota: si desea utilizar un color personalizado, cambie a ‘Bloquear’ y luego a la pestaña ‘Estilos’ en la barra de menú de la izquierda. Haga clic en ‘Superposición’ y cree su propio tono sólido o degradado con la herramienta de selección de color.
6. Haga clic en el Menú Hamburguesa en el menú superior y arrastre cada sección debajo Cubrir.
7. Para cambiar el color de un bloque individual, haga clic en él y vaya a la Bloquear y Estilos pestaña de la barra de navegación derecha.
8. Toque en Fondo y seleccione su propio fondo usando la herramienta de selección de color.
9. Una vez que haya realizado todos los cambios, haga clic en el Ahorrar botón dos veces en la esquina superior derecha.
4. Editor de bloques
WordPress Block Editor tiene una función oculta que le permite cambiar el color de fondo de partes específicas de su sitio web.
Puede experimentar con diferentes tonos utilizando una paleta de colores integrada y seleccionar entre una variedad de fondos sólidos y degradados.
1. Inicie sesión en WordPress y haga clic en cualquiera Paginas o Publicaciones.
2. Seleccione la página/publicación que desea personalizar y toque Editar.
3. Haga clic en el + icono para agregar un encabezado o párrafo.
4. En la barra lateral izquierda, cambie a Bloquear y seleccione Fondo.
5. Elija un color sólido o degradado y haga clic en Actualizar de la barra de menú superior.
Cómo cambiar el color de fondo de una sola página
Seleccionar el color de fondo correcto puede ser fundamental para su tasa de clics e ingresos. Tome a Heinz como ejemplo; ¡vendió más de 10 millones de botellas de ketchup en 7 meses después de cambiar sus colores de rojo a verde!
El uso de un color de fondo llamativo en su página de conversión puede recrear el mismo efecto y aumentar significativamente sus ventas. Estos son los pasos para cambiar el color de fondo de una sola página web en WordPress.
1. Abra la publicación/página en su sitio web que desea personalizar.
2. Haga clic derecho y seleccione Inspeccionar.
3. Busque la clase de identificación de la publicación y copie la identificación. (Presione Ctrl+F o Cmd+F y escriba ‘artículo’ para encontrar la identificación de la publicación).
4. Vaya a su panel de WordPress y haga clic en Apariencia > Personalizar.
5. Abra el CSS adicional pestaña del menú de la izquierda.
6. Pegue el siguiente fragmento de código:
.post-xxx { color de fondo: #FFFFFF; color:#000000; }
Reemplace la XXx después de ‘.post-‘ con la clase de ID copiada previamente. Para cambiar el color de fondo, reemplace el FFFFFF con un código de color hexadecimal de su elección. Repita lo mismo con el 000000 en la tercera línea para personalizar el color del texto de esa publicación/página.
7. golpear Publicar para guardar sus cambios.
Cómo agregar un fondo de video en WordPress
Usar un fondo de video puede ser una excelente manera de impresionar y educar a sus visitantes sobre su marca. Dado que la mayoría de los temas de WordPress no tienen una función integrada para agregar un fondo de video, usaremos el complemento Fondos avanzados de WordPress para este método.
1. Inicie sesión en WordPress y haga clic en Complementos > Agregar nuevo en el menú de navegación izquierdo.
2. Escriba ‘Fondos avanzados de WordPress’ en la barra de búsqueda. Hacer clic Instalar ahora y Activar.
3. Ir a Paginas utilizando el menú de la izquierda y haga clic en Editar en la página que desea personalizar.
4. Pulse sobre el + en la esquina superior izquierda y busque el AWB bloquear. Haga clic para agregarlo a su página.
5. En la barra de navegación derecha, cambie a Video. (También puede agregar imágenes de fondo cambiando a la Imagen pestaña.)
- Pegue un enlace de YouTube o Vimeo debajo del cuadro de texto URL del video para aplicar un video en línea.
- Para aplicar un video descargado, cambie a la Autohospedado pestaña. Seleccione uno de los formatos de video y cargue un clip desde su computadora en la Biblioteca de medios.
6. Edite el video usando los siguientes parámetros:
- Hora de inicio/finalización
- Repetir y reproducir siempre
- Color de fondo y superposición
- Ratón y paralaje estándar
- Espaciado
7. Haga clic en el + botón para agregar más bloques sobre el video. A medida que agregue más contenido, AWB ajustará automáticamente las dimensiones del video.
8. Presione el botón Actualizar en la parte superior derecha para publicar los cambios.
preguntas frecuentes
¡Aquí hay algunas respuestas a preguntas comunes sobre los colores de fondo en WordPress!
¿Cómo cambio el color de la fuente en WordPress?
Si está utilizando el personalizador de temas predeterminado, puede encontrar la opción para cambiar el color de la fuente en Global o Configuración general. Las personas que usan el Editor de sitio completo pueden encontrar esta opción en Ajustes de bloque sobre el selector de fondo.
¿Cómo cambio el color de fondo del encabezado en WordPress?
Para cambiar el color del encabezado de su sitio de WordPress, vaya a Apariencia > Personalizar y haga clic en CSS adicional. Pegue el siguiente fragmento de código y reemplácelo XXXXX con el código hexadecimal del color de fondo elegido:
.site-header { color de fondo: #XXXXXX; }
¿Cómo cambio el color principal de mi tema de WordPress?
Inicie sesión en su panel de WordPress y vaya a Apariencia > Personalizar. Seleccionar Global o Colores en el menú de la izquierda según el tema que estés usando. Haga clic en Color del tema principal o Acentuar el color y elige un tono usando la paleta. Golpear Publicar una vez que haya terminado.
Conclusión
Los colores pueden tener un gran impacto en la forma en que los clientes perciben su sitio web o tienda de comercio electrónico. Al elegir un color de fondo sólido, puede crear una personalidad que resuene con su público objetivo e impulse el crecimiento.
Si desea realizar personalizaciones más dramáticas en su sitio web, consulte nuestra lista de los 15 mejores temas animados de WordPress.
O, si desea obtener más información sobre CSS, lea nuestra guía sobre 3 formas simples de editar CSS en WordPress sin romper su diseño.
