Este documento contiene las especificaciones técnicas de su plantilla. Mostraremos todas las secciones explicando elemento a elemento su funcionalidad y especificaciones.

 

HOME


La HOME es la página principal de la plataforma y es aquí donde se colocará la información general y de merca de su proyecto. 


Header


save image

 

Banner

 

 

Sección quienes somos o sobre el autor



Sección promocional: 


 


 

Sección de los cursos destacados


    


Sección testimonios


 

 

Sección diferenciales


 

 

Pie de página


 

 

 

HEADER O MENÚ

 

 

El header de la  plataforma es un menú de navegación que lleva al usuarios a las diferentes páginas existentes; 

 

1. Logo

  • Dimensiones : Hasta  400px largo x 65px alto.


2. Menú de navegación: Los botones que se ven por padrón son:

  • Home - Página principal de la plataforma.

  • Cursos - Página pública de cursos, un catálogo con todos los cursos publicados en su plataforma.

  • Contacto - Formulario para enviar mensajes a los responsables de la plataforma.

  • Login/Registrarse - Áreas para el usuario, realizar login o registro.

 

BANNER

 


 

 

El objetivo del banner es atraer la atención del cliente a través de imágenes y frases. El banner cuenta con un botón de conversión que encaminará al alumno a un enlace deseado, por ejemplo página de registro o compra del curso.


1. Imagen del banner


Dimensiones: 1550px de largo x 500px de alto.

Recomendamos que la imagen del banner sea una imagen llamativa que sirva apenas de fondo.

Para adicionar informaciones a su banner es recomendado utilizar los elementos título, descripción y botón de conversión.

* Nota: La información importante en su imagen quedará superpuesta por otros elementos del banner, si los utiliza.

 

2. Título


Fuente: 48px

30 a 40 caracteres.

Sugerimos que el título sea corto para generar entendimiento rápido en el usuario. No es obligatorio utilizar un título en su banner.

* Nota: Recomendamos que el título del banner tenga hasta 2 líneas, más líneas comprometen el visual de la home, aún más en el caso de las mobile ya que las pantallas más pequeñas van a generar aún más líneas. Títulos largos también desplazará los otros elementos del banner.

 

3. Descripción: 


Fuente: 20px

60 a 80 caracteres. 

Una breve descripción del contexto de lo que trata su banner.

Recomendamos que la descripción no supere 2 líneas.

No es obligatorio usar una descripción en su banner.

* Nota: Si su descripción es demasiado larga, los demás elementos del banner se desplazan, perjudicando la visibilidad.


4. Botón de conversión


Fuente: 14px

Hasta 20 caracteres. 

Este es un botón que va a dirigir el usuario a la página que está configurada. 

* Nota: La superposición de la cantidad recomendada de caracteres generará un botón de conversión muy largo que no se adaptará correctamente a las versiones móviles de la plataforma.

 

SECCIÓN QUIENES SOMOS


 

La sección 'Quienes Somos' trae información sobre EL AUTOR o su NEGOCIO, es un texto de presentación al cliente. Esta sección es colocada por nosotros de acuerdo con lo que se ha llenado en su hoja de cálculo que su implementador le entregará.


1. Imagen


Dimensiones: 618px largo x 503px alto.

Esta imagen es la imagen de destaque colocada en la información del curso, en la página de creación del curso.

* Nota: Utilizar una imagen de diferentes dimensiones cambiará las proporciones de la sección.

 

2. Título


Fuente: 45.5px

Hasta 90 caracteres, 4 líneas de título.

* Nota: Superar los límites de líneas y la cantidad de caracteres hará que la imagen y los textos de la sección queden desplazados. Lo que dejará su home visualmente desequilibrada.

 

3. Subtitulo


Fuente: 18px

Hasta 95 caracteres, 4 líneas.

* Nota: Superar los límites de líneas y la cantidad de caracteres hará que la imagen y los textos de la sección queden desplazados. Lo que dejará su home visualmente desequilibrada

 

4. Texto


Fuente: 18px

Hasta 328 caracteres.

* Nota: Mismas observaciones del título.

 

 

SECCIÓN PROMOCIONAL 1

 

La sección promocional muestra a sus alumnos las ventajas en hacer sus cursos. Los principales temas abordados y su importancia. Esta sección se compone de título, texto y contenido. Esta sección es colocada por nosotros de acuerdo con lo que se ha llenado en su hoja de cálculo, que su implementador le entregará.

 

1. Título


Fuente: 45.5px

Hasta 85 caracteres, 2 líneas.

* Nota: La superación de los límites de línea y la cantidad de caracteres aumentará el alto de la sección.


2. Texto


Fuente: 24px

Hasta 145 caracteres.

* Nota: La superación de los límites de línea y la cantidad de caracteres aumentará el alto de la sección.

 

 

CURSOS DESTACADOS


 

 

 

Los cursos que se configuran como publicados y destacados se colocan automáticamente dentro de una sección, esta sección se organizan dentro de la sección de cursos y se colocan en una cuadrícula.

 

 

IMAGEN DEL CURSO



 


La imagen del curso también se genera automáticamente a partir de la información que se coloca en la página de creación de cursos.

 

1. Imagen del curso


Dimensiones: rectangular, 400px largo x 276px alto.

Esta imagen es la imagen de destaque colocada en las informaciones del curso, en la página de creación del curso.

