> ## Documentation Index
> Fetch the complete documentation index at: https://help.kajabi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Personalizar la fuente y el estilo de la página con la Guía de Estilo

> Aprende a personalizar tus colores, fuentes y la apariencia general predeterminados de tu página con la configuración de Guía de Estilo.

Con Kajabi, puedes personalizar tus colores, fuentes y la apariencia general predeterminados de tu página para que se vea excelente en cualquier dispositivo, personalizando tus páginas con la Guía de Estilo. La configuración de Guía de Estilo asegura que tu marca y estilo sean consistentes en toda tu página.

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/0hpzfrgt66" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

<Note>
  **Nota:** Esta guía se refiere al último editor de páginas disponible. Si usas las Plantillas de Premier Legacy, consulta la guía [aquí](/es/articles/website/pages/how-to-customize-your-fonts-and-colors-in-your-premier-page-settings).
</Note>

***

## Apariencia general

Personaliza la configuración de apariencia general de tu página seleccionando una imagen de fondo y/o un color de fondo para mostrar en toda tu página.

¿No ves tu imagen en el fondo? Asegúrate de seleccionar **Use Background Image** y ajustar tu [Configuración de Fondo de Sección](/es/articles/website/pages/how-to-customize-your-section-background-settings) para las secciones en las que quieres mostrar la imagen de fondo de tu página.

Experimenta con distintas secciones, fondos y colores para crear efectos visuales creativos en tu página:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/xhw8nvxe0j" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

<Note>
  **Nota:** Solo disponible en el editor de páginas de tu sitio web con el website builder. [Aprende más](/es/articles/website/pages/customizing-your-website-pages-with-the-website-builder)
</Note>

***

## Colores

Tu Color Primario seleccionado se usa en toda tu página, incluyendo el color de los botones de texto, íconos sociales y botones de reproducción de video. Te recomendamos personalizar tu Color Primario para que se adapte a tu marca.

### Para cambiar tu Color Primario

