---
title: Plantillas de página de destino
slug: docs/es/plantillas-de-pagina-de-destino
description: Aprende cómo crear una página de destino profesional y con marca para tu portal de documentación utilizando las plantillas de página de destino de marca blanca de Archbee. Este documento proporciona instrucciones paso a paso sobre cómo utilizar código per
docTags: 
createdAt: 2023-06-07T10:11:09.000Z
---

Archbee proporciona plantillas de Landing Page de marca blanca para que usted pueda crear fácilmente una página de destino con marca para su portal de documentación

# Cómo obtener el Custom Code

::::WorkflowBlock
:::WorkflowBlockItem
Desde nuestro repositorio GIT (próximamente)
:::

:::WorkflowBlockItem
Copie y pegue el código personalizado de nuestra documentación en Space Settings

[Plantilla 1](docId\:vfkan4_aU7456jszkmLWp)

[Plantilla 2](docId\:oavrjy1VnS__0X1lk-Hof)
:::
::::

# Cómo usar

Para configurar su Custom Landing Page usted debe copiar nuestro código personalizado en las secciones Space Settings -> Custom Code y Landing Page.

Para cada Plantilla tendrá 3 archivos: `index.html`, `script.js` y `style.css`

Los 3 archivos se pueden encontrar a continuación para cada Plantilla:

- [Plantilla 1](docId\:vfkan4_aU7456jszkmLWp)
- [Plantilla 2](docId\:oavrjy1VnS__0X1lk-Hof)

::::WorkflowBlock
:::WorkflowBlockItem
## Pestaña Include Headers

Copie la sección `Incluir encabezados` de `index.html`

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/PPZ9fNNaAwAtqJRocLOO4_screenshot-2023-06-07-at-135912.png)

Péguela en la sección `Incluir encabezados` de **Configuraciones del Espacio -> Código Personalizado**

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/9wpy-5_oml6i5wV31KY5g_screenshot-2023-06-07-at-140440.png)

Asegúrese de que incluya las etiquetas `<head>` y presione `Guardar`
:::

:::WorkflowBlockItem
## Pestaña Custom CSS

Copie el contenido del archivo `stlye.css`&#x20;

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/k_yNxjgap0NaqWKYpUmpM_screenshot-2023-06-07-at-140754.png)

Y agréguelo a la sección `CSS personalizado` de Space Settings -> Custom Code. Asegúrese de que esté dentro de las etiquetas `<style></style>`.

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/aums9GUiCrJePpu6WSwXZ_screenshot-2023-06-07-at-142032.png)

El código de estilo comienza con algunas declaraciones de variables, que pueden utilizarse para cambiar fácilmente el tema de la página:

```css
:root {
  --accent-text: #2166ae;
  --secondary-text: #0a4563;
  --primary-text: #24292e;
  --background-color: #fff;
  --primary-link: #999;
  --accent-link: var(--accent-text);
  --header-title-color: #fff;
  --header-subtitle-color: #fff;
}
```
:::

:::WorkflowBlockItem
## Custom JavaScript

Copie el código de `script.js`

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Qil2KIP5JCUdEODOWrbz-_screenshot-2023-06-07-at-142616.png)

Agréguelos en la sección `JavaScript personalizado` de Space Settings -> Custom Code

Asegúrese de que estén dentro de las etiquetas `<script></script>`.

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Hom4i2ZWF0LRp6Hm1a7jC_screenshot-2023-06-07-at-142916.png)
:::

:::WorkflowBlockItem
## HTML de la página de inicio

Copie el código HTML de `index.html` comenzando desde el comentario `<!-- START Landing page -- >`.

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/b7ahvKWfrOGCUrXoUxdc8_screenshot-2023-06-07-at-143259.png)

Seleccione el tipo de página de inicio `HTML personalizado` y luego agregue el código HTML en el contenedor que aparece debajo.

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/tFoqTxNLlu5FkvbT0ZJjI_screenshot-2023-06-07-at-143638.png)
:::

:::WorkflowBlockItem
### Cómo personalizar el código

### Logo + imágenes

Todas las imágenes y logotipos se definen con marcadores de posición con el formato: `<img src="https://placehold.co/..." ... />` como se ejemplifica a continuación:

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Gx4-31jpVXRmSAmGygqU7_screenshot-2023-06-07-at-182855.png)

### Enlaces de la barra de navegación

La barra de navegación contiene algunos enlaces que pueden usarse para navegar dentro o fuera del documento. Al final de la lista también hay un enlace comentado que puede usarse para agregar otros enlaces si es necesario.

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/4YOxDQq-aZ7nm0pWkBFLb_image.png)

### Sección principal (Hero)

Contiene una imagen de fondo y un título y subtítulo (los colores de estos pueden cambiarse en la sección de estilo [Estilos](docId\:TYBfQPOP9Iv1r4A7DSqLV) )

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/PyQLTE3oBRKqUAB35X6_v_image.png)

### Bloques de documentos

Una lista de bloques que contiene un ícono, un título, una descripción y un botón, generalmente usados para navegar a su documentación. Un ejemplo está comentado al final de la lista.

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/p8s7b8wG7-NnClHGhgy_I_image.png)
:::
::::