Digamos que le gusta el aspecto general de su sitio web o blog, que ha encontrado un proveedor de alojamiento web perfecto y está más que satisfecho con el tema que ha elegido. Sin embargo, solo hay una cosa pequeña, pero aún importante, que le gustaría cambiar. Te sientes como si pudieras agregue un toque más personal a su sitio de WordPress cambiando su esquema de color. Para facilitarle este proceso, le mostraremos algunas formas diferentes de ajustar los colores de WordPress, incluido cómo hacerlo en los temas de WordPress de Qode Interactive.
Antes de mostrarte cómo cambiar los colores usando la opción Personalizar, debemos tener en cuenta que estas opciones particulares dependen del tema que estés usando. Usamos el tema de WordPress predeterminado de Twenty Twenty-One para los propósitos de este artículo, así que en caso de que esté usando algún otro tema en su sitio y / o no tenga estas opciones en su tema, siempre puedes consultar el método del complemento en su lugar (que cubriremos un poco más adelante).
Paso 1
Lo primero es lo primero, ir a Apariencia >> Personalizar.
Paso 2
Una vez ahí, Selecciona el Colores y modo oscuro pestaña.
Paso 3
Aquí encontrará la opción para cambiar el color de fondo de su sitio, llamada Seleccionar el color. Debe hacer clic en esta opción.
Paso 4
Esto abrirá el panel de color que puede usar para agregue su propio color personalizado o seleccione el de la paleta. Si desea utilizar la última opción, puede haga clic en cualquier lugar que desee en la paleta, o simplemente arrastre el pequeño círculo alrededor hasta crear el color que mejor se adapte a tus necesidades. Alternativamente, también puede escriba el código RGB en el campo de entrada de la derecha.
Paso 5
Justo al lado de la paleta, también hay un área donde puede Determina si quieres optar por el tono de color más claro o más oscuro. Puede hacer esto arrastrando el control deslizante hacia arriba o hacia abajo.
Paso 6
Una vez que esté satisfecho con su elección, haga clic en Seleccionar el color una vez más.
En cuanto a los elementos de tu sitio, siempre serán calculados y configurados automáticamente, según los colores de fondo que elijas. Esto es genial, ya que garantiza que el contraste entre el fondo y los elementos sea siempre lo suficientemente alto para que los usuarios puedan verlo fácilmente.
Paso 7
Si planea usar un color claro para el fondo de su sitio, también podrá usar la opción de soporte del Modo oscuro. Esta configuración permite que un visitante del sitio vea su sitio en modo oscuro, es decir, si quiere que se muestre de esa manera. Simplemente marque la opción «Compatibilidad con el modo oscuro» y su sitio se mostrará con un fondo oscuro y texto claro.
Paso 8
Además, para obtener una vista previa de su esquema oscuro, puede clickea en el Modo oscuro: desactivado botón (ubicado en la esquina inferior derecha de la pantalla). Esta acción activará el modo oscuro:
Paso 9
Una vez que haya terminado de configurar sus colores, presione el Publicar botón y ya está todo listo.
Paso 10
Finalmente, para volver al panel de usuario, simplemente haga clic en el X botón en la esquina superior izquierda de la Personalizar pantalla.
La mayoría de los temas premium de WordPress te permiten cambiar sus colores con facilidad. Sin embargo, debes tener en cuenta que no todos los temas permiten el mismo nivel de personalización. Si su tema no viene con muchas opciones de personalización, siempre puede usar una de las herramientas y complementos que se pueden encontrar en la web para agregar CSS personalizado para cambiar todo lo que necesita. Aquí se explica cómo cambiar los colores con la ayuda del Complemento CSS SiteOrigin.
1 primero, acceder a su Complementos pantalla en el panel de administración. Luego, después de encontrar el complemento CSS SiteOrigin, instalarlo y activarlo.
2. Ir a Apariencia> CSS personalizado.
3. Una vez que se abre el editor de CSS, haga clic en el icono del ojo ubicado en la esquina superior derecha del editor.
4. Ahora, al hacer clic en el ojo, aparecerá una nueva pantalla. En el lado izquierdo, verá un Panel de control, mientras que en el lado derecho de la pantalla tendrás una vista previa en vivo de cómo se verá su página mientras edita.
5. A medida que mueva el mouse por la página, verá los elementos de la página resaltados cuando pase el mouse sobre ellos.
6. Solo haga clic en el elemento que desea cambiar (como el color de fondo de la página, por ejemplo), y verá el nombre del elemento agregado en la esquina superior izquierda del panel de control.
7. Ahora, clickea en el Decoración pestaña.
8. Aparecerán algunas opciones nuevas, y el color de fondo estará entre ellas.
9. Haga clic en el campo de entraday, de nuevo, se encontrará con el selector de color. Puede elegir el color que desee moviendo el círculo pequeño o escribiendo el código RGB de color en el campo de entrada. Podrá obtener una vista previa de todos los cambios a la derecha.
10. Una vez que haya elegido su color, marcar la casilla de verificación.
11. Volverá a la pantalla del editor de CSS, donde verá que se ha agregado su CSS. Todo lo que necesitas hacer es haga clic en Guardar CSS.
12. El complemento le permitirá saber que el sitio se ha actualizado. Para verlo en vivo, simplemente actualiza tu página.
Y así es como puede utilizar el complemento CSS SiteOrigin para cambiar los colores de su sitio web.
Cada uno de los temas de Qode Interactive viene con un montón de opciones de personalización de color para varias partes de su sitio. Hay dos lugares principales donde puede cambiar la combinación de colores de su sitio: la configuración general del tema, y en cada página / publicación en sí.
Cualquier opción que personalice en la configuración general se aplicará a todo su sitio web, mientras que los elementos que configure en la página o publicación (naturalmente) solo se aplicarán a la página / publicación en cuestión.
1. Configuración general del tema
Cada tema tiene su propia configuración general con opciones que se pueden especificar para el tema en sí.
Las opciones están ordenadas en grupos, cada grupo relacionado con una parte específica de su sitio. Esto facilita la gestión del sitio web. Hay ciertos grupos de opciones que están disponibles en todos nuestros temas, mientras que algunas opciones varían ligeramente de un tema a otro. Las opciones que tendrá el tema dependen en gran medida del propósito del tema y sus requisitos.
1. General opciones
Aquí puedes establecer algunos de los colores generalmente más dominantes del sitio, igual que Primer / segundo color principal (los colores principales del tema) y Color de fondo de la página. Tenemos que recordarle que no olvide que todo lo que ajuste en las opciones generales se aplicará a todo el sitio web.
Aquí también puede encontrar opciones como Color de selección de texto (elija los colores que los usuarios ven al seleccionar cualquier texto en su página) y Color de fondo del cargador de página (el color que se puede ver antes de que se cargue la página).
2. Fuentes
Con nuestros temas, es muy fácil cambiar los colores de fuente. En el Fuentes sección del panel de opciones, puede configurar los colores de todos los encabezados (del 1 al 6), párrafos, enlaces, así como los colores de desplazamiento.
3. Encabezamiento opciones
Las opciones de encabezado son donde puede encontrar todas las configuraciones relacionadas con el encabezado, como el tipo de encabezado y la apariencia. En cuanto a los colores, puedes ajustar:
4. Encabezado móvil opciones
Algunos temas también tienen opciones de color independientes para el encabezado que se muestra cuando el sitio se visualiza en dispositivos móviles. Aquí puedes ajustar el fondo, el texto y los colores de navegación.
5. Título opciones
Aquí es donde puedes establecer todos los colores que se pueden encontrar en el Título zona – Fondo, Título del texto, Subtitular, y Migas de pan, si están disponibles.
6. Parte inferior del contenido opciones
los Parte inferior del contenido es un área de widgets que se muestra debajo del contenido de sus páginas. En el Parte inferior del contenido sección de las opciones generales de su tema, puede establecer el Color de fondo de esta área.
7. Pie de página opciones
A diferencia del Título y Encabezamiento opciones, donde puede ajustar el color del texto, aquí solo puede establecer el color de fondo de su pie de página. El color del texto en el pie de página se extrae de los widgets que se utilizan en el pie de página.
8. Elementos
Algunos temas tienen opciones generales para elementos temáticos / códigos cortos específicos. Aquí puede establecer colores predeterminados para estos elementos.
9. Área lateral opciones
Algunas de las opciones disponibles en el Área lateral pestaña incluir Color de fondo de superposición de contenido y Transparencia de fondo de superposición de contenido. Cuando el área lateral está activa, estas dos opciones se utilizan para oscurecer o cambiar el color de la página en el fondo. Aparte de estas dos opciones, aquí también puede encontrar las opciones de color para el icono que abre y cierra el área lateral.
10. Buscar opciones
Estas opciones se utilizan normalmente para establecer el color del icono de búsqueda abrir / cerrar, pero también pueden aparecer algunas otras opciones según el tema.
11. Formulario de contacto 7
Aquí puede personalizar todos los colores relacionados con el complemento Contact Form 7 (una gran herramienta que le permite recopilar información, pedir a sus visitantes que la agreguen a su lista de correo electrónico, etc.). Hay varios estilos disponibles y, para cada estilo, puede elegir el color del texto, el fondo, el borde y el botón.
Configuración de página / publicación
Como mencionamos anteriormente, si desea cambiar las opciones de color para una página o publicación específica, puede hacerlo en la página o en la publicación.
Debajo del área del editor en cada página / publicación, encontrará el opciones para partes específicas de esa página o publicación. Por supuesto, algunas opciones generales (como las opciones del área lateral) no se pueden configurar en la página de forma individual.
En caso de que no vea algunas de estas opciones en el backend, significa que deben estar activadas. Puedes hacer esto fácilmente accediendo al Opciones de pantalla, ubicado en la esquina superior derecha de la página. Allí puede marcar todos los campos que están desmarcados, y las opciones correspondientes aparecerán en la configuración de su página / publicación.
Conclusión
Y eso concluye nuestra guía sobre cómo ajustar los colores del sitio web de WordPress. Como puede ver, hay muchas formas diferentes en las que puede personalizar los colores en WordPress. En general, sus posibilidades dependerán del rango de opciones de su tema. En caso de que no quiera estar limitado de esta manera, siempre puedes instalar un complemento de personalización de color lo que le dará más libertad para personalizar los colores de su sitio web de la forma que desee. Sin embargo, si está usando (o planea usar) uno de los temas de WordPress de Qode Interactive, entonces está bastante cubierto en lo que respecta a la personalización del color. Esto también incluye la capacidad de cambiar el color del texto de WordPress, los colores del encabezado y pie de página, y cualquier otra sección y elemento del sitio web.
Finalmente, en caso de que alguna vez necesite inspiración adicional, siempre puede consultar algunas de las muchas combinaciones de colores disponibles para tener una buena ventaja.
Apoya nuestro trabajo ❤️
Si te ha gustado este artículo, considera dejar una propina para ayudarnos a seguir publicando contenido de calidad.
