Adding and Setting Up a Gallery in Wix
- 18 feb 2022
- 11 Min. de lectura
Actualizado: 20 mar
Una galería de Wix es una herramienta ideal tanto para mostrar un catálogo de productos como para exhibir tu portfolio.
Contenido:
¿Cómo agregar una galería de Wix a tu sitio?
¿Cómo agregar fotos y videos a una galería de Wix?
Personalización del diseño de la galería de Wix
Formato de diseño personalizado
Plantillas de diseño de galería en Wix
Ajuste de configuraciones en Wix Pro Gallery
Personalización del diseño de Wix Pro Gallery
Configuración de opciones adicionales de Wix Pro Gallery
Configuración del botón “Mostrar más” en una galería de Wix
¿Cómo agregar una galería de Wix a tu sitio?
Primero, tenés que agregar una galería a tu sitio. Después de hacerlo, podés añadir contenido multimedia y personalizar la configuración.
ЫEn el Editor de Wix
Hacé clic en Agregar en el lado izquierdo del editor.
Seleccioná Galería.
Elegí una galería dentro de la sección Wix Pro Galleries y arrastrala a la ubicación deseada en la página de tu sitio web.
En Editor X
Hacé clic en Agregar en la barra superior de Editor X.
Hacé clic en Medios.
Hacé clic en Pro Galleries.
Seleccioná una Pro Gallery y hacé clic para agregarla a tu sitio.
¿Cómo agregar fotos y videos a una galería de Wix?
Ahora agregá contenido multimedia a tu galería. Podés añadir fotos y videos. También podés subir imágenes desde tu dispositivo o elegir imágenes de stock desde la galería de Wix.
Hacé clic en la Pro Gallery dentro del editor.
Hacé clic en Organizar medios.
Hacé clic en Agregar medios.
Elegí el tipo de archivo multimedia que querés añadir y seguí las instrucciones que aparecen a continuación:
Fotos
Seleccioná una foto desde el Media Manager, o hacé clic en Subir archivos para cargar imágenes desde tu computadora.
Hacé clic en Agregar a la página.
Hacé clic en Listo.
Nota: Se recomienda subir imágenes con una resolución mínima de 2560 × 1440 píxeles.
Video
Elegí una opción:
Desde la computadora:
Seleccioná un video desde el Media Manager, o hacé clic en Subir archivos para cargarlo desde tu computadora.
Hacé clic en Agregar a la página.
Desde YouTube:
Ingresá la URL del video.
Hacé clic en Actualizar galería.
Desde Vimeo:
Ingresá la URL del video.
Hacé clic en Actualizar galería.
Hacé clic en Listo.
Nota: Si tu Pro Gallery contiene más de un video, la reproducción automática solo se aplicará a uno de ellos.
Texto
Escribí el texto en el cuadro correspondiente.
Formatealo usando las opciones disponibles en la barra superior.
Personalizalo con los siguientes ajustes:
Diseño: elegí un formato para el texto.
Color de fondo y opacidad: ajustá la transparencia con el control deslizante y seleccioná un color.
Márgenes: modificá el espacio entre el texto y los bordes del cuadro.
Alineación vertical: elegí cómo se posiciona el texto.
Hacé clic en Agregar a la página.
Hacé clic en Listo.
Para eliminar las imágenes gratuitas de Wix que aparecen por defecto en la galería, simplemente pasá el cursor sobre la imagen que querés borrar y hacé clic en el ícono de Eliminar.
Personalización del diseño de la galería de Wix
Después de agregar contenido multimedia a la galería, podés enfocarte en personalizar el diseño. Hay varias opciones de layout para elegir:
Presets (plantillas predefinidas): estas plantillas listas para usar te ayudan a acelerar el proceso de mostrar contenido en tu sitio. Incluyen diseño, estructura y configuraciones ya definidas.
Personalizar: estos layouts te permiten crear y configurar una galería desde cero.
Formato de diseño personalizado
Estos layouts te permiten crear y personalizar la galería desde cero. Podés elegir entre múltiples opciones para mostrar tus archivos multimedia de la manera más conveniente.
Cómo elegir un formato de diseño personalizado:
Hacé clic en la Wix Pro Gallery dentro del editor.
Hacé clic en Personalizar.
Andá a la pestaña Diseño (Layout).
Abrí la pestaña Custom (Personalizado).
Elegí un diseño para la galería.
Hacé clic en Personalizar diseño para ajustarlo según tus preferencias.
Plantillas de diseño de galería en Wix
Estos diseños predefinidos te ayudan a acelerar el proceso de mostrar tus imágenes en el sitio web. Las plantillas están disponibles tanto en formato horizontal como vertical e incluyen una variedad de funciones de diseño ya integradas.
Cómo elegir una plantilla de diseño:
Hacé clic en la Wix Pro Gallery dentro del editor.
Hacé clic en Personalizar.
Andá a la pestaña Diseño (Layout).
Abrí la pestaña Presets (Plantillas).
Elegí un diseño para la galería.
Ajustar configuraciones en Wix Pro Gallery
Podés personalizar diferentes configuraciones de la galería según tus preferencias.
¿Cómo hacerlo?
Hacé clic en la Wix Pro Gallery dentro del editor.
Hacé clic en Configuración (Settings).
Andá a la pestaña Settings.
Configurá las siguientes opciones:
Al hacer clic en un elemento: Elegí qué sucede cuando alguien hace clic en un ítem de la galería:
Abrir en modo expandido: el elemento se abre en una ventana emergente.
Abrir un enlace: el elemento redirige a un link.
No hacer nada: no ocurre ninguna acción.
Abrir en pantalla completa: el elemento ocupa toda la pantalla del visitante.
Ícono de descarga: Activá o desactivá esta opción:
On: aparece el ícono de descarga en cada elemento de la galería.
Off: los visitantes no pueden descargar los archivos.
Compartir en redes sociales: Activá o desactivá esta opción:
On: los visitantes pueden compartir imágenes en redes sociales y se muestran los íconos.
Off: no se permite compartir y los íconos no se muestran.
Ícono de “me gusta” (corazón): Activá o desactivá esta opción:
On: aparece el ícono de corazón en la galería. También podés elegir si mostrar la cantidad de likes.
Off: el ícono de corazón no se muestra.
Personalizar el diseño de Wix Pro Gallery
Podés personalizar distintos elementos de la Pro Gallery, como overlays (superposiciones) e íconos, texto, estilos de elementos, efectos de desplazamiento, botones y el modo expandido. Elegí qué elementos querés modificar según tus necesidades.
Nota: Algunas opciones dependen del diseño y la configuración que hayas elegido previamente. Por ejemplo, para personalizar el texto, primero tenés que activar la visualización del título o la descripción en el layout.
Overlays e íconos
El overlay aparece sobre la imagen y agrega un efecto visual cuando pasás el cursor. Podés personalizar este efecto, así como los íconos que se muestran.
Cómo configurarlo:
Hacé clic en la Wix Pro Gallery dentro del editor.
Hacé clic en Configuración (Settings).
Andá a la pestaña Diseño (Design).
Hacé clic en Overlay and Icons.
Ajustes disponibles:
Color del overlay: ajustá la transparencia con el control deslizante y elegí un color.
Color de los íconos: seleccioná el color usando el selector.
Efecto del overlay: elegí una animación entre las opciones disponibles:
None: el overlay permanece estático.
Fade In: aparece suavemente al pasar el cursor.
Expand: se expande al pasar el cursor.
Float Up: aparece desde abajo.
Slide Right: se desliza hacia la derecha.
Flechas de navegación: hacé clic para activar o desactivar las flechas en la galería.
Tamaño de las flechas: arrastrá el control deslizante para aumentar o reducir su tamaño.
Color de las flechas: hacé clic en el selector de color para elegir el color.
Posición de las flechas: seleccioná la opción correspondiente para definir dónde se muestran.
Texto
Hacé clic en la Wix Pro Gallery dentro del editor.
Hacé clic en Configuración (Settings).
Andá a la pestaña Diseño (Design).
Hacé clic en Texto (Text).
Opciones de personalización:
Mostrar (Display): elegí qué información querés mostrar en las imágenes de la galería:
Título: activá la casilla para mostrar el título.
Descripción: activá la casilla para mostrar la descripción.
Dónde mostrar el texto: elegí si el texto aparece arriba, abajo o directamente sobre la imagen.
¿Qué pasa con el texto al pasar el cursor?:
Appears: el texto aparece al pasar el cursor.
Disappears: el texto desaparece al pasar el cursor.
No Change: no hay cambios.
Alineación horizontal: izquierda, centro o derecha.
Alineación vertical: arriba, centro o abajo.
Padding vertical: ajustá el espacio entre el texto y los bordes verticales.
Padding horizontal: ajustá el espacio entre el texto y los bordes horizontales.
Botones
Podés agregar botones personalizados a tu galería y también configurar el diseño del botón “Cargar más” (Load More).
Hacé clic en la Wix Pro Gallery dentro del editor.
Hacé clic en Configuración (Settings).
Andá a la pestaña Diseño (Design).
Hacé clic en Botones (Buttons).
Opciones de personalización:
Botones personalizados:
Texto del botón: ingresá el texto que querés mostrar.
Alineación horizontal: elegí la posición horizontal del botón.
Alineación vertical: elegí la posición vertical del botón.
Estilo y color de fuente: seleccioná la tipografía y el color del texto.
Color y opacidad del botón: ajustá el color y la transparencia con el control deslizante.
Borde (ancho y color): modificá el grosor del borde y elegí su color.
Radio de las esquinas: ajustá qué tan redondeadas son las esquinas del botón.
Botón “Cargar más” (Load More): esta opción solo aparece si activaste el botón Load More en el panel de Diseño (Layout).
Texto del botón: ingresá el texto que querés mostrar.
Estilo y color de fuente: elegí la tipografía y el color del texto.
Color y opacidad del botón: ajustá el color y la transparencia con el control deslizante.
Borde (ancho y color): configurá el grosor y el color del borde.
Radio de las esquinas: ajustá qué tan redondeadas son las esquinas del botón.
Apariencia de los elementos
Cada imagen o video en la galería es un elemento independiente. Podés personalizar su apariencia tanto en estado normal como al pasar el cursor.
Hacé clic en la Wix Pro Gallery dentro del editor.
Hacé clic en Configuración (Settings).
Andá a la pestaña Diseño (Design).
Hacé clic en Estilo del elemento (Item Style).
Opciones de personalización:
Borde (ancho y color): ajustá el grosor y elegí el color.
Radio de esquinas: definí qué tan redondeadas son las esquinas.
Sombra:
On: se aplica una sombra alrededor del elemento. Podés ajustar opacidad, color, desenfoque, dirección y tamaño.
Off: no se muestra sombra.
Efecto al pasar el cursor (Hover): Elegí qué sucede cuando alguien pasa el mouse sobre un elemento:
None: sin animación.
Zoom: la imagen se agranda.
Blur: la imagen se desenfoca.
Black & White: la imagen pasa a blanco y negro.
Shrink: la imagen se reduce.
Invert: se invierten los colores.
Colorize: pasa de blanco y negro a color.
Darken: la imagen se oscurece ligeramente.
Carga de imágenes: Elegí qué se muestra mientras la imagen se está cargando:
Imagen desenfocada: aparece una versión borrosa durante la carga.
Color de fondo: se muestra un color como placeholder mientras carga la imagen.
Efectos de desplazamiento (Scroll effects)
Podés agregar una animación que se active cuando el usuario navega por la galería. Además, podés personalizar la animación ajustando el estilo de transición y su duración.
Notas:
Las animaciones disponibles dependen del diseño (layout) que hayas elegido.
Las opciones de animación solo están disponibles en layouts con desplazamiento horizontal.
Cómo agregar una animación de scroll:
Hacé clic en Scroll Effects.
Elegí qué sucede cuando los visitantes se desplazan por la galería:
None: sin animación.
Fade In: las imágenes aparecen gradualmente al hacer scroll.
Black & White: las imágenes pasan a blanco y negro durante el desplazamiento.
Float Up: las imágenes se deslizan hacia arriba.
Expand: las imágenes se agrandan.
Compress: las imágenes se comprimen.
Scale Down: las imágenes se reducen de tamaño.
Monochrome: las imágenes se tiñen de un solo color.
Cómo personalizar la animación
Hacé clic en Personalizar animación (Customize Animation).
Ajustá las siguientes configuraciones:
Estilo de transición: elegí un efecto de movimiento desde el menú desplegable. Este efecto se aplica cuando los usuarios se desplazan entre los elementos de la galería.
Duración: ajustá con el control deslizante cuánto dura la animación.
Modo expandido (Expand Mode)
Hacé clic en la Wix Pro Gallery dentro del editor.
Hacé clic en Configuración (Settings).
Andá a la pestaña Diseño (Design).
Hacé clic en Personalizar modo expandido (Customize Expand Mode).
Opciones de configuración:
Información mostrada: seleccioná si querés mostrar título, descripción y/o enlace.
Dónde mostrar: elegí si la información aparece al costado o abajo.
Cuándo mostrar: definí si la info se ve siempre o solo al hacer clic en el ícono.
Permitir pantalla completa: activá para que los usuarios vean los elementos en fullscreen.
Repetir imágenes (Loop):
On: las imágenes se recorren en bucle.
Off: se detiene en la última imagen.
Color de fondo: elegí el color del fondo del modo expandido.
Color de íconos: seleccioná el color de los íconos.
Estilos de texto:
Título: personalizá tipografía, estilo, tamaño y color.
Descripción: configurá la fuente y el color.
Text Alignment: Choose left, center, or right alignment for the text.
Hacé clic en Listo (Done) para guardar los cambios.
Configuración adicional de Wix Pro Gallery (Avanzado)
Podés ajustar configuraciones más avanzadas, como la calidad de imágenes y videos.
¿Cómo hacerlo?
Andá a la pestaña Advanced (Avanzado).
Configurá las siguientes opciones:
Calidad de imagen: arrastrá el control deslizante para ajustar la calidad.
(Nota: una mayor calidad puede hacer que las imágenes tarden más en cargar).
Nitidez (Sharpening): activá o desactivá esta opción:
Cantidad (Amount): ajustá el nivel de nitidez.
Radio (Radius): definí el alcance del efecto.
Umbral / Niveles (Threshold / Levels): ajustá los valores mínimo y máximo de nitidez.
Reproducción (Video Playback): elegí si los videos se reproducen al pasar el cursor, automáticamente o al hacer clic.
Sonido (Enable Sound): Click the toggle to turn sound on or off:
On: los videos se reproducen con sonido.
Off: los videos están en silencio dentro de la galería.(Nota: en modo expandido siempre se reproducen con sonido).
Velocidad de reproducción: seleccioná la velocidad desde el menú desplegable.
Repetición (Loop Video):
On: el video se reproduce en bucle.
Off: el video se reproduce una sola vez.
Botón de reproducción: activá o desactivá la visualización del botón.
Dirección de la galería: Elegí si los elementos se muestran de izquierda a derecha o de derecha a izquierda.
Agregar un botón “Mostrar más” a tu galería
Podés añadir un botón “Mostrar más” (Show More) para reducir la cantidad de contenido que los visitantes ven al abrir la página por primera vez. Esto les permite cargar todas las imágenes con un solo clic o verlas de forma progresiva.
Además, podés personalizar el texto, la tipografía, el color y otros detalles del botón para que coincida con el diseño general de tu sitio web.
Nota: El botón “Mostrar más” solo está disponible en layouts con desplazamiento vertical. No se puede usar en diseños como Thumbnails, Slider, Slideshow o Columns.
Activar el botón “Mostrar más”
Agregá un botón “Mostrar más” (Show More) a la galería para que los visitantes puedan cargar todas las imágenes con un solo clic o verlas por partes.
Cada sección tiene el mismo tamaño que la galería original. Esto significa que si la galería muestra cuatro imágenes, cada sección adicional también mostrará cuatro imágenes.
Cómo activarlo:
Hacé clic en la Wix Pro Gallery dentro del editor.
Hacé clic en Personalizar (Customize).
Andá a la pestaña Diseño (Layout).
Hacé clic en Personalizar diseño (Customize Layout).
Activá el interruptor de “Mostrar más” (Show More).
Elegí una opción en “Cuántas fotos mostrar”:
Todas las fotos: se cargan todas las imágenes.
Una sección más: se carga la siguiente sección de la galería.
Nota: Cada sección mantiene el mismo tamaño que la galería original. Por ejemplo, si se muestran 4 imágenes al inicio, cada nueva sección también mostrará 4 imágenes.
Personalizar el botón “Mostrar más”
Podés ajustar el texto, la tipografía, el color y otras configuraciones del botón “Mostrar más” (Show More) para que combine con el diseño de tu sitio web.
Cómo personalizarlo:
Hacé clic en la Wix Pro Gallery dentro del editor.
Hacé clic en Personalizar (Customize).
Andá a la pestaña Diseño (Design).
Abrí la pestaña Botón (Button).
Opciones de personalización:
Texto del botón: hacé clic en el campo de texto para modificarlo.
Estilo y color de fuente:
Hacé clic en el ícono de Expandir para ajustar tipografía, tamaño, etc.
Elegí el color desde el selector.
Color y transparencia del botón: ajustá la opacidad con el control deslizante y seleccioná el color.
Borde (ancho y color): modificá el grosor y elegí el color del borde.
Redondeo de esquinas: ajustá qué tan redondeadas son las esquinas del botón.
Para ajustar la cantidad de imágenes que se muestran antes de que aparezca el botón “Mostrar más” (Show More), simplemente aumentá o reducí el tamaño de la galería manualmente.
