Ir al contenido principal

Construir un sitio web con Kajabi

Instala una plantilla del Website Builder, dale estilo a todas las páginas estándar desde un solo lugar, previsualízalas en el móvil y pon el diseño en vivo.

El Website Builder es el editor de Kajabi para las páginas estándar que forman un sitio: Home, Store, Library, Login, Blog y más. Una sola plantilla las controla todas a la vez, así que el diseño se mantiene coherente en todas partes en lugar de tener que darle estilo página por página.

Las Landing Pages son aparte: páginas individuales e independientes que creas y diseñas una por una, y que conectas a un sitio mediante enlaces y botones. El Website Builder no las modifica. Como todas las Website Pages comparten una misma plantilla, el Website Builder ofrece controles que las Landing Pages no tienen, como la configuración global. Para ver en qué se diferencian los tipos de página, consulta Descripción general de las páginas.
​


La página Design

Para llegar a la página Design, desde el Dashboard, haz clic en Website y luego en Design.
​

Página Design


Esta página controla el aspecto general del sitio. Desde aquí puedes previsualizar el sitio en vivo, copiar la site URL, abrir Site Details, explorar la Template Store y personalizar o administrar cualquier plantilla guardada.
​

Puedes personalizar cada plantilla de sitio web de forma independiente de las demás, y solo la plantilla que actives es visible para los visitantes. Diseñar una plantilla inactiva es lo que te permite reconstruir un sitio tras bambalinas y lanzar el diseño terminado en un solo paso.

Instalar una plantilla del Website Builder

  1. Desde el Dashboard, haz clic en Website y luego en Design.

  2. Haz clic en Template Store.

  3. Haz clic en la plantilla que quieras.

  4. Haz clic en Add to saved templates. Kajabi muestra Template added y la plantilla aparece en Saved Templates cuando termina la instalación. En un sitio que todavía no tiene una plantilla en vivo, este botón dice Get Started, y la plantilla se pone en vivo en cuanto se instala.

  5. En Saved Templates, abre el menú de más opciones (...) de la plantilla y selecciona Rename template. Ponle un nombre interno que puedas reconocer y luego haz clic en Save. El nuevo nombre aparece en la tarjeta de la plantilla.

Nota:
Las plantillas que aparecen en Kajabi Legacy Templates en la Template Store son de una generación anterior que Kajabi ya no desarrolla. No ofrecen la experiencia de edición del Website Builder que se describe en este artículo. Usa las plantillas que aparecen arriba de esa sección.

Cambiar el nombre de la plantilla

Nota: Todo lo que hay en la Template Store está incluido en todos los planes de Kajabi sin costo adicional.


Configura primero la marca del sitio

Branding define el logotipo, los colores y las fuentes con los que empieza cada página nueva en Kajabi, así que configúralo antes de diseñar páginas individuales.

Marca del sitio

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

  2. En Logos, agrega un Logo y un Favicon.

  3. En Typography, elige las fuentes para Headings y Paragraphs.

  4. En Colors, configura el Brand color, el Accent color y la Global color palette.

  5. Haz clic en Save y luego confirma con Save and apply.

Branding solo actualiza las páginas y plantillas que todavía usan la configuración global predeterminada. Todo lo que ya hayas personalizado a mano se queda como está, por eso es más rápido configurar la marca primero.


Personalizar las Website Pages

Abre la plantilla instalada en el editor y luego trabaja en sus páginas una por una.

  1. Desde el Dashboard, haz clic en Website y luego en Design.

  2. En Saved Templates, busca la plantilla que instalaste y haz clic en su ícono Customize. Usa el ícono de la tarjeta de la propia plantilla: el botón Customize de la parte superior de la página Design siempre abre la plantilla que esté en vivo en ese momento, así que cambiaría el sitio que ven los visitantes.
    ​

  3. En la parte superior del editor, selecciona una página en el menú desplegable.
    ​

    Website Pages

  4. Haz tus cambios y luego haz clic en Save. Guarda cada página por separado: Save solo se aplica a la página abierta en el menú desplegable. Nada de lo que guardes aquí llega a los visitantes hasta que pongas la plantilla en vivo.

Estructura de la página

Tanto las Website Pages como las Landing Pages están formadas por bloques y secciones. Cada sección está formada por bloques específicos; por ejemplo, la sección Hero incluye un bloque Text y un bloque Image.

Estructura de la página

Kajabi te ofrece secciones predefinidas para agilizar el trabajo, pero puedes personalizar cada sección. Agrega, elimina y edita los bloques dentro de cualquier sección que elijas.