* Abre la pestaña **Website** desde el Dashboard.
* Selecciona la pestaña **Pages**.
* Abre el editor de páginas de tu Página. [Aprende más](/es/articles/website/pages/how-to-get-to-the-page-editor)
* Ve al editor de la barra lateral y abre **Settings**.
* Haz clic en **Style Guide**.
* Luego, haz clic en **Primary Color** para seleccionar desde tu [paleta de colores del sitio](https://help.kajabi.com/hc/en-us/articles/360037850453#colors) o selecciona un color personalizado:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/kgy0dbafjz" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

Si prefieres usar un color personalizado, haz clic en la rueda de color y luego ingresa tu código de color RGB o usa los deslizadores para elegir tu color.

* El **cuadro** te permite ajustar el brillo y la saturación de tu color.
* La **barra horizontal de arcoíris** te permite seleccionar el tono.
* La **barra de degradado horizontal** te permite seleccionar la opacidad de tu color.

***

## Botones

Con el website builder, diseña la apariencia y el comportamiento de tus botones en todas tus páginas de sitio web estándar:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/38bm8rf9xl" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

Si deseas anular la configuración global de tus botones en alguna sección de tus páginas de sitio web estándar, simplemente haz clic en el botón de la sección que quieres personalizar y anula la configuración global.

<Note>
  **Nota:** Solo disponible en el editor de páginas de tu sitio web. [Aprende más](/es/articles/website/pages/customizing-your-website-pages-with-the-website-builder)
</Note>

### Color de fondo del botón

Haz clic en **Button background color** para seleccionar un color de tu paleta de colores del sitio.

Si prefieres usar un color personalizado, haz clic en la rueda de color y luego ingresa tu código de color RGB o usa los deslizadores para elegir tu color.

* El **cuadro** te permite ajustar el brillo y la saturación de tu color.
* La **barra horizontal de arcoíris** te permite seleccionar el tono.
* La **barra de degradado horizontal** te permite seleccionar la opacidad de tu color.

### Color de texto del botón

Complementa tu Color de Fondo del Botón con un Color de Texto del Botón diferente.

<Note>
  **Nota:** El Color de Texto del Botón es solo para [botones sólidos](#button-style).
</Note>

Haz clic en **Button Text Color** para seleccionar un color de tu paleta de colores del sitio.

Si prefieres usar un color personalizado, haz clic en la rueda de color y luego ingresa tu código de color RGB o usa los deslizadores para elegir tu color.

* El **cuadro** te permite ajustar el brillo y la saturación de tu color.
* La **barra horizontal de arcoíris** te permite seleccionar el tono.
* La **barra de degradado horizontal** te permite seleccionar la opacidad de tu color.

### Ancho del botón

Ajusta el ancho de tu Botón:

* **Full**: llena el ancho del área del botón
* **Auto**: ajusta automáticamente el ancho para adaptarse al texto

### Estilo del botón

Cambia el estilo del Botón:

* Botón de color sólido
* Contorno de tu Color de Fondo del Botón

### Tamaño del botón

Ajusta el tamaño de tu Botón:

* Pequeño
* Mediano
* Grande

Cambiar el tamaño de tu botón cambiará tanto el fondo del botón como el tamaño del texto.

### Radio de borde del botón

Personaliza el Borde de tu Botón para que se vea más redondeado o más cuadrado. Ingresa el valor deseado en píxeles hasta 50 para ajustar el radio del borde de tu botón.

Cuanto más bajo el valor, más cuadrado se verá tu botón, y cuanto más alto el valor, más redondeado se verá.

***

## Fuentes

Las fuentes juegan un papel importante en la personalidad de tu marca.

Ajusta la fuente de tu página para cambiar el tamaño y estilo de fuente de forma nativa en Kajabi.

En la configuración de Fuente de tu Guía de Estilo, selecciona entre una variedad de Tipos de Fuente, personaliza el Peso de Fuente y ajusta la Altura de Línea para tu Cuerpo de Texto y Encabezados.

### Para cambiar tus fuentes

* Abre la pestaña **Website** desde el Dashboard.
* Selecciona la pestaña **Pages**.
* Abre el editor de páginas de tu Página. [Aprende más](/es/articles/website/pages/how-to-get-to-the-page-editor)
* Ve al editor de la barra lateral y abre **Settings**.
* Haz clic en **Style Guide**.
* Desplázate hasta la sección **Fonts** y configura tu Configuración de Fuente:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/o3vkuunju2" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

***

## Colores de fuente

¿Buscas darle marca a todos los Colores de Fuente del Cuerpo y Encabezados para agilizar el diseño de tu landing page? Configura tus Colores de Fuente en la Configuración de tu Guía de Estilo.

<Note>
  **Nota:** ¿Buscas personalizar letras individuales de tu texto? Aprende a [agregar y personalizar tu Bloque de Texto](/es/articles/website/pages/how-to-add-a-text-block-to-your-page#customizing-your-text-block).
</Note>

### Para cambiar los colores de fuente del cuerpo y encabezados

* Abre la pestaña **Website** desde el Dashboard.
* Selecciona la pestaña **Pages**.
* Abre el editor de páginas de tu Página. [Aprende más](/es/articles/website/pages/how-to-get-to-the-page-editor)
* Ve al editor de la barra lateral y abre **Settings**.
* Haz clic en **Style Guide**.
* Allí, desplázate hasta la sección **Font Colors**.
* Haz clic en el círculo de color junto a Body Font Color o Heading Font Color para seleccionar un nuevo color:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/kajabi-support/es/images/launchbrightly/desktop-light-version-11-font-colors-1785429759961.png" alt="Configuración de Colores de Fuente" />

Si prefieres usar un color personalizado, haz clic en la rueda de color y luego ingresa tu código de color RGB o usa los deslizadores para elegir tu color.

* El **cuadro** te permite ajustar el brillo y la saturación de tu color.
* La **barra horizontal de arcoíris** te permite seleccionar el tono.
* La **barra de degradado horizontal** te permite seleccionar la opacidad de tu color.

***

## Tamaños de fuente en escritorio y móvil

Un encabezado grande y en negrita puede verse excelente en una computadora. Pero en un dispositivo móvil (donde no hay tanto espacio en pantalla), los tamaños de fuente grandes pueden verse incómodos o mal ubicados.

Con Kajabi Pages, personaliza tus tamaños de fuente para la vista en Escritorio y Móvil. Esto asegura que, sin importar qué tipo de dispositivo use tu audiencia, la tipografía de tu página se vea hermosa y con el tamaño adecuado.

Kajabi usa tamaños de encabezado web estándar. El Encabezado 1 (h1) generalmente es el más grande y es ideal para títulos. El Encabezado 2 (h2) generalmente es el siguiente más grande, y así sucesivamente para los Encabezados 3 (h3), 4 (h4), 5 (h5) y 6 (h6).

Tu tamaño de "Body" se refiere al texto de párrafo estándar como el que estás leyendo ahora. Por defecto, el tamaño "body" es el texto de párrafo o texto pequeño en un [Bloque de Texto](/es/articles/website/pages/how-to-add-a-text-block-to-your-page).

### Para cambiar los tamaños de fuente de encabezado y cuerpo

* Abre la pestaña **Website** desde el Dashboard.
* Selecciona la pestaña **Pages**.
* Abre el editor de páginas de tu Página. [Aprende más](/es/articles/website/pages/how-to-get-to-the-page-editor)
* Ve al editor de la barra lateral y abre **Settings**.
* Haz clic en **Style Guide**.
* Desplázate hasta el final del editor de la barra lateral y ubica **Desktop Font Sizes** y **Mobile Font Sizes**.
* Haz clic en cada menú desplegable para configurar tus tamaños de fuente. Los tamaños de fuente se listan en píxeles, como los verías en un procesador de texto:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/kajabi-support/es/images/launchbrightly/desktop-light-version-18-customize-font-sizes-1785429760744.png" alt="Configuración de Tamaño de Fuente" />

<Tip>
  **Consejo:** Personaliza tus tamaños de fuente para Escritorio y Móvil con la Vista Previa correspondiente ubicada en la esquina inferior derecha del Editor de Plantilla.
</Tip>

***

## Mensajes de error

Personaliza el color de los mensajes de error que aparecen si tus usuarios encuentran un error en tu página:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/kajabi-support/es/images/launchbrightly/desktop-light-version-12-error-messages-1785429761792.png" alt="Configuración de Mensajes de Error" />

<Note>
  **Nota:** Solo disponible en el editor de páginas de tu sitio web. [Aprende más](/es/articles/website/pages/customizing-your-website-pages-with-the-website-builder)
</Note>