Introducción
Uso de Sitely
Elementos
Cómo
Este es un bloque de diseño especial pensado para añadir fácilmente contenido de vídeo e imagen a tu página en una estructura tipo cuadrícula..
Empieza añadiendo el elemento a tu lienzo de Sitely y agregando el contenido de imágenes o vídeos. Esto se hace desde el panel de estilos mientras el elemento de Cuadrícula de Imágenes/Vídeos está seleccionado en el lienzo. La opción se ve así:
Aunque la cuadrícula, cuando se coloca por primera vez en el lienzo, solo muestra una única fila con tres marcadores de posición, crecerá para acomodar tanto contenido como añadas. Por ejemplo, si agregas seis imágenes, verás que la cuadrícula se expande a tres columnas y dos filas; si agregas doce imágenes tu cuadrícula crecerá a tres columnas por cuatro filas. Para añadir contenido desde tu disco, haz clic en el botón Añadir imágenes/vídeos. Para añadir contenido alojado en YouTube o Vimeo, haz clic en los botones correspondientes. También tienes la opción de añadir páginas PDF; hablaremos de esa opción en un momento. Tras añadir algo de contenido, la cuadrícula se verá así:
Ahora puedes ajustar celdas individuales de la cuadrícula para crear un aspecto más estético. Selecciona cada celda de la cuadrícula a su vez, ya sea directamente en el lienzo o desde el panel de capas. Asegúrate de seleccionar la celda de la cuadrícula y no la imagen en sí. La diferencia se puede ver a continuación. Los tiradores blancos del perímetro indican que se ha seleccionado la imagen. Las 'X' grises tenues indican que se ha seleccionado la celda.
Editar la imagen afectará a la imagen en la celda individual; editar la celda generalmente afecta a todas las celdas, ya que sus ajustes de fondo son comunes. Es posible editar el fondo de una celda individual mediante la opción Editar fondos -> Celda seleccionada, pero no es la opción predeterminada.
Con la celda seleccionada, ve al panel de estilos y establece el número de filas y/o columnas que te gustaría que esa celda abarcara. Así es como se ve la opción:
En el ejemplo anterior, la primera celda se ha configurado para abarcar 2 columnas y 1 fila. Continúa recorriendo cada celda hasta que tu cuadrícula esté estilizada a tu gusto. En nuestra cuadrícula de ejemplo de abajo hemos cambiado la cuadrícula y la hemos estilizado con colores de fondo y bordes para que se vea así; hemos mostrado el abarcado de celdas para cada celda de la cuadrícula para que puedas entender mejor cómo se creó.
Además de la cuadrícula simple, un elemento de cuadrícula de imágenes/vídeos puede disponerse en un deslizador horizontal, o en los modos flujo y carrusel. Los modos de deslizador colapsan todas las celdas de la cuadrícula en una sola fila horizontal. Los modos de deslizador flujo y carrusel muestran las celdas con dos efectos de perspectiva 3D diferentes, mientras que el modo galería las muestra sin perspectiva aplicada.
En modo deslizador, la cuadrícula tiene una serie de opciones específicas:
De forma predeterminada, al hacer clic en cualquier imagen dentro de la cuadrícula, esta se abrirá en un lightbox. Normalmente, la imagen hará zoom sobre un fondo atenuado que se puede cerrar haciendo clic en cualquier parte del fondo o haciendo clic en un botón de cierre en la imagen (igual que las imágenes de esta página). Sin embargo, con la Cuadrícula de Imágenes/Vídeos, también tienes la opción de crear una presentación de diapositivas a partir del contenido de tu cuadrícula. Esto esencialmente significa que al hacer clic en cualquier contenido dentro de la cuadrícula se abrirá un lightbox como de costumbre, pero con la facilidad añadida de poder desplazarse por todo el contenido de la cuadrícula mientras el lightbox está abierto. Así es como se ve en una página web:
¿Ves esas flechas de desplazamiento izquierda y derecha? Se añaden ajustando las opciones de presentación de diapositivas en el panel de estilos. Con la Cuadrícula de Imágenes/Vídeos seleccionada en el lienzo, asegúrate de marcar las opciones pertinentes para que esta función funcione. El panel de estilos revela muchas opciones para dar estilo a tu cuadrícula, a las celdas y al lightbox, así que asegúrate de revisarlas todas.
Gracias a la capacidad de Sitely para importar documentos PDF en el bloque de diseño de Imágenes/Vídeos, ahora puedes hacer cosas que antes eran bastante difíciles de lograr. Por ejemplo, puedes importar un folleto de varias páginas o una copia en PDF de una presentación de Keynote. Al hacerlo, se rellenará tu cuadrícula con cada página de tu documento (1 página por celda de la cuadrícula). Claramente, esto puede crear muchas celdas que no necesariamente quieres que los visitantes de tu sitio vean. En su lugar, puede que quieras que solo vean la primera página y que luego abran la presentación de diapositivas para ver las demás páginas. Esto es fácil de hacer en Sitely. A continuación se muestra un ejemplo de una presentación de 20 páginas exportada desde Keynote como un archivo PDF de varias páginas. Solo queremos que los usuarios vean la diapositiva de apertura y que vean el resto cuando abran la presentación. Para ello, cambiamos los tamaños y la disposición de la cuadrícula. Así es como se ve nuestra cuadrícula tras aplicar un poco de estilo.
Lo anterior se logró ajustando las celdas para que tuvieran 50 px de ancho, 50 px de alto y un espaciado vertical y horizontal de 10 px, todo ello configurado en el panel de estilos.
Se seleccionó la primera celda y se hizo que abarcara 20 columnas y 9 filas. Esto crea la ilusión de una imagen principal con un conjunto de miniaturas debajo, como se ilustra arriba. Aunque las miniaturas pueden permanecer a la vista, puede que quieras ocultarlas para que solo sea visible la imagen principal. Las personas que vean las miniaturas pueden suponer que la imagen principal cambiará al hacer clic en una miniatura, lo cual puede no ser la impresión que deseas dar. Para ocultar las miniaturas, selecciona cada celda de miniatura a su vez y configúrala para que NO se muestre en este dispositivo en el panel ORGANIZAR. Ahora, cuando se hace clic en la imagen principal, comienza la presentación de diapositivas, lo que permite a los usuarios avanzar y retroceder por la presentación. Pruébalo en el ejemplo en vivo de abajo.
Haz clic para iniciar la presentación
La razón por la que reducimos el tamaño de las miniaturas es simplemente para mantener el bloque de diseño a una altura que nos permita añadir contenido debajo de la presentación sin tener que superponer ese contenido dentro del propio bloque. En su lugar, la presentación permanece dentro de su propio bloque de diseño, que se puede mover por la página sin interferir con los elementos circundantes. Además, si las miniaturas no se redujeran de tamaño, el bloque de diseño podría crecer hasta una altura mucho mayor que el contenido de tu página, haciendo que aparezca mucho espacio en blanco en la parte inferior de tu sitio web.
Esta técnica también se puede utilizar para mostrar un folleto PDF de varias páginas. Está claro que no quieres que los usuarios vean toda una cuadrícula de páginas individuales del folleto, así que, al hacer que las páginas adicionales desaparezcan efectivamente, acabarás con solo la portada del folleto, en la que los usuarios pueden hacer clic para leer la publicación completa. Del mismo modo, puede que tengas una gran cantidad de vídeos que quieres mostrar al mundo, pero no necesariamente quieres mostrar como una gran cuadrícula de vídeos individuales en la página. En ese caso de uso, normalmente crearías una gran imagen de póster del vídeo invitando a los usuarios a ver tu galería de vídeos. Esa imagen se configuraría como tu primera diapositiva grande, abarcando un mayor número de columnas de la cuadrícula. Esto mantiene tu página libre de desorden y, aun así, da a los usuarios acceso a toda una biblioteca de contenido en vídeo. Si quieres permitir la selección individual de vídeos y/o imágenes, puedes crear miniaturas más grandes y mantenerlas visibles en la página. Estas aparecerán en una o más filas bajo la imagen más grande en la página.
Los tamaños de las celdas de la cuadrícula se establecen por dispositivo. Por tanto, lo más probable es que tengas que ajustar los tamaños para cada dispositivo para el que diseñes. También conviene señalar que, en los smartphones, no habrá flechas a cada lado de la presentación de diapositivas. En su lugar, los usuarios usarán el gesto común de deslizar para navegar por tu presentación. Hay poca necesidad de diseñar específicamente para un smartphone en orientación horizontal. Al girar el teléfono, la presentación se ampliará automáticamente para ajustarse a la orientación apaisada.
Por favor, informa de cualquier deficiencia en esta documentación y la solucionaremos lo antes posible.
Actualizado para Sitely 6
Este sitio web utiliza cookies.
Consulta nuestra política de privacidad para más detalles.
