Colores y fuentes

Puedes configurar Colores y Fuentes en Kadence navegando a: Web >>> Apariencia >>> Personalizar >>> Colores y Fuentes.


Kadence utiliza un sistema de 9 colores divididos en: 2 colores de acento, 4 colores de texto de contraste y 3 colores de fondo, cada uno de los cuales cumple una función de diseño específica.

Las 9 funciones son:

  1. Acento
  2. Acento (Alt)
  3. Texto más fuerte
  4. Texto fuerte
  5. Texto medio
  6. Texto/Bordes sutiles
  7. Fondo Sutil
  8. Fondo más claro
  9. Blanco

Puedes configurar los colores del texto, los colores de fondo, los colores de los bordes, la configuración de los bordes, el radio de los bordes, el tipo y tamaño de fuente, el relleno por dispositivo y las sombras de los botones, incluidos los estados hover.

En el panel Tipografía, puedes establecer la fuente base y las fuentes de los encabezados, así como el color, el tamaño, el peso y el estilo de la fuente para uso global e individual.

Sí. Aunque los encabezados heredan la fuente global por defecto, cada uno puede personalizarse individualmente con una fuente diferente.

Para aplicar los cambios realizados en la configuración de Colores o Fuentes, debes hacer clic en el botón «Publicar» situado en la parte superior izquierda de la pantalla del Personalizador.

Puedes acceder a la configuración de la cabecera navegando a: Web >>> Apariencia >>> Personalizar >>> Cabecera.

Hay dos pestañas principales: General y Diseño.

En la pestaña General, puedes arrastrar y soltar varios elementos en los diseños de escritorio y móvil de la cabecera. También puedes editar cualquier elemento existente haciendo clic sobre él.

La pestaña Diseño te permite establecer el color de fondo de la cabecera y definir el ancho de pantalla en el que se activa la versión móvil de la cabecera.

Puedes activarlo:

  • Cabecera transparente: Hace que la cabecera se funda con tu contenido.
  • Cabecera fija: Mantiene la cabecera fija en la parte superior de la pantalla durante el desplazamiento.
  • Cabecera condicional: Permite diferentes cabeceras para secciones específicas del sitio.
  • Activar Bloque Cabecera: Te permite utilizar un Bloque Encabezado preconstruido (función avanzada).

Encontrarás información más detallada en la documentación oficial de Kadence.

Puedes acceder a la configuración del pie de página navegando a: Web >>> Apariencia >>> Personalizar >>> Pie de página.

Hay dos pestañas principales: General y Diseño.

En la pestaña General, puedes arrastrar y soltar varios elementos en los diseños de escritorio y móvil del pie de página. También puedes hacer clic en cualquier elemento colocado para editarlo y personalizarlo.

La pestaña Diseño te permite establecer el color de fondo del pie de página y activar la opción «Mantener el pie de página en la parte inferior de la pantalla».

Sí, haciendo clic en un elemento configurado del pie de página, puedes ajustar su configuración y contenido.

Encontrarás información más detallada en la documentación oficial de Kadence.

General

Ve a tu panel de control y sigue esta ruta: Web >>> Apariencia >>> Personalizar >>> General.

Puedes establecer la anchura máxima del contenido del sitio, el espaciado general y las sombras de caja aplicadas a los elementos visuales.

Puedes establecer la anchura de la barra lateral, el espacio entre sus widgets y activar la opción Barra lateral fija.

Puedes definir un radio de borde por defecto para las imágenes insertadas en todo tu sitio web.

Permite a los usuarios volver rápidamente a la parte superior de la página mostrando un botón una vez que se desplazan hacia abajo.

Puedes definir el diseño predeterminado de la página de error 404 y habilitar una barra lateral específica para ella si es necesario.

Puedes mover la entrada de comentarios por encima de la lista de comentarios y eliminar el campo «Sitio web» para reducir el spam.

Te permite elegir el motor de migas de pan para tu sitio. Se recomienda RankMath por su total integración.

Puedes añadir los enlaces de tus redes sociales, que estarán disponibles para su uso en varios bloques o plugins compatibles.

Diseño de Entradas/Páginas

Ve a Apariencia >>> Personalizar >>> Diseño de Entradas/Páginas desde tu panel de control.

Puedes elegir mostrar u ocultar el título, mostrarlo «En el contenido» o «Sobre el contenido», alinearlo y mostrar elementos adicionales como migas de pan, fecha, autor y otros metadatos.

Puedes elegir entre: Normal, Estrecho, Ancho completo, Barra lateral izquierda y Barra lateral derecha.

Elige entre «En caja» (añade relleno y estilo de fondo) o «Sin caja» (el contenido ocupa todo el ancho de la página).

Controla el relleno superior e inferior de tu contenido. Las opciones son: Activar (arriba y abajo), Desactivar, Sólo arriba y Sólo abajo.

Muestra la imagen destacada dentro del contenido si se ha configurado una para la página o entrada. Puedes configurar su posición y proporción.

Activa o desactiva la visualización de la sección de comentarios en páginas o entradas.

Puedes incluir Breadcrumb, Categorías, Título, Meta (autor, fecha, etc.) y Extracto.

Las Entradas ofrecen opciones adicionales como Etiquetas, Caja de Autor, Navegación por la Entrada, Entradas Relacionadas (con opciones de diseño), comportamiento de Carrusel y Fechas de Comentarios.

Puedes configurar el Título del Archivo como «En el contenido» o «Sobre el contenido» y elegir que se muestren la Miga de Pan, el Título de la Categoría/Sección y la Descripción.

Puedes mostrar u ocultar la Imagen Destacada (y personalizarla), las Categorías, el Título, la Meta, el Extracto y el enlace «Leer más» con una etiqueta personalizada.

Sí. Utiliza el botón «Ajustes de página» situado en la parte superior derecha del editor de entradas/páginas para aplicar ajustes de diseño personalizados.

Resultados de la búsqueda

Puedes configurarlo navegando a: Web >>> Apariencia >>> Personalizar >>> Resultados de la búsqueda.

Los usuarios serán redirigidos a una página predeterminada de resultados de búsqueda cuando utilicen la función de búsqueda.

Puedes ajustar su disposición y diseño, incluyendo:

  • Título de los resultados de la búsqueda
  • Disposición del archivo
  • Disposición del elemento de búsqueda

Sí, utiliza el mismo formato que el Diseño de Archivo, con las mismas opciones y elementos disponibles.

Identidad del sitio

Navega hasta: Web >>> Apariencia >>> Personalizar >>> Identidad del sitio.

Es la imagen que aparece en la pestaña del navegador del usuario y también en los accesos directos de los dispositivos móviles a tu sitio web.

Utiliza una imagen cuadrada con un tamaño mínimo de 512 x 512 píxeles.

Puedes subirlo o sustituirlo utilizando el gestor de medios de la sección Identidad del sitio.

Haz clic en el botón «Control del título y logotipo del sitio», situado en la parte superior izquierda de la pantalla, para ser redirigido a la sección correspondiente de configuración del encabezado.

Puedes configurar y ajustar el logotipo global, el diseño del logotipo, el título del sitio y el eslogan.

Pulsa el botón «Icono del sitio» situado en la parte inferior izquierda de la pantalla para volver a la configuración anterior.

WooCommerce

Navega hasta Web >>> Personalizar >>> WooCommerce desde tu panel de control.

Activa la opción «Aviso de la tienda» y configura su ubicación para mostrar un banner en todo el sitio.

Puedes elegir entre los diseños Normal, Estrecho, Ancho completo, Barra lateral izquierda o Barra lateral derecha.

Puedes cambiar la visibilidad de: categoría, título, valoración, extracto, botón de añadir al carrito, extras, pagos, meta del producto e iconos para compartir en redes sociales.

Sí, activando «Usar más y menos cantidad personalizada», disponible sólo para productos simples.

Sí, activa «Mostrar productos relacionados» y establece el número de columnas.

En la sección Catálogo de productos, puedes ajustar los estilos de contenido, las acciones de los botones y los diseños de cuadrícula/lista.

Sí, activando «Contenido personalizado para la página de la tienda», que sustituye el diseño predeterminado del archivo por tu contenido personalizado.

Sí, activa «Añadir área de widgets fuera del lienzo» para incluir un panel de widgets conmutable.

Sí, puedes establecer el tamaño de la imagen principal y de las miniaturas, así como los métodos de recorte.

Puedes establecer los campos como opcionales/requeridos, resaltar los campos obligatorios y enlazar a tus páginas de privacidad y condiciones.

Sí, activa «Mostrar la ventana emergente del carrito al añadir al carrito» para mostrar una confirmación instantánea.

Sí, activa «Añadir a la cesta con Ajax para un solo producto» para una experiencia de compra más fluida.

CSS adicional

Desde Web >>> Apariencia >>> Personalizar >>> CSS adicional.

Puedes insertar cualquier código CSS 3.0 válido.

Pulsa el botón «Publicar » para guardar y aplicar tus cambios.

Sí, utiliza la tecla Tab para insertar tabuladores, y Esc + Tab para salir del área de edición.

Sí, puedes desactivarlo desde tu perfil de usuario para cambiar al modo de texto sin formato.

Scripts personalizados

Desde Web >>> Apariencia >>> Personalizador >>> Scripts personalizados.

Puedes insertar scripts en el Encabezado, inmediatamente después de la etiqueta o en el Pie de página.

Para añadir códigos de análisis, bibliotecas de efectos visuales adicionales o funcionalidades personalizadas.

En el pie de página, para optimizar el rendimiento y la velocidad de carga del sitio.

Sí, utiliza la sección Conversiones del módulo Tienda para insertar fácilmente estos scripts.

Deja una respuesta