Nota: Puedes reconstruir cualquier sección agregando o eliminando tipos de bloque, pero el resultado puede verse distinto a una sección predefinida, que incluye optimizaciones de diseño creadas para ese diseño específico. Para alinear los bloques con precisión, activa las guías y la cuadrícula en Design Tools, que te muestran el diseño de 12 columnas sobre el que se construye una página.

Qué hace cada página

Estas páginas vienen incluidas con el Website Builder y la plantilla activa las controla.

Página

Qué hace

La página de inicio del sitio

Donde los clientes acceden a los Products que tienen

Muestra las Offers

Donde los clientes inician sesión

Se muestra después de una compra

La página de error

La página de inicio del Blog

Un mismo diseño para todas las publicaciones

Resultados de búsqueda del Blog

Permite que los clientes se conecten entre sí

Anuncios de productos y del sitio

La historia detrás de la marca

Cómo se comunican contigo los visitantes

Los visitantes que ingresan la URL del sitio llegan a la Template Home Page, a menos que establezcas otra página como página de inicio.

Nota: En el menú desplegable de páginas del editor, la Template Home Page aparece como Home.

Las páginas que tiene un sitio dependen del propio sitio. Las páginas de Newsletter aparecen cuando el sitio tiene un Newsletter, y las páginas Blog, Blog post y Blog search no están disponibles en los planes Newsletter.

Nota: Cuando inicias sesión como administrador del sitio, el Member Directory muestra a todos los miembros del sitio. Para que tus clientes aparezcan en el Member Directory ante otros clientes, deben aceptarlo desde su configuración de cliente. Obtén más información sobre el Member Directory.

La mayoría de estas páginas están marcadas como System en la lista de Website Pages y no se pueden duplicar. About y Contact son Website Pages normales, así que puedes duplicarlas, publicarlas o despublicarlas, o copiar una a una Landing Page. Para agregar más páginas a un sitio, crea una nueva Website Page o Landing Page.


​

Optimizar las páginas para dispositivos móviles

Las páginas que creas con el Website Builder son responsivas, así que se ajustan automáticamente a teléfonos, tabletas y computadoras de escritorio. No hay que crear una versión móvil por separado. Aun así, el contenido puede acomodarse de forma diferente en una pantalla pequeña, así que previsualiza la vista móvil antes de publicar.

Previsualizar una página en el móvil

  1. Desde el Dashboard, haz clic en Website y luego en Design.

  2. En Saved Templates, haz clic en el ícono Customize de la plantilla.

  3. En la parte superior del editor, selecciona la página que quieras en el menú desplegable de páginas.

  4. Haz clic en el ícono del teléfono del selector de dispositivo. La vista previa cambia al tamaño de un teléfono móvil (la lista de modelos de teléfono cambia continuamente) y aparece un menú desplegable de dispositivos junto al selector.

  5. Si quieres revisar otro tamaño de pantalla, elige otro dispositivo en el menú desplegable. El selector también ofrece tableta vertical y tableta horizontal.

Nota: Al abrir una página desde Website > Website Pages siempre se abre la plantilla en vivo, no una guardada. Entra por Design cuando estés creando una plantilla que todavía no has puesto en vivo.

Ajustar el diseño móvil

Los diseños móvil y de escritorio se configuran de forma independiente, así que cambiar uno no afecta al otro. Usa la configuración del diseño móvil para ajustar el padding, ocultar una sección en pantallas pequeñas o afinar el espaciado por dispositivo. Aprende a personalizar el diseño móvil de una sección.

Consejo:
Si una sección se ve bien en escritorio pero amontonada en el móvil, duplícala, oculta una copia en escritorio y la otra en el móvil, y luego adapta cada una por separado.

Guardar una copia de la plantilla actual

Cambiar la plantilla en vivo reemplaza las Website Pages integradas (Home, Login, Blog y las demás) por las versiones de la nueva plantilla, y las páginas personalizadas no se transfieren en absoluto. Exporta primero la plantilla actual para poder restaurarla.

  1. Desde el Dashboard, haz clic en Website y luego en Design.

  2. En Saved Templates, abre el menú de más opciones (...) de la plantilla en vivo actual.

  3. Selecciona Export as .zip. Kajabi lo confirma con Template exported to email.

  4. Revisa la bandeja de entrada del correo electrónico con el que iniciaste sesión. Kajabi envía un enlace de descarga por correo en lugar de descargar el archivo en el navegador, y el enlace vence a los 7 días, así que guarda el .zip en un lugar seguro. Si el enlace vence, vuelve a hacer la exportación para obtener uno nuevo.

Nota: La exportación no está disponible en los planes Kajabi Newsletters.

Para restaurar más adelante una plantilla exportada:

  1. Desde el Dashboard, haz clic en Website y luego en Design.

  2. En la fila del encabezado Saved Templates, haz clic en Upload Template y selecciona el archivo .zip. La plantilla restaurada aparece como una nueva tarjeta en Saved Templates. No estará en vivo hasta que la pongas en vivo.


