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 dos 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
Representación gráfica del estilo parallo con cinco elementos.
Importante: Se recomienda que todas la imágenes de un mosaico tengan las mismas dimensiones.
Dimensiones recomendables de las imágenes para los elementos de un mosaico Parallo:
350 pixeles de alto por 700 px de ancho (el ancho puede ser superior).
Cada elemento del estilo parallo enlaza a una nueva página.
Bibendum
Representación gráfica del estilo con cinco elementos.
Importante: Se recomienda que todas la imágenes de un mosaico tengan las mismas dimensiones.
Dimensiones recomendables de las imágenes para los elementos de un mosaico Bibendum:
La altura en pixeles debe ser la misma.
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 de las imagenes para los elementos de un mosaico Editorial:
La altura en pixeles debe ser la misma.
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.
Dimensiones recomendables de las imágenes para los elementos de un mosaico Editorial:
La altura en pixeles debe ser la misma.
450 pixeles de ancho y 250 pixeles de alto.
Cada elemento del estilo Editorial enlaza a una nueva página.
Importante: Los elementos de este mosaico pueden contener un texto al lado derecho y, posteriormente, se mostrará la 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:
La altura en pixeles debe ser la misma.
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:
La altura en pixeles debe ser la misma.
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:
La altura en pixeles debe ser la misma.
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").
Viñeta
Dimensiones recomendables para las imágenes:
La altura en pixeles debe ser la misma.
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: 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á.
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.
Viñeta nuevo texto
Dimensiones recomendables para las imágenes:
La altura en pixeles debe ser la misma.
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: 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á.
Viñeta simétrica
Dimensiones recomendables para las imágenes:
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: 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.
Viñeta simétrica invertida
Dimensiones recomendables para las imágenes:
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: 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.
Carrusel pantalla completa
Dimensiones recomendables para las imágenes:
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.
Carrusel pantalla completa vertical
Dimensiones recomendables para las imágenes:
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.
Carrusel ancho
Dimensiones recomendables para las imágenes:
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.
Parallo dark
Dimensiones recomendables para las imágenes:
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:
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:
