Guía Saga Suite Contenido Secciones

Transcripción

1 Guía Saga Suite Contenido Secciones Tabla de contenido Acceso a la Edición del recurso Cómo editar el recurso Tipos de bloque de contenido Texto Simple Bloque de texto Secciones Configuración general de secciones Vista clásica Vista por pestañas Vista de menú Vista de menú de índice Vista accordion (acordeón) Guía Saga Suite Contenido Secciones - 1 -

2 Guía de edición del Recurso Contenido Secciones El recurso de Contenido Secciones nos permite crear bloques de contenido con formato artículo. Se usa normalmente para la creación de páginas de contenido estático. En la mayoría de las secciones de una web, el contenido principal es un recurso de este tipo. Acceso a la Edición del recurso Debemos seleccionar la vista de Default en la web para que nos aparezca la diana del recurso de contenido secciones y poder acceder a su edición desde ahí: Una vez en esta vista desplegamos con la varita mágica todos los tipos de recursos que tenemos disponibles para arrastrar a la página, elegimos el tipo Contenido Secciones y lo arrastramos a la página: Guía Saga Suite Contenido Secciones - 2 -

3 Cómo editar el recurso Para modificar un nuevo recurso de tipo Contenido Secciones disponemos de la diana de edición en el extremo superior derecho del recurso. Si pasamos el ratón por dicha diana veremos la opción Edit. Entonces, aparece la pantalla con el formulario de edición del recurso que contiene los siguientes campos: La primera pestaña del recurso que encontramos nos permite editar los principales campos del recurso: Título: Título principal que se muestra en la página. Subtítulo: Subtítulo que se muestra en la página. Contenido: Distintos bloques de contenido que se van a mostrar a lo largo del recurso. Podemos elegir entre tres tipos de bloque de contenido: Texto simple, Bloque de texto o Secciones. o Texto simple: Tipo de bloque más simple. Consta de un cuerpo de texto que puede ir acompañado de una imagen. Texto: Cuerpo del texto con editor WYSIWYG para HTML. Imagen principal: Imagen que muestra junto al texto. o Imagen: Url de la imagen. Posición: Lugar que ocupa la imagen con respecto al cuerpo de texto. Ancho: Ancho de la imagen en porcentaje con respecto al bloque completo de contenido. Pie de foto: Breve texto que se muestra al pie de la foto. Habilitar ampliación: Permite que la imagen se muestre ampliada en un modal al hacer click sobre la misma. Bloque de texto: Tipo de bloque más complejo que cuenta con más tipos de campo y contenido. Nos permite añadir un cuerpo de texto acompañado de diferents bloques de media (imagen, vídeo, ubicación y contenido libre) Título del bloque: Título que se muestra al comienzo del bloque. Introducción: Texto con editor WYSIWYG para HTML a modo de introducción. Texto: Igual que en Texto Simple. Imagen principal: Igual que en Texto Simple. Contenido libre: Bloque de texto HTML. Content: Contenido del bloque. Posición: Lugar que ocupa el bloque con respecto al cuerpo de texto. Guía Saga Suite Contenido Secciones - 3 -

4 o Ancho: Ancho del bloque en porcentaje con respecto al bloque completo de contenido. Ubicación: Mapa de lugar específico e información con formato específico. Mapa embebido: se puede obtener de Google Maps e insertar como <iframe>. Info: Información adicional que se muestra con una etiqueta (key) y un valor (value). Por ejemplo: Ciudad: Sevilla Otra información: Texto con información adicional. Posición: Lugar que ocupa el bloque con respecto al cuerpo de texto. Ancho: Ancho del bloque en porcentaje con respecto al bloque completo de contenido. Vídeo Embebido: Código embebido: se puede obtener de Youtube e insertar como <iframe>. Posición: Lugar que ocupa el bloque con respecto al cuerpo de texto. Ancho: Ancho del bloque en porcentaje con respecto al bloque completo de contenido. Galería de Imágenes: Galería de imágenes a mostrar por debajo del bloque de media (imagen, vídeo, ubicación o contenido libre) y el cuerpo de texto. Modo de visualización: pueden mostrarse las imágenes como una cuadrícula de thumbnails o un carrusel. Recursos por fila: Número de recursos que se muestran por fila en el modo de cuadrícula de thumbnails. Alto: Píxeles de alto del carrousel (sólo el número sin px). OriginSize: Marcar para mostrar las imágenes en su tamaño original (se mantiene la relación de aspecto). Imágen: Cada una de las imágenes que se muestran en la galería. Galería de enlaces / documentos Enlace: Enlace incluido junto al texto. o Target: Opción para abrir el nuevo enlace en la misma o en una nueva ventana. o Follow: Casilla para indicar que el enlace sea navegable para los buscadores. Fichero: Fichero incluido junto al texto. Secciones: Subsecciones donde se pueden incluir los elementos anteriormente descritos (Texto simple y Bloque de texto). Modo de visualización: formas de acceder a las distintas secciones: Vista clásica: Cada una de las secciones unas debajo de otras. Vista Accordion: Cada una de las secciones en formato accordion que se muestran con su texto de navegación y haciendo click se despliega su contenido. Vista pestañas: Cada una de las secciones en formato pestañas que muestran su texto de navegación en la pestaña y haciendo click se carga su contenido. Guía Saga Suite Contenido Secciones - 4 -