* Nota: Utilizar una imagen de diferentes dimensiones cambiará la altura y la proporción de la presentación.


2. Título


Fuente: 23 px

hasta 25 caracteres, 1 línea.

* Nota: Utilizar más caracteres y líneas de lo indicado cambiará el alto de la carta.


3. Descripción


Fuente: 18.5 px

La descripción del curso en la imagen viene de la descripción hecha en la página de creación de los cursos “General”, la imagen automáticamente utilizará una cantidad limitada de caracteres.

 

4. Precio


El precio del curso también se define a partir de la página de creación de cursos. Si el curso está configurado como gratuito, en lugar del precio el mensaje 'Gratis' aparecerá. El precio mostrado cortado es el precio original del curso, el precio entero es el precio que se pagará en la compra del curso.

 

5. Botón ‘Conozca más’


Este botón llevará al alumno a la página específica del curso.

 

 

SECCIÓN TESTIMONIOS


 

 

La sección de TESTIMONIOS contiene los comentarios que sus alumnos pasaron de sus cursos. Para rellenar esta sección es necesario enviarnos los materiales solicitados en la planilla llamada dashboard (template), que su implementador le entregará. Los testimonios están compuestos por foto, nombre, cargo y texto.

 

 

SECCIÓN DIFERENCIALES


 

La sección diferenciales son argumentos para generar interés en el visitante. Se compone de título, texto e imagen.

 

 

1. Imagen


Dimensiones: 618px largo x 503px alto.

* Nota: Utilizar una imagen de dimensiones diferentes va alterar las proporciones de la sección.


2. Título


Fuente: 45.5px

hasta 44 caracteres, 2 líneas.

* Nota: La sobrepasar los límites de línea y la cantidad de caracteres aumentará el alto de la sección.


3. Texto


Fuente: 18px

Hasta  315 caracteres.

* Nota: La superación de los límites de línea y la cantidad de caracteres aumentará el alto de la sección.

 

 

PIE DE PÁGINA


save image

 

El pie de página trae información importante de contacto. Teléfono, e-mail, dirección y redes sociales. El pie de página es llenado por nuestro equipo de acuerdo con lo que sea informado en la hoja de cálculo entregada.


Logo


Dimensiones: altura hasta 150px.

* Nota: El logo del pie puede ser un poco mayor que la usada en el encabezado, sin embargo no se recomienda utilizar un valor de altura superior a 150px, esto aumentaría la altura total del pie de página causando desequilibrio en el aspecto de las páginas.

 

 

PÁGINA DE LOS CURSOS

 

 

1. HEADER O MENÚ

 

2.  BÚSQUEDA POR CATEGORÍA


Es el campo para buscar cursos por nombree o palabras-claves.

 

3.  CATEGORÍAS


Los enlaces de las categorías creadas, aparecerán en esta sección siempre que exista al menos un curso con esta categoría. En esta sección se mostrarán todos los cursos creados y publicados.

 

 

PÁGINA PÚBLICA DEL CURSO (LANDING PAGE DEL CURSO)

 

Esta es la página específica del curso, el alumno se dirige a ella al hacer click en el curso en el que tiene interés. Esta página contempla descripciones detalladas del contenido del curso.


  • HEADER O MENÚ
  • BANNER: El banner del curso es generado con la imágenes definidas en la sección imágenes del curso.
  • Imagen del banner del curso: Dimensiones: 1920px largo x 560px alto, recomendamos que la imagen del banner sea una imagen llamativa que sirva de fondo.


Para agregar información a su banner se recomienda utilizar los elementos de título, descripción y botón de conversión.

 

 

 

 


 

 

* Nota: La información importante en su imagen quedará superpuesta por otros elementos del banner, si los utiliza.

            

2.2 Título del banner del curso


Fuente: 34px

Hasta 40 caracteres

El título del banner del curso es el nombre del curso y es el mismo título que es usado en la imagen de curso (ver 1.5.1).

* Nota: Como este título es el nombre del curso y también el título de la carta del curso recomendamos que se utilicen las especificaciones de este documento para no desconfigurar los demás elementos.


2.3 Botón del banner del curso


El botón del banner del curso es generado automáticamente, el texto cambiará dependiendo del valor del curso en caso de que sea gratuito.


3. PIE DE PÁGINA

         


 PÁGINA DE CONTACTO

 

 

1. HEADER O MENÚ

       

2. BANNER DE LA PÁGINA DE CONTACTO: Este banner es sólo una imagen de fondo para la página.


Dimensiones: 1700px ancho x 250px altura.

Recomendamos que la imagen del banner sea una imagen llamativa que sirva de fondo.

 

3. FORMULÁRIO: El formulario contiene los campos que permiten que visitantes o alumnos entren en contacto con los administradores de la plataforma.

 

PÁGINA DE LOGIN/CADASTRO


Esta página contiene dos opciones, una es para el registro y la otra es para realizar login en la plataforma. La página de registro es una pagina donde los usuarios llenan un formulario para crear su perfil.

 

 

 

Caso tenga dudas puede entrar en contacto con el departamento de Setup si esta en esta etapa o por email a soporte@eadbox.com 

 

Daniel A. Alvarado es el autor de este artículo de solución.


Ver también: 


Templates que EADBOX ofrece para mi plataforma

 Importancia de los Banners en mi HOME

¿Cómo utilizar el banco de imágenes?