# Crear diseños de página personalizados (/es/guides/custom-layouts)

<!-- agent-signals: reading_time_min: 6 · est_tokens: 2710 · updated: 2026-09-23 -->

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 [#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.

Las páginas en modo `custom` no tienen tipografía predeterminada. Los elementos HTML nativos como `<h2>` y `<p>` se muestran con los estilos predeterminados del navegador, así que dales estilo explícitamente con clases de Tailwind CSS.

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

<div id="build-a-landing-page">
  ## Crea una página de destino [#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 [#configura-la-página]
</div>

Crea un archivo MDX con el modo `custom`:

```yaml title="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 [#crea-una-sección-hero]
</div>

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

```mdx title="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 [#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 title="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 [#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 title="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 [#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 title="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>

<Note>
  La vista previa en vivo del editor web no genera CSS para las clases de Tailwind específicas de una página, por lo que los diseños personalizados pueden verse sin estilo mientras los editas. Verifica tus estilos con `mint dev`, una implementación de vista previa o una implementación de producción. Consulta [Las clases de Tailwind no se aplican en la vista previa en vivo del editor](/es/help-center/tailwind-classes-not-applying-in-editor-preview).
</Note>

<div id="add-custom-css">
  ## Agrega CSS personalizado [#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.

Usa un archivo CSS personalizado cuando necesites animaciones con keyframes, selectores complejos o estilos que se apliquen a muchas páginas. Para valores puntuales, usa un [valor arbitrario](/es/customize/custom-scripts#arbitrary-values-and-variants) de Tailwind, como `w-[350px]`, en su lugar.

```css title="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 title="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 [#ejemplo-completo]
</div>

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

```mdx title="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 [#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.
* **Aplica estilos directamente a los componentes.** Los componentes aceptan una propiedad `className`, así que puedes ajustar una sola instancia sin un elemento contenedor ni una regla CSS que la anule. Consulta [Estiliza componentes con className](/es/customize/custom-scripts#style-components-with-classname).