Ir al contenido principal

Agregar fuentes y colores personalizados a las páginas

Agrega fuentes y colores personalizados a tus páginas con el Page Builder de Kajabi.

Adapta el texto de tu página a tu marca con la configuración de fuentes integrada de la Style Guide, o agrega una fuente personalizada de Google Fonts, Adobe Fonts o un archivo de fuente con licencia. La Style Guide también controla los colores, los botones y el fondo de tu página.

Empieza con la Style Guide. Si la fuente que quieres no está ahí, agrega una fuente personalizada con código. No necesitas acceso al editor de código ni un plan específico de Kajabi. Si creas páginas con la plantilla Premier heredada, consulta Cambiar fuentes y colores en la configuración de página de Premier.

Personalizar fuentes con la Style Guide

La Style Guide mantiene tu marca y tu estilo consistentes en toda una página. Úsala para elegir fuentes, definir colores de fuente y ajustar el tamaño de tu texto para computadora y móvil en páginas creadas con el editor de páginas más reciente.

Abrir la Style Guide

  1. Desde el Dashboard, abre la pestaña Website.

  2. Ve a Website Pages o Landing Pages.

  3. Selecciona la página que quieres personalizar.

  4. Abre el editor de páginas de tu página. Aprende cómo acceder al editor de páginas.

  5. En el editor de la barra lateral, abre Settings.

  6. Haz clic en Style Guide.

Nota: Los cambios de la Style Guide no aparecen en la vista previa hasta que haces clic en Save. Una insignia Preview outdated aparece mientras tengas cambios sin guardar en la Style Guide.

Cambiar tus fuentes

En la configuración de fuentes, elige entre una variedad de tipos de fuente, personaliza el grosor de la fuente y ajusta el interlineado del texto del cuerpo y de los encabezados.

  1. Desde el Dashboard, abre la pestaña Website.

  2. Ve a Website Pages o Landing Pages.

  3. Selecciona la página que quieres personalizar.

  4. Abre el editor de páginas de tu página. Aprende cómo acceder al editor de páginas.

  5. En el editor de la barra lateral, abre Settings.

  6. Haz clic en Style Guide.

  7. Desplázate hacia abajo hasta la sección Fonts.

  8. Configura tus opciones de fuente.

Definir tamaños de fuente para computadora y móvil

Un encabezado grande y llamativo puede verse muy bien en computadora, pero extraño en un dispositivo móvil, donde hay menos espacio en pantalla. Define tamaños de fuente distintos para computadora y móvil para que tu página se vea bien en cualquier dispositivo.

Kajabi usa los tamaños de encabezado web estándar. El Encabezado 1 (h1) suele ser el más grande y funciona bien para títulos. El Encabezado 2 (h2) suele ser el siguiente más grande, y así sucesivamente con los Encabezados 3 (h3), 4 (h4), 5 (h5) y 6 (h6). Tu tamaño Body es el texto de párrafo estándar, como el texto que estás leyendo ahora. De forma predeterminada, es el texto de párrafo o texto pequeño de un Text Block.

  1. Desde el Dashboard, abre la pestaña Website.

  2. Ve a Website Pages o Landing Pages.

  3. Selecciona la página que quieres personalizar.

  4. Abre el editor de páginas de tu página. Aprende cómo acceder al editor de páginas.

  5. En el editor de la barra lateral, abre Settings.

  6. Haz clic en Style Guide.

  7. Desplázate hasta la parte inferior del editor de la barra lateral y busca Desktop Font Sizes y Mobile Font Sizes.

  8. Haz clic en cada menú desplegable y elige un tamaño. Los tamaños de fuente se indican en píxeles, como en un programa de procesamiento de texto.

Configuración del tamaño de fuente

Consejo: Revisa tus tamaños de fuente para Desktop y Mobile con la vista previa correspondiente en la esquina inferior derecha del editor de plantillas.

Elegir un color personalizado

Para usar un color que no está en la paleta de colores de tu sitio, haz clic en la rueda de colores y luego ingresa tu código de color RGB o usa los controles deslizantes:

  • Usa el cuadro para ajustar el brillo y la saturación

  • Usa la barra horizontal de arcoíris para seleccionar el tono

  • Usa la barra horizontal de degradado para seleccionar la opacidad

Agregar una fuente personalizada con código

Antes de empezar

Estos requisitos aplican para agregar una fuente personalizada con código. Las fuentes de la Style Guide descritas arriba no necesitan ninguno de ellos.

  • Conoce los conceptos básicos de HTML y CSS, o trabaja con un profesional de diseño web, porque agregar una fuente implica pegar código en tu página

  • Usa un tipo de archivo de fuente compatible con Kajabi: .ttf, .woff, .woff2 o .eot

  • Asegúrate de tener la licencia para usar cualquier archivo de fuente que hayas comprado

  • Ten en cuenta que los archivos OTF no son compatibles con Kajabi y no se pueden subir

Con el Page Builder, agregas el código de la fuente personalizada a una página en su configuración de Custom Code, o a todo tu sitio web en Page scripts. Ninguna de las dos opciones requiere el editor de código.

Advertencia: El código personalizado puede exponer tu sitio a vulnerabilidades y malware. Escanea cualquier código que planees usar con una herramienta como VirusTotal o Snyk y sigue las mejores prácticas para código personalizado para reducir el riesgo.

Entender HTML, CSS y las etiquetas de encabezado

¿Qué es un código de inserción?

Un código de inserción es un fragmento de código creado por un tercero, como Google Fonts, que te permite agregar contenido de una fuente externa a tu sitio. Lo pegas en un campo de código personalizado del Page Builder.

Los códigos de inserción de fuentes son HTML o CSS. No necesitas JavaScript para agregar una fuente personalizada.

Conceptos básicos de HTML y CSS

HTML construye la estructura de tu página. Cada fragmento de texto de tu página es un elemento HTML envuelto en etiquetas. Por ejemplo, un párrafo va entre una etiqueta de apertura <p> y una etiqueta de cierre </p>, así: <p>Hello World!</p>. Los visitantes solo ven el texto dentro de las etiquetas.

CSS controla cómo se ve cada elemento HTML, incluida su fuente. Por ejemplo, puedes seleccionar un párrafo y cambiar su color a verde con CSS. Puedes cambiar la fuente de un solo elemento de texto o de todos los elementos de un mismo tipo en tu página. Agrega tu CSS en el campo CSS Code de la configuración de Custom Code de tu página.

Etiquetas de encabezado

Kajabi usa etiquetas de encabezado estándar, de H1 a H6, para definir el texto de los encabezados. Cuando agregas una fuente personalizada, eliges qué etiqueta de encabezado toma esa fuente. Una vez que el código de la fuente está listo, puedes cambiar esa etiqueta de encabezado en cualquier parte de tu página para aplicar la fuente.

Etiquetas de encabezado

El Tamaño de fuente y el Estilo del encabezado te permiten elegir el texto exacto que recibe tu fuente personalizada:

Asignar una etiqueta de encabezado a tu texto

  1. Desde el Dashboard, abre la pestaña Website.

  2. Ve a Website Pages o Landing Pages.

  3. Selecciona la página que quieres personalizar.

  4. Selecciona el Text block que contiene el texto que quieres cambiar.

  5. Resalta el texto en el editor de texto.

  6. Haz clic en Formats en las opciones del editor de texto.

  7. Selecciona Headings.

  8. Selecciona la etiqueta de encabezado que quieres usar para tu fuente personalizada.

  9. Haz clic en Save para aplicar tus cambios.

Consejo: Haz clic en el expand icon (fullscreen) en tu editor de texto para ver el editor a una escala más grande y facilitar la visualización.

Agregar una Google Font o una Adobe Font

Tanto Google Fonts como Adobe Fonts te dan un código de inserción para copiar en tu página. Los pasos a continuación usan Google Fonts como ejemplo. Funcionan igual para Adobe Fonts una vez que tengas el código de tu Adobe Font. Para obtener ese código, consulta Obtener el código de inserción de una Adobe Font.

Agregar una fuente a toda una página

Usa este método para aplicar tu fuente a todos los encabezados 1, 2, 3 y 4, y a todos los párrafos de una página.

Copiar el código de inserción de tu Google Font

  1. Ve a Google Fonts.

  2. Haz clic en la fuente que quieres usar para abrir sus detalles.

  3. Desplázate hasta la sección Styles y busca el estilo de fuente que quieres.

  4. Haz clic en el enlace azul del estilo de fuente, a la derecha del estilo, para abrir el menú de la barra lateral derecha (texto de enlace de ejemplo: Regular 400).

  5. En la sección "Use on the web", selecciona el botón de opción junto a <link>.

  6. Copia el código HTML.

Pegar el código de inserción en tu página

  1. En una nueva pestaña del navegador, inicia sesión en tu cuenta de Kajabi.

  2. Desde el Dashboard, abre la pestaña Website.

  3. Ve a Website Pages o Landing Pages.

  4. Selecciona la página donde quieres agregar tu fuente personalizada.

  5. En el editor de la barra lateral, haz clic en Add Section.

  6. Selecciona una sección Custom Code de la lista y luego haz clic en Add.

  7. Abre el bloque Custom Code en el editor de la barra lateral.

  8. Pega tu código de inserción en el campo Code.

Agregar la regla CSS a tu página

  1. En la parte superior de la barra lateral izquierda, haz clic en Back dos veces.

  2. Abre la pestaña Settings.

  3. Haz clic en Custom Code.

  4. En el campo CSS Code, ingresa el siguiente CSS:

    h1, h2, h3, h4, p {   font-family: YOUR CODE HERE; }

Esta regla aplica tu fuente personalizada a todos los encabezados 1, 2, 3 y 4, y a todos los párrafos de tu página. Agrega o quita elementos de texto HTML como quieras. Obtén más información sobre los encabezados y párrafos.

Agregar tu familia de fuentes a la regla CSS

  1. Regresa a Google Fonts en tu otra pestaña del navegador.

  2. En la sección "Use on the web" de la barra lateral, busca CSS rules to specify families.

  3. Copia el código CSS.

  4. Regresa a tu página de Kajabi.

  5. Reemplaza YOUR CODE HERE por el código que copiaste.

  6. Haz clic en Save para aplicar tu fuente.

Nota: Las fuentes personalizadas agregadas mediante CSS no aparecerán en el menú desplegable de fuentes integrado de Kajabi.

Agregar una fuente a un solo elemento de texto

Usa este método para aplicar tu fuente a un solo fragmento de texto, como un encabezado, en lugar de a toda la página.

Copiar el código de importación de tu Google Font

  1. Ve a Google Fonts.

  2. Haz clic en la fuente que quieres usar para abrir sus detalles.

  3. Desplázate hasta la sección Styles y busca el estilo de fuente que quieres.

  4. Haz clic en el enlace azul del estilo de fuente, a la derecha del estilo, para abrir el menú de la barra lateral derecha (texto de enlace de ejemplo: Regular 400).

  5. En la sección "Use on the web", selecciona el botón de opción junto a @import.

  6. Copia el código CSS entre las etiquetas <style> y </style>.

Pegar el código de importación en la configuración de tu página

  1. Desde el Dashboard, abre la pestaña Website.

  2. Ve a Website Pages o Landing Pages.

  3. Selecciona la página donde quieres pegar el código.

  4. En el editor de la barra lateral, haz clic en la pestaña Settings.

  5. Haz clic en Custom Code.

  6. En el campo CSS Code, pega el código que copiaste de Google Fonts.

  7. Haz clic en Save.

Agregar etiquetas span a tu elemento de texto

  1. Selecciona el Text Block que contiene el texto que quieres cambiar, o crea un nuevo Text Block.

  2. En el editor de la barra lateral, haz clic en el ícono de código fuente <> del editor de texto.

  3. Copia este fragmento de HTML: <span style="YOUR FONT FAMILY CODE HERE">

  4. Busca el elemento de texto HTML que quieres actualizar.

  5. Pega el fragmento justo después de la etiqueta de apertura del elemento. Por ejemplo, si lo pegas después de una etiqueta <h2>, se actualiza la fuente de tu encabezado 2.

  6. Agrega una etiqueta span de cierre, </span>, justo antes de la etiqueta de cierre del elemento. Por ejemplo:

    <h2><span style="YOUR FONT FAMILY CODE HERE">Text Here</span></h2>

Agregar tu familia de fuentes a las etiquetas span

  1. Regresa a Google Fonts en tu otra pestaña del navegador.

  2. En la sección "Use on the web" de la barra lateral, busca CSS rules to specify families.

  3. Copia el código CSS.

  4. Regresa a tu página de Kajabi.

  5. Reemplaza YOUR FONT FAMILY CODE HERE por el código que copiaste, sin quitar ninguna de las comillas.

  6. Haz clic en Ok y luego en Save para aplicar tu fuente.

Obtener el código de inserción de una Adobe Font

Para agregar una Adobe Font, primero obtén su código de inserción en Adobe Fonts. Luego sigue los pasos de Google Fonts descritos arriba, usando el código de tu Adobe Font en lugar del código de Google Fonts.

Elegir una nueva Adobe Font y copiar su código

  1. Ve a Adobe Fonts.

  2. Inicia sesión en tu cuenta de Adobe o crea una.

  3. Haz clic en Browse all fonts.

  4. Selecciona la fuente que quieres usar y luego haz clic en el ícono de código </>. Si no ves el ícono de código, verifica que hayas iniciado sesión.

  5. En la ventana emergente "Add fonts to a Web Project", haz clic en la flecha del menú desplegable y selecciona + Create a new project.

  6. Ingresa un nombre para tu proyecto web y luego haz clic en Create.

  7. Copia los códigos de inserción que necesites de la ventana emergente.

Encontrar el código de una Adobe Font guardada

Si ya guardaste una Adobe Font en tu cuenta pero no encuentras su código, sigue estos pasos. Para obtener más detalles sobre cómo actualizar el CSS de las fuentes, consulta la guía de Adobe sobre selectores CSS para fuentes.

  1. Ve a Adobe Fonts.

  2. Inicia sesión en tu cuenta de Adobe.

  3. En la esquina superior derecha de tu panel, haz clic en Manage fonts.

  4. Selecciona la pestaña Web Projects.

  5. Busca tu primer código de inserción en la sección Embed Project.

  6. Haz clic en la imagen de la fuente, a la izquierda, para abrir el código CSS de font-family.

  7. Desplázate hasta la sección Details y luego hasta How to Use.

  8. Busca tu código CSS en Web.

Agregar un archivo de fuente con licencia a todo tu sitio web

Si compraste una fuente y tienes la licencia para usarla, puedes subir un archivo .ttf, .woff, .woff2 o .eot a Kajabi y agregarlo con código personalizado. Kajabi no admite archivos OTF. Los ejemplos a continuación personalizan el texto del Encabezado 3.

Para usar tu fuente en todas las páginas, agrega el código de la fuente a Page scripts en lugar de a la configuración de Custom Code de una sola página. Usa el código de fuente que creaste en la sección anterior.

  1. Desde el Dashboard, haz clic en Settings y luego en Site details.

  2. Desplázate hasta la sección Page scripts.

  3. En el campo Header Page Scripts, pega tu código de fuente.

  4. Agrega la etiqueta de apertura <style> arriba de tu código de fuente y la etiqueta de cierre </style> justo debajo. Por ejemplo:

    <style> @font-face {   font-family: 'FontName';   src: url('/resource_redirect/downloads/sites/135263/themes/2148980623/downloads/ea3IaDotWWurDhwu8x3Wd_cameliya.ttf') format('truetype'); } h3 {   font-family: 'FontName', sans-serif; } </style>

  5. Reemplaza FontName por el nombre de tu fuente y la URL de ejemplo por la URL de tu propio archivo de fuente.

  6. Haz clic en Save para aplicar tu fuente a todas las páginas de tu sitio.

Nota: Los Page scripts no se incluyen en las páginas de pago de ofertas ni en las páginas de upsell, por lo que una fuente agregada de esta forma no se carga ahí.

Solución de problemas

La fuente no aparece en una página

Tu fuente solo se carga en las páginas que contienen la etiqueta de encabezado a la que apunta tu código. En los ejemplos anteriores, es el Encabezado 3. Si una página no tiene texto de Encabezado 3, la fuente no se carga. Agrega la etiqueta de encabezado de tu código de fuente a un Text Block de la página. Para asignar una etiqueta de encabezado, consulta Asignar una etiqueta de encabezado a tu texto.

Si tu fuente personalizada no se muestra correctamente en tu landing page de Kajabi, sigue estos pasos:

  1. Borra la caché del navegador: Si la fuente aparece en la página publicada pero no en tu dispositivo, borra la caché de tu navegador y haz una recarga forzada para cargar los recursos más recientes.

  2. Verifica la regla @font-face: Asegúrate de que tu regla CSS @font-face haga referencia a una URL de archivo de fuente válida y accesible. El nombre de font-family en tu CSS debe coincidir exactamente con el nombre definido en @font-face.## Cambiar fuentes en widgets y temas

La fuente no aparece en los botones, los formularios o el pie de página

Si tu fuente no aparece en los botones de Call to Action (.btn), los botones de formulario (.form-btn) o el pie de página, agrega las etiquetas de fuente de body y de botones a tu código. Tu código debería verse similar a esto:

<style> @font-face {   font-family: 'FontName';   src: url('/resource_redirect/downloads/sites/135263/themes/2148980623/downloads/ea3IaDotWWurDhwu8x3Wd_cameliya.ttf') format('truetype'); } body, p, ul, ol, a, .btn, .form-btn {   font-family: 'FontName', sans-serif; } </style>

Reemplaza FontName por el nombre de tu fuente y el valor de src: url por la URL de tu archivo de fuente. En este ejemplo, la URL de origen es:

/resource_redirect/downloads/sites/135263/themes/2148980623/downloads/ea3IaDotWWurDhwu8x3Wd_cameliya.ttf

​

