Mosaicos anidados: Estilos y propiedades generales

Mosaicos anidados

Estilos de sección y sus propiedades generales

El tipo de sección de Mosaico anidado cuenta con varios estilos predefinidos que permiten la construcción de secciones con una amplia variedad.

El concepto de mosaico en esta plataforma, sobre todo en el apartado de las secciones, se refiere a que está compuesto por elementos.  En la siguiente imagen se pueden observar tres elementos (no contenido único).

Elemento: Los elementos se enlistan en la parte derecha, cada elemento puede ser editado para incorporar información a través de la herramienta del editor de textos.

Imagen de portada: Cada elemento debe contener una imagen. A ésta se le conoce como imagen de portada y el tamaño de cada imagen depende del estilo de mosaico seleccionado.

Importante: La mayoría de los elementos se materializan en un enlace a una nueva página. 

 

Estilos de las secciones del Mosaico

A continuación se enlistan los estilos disponibles y, posteriormente, se describirán las propiedades generales.

Parallo

Importante: Se recomienda que todas la imágenes de un mosaico tengan las mismas dimensiones.

Dimensiones recomendables para las imágenes:

a) 350 pixeles de alto por 700 pixeles de ancho (el ancho puede ser superior).

Cada elemento del estilo Parallo enlaza a una nueva página.

 

Bibendum

Importante: Se recomienda que todas la imágenes de un mosaico tengan las mismas dimensiones.

Dimensiones recomendables para las imágenes:

a) La altura en pixeles debe ser la misma.

b) 500 pixeles de ancho y menos de 600 pixeles de alto.

Cada elemento del estilo Bibendum enlaza a una nueva página.

 

Editorial

Importante: Se recomienda que todas la imágenes de un mosaico tengan las mismas dimensiones.

Dimensiones recomendables para las imágenes:

a) La altura en pixeles debe ser la misma.

b) 500 pixeles de ancho y menos de 600 pixeles de alto.

Cada elemento del estilo Editorial enlaza a una nueva página.

 

Blog

Importante: Se recomienda que todas la imágenes de un mosaico tengan las mismas dimensiones. Los elementos de este mosaico pueden contener un texto al lado derecho y, posteriormente, se mostrará la nueva página.

Dimensiones recomendables para las imágenes:

a) La altura en pixeles debe ser la misma.

b) 450 pixeles de ancho y  250 pixeles de alto.

Cada elemento del estilo Editorial enlaza a una nueva página.

Nota: Este elemento permite mostrar una fracción de texto del lado derecho, pero también es posible asignar un enlace a un nuevo sitio. Tanto el enlace como el texto están disponibles. Si el texto era una página con varios párrafos y quizás imágenes, solo se mostrará una fracción de texto y, como el campo "Enlace" está activado, no entrará a la página completa.

 

Carrusel

Dimensiones recomendables para las imágenes: 

a) La altura en pixeles debe ser la misma.

b) 1600 pixeles de ancho y menos de 520 pixeles de alto.

Cada elemento del estilo Carrusel enlaza a una nueva página.

Importante: Cada elemento del mosaico carrusel puede reproducir videos de YouTube, solo hay que asignar en el campo de enlace el siguiente parámetro:

https://www.youtube.com/watch?v=

más la clave copiada de un video de YouTube, por ejemplo: 1vpdmuhG-8M

Liga completa:

https://www.youtube.com/watch?v=1vpdmuhG-8M

Nota: Este carrusel no incluye ningún texto  sobre la imagen de portada del elemento.

 

Acordeón simple

Dimensiones recomendables para las imágenes: 

a) La altura en pixeles debe ser la misma.

b) 600 pixeles de ancho y menos de 420 pixeles de alto.

Cada elemento del estilo acordeón simple enlaza a una nueva página.

Nota: Los títulos de los elementos deben ser muy cortos.

 

Carrusel énfasis

Dimensiones recomendables para las imágenes:

a) La altura en pixeles debe ser la misma.

b) 1200 pixeles de ancho y menos de 800 pixeles de alto.

Importante: El texto ingresado en el CKEDITOR es un elemento central en este estilo, el texto debe ser sintético, se recomienda una idea fuerza. 

Si el texto es demasiado largo, el botón de "Explorar" se oculta. 

Cada elemento se puede  vincular a una liga ya sea interna o externa, si el campo "Enlace" contiene una URL (así aparece el botón de "Explorar").

Ver Ajustes de estilos extras

 

Viñeta

Dimensiones recomendables para las imágenes: 

a) La altura en pixeles debe ser la misma.

b) 620 pixeles de ancho y menos de 420 pixeles de alto.

El vínculo a un link  se hace mediante la asignación de una URL en el campo "Enlace". NO se abrirá una página para mostrar el texto del campo "Entrada".

Nota 1: Los textos en el CKEDITOR DEBEN SER MUY CORTOS (10 A 12 PALABRAS).

Nota 2: Si hay demasiado texto en el CKEDITOR, el alto del elemento se ajustará al texto y seguramente la estética del elemento disminuirá.

Ver Ajustes de estilos extras

 

Viñeta invertida

Las propiedades de este estilo son similares al de Viñeta, la diferencia es que el primer elemento aparece del lado derecho.

Ver Ajustes de estilos extras

 