Activar una plantilla

Al activar una plantilla, esta pasa a ser la plantilla en vivo que ven los visitantes. Solo puede haber una plantilla en vivo a la vez.

Advertencia: Activar una plantilla tiene efecto inmediato para los visitantes. Las Website Pages integradas cambian a las versiones de la nueva plantilla, y las Website Pages personalizadas que hayas creado (incluidas About y Contact) no se copian a la nueva plantilla. Exporta primero una copia de la plantilla actual.

  1. Desde el Dashboard, haz clic en Website y luego en Design.

  2. En Saved Templates, pasa el cursor sobre la plantilla.

  3. Haz clic en Set to live template.

  4. Haz clic en Set as live template para confirmar. Kajabi muestra Template set to live y los visitantes ven el nuevo diseño de inmediato.


Preguntas frecuentes

¿Puedo copiar contenido de un sitio existente al Website Builder?

No de forma automática. Tienes que reconstruir el contenido manualmente con las secciones y bloques del Website Builder, página por página. Si un sitio existente está creado con la plantilla heredada Premier, sus datos del editor de código no son compatibles con el Website Builder y no se transferirán.

¿Cómo agrego las páginas Member Directory, Announcements, About y Contact?

Estas páginas vienen con las plantillas del Website Builder. Un sitio que todavía usa la plantilla heredada Premier no las tiene. Instala una plantilla del Website Builder y ponla en vivo, y las páginas aparecerán en Website > Website Pages.

¿Qué pasa con un Blog existente y sus publicaciones cuando cambia el diseño del sitio web?

El contenido de las publicaciones del blog (título, multimedia y cuerpo) se mantiene igual. El aspecto general del blog hereda el diseño de la plantilla que actives.

¿Qué pasa cuando Kajabi actualiza una plantilla?

Actualizar es decisión tuya, y nada cambia hasta que apliques la actualización. Cuando hay una versión más reciente de una plantilla guardada, aparece la etiqueta Update en la tarjeta de esa plantilla en Saved Templates.

Abre el menú de más opciones (...) y selecciona Update template para ver qué cambió. Haz clic en Get Details para ver las notas de la versión y en Preview Update para ver la nueva versión antes de aplicarla.

Todo lo que hayas personalizado en el Website Builder se conserva con la actualización. Todo lo que hayas cambiado editando directamente los archivos de la plantilla en el editor de código se sobrescribe, así que guarda primero una copia de esos archivos.

Después de una actualización puedes usar Revert para volver a la versión anterior, pero se perderán los cambios hechos desde la actualización.

Las plantillas del Template Marketplace o de otro creador externo no se pueden actualizar automáticamente. Consigue un .zip actualizado del creador y usa Upload Template en su lugar.

¿Por qué no hay una Sales Page en la lista de Website Pages?

Las cuentas creadas después del 16 de agosto de 2020 no incluyen una Sales Page. En su lugar, crea las Sales Pages como Landing Pages independientes.

¿Por qué hay dos páginas About y Contact en un menú de navegación?

Si creaste una página About o Contact y la agregaste a un menú de navegación antes del lanzamiento del Website Builder en 2022, es posible que veas duplicados, porque el Website Builder agregó páginas About y Contact oficiales como Website Pages. Elimina el enlace a la versión que no necesites. Aprende a eliminar un enlace de un menú de navegación.

¿Por qué se revirtieron las personalizaciones después de una advertencia sobre la página de inicio?

Esa advertencia significa que la página que estás editando ya no es la que se muestra cuando los visitantes ingresan la URL del sitio. Los cambios que guardaste con el botón Save siguen en la plantilla que estabas editando. Cuando el diseño esté listo, activa la plantilla personalizada y vuelve a establecer la Template Home Page como página de inicio. Obtén más información sobre cómo elegir qué página se muestra como página de inicio.

¿Puedo cambiar el diseño de mi sitio web y de mi curso en cualquier momento o se queda así una vez que lo publico?

Sí, puedes actualizar el diseño de tu sitio web y de tus cursos en cualquier momento después de publicarlos.

¿Puedo mantener activo mi sitio web de terceros mientras uso Kajabi?

Si quieres mantener activo tu sitio web de terceros mientras aprovechas las muchas otras soluciones que Kajabi ofrece, conecta tu sitio web existente a tus páginas de Kajabi con un enlace de página. Enlaza tus páginas con botones, CTA y tu menú de navegación. Así, los visitantes de tu sitio podrán navegar sin problemas entre la página de inicio de tu sitio de terceros y tus landing pages creadas con Kajabi.

¿Ha quedado contestada tu pregunta?