Personalizar los colores, los botones y el fondo de la página con la Style Guide

La Style Guide también define tu color principal, el fondo de la página, los botones y los colores de los mensajes de error. La configuración del fondo, los botones y los mensajes de error solo está disponible en el editor de páginas del sitio web. Obtén más información sobre cómo crear un sitio web con Kajabi.

Cambiar tu color principal

Tu Primary Color se usa en toda tu página, incluido el color de los botones de texto, los íconos sociales y los botones de reproducción de video. Configúralo para que coincida con tu marca.

  1. Desde el Dashboard, abre la pestaña Website.

  2. Ve a Website Pages o Landing Pages.

  3. Selecciona la página que quieres personalizar.

  4. Abre el editor de páginas de tu página. Aprende cómo acceder al editor de páginas.

  5. En el editor de la barra lateral, abre Settings.

  6. Haz clic en Style Guide.

  7. Haz clic en Primary Color.

  8. Selecciona un color de la paleta de colores de tu sitio, o elige un color personalizado.

Definir un fondo de página

En la configuración de General appearance, selecciona una imagen de fondo, un color de fondo o ambos para mostrarlos en toda tu página.

Si tu imagen no aparece en el fondo, selecciona Use Background Image y ajusta la configuración de fondo de la sección en cada sección donde quieras que se muestre la imagen.

Personalizar los botones

Diseña el aspecto de los botones en las páginas estándar de tu sitio web:

Para anular la configuración global de los botones en una sección, haz clic en el botón de esa sección y cambia su configuración ahí.

Color de fondo del botón

Haz clic en Button background color y selecciona un color de la paleta de colores de tu sitio, o elige un color personalizado.

Color del texto del botón

Combina el color de fondo de tu botón con un color de texto distinto. El color del texto del botón aplica solo a los botones sólidos. Haz clic en Button Text Color y selecciona un color de la paleta de colores de tu sitio, o elige un color personalizado.

Ancho del botón

Ajusta el ancho de tu botón:

  • Full: ocupa todo el ancho del área del botón

  • Auto: ajusta el ancho al texto

Estilo del botón

Cambia el estilo de tu botón:

  • Botón de color sólido

  • Contorno del color de fondo de tu botón

Tamaño del botón

Ajusta el tamaño de tu botón a Small, Medium o Large. Al cambiar el tamaño, cambian tanto el fondo del botón como el tamaño del texto.

Radio del borde del botón

Haz que el borde de tu botón se vea más redondeado o más cuadrado. Ingresa un valor en píxeles, hasta 50. Un valor más bajo se ve más cuadrado y un valor más alto, más redondeado.

Cambiar los colores de los mensajes de error

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

Configuración de mensajes de error

Cambiar fuentes y colores en la configuración de página de Premier

Nota: Esta sección trata sobre las plantillas Premier heredadas, que podrían estar desactualizadas. Si usas Kajabi Pages Templates, consulta Personalizar fuentes con la Style Guide.

La configuración de página define los colores y fuentes predeterminados de una página Premier, para que se mantengan consistentes en toda la página. Agregar una fuente personalizada a una página Premier requiere acceso al editor de código. Para hacerlo, consulta Usar una Google Font en un sitio con Premier.

Cambiar el color principal en una página Premier

  1. Desde el Dashboard, abre la pestaña Website.

  2. Selecciona Website Pages o Landing Pages.

  3. Selecciona la página que quieres personalizar, o crea una nueva página Premier.

  4. Haz clic en Customize para abrir el editor de plantillas.

  5. En el editor de la barra lateral, haz clic en el encabezado Settings.

  6. Haz clic en Color Scheme.

  7. Haz clic en el círculo de color y selecciona un color de la paleta de colores de tu sitio.

Para usar un color personalizado, haz clic en la rueda de colores y luego ingresa tu código de color RGB o usa los controles deslizantes:

  • Usa la barra vertical para seleccionar el tono

  • Usa el cuadro para seleccionar un color

  • Usa la barra horizontal para seleccionar la transparencia

Cambiar los colores, el tamaño y el tipo de fuente en una página Premier

La configuración de Typography incluye una gran variedad de tipos y colores de fuente para darle tu marca a tu página.

  1. Desde el Dashboard, abre la pestaña Website.

  2. Selecciona Website Pages o Landing Pages.

  3. Selecciona la página que quieres personalizar, o crea una nueva página Premier.

  4. Haz clic en Customize para abrir el editor de plantillas.

  5. En el editor de la barra lateral, haz clic en el encabezado Settings.

  6. Haz clic en Typography.

¿Ha quedado contestada tu pregunta?

Artículos relacionados