Viñeta nuevo texto

Dimensiones recomendables para las imágenes: 

a) La altura en pixeles debe ser la misma.

b) 620 pixeles de ancho y menos de 420 pixeles de alto.

El vínculo a un link se hace mediante la asignación de una URL en el campo "Enlace". NO se abrirá una página para mostrar el texto del campo "Entrada".

Nota 1: Los textos en el CKEDITOR PUEDEN SER MÁS EXTENSOS respecto al estilo anterior, como se observa en la imagen.

Importante: El etilo de texto debe de ser párrafo.

Nota 2: Si hay más texto que el alto de la imagen,  el alto del elemento se ajustará al texto y seguramente la estética del elemento disminuirá.

Ver Ajustes de estilos extras

 

Viñeta simétrica

Dimensiones recomendables para las imágenes: 

a) 800 pixeles de ancho y menos de 600 pixeles de alto.

El vinculo a un link se hace mediante la asignación de una URL en el campo "Enlace". NO se abrirá una página para mostrar el texto del campo "Entrada".

Nota 1: Los textos del CKEDITOR aparecen a un lado de la imagen y puede ser un texto más amplio que en viñeta (un párrafo o quizás dos párrafos cortos) 

Nota 2: Se recomiendan imagenes con la misma altura.

Ver Ajustes de estilos extras

 

Viñeta simétrica invertida

Dimensiones recomendables para las imágenes: 

a) 800 pixeles de ancho y menos de 600 pixeles de alto.

El vínculo a un link  se hace mediante la asignación de una URL en el campo "Enlace". NO se abrirá una página para mostrar el texto del campo "Entrada".

Nota 1: Los textos del CKEDITOR aparecen a un lado de la imagen y puede ser más amplios que en viñeta (un o dos párrafo cortos). 

Nota 2:  Se recomiendan imágenes con la misma altura.

Ver Ajustes de estilos extras

 

Carrusel pantalla completa

Dimensiones recomendables para las imágenes: 

a) 1920 pixeles de ancho y menos de 1080 pixeles de alto.

El vínculo a un link se hace mediante la asignación de una URL en el campo "Enlace". NO se abrirá una página para mostrar el texto del campo "Entrada".

Nota: Se recomienda que los textos en el CKEDITOR contengan un mensaje sintético.

Ver Ajustes de estilos extras

 

Carrusel pantalla completa vertical

Dimensiones recomendables para las imágenes: 

a) 1920 pixeles de ancho y menos de 1080 pixeles de alto.

El vínculo a un link se hace mediante la asignación de una URL en el campo "Enlace". NO se abrirá una página para mostrar el texto del campo "Entrada".

Nota: Se recomienda que los textos en el CKEDITOR contengan un mensaje sintético.

Ver Ajustes de estilos extras

 

Carrusel ancho

Dimensiones recomendables para las imágenes: 

a) 1500 pixeles de ancho y 750 pixeles de alto.

El vínculo a un link se hace mediante la asignación de una URL en el campo "Enlace". NO se abrirá una página para mostrar el texto del campo "Entrada".

Nota: Se recomienda que los textos en el CKEDITOR contengan un mensaje sintético.

Ver Ajustes de estilos extras

 

Parallo dark

Dimensiones recomendables para las imágenes: 

a) 450 pixeles de ancho y menos de 300 pixeles de alto.

El vínculo a un link se hace mediante la asignación de una URL en el campo "Enlace". 

Nota: Se recomienda que los textos en el CKEDITOR contengan un mensaje sintético, este texto aparece en la parte de abajo de la imagen del elemento.

 

Parallo color

Dimensiones recomendables para las imágenes: 

a) 450 pixeles de ancho y menos de 300 pixeles de alto.

El vínculo a un link se hace mediante la asignación de una URL en el campo "Enlace". 

Nota: Se recomienda que los textos en el CKEDITOR contengan un mensaje sintético, este texto aparece en la parte de abajo de la imagen del elemento.

 

Bloque viñeta solo texto

Esta sección y la siguiente no utilizan las imágenes de la carátula de los elementos, por lo tanto NO hay hiperlinks.

Estas secciones muestran tal cual lo que se inserte en el campo de "Entrada" (CKEDITOR).

Otro de los objetivos de esta seccuión es el de ocupar un área más amplia que la que ocupa la sección de contenido único.

Los contenidos del CKEDITOR pueden ser tablas con textos e imágenes.

Nota: El estilo de texto debe ser párrafo.

 

Bloque viñeta solo texto énfasis

Esta sección y la siguiente no utilizan las imágenes de la carátula de los elementos, por lo tanto NO hay hiperlinks.

Estas secciones muestran tal cual lo que se inserte en el campo de "Entrada" (CKEDITOR) con un tañamo de TEXTO más grande que el estilo de párrafo.

Otro de los objetivos de esta sección es el de ocupar un área más amplia que la que ocupa la sección de contenido único.

Los contenidos del CKEDITOR pueden ser tablas con textos e imágenes.

Nota: El estilo de texto debe ser el de dafault (style).

Como se mencionó anteriormente, este estilo de mosaico puede ser utilizado para incluir contenidos de texto e imágenes ocupando todo lo ancho de la pantalla. La siguiente imagen muestra un ejemplo de lo ya mencionado.