Agrega código personalizado a una página, a un bloque de una página o a todas las páginas de tu sitio web para insertar widgets, cargar fuentes, agregar analítica o cambiar el aspecto de tus páginas. Para editar los archivos de plantilla detrás de tus páginas, usa el editor de código, disponible solo en el plan Kajabi Pro.
Advertencia: Ten cuidado al agregar código personalizado a tu sitio. Si estás agregando código de un tercero, asegúrate de confiar en él. Su código personalizado podría causar problemas en tu sitio.
Agregar código personalizado a una sola página
Agregar código en Settings de la página
Desde el Dashboard, abre Website.
Ubica la Website Page o Landing Page que quieres editar.
Junto a la página, haz clic en Customize.
En el creador de páginas, haz clic en la pestaña Settings.
Haz clic en la sección Custom Code.
Agrega tu Custom CSS o Custom JavaScript en el panel.
Haz clic en Save.
Nota: No incluyas las etiquetas <style> o <script> en las secciones de Custom CSS o Custom JavaScript dentro de Settings de la página.
Agregar código en un bloque Custom Code
Agregar código personalizado en un bloque es útil para insertar contenido en tu página, como un widget de reserva de calendario.
Desde el Dashboard, abre Website.
Ubica la Website Page o Landing Page que quieres editar y haz clic en su Page Title.
En el creador de páginas, abre una Section.
Haz clic en Add block.
Haz clic en Custom Code.
Agrega tu CSS o JavaScript personalizado en el campo Code.
Configura las opciones de Background, Layout, Animations y Time reveal del bloque según sea necesario.
Haz clic en Save.
Nota: En un bloque Custom Code, usa las etiquetas <style> (para CSS) y <script> (para JavaScript) para que tu código funcione.
Agregar código a una página de Checkout
Desde el Dashboard, haz clic en Sales y luego en Pricing.
Haz clic en el Offer Title de la Offer cuya página de Checkout quieres editar.
Haz clic en Edit checkout en la parte superior de la página.
Haz clic en la pestaña Settings.
Haz clic en la sección Custom Code.
Agrega tu Custom CSS o Custom JavaScript en el panel.
Haz clic en Save.
Agregar código a una página de Upsell
Desde el Dashboard, haz clic en Sales y luego en Pricing.
Haz clic en la pestaña Upsells.
Haz clic en el Upsell que quieres editar.
Haz clic en Customize.
Haz clic en la pestaña Settings.
Haz clic en la sección Custom Code.
Agrega tu Custom CSS o Custom JavaScript en el panel.
Haz clic en Save.
Agregar código personalizado a todas las páginas
El código personalizado en todas las páginas es útil para agregar un aviso de cookies, fuentes personalizadas, analítica y más.
Desde el Dashboard, abre Settings.
En Site settings, haz clic en Site details.
En Page scripts, ingresa tu código personalizado en el campo Header Page Scripts.
Haz clic en Save.
Nota: El código en Header Page Scripts se incluye en la etiqueta <head> de todas las páginas, excepto las páginas de checkout de ofertas y las páginas de upsell. Para hacer seguimiento de las páginas de checkout, consulta Agregar código de seguimiento JavaScript a las páginas de Checkout.
Acceder al editor de código
Aprende a acceder y editar el código de tus páginas de Website, Product y Landing Pages.
El editor de código te permite ver y editar los archivos de plantilla Liquid detrás de tus páginas. El código de las plantillas de Kajabi está escrito en Liquid. Con acceso al editor de código, Modify code aparece en el menú de más opciones (...) de tus páginas y plantillas. De esta forma también puedes abrir el archivo de una Website Page directamente desde la lista de páginas.
Nota: Si actualizas tu plantilla, los cambios que hiciste en el editor de código se sobrescriben. Las personalizaciones hechas en el theme builder se conservan. Aprende a actualizar una plantilla.
Abrir el editor de código para una plantilla de sitio web
Para editar el código de tus Standard Website Pages:
Desde el Dashboard, abre Website.
En Design, ubica la plantilla que quieres editar.
Haz clic en la flecha hacia abajo de tu plantilla activa, o abre el menú de más opciones (...) de una plantilla guardada.
Selecciona Modify code.
Abrir el editor de código para una plantilla de Course
Desde el Dashboard, haz clic en Products y luego en Courses.
Selecciona el Course que quieres editar.
Haz clic en Customize.
Ubica la plantilla de tu Course.
Abre su menú de más opciones (...).
Selecciona Modify code.
Abrir el editor de código para una página de Upsell
Desde el Dashboard, haz clic en Sales y luego en Pricing.
Haz clic en la pestaña Upsells.
Haz clic en el Upsell que quieres editar.
Abre el menú de más opciones (...) junto a Customize.
Selecciona Edit code.
Mostrar todas las lecciones en el temario de un Course
De forma predeterminada, el temario muestra las primeras 10 lecciones de cada módulo y luego un enlace Show More. Para mostrar todas las lecciones, edita product_syllabus.liquid en la carpeta Snippets. Esto solo aplica cuando la configuración Syllabus Type de la sección del temario es Posts. Con la configuración predeterminada Categories, el temario solo muestra los módulos, así que no hay límite de lecciones que editar.
Busca el bucle de lecciones y cambia el límite para que se muestren todas las lecciones:
{% for post in category.posts limit:10 %}Actualiza el enlace Show More para que coincida. Si estableciste un número personalizado, usa el mismo número aquí. Si eliminaste el límite, borra todo este bloque
{% if %}, o el enlace se mostrará u ocultará en el punto equivocado:{% if category.posts.size >= 10 %}
Para cambiar cuántos módulos aparecen por página, edita esta línea por separado:
{% paginate product.categories by 10 %}
Advertencia: La propia configuración de temas de Kajabi advierte que eliminar el límite de lecciones puede causar un error de Liquid en Courses con muchas lecciones. Previsualiza la página antes de guardar.
Abrir el editor de código para una plantilla de Landing Page
Desde el Dashboard, abre Website.
Haz clic en Landing Pages.
Ubica la página que quieres editar.
Abre su menú de más opciones (...).
Selecciona Modify code.
Nota: Modify code no está disponible mientras una Landing Page tiene una prueba A/B en curso.
Editar el código de la plantilla
Consulta la documentación de plantillas de Kajabi para ver una descripción general de cada directorio de plantillas.
Abre el editor de código de tu plantilla siguiendo los pasos anteriores.
Selecciona un directorio.
Selecciona un archivo.
Modifica tu código.
Haz clic en Save.
Opcional: haz clic en Preview.
Nota: Kajabi Support no puede ayudar a crear ni modificar código personalizado. Si eres nuevo editando código, considera contratar a un profesional.