---
title: Plantillas de páginas de destino
slug: plantillas-de-paginas-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
createdAt: 2023-06-07T10:11:09.000Z
---

Archbee proporciona plantillas de Página de Aterrizaje de marca blanca para que puedas crear fácilmente una página de destino personalizada para tu portal de documentos

# Cómo obtener el Código Personalizado

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

:::WorkflowBlockItem
Copia y pega el código personalizado de nuestra documentación en Configuración del Espacio

[Template 1](docId\:vT0gOaDvI-GMeeOOjk6vk)

[Plantilla 2](docId\:iu14mVzykYVBauN7vifFG)
:::
::::

# Cómo utilizar

Para configurar tu Página de Aterrizaje Personalizada debes copiar nuestro código personalizado en las secciones Código Personalizado y Página de Aterrizaje dentro de Configuración del Espacio.

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

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

- [Template 1](docId\:vT0gOaDvI-GMeeOOjk6vk)
- [Plantilla 2](docId\:iu14mVzykYVBauN7vifFG)

::::WorkflowBlock
:::WorkflowBlockItem
## Pestaña Incluir Encabezados

Copia la sección `Incluir Encabezados` de `index.html`

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

Pégala en la sección `Incluir Encabezados` de **Configuración del Espacio -> Código Personalizado**

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

Asegúrate de que incluya las etiquetas `<head>` y pulsa `Guardar`
:::

:::WorkflowBlockItem
## Pestaña CSS Personalizado

Copia el contenido del archivo `style.css`&#x20;

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

Y añádelo a la sección `CSS Personalizado` de Configuración del Espacio -> Código Personalizado. Asegúrate de que esté dentro de 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 se pueden usar 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
## JavaScript Personalizado

Copia el código de `script.js`

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

Agrégalo a la sección `JavaScript Personalizado` en Configuración del Espacio -> Código Personalizado

Asegúrate de que esté dentro de 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

Copia 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)

Selecciona el tipo de página de inicio `HTML Personalizado` y luego añade 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 logos están definidos con marcadores de posición con el formato: `<img src="https://placehold.co/..." ... />` como se muestra 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 varios enlaces que se pueden usar para navegar dentro o fuera del documento. Al final de la lista también hay un enlace comentado que se puede usar para añadir otros enlaces si es necesario.

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

### Sección Hero

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

![](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 tus documentos. Un ejemplo está comentado al final de la lista.

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