5 Vista menú: Un menú que muestra activa la primera sección y que al hacer click sobre otra entrada de menú carga su sección correspondiente. Vista menú de índice: Igual que el anterior pero no carga el contenido al hacer click sino que la página hace scroll hasta la sección correspondiente (como un ancla). Id del menú de secciones: Atributo id que se incluye en el HTML de la sección. Secciones: apartado donde daremos de alta cada una de las secciones. En la segunda pestaña encontramos los siguientes campos: Palabras clave y Resumen: información no necesaria, pero que puede ser necesaria en algunos casos muy concretos. Fecha: la fecha del recurso (por defecto la fecha de creación del mismo). CssClass: Por si se quiere añadir una clase css específica al recurso y poder así darle estilos específicos. Mostrar pie: si se marca esta casilla se muestran los datos de: o Autor y fuente. Disponibilidad: podemos definir una fecha para que el recurso se publique (sea visible online) y/o para que se deshabilite (deje de estar visible en la web) automáticamente. En la tercera pestaña del recurso encontramos el campo de Category. Con este campo podremos asignar categorías al recurso de modo que después podamos gestionar los recursos por grupos en función de la categoría, por ejemplo, en listados. Guía Saga Suite Contenido Secciones - 5 -

6 Tipos de bloque de contenido Vamos a ver en detalle cada uno de los tipo de bloque de contenido disponibles ya tratados anteriormente: Texto simple, Bloque de texto y Secciones. Texto Simple Este sería el formulario de edición: Este sería el texto simple en la página: Guía Saga Suite Contenido Secciones - 6 -

7 Bloque de texto Este sería el formulario de edición: Guía Saga Suite Contenido Secciones - 7 -

8 Este sería el bloque de texto en la página: Guía Saga Suite Contenido Secciones - 8 -

9 Secciones Este tipo de contenido lo que hace es agrupar secciones. Cada una de estas secciones puede incluir tantos bloques de contenido como se desee. Este Bloque de contenido consta de los mismos campos que el tipo de bloque de texto visto anteriormente. Configuración general de secciones Modo de visualización: Aquí definimos el modo de visualización de nuestras secciones: vista clásica, pestañas, accordion etc. Definimos la forma en que se van a mostrar y como accederemos a cada una de ellas. Posición del menú de secciones: Sólo tiene aplicación para los modos de visualización de Pestañas, menú y menú de índice. Id del menú de secciones: Sólo tiene aplicación para los modos de visualización de Pestañas, menú y menú de índice. Título del menú de secciones: Sólo tiene aplicación para los modos de visualización de menú y menú de índice. Vamos a ver ejemplos de los diferentes modos de visualización disponibles: Guía Saga Suite Contenido Secciones - 9 -

10 Vista clásica Se muestran todas las secciones al mismo tiempo en bloque unas debajo de otras. No hay gestión de navegación a través de las mismas ni mecanismos de despliegue del contenido: Guía Saga Suite Contenido Secciones

11 Vista por pestañas Se accede a las secciones a través de un sistema de pestañas. La primera sección se muestra como activa al cargar la página. Una vez que se vaya haciendo click sobre cada pestaña se va cargando la sección correspondiente: Vista de menú Se accede a las secciones a través de un menú. La primera sección se muestra como activa al cargar la página. Una vez que se vaya haciendo click sobre cada entrada de menú se va cargando la sección correspondiente: Guía Saga Suite Contenido Secciones

12 Vista de menú de índice Se accede a las secciones a través de un menú de índice. Se muestran todas las secciones en bloque unas debajo de otras y haciendo click en cada entrada del menú se hace scroll en la página hasta el bloque de la sección correspondiente a modo de ancla. En cada sección hay un enlace para volver directamente al menú de índice y no tener que volver a hacer scroll hacia arriba: Vista accordion (acordeón) Se muestran los textos de navegación de cada sección en los encabezados de cada bloque del acordeón. Si hacemos click sobre alguno se despliega el contenido de la sección, cerrándose al mismo Guía Saga Suite Contenido Secciones

13 tiempo otra sección que estuviera abierta antes. Por defecto, al cargar la página se muestra la primera sección desplegada: Guía Saga Suite Contenido Secciones