Cómo personalizar los colores de su sitio web de WordPress

Cómo personalizar los colores de su sitio web de WordPress

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. Sientes que podrías 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.

Paso 1

Primero, ir Apariencia> Personalizar.

Personalizar los colores de WordPress

Paso 2

Una vez allí, Selecciona el Colores lengüeta.

Colores de WordPress

Paso 3

Aquí puede elegir si desea que su sitio tenga una esquema de color claro, oscuro o personalizado.

Colores de WordPress

Paso 4

Si hizo clic en el Color personalizado esquema, puede navegar a través de la paleta de colores hasta encontrar el color que desea utilizar. Esta opción cambiará el color principal de su sitio web (por ejemplo, los botones flotantes, etc.). Tú también puedes cambiar los colores en cada página individualmente.

Esquema de color personalizado de WordPress

Paso 5

Haga clic en Publicar cuando termines.

Publica cambios de color

Paso 6

Si lo desea, también puede cambiar el Color del texto del encabezado en el Colores lengüeta. Para hacer esto, solo haga clic en el Seleccionar el color opción.

Seleccione la opción de color

Paso 7

Al hacer clic en esta opción, se abrirá el panel de colores.

Panel de color de WordPress

Paso 8

Usted puede haga clic en cualquier lugar que desee en la paleta, o simplemente arrastra el pequeño círculo alrededor hasta crear el color que mejor se adapte a tus necesidades. Alternativamente, también puede escribir el código RGB en el campo de entrada a la derecha, como hicimos en la imagen de abajo.

Colores del sitio web

Paso 9

Una vez que esté satisfecho con su elección, haga clic en Seleccionar el color.

Colores del sitio web WordPress

Paso 10

Golpea el Publicar botón y ya está todo hecho.

Publicar colores de sitios web

Paso 11

Para volver al panel de usuario, simplemente haga clic en el X botón en la esquina superior izquierda de la Personalizar pantalla.

Personalizar pantalla

Cambiar colores con un plugin

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 plugins que se pueden encontrar en la web para agregar CSS personalizado para cambiar todo lo que necesita. A continuación, se explica cómo cambiar los colores con la ayuda del plugin CSS SiteOrigin.

1 primero, acceder a su Complementos pantalla en el panel de administración. Luego, después de encontrar el plugin CSS SiteOrigin, instalarlo y activarlo.

Complemento CSS SiteOrigin

2. Ir a Apariencia> CSS personalizado.

Complemento CSS personalizado

3. Una vez que se abra el editor de CSS, haga clic en el icono del ojo ubicado en la esquina superior derecha del editor.

Editor de CSS

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.

Vista previa en vivo del plugin CSS de SiteOrigin

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.

Complemento de WordPress SiteOrigin CSS

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.

Panel de control CSS de SiteOrigin

7. Ahora, clickea en el Decoración lengüeta.

Descripción CSS de SiteOrigin

8. Aparecerán algunas opciones nuevas, y el color de fondo estará entre ellas.

Colores CSS de SiteOrigin

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.

Complemento CSS SiteOrigin de WordPress

10. Una vez que haya elegido su color, marcar la casilla de verificación.

Elegir color

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.

Pantalla del editor de CSS

12. El plugin le permitirá saber que el sitio se ha actualizado. Para verlo en vivo, simplemente actualiza tu página.

SiteOrigin

Y así es como puede usar el plugin CSS SiteOrigin para cambiar los colores en su sitio web.

Cambio de colores en temas de Qode

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

Las opciones que personalice en la configuración general se aplicarán 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í.

Configuración general del tema de Qode

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, me gusta 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.

Color de opciones generales de Qode Theme

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 títulos (del 1 al 6), párrafos, enlaces, así como los colores de desplazamiento.

Colores de fuente del tema Qode

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:

    • Color de fondo: te permite establecer el color de fondo de tu encabezado. Solo tenga en cuenta que debe configurar los colores por separado para cada tipo de encabezado diferente.
    • Transparencia de fondo: otra opción útil que te permite ajustar la transparencia de fondo de tu encabezado.
    • Color de texto: también puede establecer el color del texto ubicado dentro del encabezado.
    • Color del menú desplegable: establecer el color de fondo de los menús desplegables.
    • Color del menú del borde: establezca el color de los bordes dentro del menú de encabezado.
Opciones de encabezado de tema de Qode

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.

Opciones de encabezado móvil de Qode Theme

5. Título opciones

Aquí es donde puedes establecer todos los colores que se pueden encontrar en el Título zona - Antecedentes, Título del texto, Subtitulary Migas de pan, si están disponibles.

Opciones de título del tema Qode

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.

Opciones inferiores del contenido del tema de Qode

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.

Opciones de pie de página del tema Qode

8. Elementos

Algunos temas tienen opciones generales para elementos temáticos / códigos cortos específicos. Aquí puede establecer colores predeterminados para estos elementos.

Opciones de elementos del tema Qode

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.

Área lateral del tema Qode

10. Buscar opciones

Estas opciones se utilizan normalmente para configuración del color del icono de búsqueda de apertura / cierre, 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 plugin 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.

Formulario de contacto del tema Qode 7

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 de área lateral) no se pueden configurar en la página individualmente.

Configuración de publicación de la página del tema de Qode

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.

Opciones de pantalla de página de WordPress
Opciones de pantalla WordPress

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

Si quieres conocer otros artículos parecidos a Cómo personalizar los colores de su sitio web de WordPress puedes visitar la categoría Tutoriales.

/* */ Subir

Este sitio web utiliza cookies para ofrecerle una mejor experiencia de navegación, si continua en navegando consideramos que acepta su uso.