Skip to content

Translate custom page layouts guide to es, fr, zh #4791

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mintlify merged 1 commit into from
Mar 21, 2026
Merged

Translate custom page layouts guide to es, fr, zh #4791

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -666,6 +666,7 @@
"fr/guides/accessibility",
"fr/guides/content-types",
"fr/guides/content-templates",
"fr/guides/custom-layouts",
"fr/guides/improving-docs",
"fr/guides/internationalization",
"fr/guides/linking",
Expand Down Expand Up @@ -1034,6 +1035,7 @@
"es/guides/accessibility",
"es/guides/content-types",
"es/guides/content-templates",
"es/guides/custom-layouts",
"es/guides/improving-docs",
"es/guides/internationalization",
"es/guides/linking",
Expand Down Expand Up @@ -1402,6 +1404,7 @@
"zh/guides/accessibility",
"zh/guides/content-types",
"zh/guides/content-templates",
"zh/guides/custom-layouts",
"zh/guides/improving-docs",
"zh/guides/internationalization",
"zh/guides/linking",
Expand Down
254 changes: 254 additions & 0 deletions es/guides/custom-layouts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,254 @@
---
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 personalizados."
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.
1 change: 1 addition & 0 deletions es/guides/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ Haz que tu documentación sea de primer nivel.
* [Accesibilidad](/es/guides/accessibility): Haz que tu documentación sea accesible para el mayor número posible de usuarios.
* [Tipos de contenido](/es/guides/content-types): Elige el formato adecuado para tutoriales, guías prácticas, referencias y explicaciones.
* [Plantillas de contenido](/es/guides/content-templates): Copia y modifica plantillas para cada tipo de contenido.
* [Diseños de página personalizados](/es/guides/custom-layouts): Usa modos de página y componentes para crear páginas de destino y otros diseños personalizados.
* [Mejora tu documentación](/es/guides/improving-docs): Usa datos y comentarios para mejorar tu documentación de forma continua.
* [Internacionalización](/es/guides/internationalization): Configura documentación multilingüe para llegar a una audiencia global.
* [Enlaces](/es/guides/linking): Crea enlaces internos, haz referencia a endpoints de la API y mantén la integridad de los enlaces en toda tu documentación.
Expand Down
6 changes: 3 additions & 3 deletions es/organize/pages.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,15 +131,15 @@ mode: "custom"
```

<Warning>
La propiedad `style` en las páginas con modo personalizado puede provocar un cambio en el diseño al cargar la página. Para evitar este problema, utiliza preferentemente [Tailwind CSS o CSS personalizado](/es/customize/custom-scripts).
La propiedad `style` puede provocar un cambio en el diseño al cargar la página. Para evitar este problema, utiliza preferentemente [Tailwind CSS o CSS personalizado](/es/customize/custom-scripts).
</Warning>


<div id="frame">
### Frame
</div>

El modo Frame ofrece un diseño similar al modo personalizado, pero mantiene la barra lateral de navegación. Usa este modo para incluir HTML y componentes personalizados mientras preservas la experiencia de navegación predeterminada. Solo los temas Aspen, Almond y Luma son compatibles con el modo Frame.
El modo Frame ofrece un diseño similar al modo personalizado, pero mantiene la barra lateral de navegación. Usa este modo para incluir HTML y componentes personalizados mientras preservas la experiencia de navegación predeterminada. Los temas Aspen, Almond, Luma y Sequoia son compatibles con el modo Frame.

```yaml
---
Expand All @@ -152,7 +152,7 @@ mode: "frame"
### Center
</div>

El modo Center elimina la barra lateral y la tabla de contenidos, centrando el contenido. Usa el modo Center para las páginas de cambios u otras páginas donde quieras centrar la atención en el contenido. Los temas Mint y Linden son compatibles con el modo Center.
El modo Center elimina la barra lateral y la tabla de contenidos, centrando el contenido. Usa el modo Center para las páginas de cambios u otras páginas donde quieras centrar la atención en el contenido. Los temas Mint, Linden, Willow y Maple son compatibles con el modo Center.

```yaml
---
Expand Down
Loading
Loading