Páginas de inicio

Ayuda a tus lectores a encontrar lo que necesitan en el momento en que llegan. Las páginas de inicio se crean con un diseñador visual basado en bloques directamente en DeveloperHub, así que puedes componer un punto de entrada pulido sin escribir código.

Hay dos tipos de página de inicio:

• Página de inicio principal: la página que se encuentra en la raíz / de tu sitio de documentación.

• Páginas personalizadas: páginas adicionales en cualquier ruta que elijas (por ejemplo /pricing o /start). Una página personalizada también puede actuar como tu página 404.

Ambas se diseñan exactamente de la misma manera.

El diseñador de páginas de inicio

El diseñador muestra una vista previa en vivo de tu página tal como la verán los lectores, con un panel de ajustes (el inspector) a la derecha. Editas directamente sobre la página.

Para abrir el diseñador, haz cualquiera de lo siguiente:

• En la navegación superior del editor, abre el selector de ámbito y elige Landing Pages. Esto abre la página de inicio principal en el diseñador.

• Desde Manage Landing Pages, selecciona una página y haz clic en Edit design.

• Usa el selector de Landing Pages en la navegación superior del editor para cambiar entre la página de inicio principal y tus páginas personalizadas.

Trabajar en el diseñador:

• Seleccionar un bloque: haz clic en cualquier bloque de la página. El inspector cambia a los ajustes de ese bloque.

• Editar texto: haz clic en un encabezado o bloque de texto y escribe. Los cambios se conservan al hacer clic fuera.

• Reordenar: usa el control de arrastre en la columna de acciones de un bloque para moverlo hacia arriba o hacia abajo.

• Duplicar o eliminar: usa los botones de duplicar y eliminar en la misma columna de acciones.

• Ajustes de la página: haz clic en un área vacía de la página, o pulsa Esc, para deseleccionar todo y mostrar los ajustes a nivel de página.

Tu tema, color de marca y modo oscuro se heredan de tus ajustes visuales, por lo que una página de inicio siempre coincide con el resto de tu documentación.

Bloques

Una página de inicio se compone de bloques apilados de arriba abajo. Para añadir uno, haz clic en Add block donde lo quieras y elige de la biblioteca.

Los bloques disponibles son:

• Hero: un encabezado destacado para la parte superior de la página. Elige una variante (Centered, With media, With code o With search) y define un título, un subtítulo, una etiqueta tipo píldora opcional y botones.

• Cards: una cuadrícula de tarjetas que enlazan a tu documentación. Las tarjetas pueden generarse automáticamente a partir de tu contenido o crearse a mano. Consulta Estrategia de generación de tarjetas.

• Changelog: una lista compacta de "novedades recientes" extraída de uno de tus changelogs. Siempre muestra las últimas publicaciones, por lo que se mantiene actualizada sin volver a editar la página.

• Heading: un encabezado de sección (H1, H2 o H3).

• Text: un párrafo de texto enriquecido para cualquier prosa que necesites.

• Buttons: uno o más botones de llamada a la acción (estilos primary, outline o ghost).

• Row: un diseño de varias columnas (2, 3 o 4 columnas) para colocar otros bloques uno al lado del otro.

• Spacer: espacio vertical entre bloques.

Estilo de los bloques

Además de sus propias opciones, todos los bloques comparten un conjunto común de controles de estilo en el inspector:

• Background: None, Subtle, Brand, Striped o Dark.

• Padding: de None a XL, controla el espacio vertical que ocupa el bloque.

• Align: Left, Centre o Right, para los bloques en los que se aplica la alineación.

Estrategia de generación de tarjetas

Las tarjetas son el bloque más flexible. Un bloque Cards tiene una Variant que decide de dónde provienen sus tarjetas.

Auto

Las tarjetas se generan automáticamente a partir de la estructura de tu proyecto. Elige una Source para controlar cómo:

• Smart Auto: DeveloperHub elige el mejor diseño según la estructura de tu proyecto. Es el valor predeterminado y un buen punto de partida para la mayoría de los proyectos.

