Guía Saga Suite Contenido Seccionesexprimiendoopencms.com/export/sites/sagasuite/... · en el extremo superior derecho del recurso. Si pasamos el ratón por dicha diana veremos la

Guía Saga Suite Contenido Secciones

Guía Saga Suite Contenido Secciones - 1 -


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 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:



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.



Ancho: Ancho del bloque en porcentaje con respecto al bloque


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.




Vídeo Embebido:

Código embebido: se puede obtener de Youtube e insertar como

<iframe>.




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.



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.



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:



Bloque de texto

Este sería el formulario de edición:



Este sería el bloque de texto en la página:



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:



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:



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:



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



tiempo otra sección que estuviera abierta antes. Por defecto, al cargar la página se muestra la

primera sección desplegada:

Documents

Guía Saga Suite Contenido Seccionesexprimiendoopencms.com/export/sites/sagasuite/... · en el extremo superior derecho del recurso. Si pasamos el ratón por dicha diana veremos la