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

# Gestionar las páginas de tu app

> Aprende cómo añadir páginas, moverte entre ellas, controlar qué páginas aparecen en tu navegación y entender cómo se relacionan las páginas con el login y la visibilidad en Base44.

Las páginas son las pantallas principales de tu app de Base44. Cada página tiene su propia ruta URL (como `/`, `/Home` o `/Products`) y aparece en el desplegable de páginas arriba en el [editor de la app](https://base44.com/ai-app-builder). Puedes añadir nuevas páginas, acceder a páginas y decidir cuáles son visibles en tus menús o se usan para experiencias de login y aterrizaje.

<Frame caption="Navegando las páginas de tu app">
  <img src="https://mintcdn.com/base44/Vo3HE1GylzgvScy8/images/pagesmenu.png?fit=max&auto=format&n=Vo3HE1GylzgvScy8&q=85&s=ac18ad8ad80fa68de964c773e69f0464" alt="Navigating your app pages" width="850" height="427" data-path="images/pagesmenu.png" />
</Frame>

***

## Añadir páginas

Puedes añadir páginas en cualquier momento. La forma más rápida es describir la página que quieres en el chat de IA.

### Añadir una nueva página

1. Ve al editor de tu app.
2. En el chat de IA, describe la página que quieres. Por ejemplo:\
   `Create a new About page with a hero section, text about our company, and a contact button.`

<Frame caption="Añadiendo una nueva página a tu app con el chat de IA">
  <img src="https://mintcdn.com/base44/vyZ6HEARIdqrgiI1/images/addpage.png?fit=max&auto=format&n=vyZ6HEARIdqrgiI1&q=85&s=48a9fca38617774a4d8fb518cd43d28d" alt="Adding a new page to your app with the AI chat" width="1302" height="956" data-path="images/addpage.png" />
</Frame>

### Duplicar una página

1. Abre la página que quieres reutilizar en el editor.
2. En el chat de IA, describe qué quieres duplicar. Por ejemplo:\
   `Duplicate this page and keep the same layout, but change the title to "Pricing".`
3. Cuando el chat de IA termine, abre la nueva página desde el desplegable para personalizar el contenido.

<Frame caption="Duplicando una página en tu app usando el chat de IA">
  <img src="https://mintcdn.com/base44/tzxdHQgJZr0YYZrD/images/duplicatepage.png?fit=max&auto=format&n=tzxdHQgJZr0YYZrD&q=85&s=cabd6af12138c254a168d7c595521d07" alt="Duplicating a page on your app using the AI chat" width="1347" height="957" data-path="images/duplicatepage.png" />
</Frame>

***

## Cambiar entre páginas

Puedes moverte entre páginas desde el desplegable de páginas encima del preview.

**Para cambiar de página en el editor de la app:**

1. Ve al editor de tu app.
2. Haz clic en el desplegable de páginas.
3. Haz clic en la página que quieres abrir.

<Frame caption="Cambiando entre páginas en el editor de la app">
  <img src="https://mintcdn.com/base44/Vo3HE1GylzgvScy8/images/pagesdropdown.png?fit=max&auto=format&n=Vo3HE1GylzgvScy8&q=85&s=82ec30bde5c1918a52c1cfc6ff62aee5" alt="Switching between pages in the app editor" width="791" height="527" data-path="images/pagesdropdown.png" />
</Frame>

<Tip>
  Si no estás seguro de cómo se llama una página, pregúntale a la IA: `Show me a list of all pages in this app and what each one does.`
</Tip>

***

## Buscar páginas

Cuando tu app tiene muchas páginas, puede ser difícil recordar el nombre de cada una. Empieza a escribir el nombre de la página en el desplegable de páginas para buscar la que necesitas.

<Frame caption="Buscando una página en el desplegable de páginas">
  <img src="https://mintcdn.com/base44/Vo3HE1GylzgvScy8/images/searchingforapage.png?fit=max&auto=format&n=Vo3HE1GylzgvScy8&q=85&s=748f170acf99d1f09eb019d4ec592b89" alt="Searching for a page in the pages drop-down" width="719" height="391" data-path="images/searchingforapage.png" />
</Frame>

<Tip>
  **Consejo:** También puedes pedirle al chat de IA que te ayude a encontrar la página correcta por nombre, ruta URL o propósito. Por ejemplo:

  * `Which page is used as the checkout page?`
  * `Which page handles the /Success route?`
  * `Find the page that shows the list of projects.`
</Tip>

***

## Gestionar la navegación de tus páginas

Un menú de navegación claro ayuda a las personas a moverse entre páginas, descubrir áreas clave de tu app y entender cómo está organizado tu contenido. También mejora el enlazado interno, lo que puede ayudar a los buscadores a entender la estructura de tu app.

Algunas apps empiezan con una sola página y no tienen un menú de navegación visible al principio. Conforme añades más páginas, puedes pedirle a la IA crear un menú de header, sidebar o footer y conectarlo a tus rutas principales.

Usa el chat de IA para crear un menú de navegación cuando tu app aún no tenga un header, sidebar o footer con enlaces.

<Tip>
  Si quieres la misma navegación en cada página, pide a la IA hacer el menú global. Por ejemplo: `Add the header navigation to all pages in the app.`
</Tip>

### Añadir un menú de header

1. Ve al editor de tu app.
2. En el chat de IA, describe el menú que quieres. Por ejemplo:
   * `Add a header navigation bar with links to /Home and /Products.`
   * `Create a top navigation menu that includes Home and Contact.`
3. Cuando la IA termine, revisa el preview para asegurar que la nueva navegación aparece donde esperas y prueba los enlaces.

<Frame caption="Añadiendo un menú de navegación arriba de tu app">
  <img src="https://mintcdn.com/base44/iEH4Y6BNLZQ0n0S-/images/navigationmenu.png?fit=max&auto=format&n=iEH4Y6BNLZQ0n0S-&q=85&s=b1b16b69281f4e976d3dcece6316a186" alt="Adding a navigation menu to the top of your app" width="1913" height="957" data-path="images/navigationmenu.png" />
</Frame>

### Añadir un menú lateral

1. Ve al editor de tu app.
2. En el chat de IA, explica lo que necesitas. Por ejemplo:
   * `Add a vertical sidebar navigation on the left with links to /Dashboard, /Reports, and /Settings.`
   * `Add a footer navigation with links to Privacy Policy and Terms of Service.`
3. Cuando la IA termine, revisa el preview para asegurar que la nueva navegación aparece donde esperas y prueba los enlaces.

<Frame caption="Añadiendo una navegación lateral vertical a tu app">
  <img title="Verticalsidebar" alt="Adding a vertical sidebar navigation to your app" src="https://mintcdn.com/base44/ZJy2_Y0URAmh8dUb/images/sidebar.png?fit=max&auto=format&n=ZJy2_Y0URAmh8dUb&q=85&s=be39a3556cca1518542ca2cadc398b42" className="dark:hidden" width="1912" height="954" data-path="images/sidebar.png" />

  <img title="Verticalsidebar" alt="Adding a vertical sidebar navigation to your app" src="https://mintcdn.com/base44/ZJy2_Y0URAmh8dUb/images/sidebar-1.png?fit=max&auto=format&n=ZJy2_Y0URAmh8dUb&q=85&s=5abec7be49c4b5275a10e2f79c08a81a" className="hidden dark:block" width="1912" height="954" data-path="images/sidebar-1.png" />
</Frame>

### Cambiar el estilo del menú

Puedes usar distintos estilos de navegación para encajar con el layout y audiencia de tu app, como una barra horizontal, pestañas o un menú hamburguesa que colapsa en pantallas más pequeñas.

**Para cambiar tu estilo de navegación con el chat de IA:**

1. Ve al editor de tu app.
2. En el chat de IA, describe el estilo que quieres. Por ejemplo:
   * Tabs: `Change the main navigation into a tab-style menu at the top of the page.`
   * Sidebar: `Move the navigation into a vertical sidebar on the left.`
   * Menú hamburguesa: `Turn the main navigation into a hamburger menu that opens a panel on the right.`
3. Cuando la IA termine, revisa el preview para asegurar que la navegación aparece donde esperas y prueba los enlaces.

<Tip>
  Puedes combinar estilos. Por ejemplo, mantener un menú horizontal con pestañas en escritorio y usar un menú hamburguesa en pantallas más pequeñas. Describe ambos comportamientos claramente en tu prompt.
</Tip>

### Cambiar los elementos del menú

Una vez que existe un menú de navegación, puedes añadir, quitar o renombrar enlaces para que las personas lleguen a las páginas correctas. Asegúrate de que la página a la que quieres enlazar ya existe si estás añadiendo un nuevo elemento.

**Para gestionar los elementos de tu menú con el chat de IA:**

1. Ve al editor de tu app.
2. En el chat de IA, describe cómo debe cambiar el menú. Por ejemplo:
   * `Add a "Shop" link to the main navigation that points to the /Products page.`
   * `Add an "About" item to the top menu that links to /About and place it after Home.`
   * `Remove the "Blog" link from the header navigation.`
   * `Rename the "Shop All" menu item to "All Products".`
   * `Reorder the menu so that Home, Shop, About, and Contact appear in that order.`
3. Revisa el preview y haz clic en tus elementos de menú para confirmar que todo se ve y se comporta como esperas.

<Tip>
  Si tu app usa varias áreas de navegación (como un menú superior y un menú footer), sé específico en tu prompt. Por ejemplo: `Update only the header navigation, not the footer links.`
</Tip>

***

## Trabajar con páginas ocultas

Algunas páginas están pensadas para ser internas, como dashboards de admin, pantallas de éxito o páginas de callback. Puedes quererlas disponibles en tu app sin mostrarlas en la navegación o en los resultados de búsqueda.

### Ocultar páginas de tu menú

Puedes quitar cualquier página de tus menús visibles mientras la mantienes en vivo y funcional.

**Para ocultar una página de tu navegación con el chat de IA:**

1. Ve al editor de tu app.
2. En el chat de IA, describe lo que debe ocultarse. Por ejemplo:\
   `Remove the /Success page from all visible navigation, but keep it working as a redirect after checkout.`
3. Verifica que el enlace ya no aparezca en el header, sidebar o footer.

<Frame caption="Creando páginas internas ocultas en tu app">
  <img src="https://mintcdn.com/base44/iEH4Y6BNLZQ0n0S-/images/internalpage.png?fit=max&auto=format&n=iEH4Y6BNLZQ0n0S-&q=85&s=d81a88ccfa77a42ad5d2a66fe1ac3497" alt="Creating internal hidden pages on your app" className="mx-auto" style={{ width:"94%" }} width="1170" height="948" data-path="images/internalpage.png" />
</Frame>

<Note>
  Una página oculta de tu navegación todavía se puede abrir directamente si alguien conoce su URL, o si añades un botón o enlace a ella en otra parte de tu app.
</Note>

### Crear un área solo para admins

Puedes mantener páginas sensibles, como dashboards o herramientas de gestión, disponibles solo para admins colocándolas en una sección de admin de tu navegación y protegiendo el acceso.

**Para crear un área de navegación solo para admins con el chat de IA:**

1. Ve al editor de tu app.
2. En el chat de IA, describe la sección de admin que quieres. Por ejemplo:
   * `Add an Admin section in the sidebar that only admins can see, and move the /Wishlist page into it.`
   * `Create an admin-only area in the header navigation with links to /AdminDashboard and /Reports.`

<Frame caption="Creando un área solo para admins en tu app">
  <img src="https://mintcdn.com/base44/vyZ6HEARIdqrgiI1/images/adminaccess.png?fit=max&auto=format&n=vyZ6HEARIdqrgiI1&q=85&s=7058f1f0a828152f9803df3749a2a68c" alt="Creating an admin-only area on your app" width="1355" height="954" data-path="images/adminaccess.png" />
</Frame>

<Tip>
  Para probar tus páginas solo para admins con **Act as**, haz clic en **Act as** en la barra del preview, elige un rol admin y verifica que la sección admin y sus páginas sean visibles para ellos, luego usa **Act as** de nuevo para cambiar a un rol no admin y confirma que la sección admin esté oculta de la navegación y que las páginas solo para admins no se puedan abrir directamente.
</Tip>

### Ocultar páginas de los resultados de búsqueda

Base44 incluye automáticamente todas las páginas públicas y publicadas en tu sitemap en `/sitemap.xml` para que los buscadores las encuentren. No hay interruptores SEO por página como "noindex" o controles robots.txt a nivel de página.

Para mantener una página fuera de los buscadores, asegúrate de que la página no sea pública, o evita enlazarla desde cualquier parte pública de tu app.

<Note>
  Para detalles completos sobre cómo funciona el indexado, consulta nuestra [guía SEO](/Performance-and-SEO/SEO-and-search-visibility).
</Note>

***

## Página de aterrizaje pública con páginas privadas

Base44 no soporta actualmente hacer algunas páginas públicas y otras privadas usando solo ajustes de visibilidad. En su lugar, puedes usar una combinación de página de aterrizaje pública y lógica que redirige a las personas al login para áreas privadas.

**Para configurar una página de aterrizaje pública con login para otras páginas:**

1. Define tu app como **Public (no login required)** en los ajustes de visibilidad.
2. Usa el chat de IA para crear una página de aterrizaje, por ejemplo:\
   `Create a landing page with login and sign-up buttons and make it my main page.`
3. Pide a la IA requerir login en el resto de tu app. Por ejemplo:\
   `Require login for all non-landing pages and redirect visitors who are not logged in back to the landing page.`

<Warning>
  Actualmente no es posible marcar páginas individuales como públicas o privadas usando un ajuste de visibilidad por página. Toda la visibilidad se controla a nivel de app, combinada con tus reglas de ruteo y acceso a datos.
</Warning>

***

## Preguntas frecuentes

Haz clic en una pregunta a continuación para aprender más sobre páginas, login y navegación.

<AccordionGroup>
  <Accordion title="¿Cómo cambio la página que las personas ven primero al abrir mi app?">
    **Para cambiar tu página de aterrizaje:**

    1. Haz clic en **Dashboard** en el editor de tu app.
    2. Haz clic en **Settings** y luego en **App Settings**.
    3. En el desplegable **Main Page** bajo **General Settings**, selecciona la página que quieres como tu página de aterrizaje predeterminada.

    También puedes pedirle al chat de IA cambiar tu página de aterrizaje.
  </Accordion>

  <Accordion title="¿Hay límites de cuántas páginas puede tener mi app?">
    Sí. Las apps de Base44 soportan hasta 600 páginas. Sin embargo, el número de páginas no es el único factor que afecta la estabilidad del build — el número total de archivos en tu app y el tamaño general del código fuente también importan.

    Si tu app tiene más de 600 páginas, o tiene una cantidad muy grande de archivos o código fuente (por ejemplo, miles de archivos JavaScript o decenas de megabytes de fuente), puedes ver problemas como:

    * El builder volviéndose no disponible o muy lento.
    * Páginas que no cargan correctamente en el editor o en la app en vivo.
    * Fallos de publicación o errores out-of-memory al construir o desplegar actualizaciones.
    * La IA devolviendo ediciones incompletas.

    **Para mantenerte dentro de los límites:**

    1. Revisa tus páginas existentes y elimina cualquiera que ya no se necesite.
    2. Consolida contenido similar en menos páginas cuando sea posible.
    3. Usa entidades y vistas filtradas en lugar de crear una página estática separada para cada elemento.
    4. Mantén tu conteo de archivos y tamaño de fuente lo más ligeros posible, especialmente si tu app tiene muchos componentes.

    Mantener tu app por debajo de 600 páginas y gestionar el conteo de archivos y tamaño de fuente ayuda a que el editor se mantenga responsivo y tu app estable.
  </Accordion>
</AccordionGroup>

<Note>Esta página se tradujo con IA. Para información más precisa y actualizada, consulta la [versión en inglés](/). </Note>