• By Navigation Group: una tarjeta por cada grupo de navegación.

• By Section: una tarjeta por cada documentación o referencia de API de tu proyecto.

• By Category: una tarjeta por categoría dentro de una única documentación. Elige de qué documentación extraerlas.

• Hand-picked: fija las secciones o páginas exactas que quieres destacar. Puedes sobrescribir el título y la descripción de cada una.

Como las tarjetas automáticas se derivan de tu contenido, se actualizan solas cuando añades, renombras o reordenas documentos.

Manual

Crea cada tarjeta tú mismo. Una tarjeta manual tiene su propio título, descripción, enlace, etiqueta superior opcional, icono e imagen de portada. Úsala cuando quieras control total sobre lo que dice cada tarjeta y a dónde apunta, incluidos enlaces fuera de tu documentación.

Chips

Una fila compacta de chips de etiqueta en lugar de tarjetas completas. Los chips pueden escribirse a mano o generarse a partir de los títulos de las tarjetas de una fuente automática.

Visualización de las tarjetas

Sea cual sea la variante, puedes ajustar el aspecto de las tarjetas:

• Columns: 2, 3 o 4 en horizontal.

• Card style: Stripe (una barra superior del color de la marca), Flat u Outline.

• Pages per card: cuántos enlaces secundarios lista cada tarjeta (de 0 a 5).

• Heading: una etiqueta opcional mostrada sobre la cuadrícula (por ejemplo "API References").

Ajustes de la página

Sin nada seleccionado (haz clic en un área vacía o pulsa Esc), el inspector muestra los ajustes de toda la página:

• Page width: Narrow, Default o Wide.

• Background: Subtle, None o Gradient.

El título de la página y la meta descripción se definen en la pantalla Manage Landing Pages.

Borradores y publicación

Tus cambios se guardan automáticamente como borrador, que no es visible para los lectores. Cuando estés satisfecho con la página:

• Haz clic en Publish para publicar el diseño actual.

• Usa Save draft para seguir trabajando sin publicar.

• Discard un borrador para volver a la última versión publicada.

Para ver la página como la vería un lector, haz clic en View (en la pantalla Manage Landing Pages) o en View Landing Page en la navegación superior. Se abre en una pestaña nueva.

Páginas personalizadas

Las páginas personalizadas son páginas de inicio adicionales que se encuentran en la ruta que elijas. Se diseñan con el mismo diseñador basado en bloques que la página de inicio principal.

Para crear una:

1. En la navegación superior del editor, abre el selector de ámbito y elige Landing Pages.

2. Abre Manage Landing Pages, o usa el selector de Landing Pages, y haz clic en New custom page.

3. Introduce la ruta en la que debe estar la página, como pricing (omite el basepath de tu proyecto si tienes uno).

4. La página se abre en el diseñador, lista para construir.

Gestión de páginas de inicio

La pantalla Manage Landing Pages lista la página de inicio principal y todas tus páginas personalizadas, y es donde cambias todo lo que no sea el diseño en sí.

Para cada página puedes:

• Editar el título y la descripción (la meta descripción que usan los motores de búsqueda).

• Activarla o desactivarla. Una página desactivada queda oculta para los lectores.

• Abrir el diseñador con Edit design, o View la página publicada.

• Para páginas personalizadas: cambiar la ruta, marcarla como la página 404 o eliminarla.

Página 404

Una página personalizada puede designarse como la página 404 de tu proyecto. Cuando un lector visita una URL que no existe, se le muestra esta página.

Para configurarla:

1. Abre Manage Landing Pages y selecciona la página personalizada que quieres usar.

2. En Routing, activa Use as 404 page.

Cuando una página se usa como página 404, su propia ruta se ignora.

HTML personalizado

Si prefieres programar a mano una página con tu propio HTML, CSS y JavaScript, puedes cambiar cualquier página de inicio (la principal o una personalizada) a una página HTML personalizada en lugar del diseño basado en bloques. Consulta Página de inicio personalizada.