Guía Saga Suite Contenido Seccionesexprimiendoopencms.com/export/sites/sagasuite/... · en el...
Transcript of Guía Saga Suite Contenido Seccionesexprimiendoopencms.com/export/sites/sagasuite/... · en el...
Guía Saga Suite Contenido Secciones
Guía Saga Suite Contenido Secciones - 1 -
Guía Saga Suite Contenido Secciones
Tabla de contenido Acceso a la Edición del recurso ........................................................................................................... - 2 -
Cómo editar el recurso ........................................................................................................................ - 3 -
Tipos de bloque de contenido ............................................................................................................. - 6 -
Texto Simple .................................................................................................................................... - 6 -
Bloque de texto ............................................................................................................................... - 7 -
Secciones ......................................................................................................................................... - 9 -
Configuración general de secciones ............................................................................................ - 9 -
Vista clásica ............................................................................................................................... - 10 -
Vista por pestañas ..................................................................................................................... - 11 -
Vista de menú ............................................................................................................................ - 11 -
Vista de menú de índice ............................................................................................................ - 12 -
Vista accordion (acordeón) ....................................................................................................... - 12 -
Guía Saga Suite Contenido Secciones
Guía Saga Suite Contenido Secciones - 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
Guía Saga Suite Contenido Secciones - 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.
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.
o 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
Guía Saga Suite Contenido Secciones - 4 -
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.
o 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
Guía Saga Suite Contenido Secciones - 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
Guía Saga Suite Contenido Secciones - 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
Guía Saga Suite Contenido Secciones - 7 -
Bloque de texto
Este sería el formulario de edición:
Guía Saga Suite Contenido Secciones
Guía Saga Suite Contenido Secciones - 8 -
Este sería el bloque de texto en la página:
Guía Saga Suite Contenido Secciones
Guía Saga Suite Contenido Secciones - 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
Guía Saga Suite Contenido Secciones - 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
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
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
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: