Introducción
Uso de Sitely
Elementos
Cómo
Hay un tutorial en video disponible para este tema Haga clic aquí para verlo
Agregar video a su página web es muy sencillo, ya que el elemento Video se encarga de todo el trabajo pesado. Solo agregue el elemento al lienzo o arrastre un archivo de video MP4/mov directamente al lienzo. Cuando se coloca el elemento, se verá así: este es el marcador de posición del video.
Si arrastró un video al lienzo, se verá como un reproductor de video, completo con su imagen de póster. Todo lo que tiene que hacer en ese punto es dar estilo a la interfaz del reproductor y posicionarlo/redimensionarlo para que se adapte a su página web.
Con la opción de marcador de posición, tendrá que agregar un archivo de origen al marcador para que aparezca como un reproductor de video. Esto se hace desde el familiar panel de estilo de Sitely.
Tiene varias fuentes de video entre las que elegir. Todas se presentan mediante las opciones del menú desplegable en el panel de estilo. Las opciones de YouTube y Vimeo le permiten incrustar video desde esas populares plataformas de streaming. Todo lo que necesita hacer es ingresar la URL o el ID del video que desea mostrar. Si elige la opción ‘Desde el disco’, podrá seleccionar un archivo de video de su unidad de disco. Al seleccionar la opción ‘Desde una ubicación de red’, podrá ingresar la URL de un archivo de video alojado en un servidor de terceros.
Luego debe decidir dónde desea almacenar su archivo de video. Con las opciones de streaming, no tiene que tomar esta decisión: el video permanecerá en el servidor y se transmitirá a su página web. Sin embargo, si está agregando un video desde su disco local, tiene la opción de dejar el video en su ubicación actual en su unidad de disco o incrustarlo en el archivo del proyecto de Sitely. Podría querer incrustarlo en el proyecto si planea seguir trabajando en su página web en otra computadora en el futuro, o si existe la posibilidad de que su archivo de video se mueva a una ubicación de disco diferente. La incrustación garantizará que el archivo siempre sea accesible para el proyecto, pero añadirá algo de peso al archivo de su proyecto de Sitely.
La opción Imagen de póster le permite seleccionar una escena de su video para que actúe como imagen de póster. Si prefiere usar una imagen totalmente personalizada, tiene la opción de agregar una más abajo en el panel de estilo.
La sección Opciones del panel de estilo es donde decide cómo se reproduce su video y cómo debería verse el reproductor para los visitantes de su sitio.
La opción ‘Iniciar automáticamente’ hará que su video comience a reproducirse tan pronto como se cargue en la página. Sin embargo, si configura esta opción, tenga en cuenta que el video se reproducirá sin audio (se silenciará automáticamente). La opción Bucle hará que el video no deje de reproducirse: cuando llegue al final, reanudará desde el principio. La opción ‘Reproducir mientras se desplaza’ reproducirá el video a medida que el usuario desplaza la página; es una especie de ‘scrubber’ que avanza el video conforme se desplaza la página.
Seleccionar la casilla ‘Controles del reproductor’ le brinda la máxima flexibilidad sobre cómo estilizar su reproductor de video. La opción ‘Sobre el video’ crea un reproductor familiar con todos los controles claramente visibles dentro de la interfaz. Puede seleccionar qué elementos de la interfaz de control serán visibles para los usuarios, así como elegir un color de acento. La otra opción es usar ‘Integrado del navegador’. Esto deja que el navegador del usuario dé estilo a la interfaz del video. En esta sección también puede agregar una imagen de póster personalizada si desea usar una.
A continuación decide cómo desea incrustar su video. Las opciones son:
Inserción directa: incrusta el video en su tamaño actual directamente en la página web. El video puede reproducirse en la página simplemente activando los controles.
Imagen fija + Inserción: crea una imagen fija en la página, cargando y activando el video solo al hacer clic. Esto puede mejorar el tiempo de carga inicial de la página, pero el inicio del video podría retrasarse.
Imagen fija + Inserción en lightbox: similar a Imagen fija + Inserción, excepto que el reproductor se abrirá en un lightbox cuando se haga clic en la imagen fija.
En la pestaña Organizar, a la derecha de la interfaz, hay otra opción que le permite usar video de una manera más creativa. Por ejemplo, puede configurar un video para que tenga Ancho de página completo. Esta opción hace que el video abarque todo el ancho de la ventana del navegador. Es ideal para crear encabezados de video y secciones hero para sus páginas.
Así es como se ve en la página un encabezado de video a ancho completo. Esencialmente, el video adopta el aspecto de un elemento de fondo dentro de una caja ancha. Cuando se usa de esta manera, el video no tendrá controles: está diseñado para reproducirse automáticamente y en bucle y, por ello, se silenciará si contiene una pista de audio. El video abarcará todo el ancho del navegador, mientras que su altura estará determinada por el tamaño que dé a la caja en el lienzo. El video nunca se distorsionará; en su lugar, se recortará por arriba y por abajo para mostrar solo la parte visible de la caja.
En algunas situaciones, puede querer agregar un video como elemento de fondo de toda una página. Sitely lo logra mediante la pestaña Página en el lado derecho de la interfaz. Solo desplácese hasta la sección de fondo de la pestaña Página y elija video como contenido de fondo: tendrá las mismas opciones para elegir un archivo de origen.
Mantenga los tamaños de archivo pequeños: elija videos adecuados para el bucle y elimine cualquier pista de audio. Idealmente, los videos de fondo deberían pesar menos de 10 MB.
Puede que no sea recomendable usar servicios de streaming para entregar contenido de fondo, especialmente si el servicio tiende a incluir publicidad junto con su video. Para la mayoría de los videos de fondo, es mejor alojar su propio video en su propio servidor: use las opciones ‘Desde el disco’ o ‘Ubicación de red’.
Cuando agrega un video como elemento de fondo, el video se coloca en la página a ancho completo del navegador; su altura se establece en proporción a la relación de aspecto del video. Por lo tanto, el tamaño real del video en la página variará según el ancho de la ventana del navegador del visitante. A medida que se desplaza la página, el video también se desplazará, como otros elementos.
Si desea que su video permanezca en su lugar a ancho y alto completos del navegador, active la opción Posición fija. Esto cubrirá la ventana disponible del navegador con el contenido del video y lo fijará en su posición. El contenido de la página se desplazará sobre el video a medida que se haga scroll.
A veces puede ser necesario incorporar pequeños elementos animados en un sitio web, especialmente cuando la variedad de opciones de animación de Sitely no cubre la necesidad. Esto es particularmente cierto para elementos como anuncios animados compactos o encabezados impactantes, comunes en internet y redes sociales. Aunque Sitely no está diseñado como una aplicación de edición de video, sí ofrece un elemento de video versátil que integra el video perfectamente en las páginas web.
A diferencia de otros creadores web, Sitely ofrece libertad respecto a las relaciones de aspecto estándar de video al incrustar un reproductor en su página. El elemento de video se adapta sin esfuerzo a la relación de aspecto del video que contiene. Por lo tanto, si puede crear elementos en video, Sitely sobresale al manejarlos.
Considere el siguiente ejemplo: imagine un encabezado con una palabra que cambia dinámicamente en el medio. Para lograr este efecto, usamos una aplicación de edición de video, como la gratuita y altamente recomendada CapCut. Básicamente, configuramos un lienzo lo suficientemente amplio como para acomodar el tamaño de texto previsto para nuestro titular. Después de agregar y dar estilo al texto, junto con transiciones animadas, generamos un pequeño video MP4. Luego comprimimos este video con HandBrake para optimizarlo para la web.
En Sitely, construimos el titular usando texto estándar e integramos sin problemas el pequeño video. El resultado final es visualmente atractivo y dinámico.
Creamos grandes
Sitios web con SitelySitely
Al combinar elementos estándar de Sitely como texto, cajas, iconos y video, puede añadir fácilmente un movimiento extra a su página. Aquí hay otro ejemplo.
Échale
un
vistazo
¿Y qué hay de esos videos de historias que ve en Instagram, etc.? También pueden agregarse a su página web para crear una experiencia más atractiva para los visitantes de su sitio
En todos los ejemplos anteriores, los videos no tienen pista de sonido, por lo que se configuraron para reproducirse automáticamente y en bucle. Si piensa usar clips de video de esta manera, aquí van algunas reglas generales. Mantenga los tamaños de archivo pequeños. Use la opción ‘Desde el disco’: claramente este tipo de clips no es el más adecuado para entregarse mediante sitios de intercambio de videos. Por supuesto, también pueden configurarse para entregarse desde una ubicación de red si aloja sus videos en su servidor web. Por último, no se exceda con esta técnica: el exceso puede molestar a los visitantes de su sitio, así que asegúrese de tener un propósito al añadir esta capa extra de animación.
Las esquinas redondeadas en los videos pueden hacer que su contenido de video se vea como otros elementos de la página, creando un aspecto más unificado en sus páginas. Aquí hay algunos ejemplos de contenido de video con redondeo de esquinas aplicado. La opción se encuentra en el panel de estilo cuando su video está seleccionado en el lienzo.
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.
