mintlify__docs/es/guides/custom-layouts.mdx

---
title: "Crear diseños de página personalizados"
sidebarTitle: "Diseños de página personalizados"
description: "Usa modos de página y componentes para crear páginas de destino, páginas de marketing y otros diseños no estándar en tu documentación de Mintlify."
keywords: ["landing page", "page mode", "custom mode", "frame mode", "hero section", "landing pages"]
---

Las páginas de Mintlify usan un diseño estándar de forma predeterminada, con una barra lateral, un área de contenido y una tabla de contenidos. Personaliza este diseño con los [modos de página](/es/organize/pages#page-mode) para crear páginas de destino, vitrinas de funcionalidades o cualquier página que necesite un diseño único.

Esta guía cubre cómo usar los modos de página, Tailwind CSS y los componentes para crear diseños personalizados.

<div id="choose-a-page-mode">
  ## Elige un modo de página
</div>

Configura el campo `mode` en el frontmatter de tu página para controlar qué elementos de la interfaz aparecen.

| Modo | Barra lateral | Tabla de contenidos | Pie de página | Soporte de temas | Ideal para |
|------|---------------|---------------------|---------------|-------------------|------------|
| `default` | Sí | Sí | Sí | Todos los temas | Páginas de documentación estándar |
| `wide` | Sí | No | Sí | Todos los temas | Páginas sin encabezados o que necesitan mayor ancho |
| `custom` | No | No | No | Todos los temas | Páginas de destino, páginas de marketing o diseños de lienzo completo |
| `frame` | Sí | No | Modificado | Aspen, Almond, Luma, Sequoia | Contenido personalizado que aún necesita navegación por barra lateral |
| `center` | No | No | Sí | Mint, Linden, Willow, Maple | Registros de cambios, experiencias de lectura enfocada |

Para páginas de destino, el modo `custom` te brinda el mayor control. Elimina todos los elementos de la interfaz excepto la barra de navegación superior, proporcionándote un lienzo en blanco para construir.

```yaml Example page frontmatter
---
title: "Welcome"
mode: "custom"
---
```

<div id="build-a-landing-page">
  ## Crea una página de destino
</div>

Una página de destino típica combina una sección hero, tarjetas de funcionalidades y llamadas a la acción.

<div id="set-up-the-page">
  ### Configura la página
</div>

Crea un archivo MDX con el modo `custom`:

```yaml Example landing page frontmatter
---
title: "Documentation"
description: "Everything you need to build with our platform."
mode: "custom"
---
```

<div id="create-a-hero-section">
  ### Crea una sección hero
</div>

Usa HTML con clases de Tailwind CSS para construir una sección hero centrada:

```mdx Example hero section
<div className="px-4 py-16 lg:py-32 max-w-3xl mx-auto text-center">
  <h1 className="text-4xl font-medium text-gray-900 dark:text-zinc-50 tracking-tight">
    Documentation
  </h1>
  <p className="mt-4 text-lg text-gray-500 dark:text-zinc-500">
    Everything you need to build, deploy, and scale your application.
  </p>
</div>
```

<Tip>
  Incluye estilos tanto para el modo claro como para el modo oscuro. Usa las clases de Tailwind con el prefijo `dark:` para gestionar el modo oscuro.
</Tip>

<div id="add-navigation-cards">
  ### Agrega tarjetas de navegación
</div>

Usa los componentes [Card](/es/components/cards) y [Columns](/es/components/columns) para crear una cuadrícula de enlaces debajo de la sección hero:

```mdx Example navigation cards
<div className="max-w-4xl mx-auto px-6">
  <Columns cols={2}>
    <Card title="Quickstart" icon="rocket" href="/quickstart">
      Get up and running in under five minutes.
    </Card>
    <Card title="API reference" icon="code" href="/api-reference">
      Explore endpoints, parameters, and examples.
    </Card>
    <Card title="Guides" icon="book" href="/guides">
      Step-by-step tutorials for common tasks.
    </Card>
    <Card title="Components" icon="puzzle" href="/components">
      Reusable UI components for your docs.
    </Card>
  </Columns>
</div>
```

<div id="use-images-with-dark-mode-support">
  ### Usa imágenes con soporte para modo oscuro
</div>

Muestra diferentes imágenes para el modo claro y oscuro usando las clases de visibilidad de Tailwind:

```mdx Example images with dark mode support
<img
  src="/images/hero-light.png"
  alt="Platform overview showing the main dashboard."
  className="block dark:hidden"
/>
<img
  src="/images/hero-dark.png"
  alt="Platform overview showing the main dashboard."
  className="hidden dark:block"
/>
```

<div id="use-react-components-for-interactive-layouts">
  ## Usa componentes de React para diseños interactivos
</div>

Para elementos reutilizables o interactivos, define [componentes de React](/es/customize/react-components) directamente en tu archivo MDX:

```mdx Example React component
export const FeatureCard = ({ title, description, href }) => (
  <a className="group block p-6 rounded-xl border border-gray-200 dark:border-zinc-800 hover:border-gray-300 dark:hover:border-zinc-700 transition-colors" href={href}>
    <h3 className="font-medium text-gray-900 dark:text-zinc-50 group-hover:underline">
      {title}
    </h3>
    <p className="mt-2 text-sm text-gray-500 dark:text-zinc-500">
      {description}
    </p>
  </a>
);

<div className="max-w-4xl mx-auto px-6 grid sm:grid-cols-2 gap-4">
  <FeatureCard
    title="Authentication"
    description="Set up OAuth, API keys, and session management."
    href="/guides/authentication"
  />
  <FeatureCard
    title="Webhooks"
    description="Receive real-time notifications for events."
    href="/guides/webhooks"
  />
</div>
```

<Warning>
  Evita usar la propiedad `style` en elementos HTML. Puede provocar un cambio en el diseño al cargar la página. Usa clases de Tailwind CSS o un [archivo CSS personalizado](/es/customize/custom-scripts) en su lugar.
</Warning>

<div id="add-custom-css">
  ## Agrega CSS personalizado
</div>

Para estilos que Tailwind no cubre, agrega un archivo CSS a tu repositorio. Mintlify aplica los archivos CSS a todo el sitio, haciendo que sus nombres de clase estén disponibles en todos los archivos MDX.

<Note>
  Los valores arbitrarios de Tailwind CSS (por ejemplo, `w-[350px]`) no son compatibles. Usa un archivo CSS personalizado para valores que las clases utilitarias de Tailwind no cubran.
</Note>

```css Example custom CSS file
.landing-hero {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  padding: 4rem 2rem;
}

@media (prefers-color-scheme: dark) {
  .landing-hero {
    background: linear-gradient(135deg, #0c1222 0%, #1a1a2e 100%);
  }
}
```

Luego haz referencia a la clase en tu MDX:

```mdx Example custom CSS usage
<div className="landing-hero">
  <h1>Welcome to the docs</h1>
</div>
```

Consulta [Scripts personalizados](/es/customize/custom-scripts) para más información sobre CSS personalizado y los selectores CSS disponibles.

<div id="full-example">
  ## Ejemplo completo
</div>

Aquí tienes una página de destino completa que combina una sección hero con tarjetas de navegación:

````mdx Example landing page
---
title: "Documentation"
description: "Everything you need to build with our platform."
mode: "custom"
---

export const HeroCard = ({ title, description, href, icon }) => (
  <a className="group block p-6 rounded-xl border border-gray-200 dark:border-zinc-800 hover:border-gray-300 dark:hover:border-zinc-700 transition-colors" href={href}>
    <h3 className="font-medium text-gray-900 dark:text-zinc-50">
      {title}
    </h3>
    <p className="mt-2 text-sm text-gray-500 dark:text-zinc-500">
      {description}
    </p>
  </a>
);

<div className="px-4 py-16 lg:py-32 max-w-3xl mx-auto text-center">
  <h1 className="text-4xl font-medium text-gray-900 dark:text-zinc-50 tracking-tight">
    Documentation
  </h1>
  <p className="mt-4 text-lg text-gray-500 dark:text-zinc-500 max-w-xl mx-auto">
    Everything you need to build, deploy, and scale your application.
  </p>
</div>

<div className="max-w-4xl mx-auto px-6 pb-16 grid sm:grid-cols-2 gap-4">
  <HeroCard
    title="Quickstart"
    description="Get up and running."
    href="/quickstart"
  />
  <HeroCard
    title="API reference"
    description="Explore endpoints, parameters, and examples."
    href="/api-reference"
  />
  <HeroCard
    title="Guides"
    description="Step-by-step tutorials for common tasks."
    href="/guides"
  />
  <HeroCard
    title="SDKs"
    description="Client libraries for every major language."
    href="/sdks"
  />
</div>
````

<div id="tips">
  ## Consejos
</div>

- **Prueba en modo claro y oscuro.** Previsualiza tu diseño personalizado tanto en modo claro como oscuro para detectar estilos `dark:` que falten.
- **Usa las clases `max-w-*`** para limitar el ancho del contenido y mantener el texto legible.
- **Hazlo responsivo.** Usa los prefijos responsivos de Tailwind (`sm:`, `md:`, `lg:`) para que tu diseño funcione en todos los tamaños de pantalla.
- **Combina modos.** Usa el modo `custom` para la página principal de tu documentación y el modo `default` para todo lo demás. El modo se configura por página, así que diferentes páginas pueden usar distintos diseños.
- **Verifica los cambios de diseño.** Si los elementos saltan al cargar la página, reemplaza las propiedades `style` en línea con clases de Tailwind o CSS personalizado.