Dentro de este tutorial vamos a ver cómo crear un slider y añadirlo a un sitio web construido sobre Framework360. Un slider é un contenido que generalmente se añade en la primera parte de la página de inicio del sitio web. El slider é compuesto por una imagen, un carrusel de imágenes o un video, y encima del contenido multimedia hay un título y una descripción.
Paso 1: Creamos nuestro slider
Primero vamos a crear nuestro slider haciendo clic en la subopción de la barra lateral de Framework360 “Slider” siguiendo los siguientes pasos:
Sitio web > Slider
En este punto se abrirá la pantalla en la que estarán presentes todos los sliders que hemos realizado. Para crear un nuevo slider no deberemos hacer otra cosa que clicar en el botón verde en la parte superior derecha “Añadir”.
Una vez dentro de la pantalla de creación del slider, vamos a añadir el título de nuestro slider y configurar las diversas opciones relacionadas con el slider presentes en las secciones ubicadas debajo de la sección dedicada al título.
Ahora vamos a analizar las distintas secciones.
SECCIÓN “OPCIONES”
Dentro de la sección “Opciones” definimos las configuraciones generales de nuestro slider. En concreto, en la opción “Altura del slider” establecemos la altura que deberá tener nuestro slider. En la opción “Autoplay”, si el slider está compuesto por un carrusel de imágenes, definimos si estas deben cambiarse automáticamente por el sistema después de un tiempo elegido por nosotros; al no activar el autoplay, será el visitante quien tenga que desplazar las imágenes insertadas en el slider. En la opción “ Loop” podemos decidir si reiniciar el carrusel de imágenes una vez que se hayan visualizado todas o si dejar la visualización de la última imagen. En la sección “Flechas” podemos decidir si añadir flechas a la derecha e izquierda del slider para que el visitante pueda cambiar manualmente las imágenes. Finalmente, al hacer clic en el botón “Orden aleatorio” podemos mostrar las imágenes que hemos insertado en un orden aleatorio; de lo contrario, la visualización seguirá el orden de inserción.
SECCIÓN “FONDO”
Continuando a desplazarse por la página de creación del slider, en la sección “Fondo” insertamos la imagen que compondrá nuestro slider. En esta sección, en la opción “Tamaño”, definimos el tamaño que deberá tener la imagen cargada dentro del slider; generalmente se utiliza el modo cover, que permite cubrir en cualquier tipo de pantalla el’ancho completo de la pantalla con nuestra imagen. En la opción “Repetir” podemos decidir si la imagen debe repetirse más veces hasta cubrir toda la sección; generalmente, al poner el modo cover en la opción “Tamaño”, aquí insertamos el modo no-repeat. En la opción “Posición” podemos decidir la posición de la diapositiva; generalmente, en esta opción se inserta el modo center-center. En la opción “Adjunto” normalmente se deja el modo predeterminado. Finalmente, en las opciones “Imagen de Escritorio” y “Imagen Móvil” cargamos nuestra imagen para la visualización respectivamente desde PC y desde móvil. Si no insertamos la imagen para móvil, el sistema mostrará la imagen de escritorio también para esta ubicación. Recomendamos insertar también una imagen para la visualización móvil con un tamaño cuadrado para facilitar la carga de la página cuando el usuario visualice la página sin una conexión Wi-Fi.
SECCIÓN “VIDEO”
Si, en cambio, quisiéramos que dentro de nuestro slider se visualizara un video y no una imagen, dentro de la sección “Video”, en la opción “Video de Fondo”, insertamos el enlace de un video de YouTube o Vimeo que se mostrará como fondo en nuestro slider. Siempre dentro de la sección “Video”, en la opción “Al completar el video”, definimos si al final del video se debe reiniciar la reproducción del video, ocultar el video o detenerlo en el último fotograma. Por último, en la opción “Mostrar en” podemos decidir si mostrar el video tanto en escritorio, tablet y móvil o ocultar la visualización del video en alguno de estos posicionamientos.
SECCIÓN “OVERLAY”
Dentro de la sección “Overlay”, podemos decidir si aplicar un degradado de color sobre la imagen o el video que hemos cargado. Esta elección se puede realizar a través de la opción “Gradiente”. Alternativamente, podemos seleccionar un color a través de la opción “Color”, que se superpondrá al contenido cargado. Posteriormente, utilizando la opción “Opacidad”, podemos reducir la opacidad del color para mostrar la imagen o el video subyacente.
SECCIÓN “CONTENIDO”
Dentro de la última sección presente en la pantalla de creación del slider, llamada “Contenido”, mediante el clásico visual builder de Framework360, añadimos un título y una descripción que deberán ser visualizadas en nuestro slider.
Una vez completada la realización del slider, hagamos clic en el botón verde en la parte superior derecha “Guardar” para guardar el trabajo.
Paso 2: Agreguemos el slider a la página de nuestro sitio web
Después de haber realizado nuestro slider, como se vio en el paso anterior, ahora debemos insertarlo en la página de nuestro sitio web donde deseamos que se visualice. Para hacer esto, debemos ir a la subsección de la barra lateral “Páginas” siguiendo los siguientes pasos:
Sitio Web > Páginas
Dentro de la pantalla de detalle “Páginas”, encontraremos la lista de las páginas presentes en nuestro sitio web. En este punto, hagamos clic en la página donde deseamos insertar el slider y, utilizando el constructor visual, seleccionemos el bloque “Slider” y arrástralo a la sección de la página web donde queremos que se visualice, como se ilustra en la figura siguiente:
Una vez insertado el bloque, vamos a seleccionar el slider que hemos creado.
Finalmente, hacemos clic en el botón en la parte superior derecha “Guardar” para guardar la inserción del slider.
