Plantillas de página de destino
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
Desde nuestro repositorio GIT (próximamente)
Copie y pegue el código personalizado de nuestra documentación en Space Settings
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:
Pestaña Include Headers
Copie la sección Incluir encabezados de index.html
Péguela en la sección Incluir encabezados de Configuraciones del Espacio -> Código Personalizado
Asegúrese de que incluya las etiquetas <head> y presione Guardar
Pestaña Custom CSS
Copie el contenido del archivo stlye.css
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>.
El código de estilo comienza con algunas declaraciones de variables, que pueden utilizarse para cambiar fácilmente el tema de la página:
: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;
}Custom JavaScript
Copie el código de script.js
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>.
HTML de la página de inicio
Copie el código HTML de index.html comenzando desde el comentario <!-- START Landing page -- >.
Seleccione el tipo de página de inicio HTML personalizado y luego agregue el código HTML en el contenedor que aparece debajo.
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:
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.
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 )
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.
