Manual

Contenidos

Layout

Grilla o retícula

La grillas o retícula con que se diagrama el contenido en una página está basada en secciones que a su vez se componen en máximo 6 columnas con un ancho variable otorgadas por Elementor.

Una columna está anidada dentro de una sección, resultando una grilla inferior disponible dentro de un ancho determinado por la sección.

El comportamiento de estas secciones y columnas en diferentes dispositivos dependerá de las necesidades del diseño y como se ajusten según los breakpoints definidos más adelante.

Además el ancho máximo para diagramar contenido en el sitio web siempre será 1250px.

Breakpoints

Los breakpoints ejecutarán un cambio en el comportamiento o distribución de columnas, permitiendo la personalización de esta en diferentes momentos cuando la ventana del navegador tenga un ancho de:

  • Inferior a 360px Adecuado para dispositivos móviles.
  • Inferior a 768px Adecuado para tablets.
  • Igual o mayor que 1200px Adecuado para monitores desktop estándar.
Secciones

Se encargan de contener columnas que a su vez contienen todos los elementos que componen una página. El ancho de los contenedores siempre debe estar marcado con la opción “Ancho fijo”. Este tiene un tamaño de 1200px. En pantallas menores a 1200px; utilizará el máximo disponible según el breakpoint que se ejecute.

 
Columnas

Son el principal contenedor de elementos dentro de una sección y la cantidad de columnas dentro de una sección dependerá de las necesidades del diseño. Una sección puede contener hasta 6 columnas en una misma sección, si la cantidad de columnas supera esa cantidad automáticamente se desplazarán hacia abajo, generando así una nueva fila.

 

Espacios

Header

El header es un elemento que se compone por el menú principal y un menú superior e inferior con diferentes niveles de acceso, el cual, puede variar dependiendo del usuario que esté navegando.

Footer o pie de página

El footer es un elemento que se compone por la información de contacto a nivel regional, de cada uno de los países y las redes sociales tanto de WCS como de WWF en cada país en los que tenemos acción.

Menú principal

El menú principal, como componente de navegación, comparte los principales accesos del sitio web y las categorías en las que se encuentran alojados la mayor cantidad de contenidos.

Menú superior

El menú superior es una sección creada para dar acceso rápido a la información de primera mano para cada uno de los usuarios del sitio web; además tener un acceso constante al SICAU, las redes sociales de la Institución y el cambio de idioma para el sitio.

Contenido

Blog o recursos

En esta sección está alojado todo el contenido tipo:

  • Boletines.
  • Webinars.
  • Campañas.
  • Infografías.
  • Noticias.
  • Reportajes.
  • Videos.
  • Material audiovisual.
  • Entre otros.

 

Este tipo de contenido no se sube directamente en esta plataforma ya que se puede generar una duplicidad de contenido con instituciones aliadas como WCS o WWF. Para esta sección se arrastra la introducción, título e imagen destacada de cada uno de los contenidos y se enlaza al sitio web que corresponda según la institución y país aliado.

Noticias

En esta sección está alojado todo el contenido tipo novedad que nos es entregado por las instituciones aliadas como WCS o WWF en cada país.

Este tipo de contenido no se sube directamente en esta plataforma ya que se puede generar una duplicidad de contenido con instituciones aliadas como WCS o WWF. Para esta sección se arrastra la introducción, título e imagen destacada de cada uno de los contenidos y se enlaza al sitio web que corresponda según la institución y país aliado.

Eventos

Espacio destinado para promocionar todos los eventos en los que la Alianza por la Fauna Silvestre y los Bosques, WCS o WWF tengan participación.

Este tipo de contenido no se sube directamente en esta plataforma ya que se puede generar una duplicidad de contenido con instituciones aliadas como WCS o WWF. Para esta sección se arrastra la:

  • Introducción.
  • Título.
  • Imagen destacada de cada uno de los contenidos
  • Tipo de evento.
  • Fecha del evento.

Este se enlaza al sitio web que corresponda según la institución y país aliado.

Contenido estático

Tipo de contenido:

  • La Alianza.
  • Nuestras acciones.
  • Fauna.
  • Bosques.

Este tipo de contenido está totalmente cargado en este sitio web y puede ser modificado por cualquier usuario con los permisos necesarios.

Estilos

Colores

La siguiente paleta presenta los colores principales en los cuales se basa toda la comunicación de la Alianza por la Fauna y los Bosques.

Verde

Código: #8FBF2F

Azul

Código: #3BB8BE

Café

Código: #94604C

Fuentes

La fuente utilizada en todo el sitio web tiene por nombre MONSTERRAT y está disponible para utilizarse de manera libre en cualquier espacio del sitio web, respetando los tamaños preestablecidos.

Título 1

Título 2

Título 3

Título 4

Título 5
Título 6

Cuerpo de texto

Botones

Los botones del sitio web deben siempre guardar la misma relación de aspecto según se muestra en el siguiente ejemplo:

Características:

  • Bordes redondeados.
  • Fuente Monsterrat Bold.
  • Animación con cambio de color al pasar el puntero sobre el mismo.

 

Iconografía

El sitio web cuenta con toda una biblioteca de iconos para su uso futuro la cual posee mas de 500 iconos diferentes a los cuales se les puede cambiar el tamaño y el color para acomodarlos al diseño y la marca según lo que se requiera.

Tamaño de las imágenes

El sitio está optimizado y pensado para recibir cualquier formato de imagen (.jpg, .png o .gif), al momento que una imagen es subida esta se convierte automáticamente en formato .webp el cual ayuda a que el sitio tenga un mejor tiempo de carga y las imágenes no pierden calidad aunque su peso baja considerablemente.

Gracias a la construcción del sitio via Elementor este nos ayuda a acomodar las imágenes automáticamente al espacio requerido guardando las proporciones de la misma

Tamaño y peso máximo

1920x1080px : 200kb

Imágenes portada de contenidos adicionales como webinars

Estas portadas están pensadas en un recuadro de 800x800px.

Las imágenes que fueron subidas anterior a la entrega del sitio no guardaban estas proporciones y se acomodan automáticamente dentro de este espacio, es por esto que vemos algunos contenidos de las imágenes cortados. Si se desea evitar el corte de las imágenes estas deben ser subidas en un tamaño cuadrado de 800x800px 

Suscríbete a nuestro boletín informativo

Recibe en tu correo electrónico las noticias, campañas, eventos y recursos de la Alianza en los países andino-amazónicos. ¡No te pierdas los avances!

Perú

Ecuador