Pixpa te da mucho control sobre cómo mostrar imágenes en tus galerías.
Usando las opciones de estilo de la galería, puede controlar completamente la visualización de sus imágenes en la galería junto con el diseño de la galería.
Tip: Las opciones de estilo de todo el sitio de la galería se aplican automáticamente a todas las galerías nuevas que cree.
Ver también: ¿Cómo anular el estilo de galería de todo el sitio en una galería específica?
En este artículo hablaremos de:
Puedes personalizar las opciones de la galería de todo el sitio desde la sección Diseño (1).
Una vez dentro de la sección Diseño, haga clic en la pestaña Galerías (2).
Alternativamente, también puedes utilizar la opción de búsqueda del estudio.
- entrar: Galerías (1) en la barra de búsqueda.
- De los resultados relacionados, haga clic en el Diseño – Galerías opcion 2).
Galería de diseño
- Diseño : Elija un diseño que se aplicará a la galería.
Más información sobre cómo cambiar el diseño de la galería. - ANCHO : Elija el ancho de la galería.
- "Ancho completo' mostrará la galería mientras cubre todo el ancho sin dejar ningún margen.
- "Encajonado' mostrará la galería mientras deja una cierta cantidad de relleno a la derecha y a la izquierda de la pantalla.
- "Ancho del sitio' se puede especificar en la sección de diseño. Puede especificar un ancho fijo aquí.
Mostrará la galería adhiriéndose al ancho fijo especificado.
estilo de cuadrícula
- Espaciado de la cuadrícula : Especifique el espacio de medianil entre las imágenes en los diseños de cuadrícula. (0 – 250 píxeles)
- Radio de esquina de la imagen: Aplique un radio de borde para redondear las esquinas de la imagen en las cuadrículas de la galería.
Por ejemplo , la galería de inicio del tema Lantern tiene un espaciado de cuadrícula de 142 píxeles.
Tras aplicar la opción Radio de esquina de la imagen, verás que las imágenes tienen bordes redondeados, como en la plantilla Beyond.
Colores de cuadrícula
Opacidad base: Si ha seleccionado el tipo de efecto al pasar el cursor como color de acento de la imagen, configure la opacidad base de la cuadrícula desde aquí.
- Base: El color base se usa para la formación de la cuadrícula y solo es visible momentáneamente antes de que se carguen las imágenes. Tiene dos opciones para el color base de la cuadrícula.
- Elegir color: Elija esta opción para establecer un color específico para la base de la cuadrícula. Especifique cualquier color y opacidad para la base de la cuadrícula.
- Acentuar el color : Use colores de acento de imagen para la base de la cuadrícula. Esto dará una cuadrícula multicolor usando los colores de acento de cada imagen.
- Opacidad base: Si ha seleccionado el tipo de base como color de acento, establezca la opacidad de la base de la cuadrícula desde aquí.
- Colocar el cursor sobre: Esto afecta a la cuadrícula cuando el cursor pasa sobre la imagen.
- Elegir color: Establezca el color de desplazamiento predeterminado y su opacidad si ha seleccionado Seleccionar color para sus imágenes de cuadrícula.
- Acentuar el color : Use colores de acento de imagen para la base de la cuadrícula. Esto dará una cuadrícula multicolor usando los colores de acento de cada imagen.
- Opacidad al pasar el cursor: Si ha seleccionado el tipo de desplazamiento como color de acento, establezca la opacidad de la base de la cuadrícula desde aquí.
El color de acento de la imagen es el color dominante de una imagen que se selecciona cuando carga cualquier imagen.
Efecto de desplazamiento de cuadrícula
El efecto de desplazamiento se utilizará solo en el diseño de cuadrícula. Puede mostrar las siguientes opciones al pasar el mouse en el modo de cuadrícula.
- Sin efecto – Para ningún efecto en las imágenes en el modo de cuadrícula.
- Color – Solo para pasar el color sobre sus imágenes en modo de cuadrícula.
- Color y título de la imagen – Para el color de desplazamiento de la imagen con el título de la imagen. Puede configurar el color de desplazamiento y el color/fuente/tamaño/peso del texto del título de la imagen en el siguiente opción.
- Color e icono – Para el color del cursor de la imagen con un icono.
- Color, título de imagen e icono – Para el color de desplazamiento de la imagen, el título de la imagen y el icono. También puede agregar íconos en sus imágenes como más, flecha, cruz y ojo.
Icono de desplazamiento
- Los íconos flotantes solo se usan en los diseños de cuadrícula de las galerías. Puede optar por mostrar un icono en sus imágenes en modo de cuadrícula.
- Las opciones son: más, flecha, cruz y ojo. Esto solo es aplicable cuando el icono está seleccionado en el coloque el efecto desplegable.
Image Title
- Esto se aplica cuando elige mostrar títulos de imágenes al pasar el mouse.
borde de la imagen
Pixpa ofrece una función versátil para añadir bordes a las imágenes, lo que te permite mejorar el atractivo visual de tu sitio web. Haz clic aquí para obtener más información sobre los bordes de imagen.
Pantalla de caja de luz
1. Abra la caja de luz
- Cuando las imágenes se muestran en una cuadrícula, al hacer clic en una imagen se abre en modo Lightbox (visualización de imagen completa).
- Puede habilitar o deshabilitar esto desde aquí.
Vea el modo Lightbox en acción :
2. Habilite el zoom
- Habilitar/deshabilitar el zoom sobre las imágenes en el modo Lightbox.
- La función de zoom funcionará tanto en el escritorio como en los sitios web móviles.
3. Opciones de visualización
- Elija cómo desea mostrar sus imágenes en visualización de imagen completa.
- Puedes seleccionar de mostrar solo imágenes, imagen con miniaturas, imagen con subtítulos en la parte inferior, y imagen con subtítulos a la derecha.
Por ejemplo , una galería que muestre solo la imagen.
Por ejemplo , una galería que muestra imágenes con miniaturas.
Por ejemplo , una galería que muestra una imagen con un pie de foto en la parte inferior.
Por ejemplo , una galería que muestra una imagen con un pie de foto a la derecha.
4. Opciones de color de superposición
El color de superposición es el color de fondo que aparece al visualizar las imágenes en modo lightbox. Ajustar este color puede ayudar a que las imágenes se vean con la misma estética que el diseño de tu sitio web y a lograr una presentación uniforme y profesional en la vista lightbox.
- Elija el Color personalizado Opción para establecer un color de fondo específico para todas las imágenes que se visualizan en el modo lightbox. Puede definir su color preferido en el Color de superposición ajuste. Más información.
- Elija Acentuar el color para aplicar un color único a partir de los tonos de acento de cada imagen. Puede personalizar esto individualmente para cada imagen como desee. Más información.
- Si selecciona la opción Color de acento, puede ajustar el Opacidad (transparencia) del color de fondo.
5. Vista de imagen
Especifique el modo de visualización para Lightbox –
- Escalar y ajustar – Las imágenes se escalarían para caber en el área disponible del navegador para que la imagen completa sea visible.
- sangrado completo – Las imágenes se dimensionarían para ocupar toda el área disponible del navegador; es posible que algunas partes de la imagen se corten al lograr esta visualización de pantalla completa.
Por ejemplo , una galería con modo de escalado y ajuste donde las imágenes se ajusten a la altura disponible del navegador.
Por ejemplo , una galería con un modo de sangrado completo donde las imágenes se estirarían para llenar el ancho disponible del navegador.
6. Controles
En la vista Lightbox, elija cómo desea mostrar los controles de navegación, como el icono de información de la imagen, el icono de información de la galería, el icono de cruz, el icono de ajuste del navegador, etc. Las opciones son:
- Siempre visible (mostrar siempre los controles de navegación encima de las imágenes)
- Mostrar al pasar el mouse (los controles de navegación solo se mostrarán cuando mueva el cursor en la pantalla)
- Oculto (Nunca se mostrarán los controles de navegación).
Por ejemplo , una galería con controles de navegación siempre visibles.
Por ejemplo , una galería con controles de navegación que se muestran al pasar el cursor sobre el contenido.
Por ejemplo , una galería con controles de navegación ocultos.
7. Estilo siguiente/anterior
En la visualización de imagen completa, elija cómo desea mostrar sus flechas de navegación.
- El : Las flechas de navegación estarán flotando. Mueva el cursor sobre la imagen y haga clic en la pantalla una vez que aparezca la flecha para navegar por las imágenes.
- Chevrón
- Arrows
- Mostrar flecha en círculo
- Oculto : Desactiva las flechas de navegación por completo.
8. Nombre de archivo de imagen
- Elija mostrar el nombre del archivo cuando la imagen se vea en el modo de caja de luz.
Ver en acción:
9. Tamaño máximo de imagen
Esta configuración controla la resolución máxima a la que aparecen las imágenes de tu galería en el modo lightbox. Puedes elegir entre las siguientes opciones:
- Auto - Adapta automáticamente el tamaño de la imagen según la pantalla del usuario y la resolución del dispositivo. El sistema selecciona inteligentemente la versión más adecuada de la imagen para garantizar una claridad y un rendimiento óptimos.
- Tamaños fijos – 2048px, 1500px, 1000px, 800px o 500px. Al elegir un tamaño fijo, todas las imágenes de lightbox se mostrarán con la resolución máxima, según el dispositivo o el tamaño de la pantalla del usuario.
Si la imagen original que subiste tiene una resolución menor que el tamaño seleccionado, se mostrará en su resolución original . No se ampliará ni se reescalará.
Configuración de la presentación de diapositivas
- Diapositivas : Haga clic en reproducción automática para iniciar la presentación de diapositivas automáticamente en el visor de imágenes completo. También puede desactivar la presentación de diapositivas.
- Velocidad : Seleccione la velocidad de transición. Puedes elegir de 1 a 10 segundos.
- Transición : Elija el estilo de transición de la presentación de diapositivas.
Vea la presentación de diapositivas en acción:
Opciones de tinte
Esta función permite usar el color de acento de las imágenes como fondo al visualizarlas en modo Lightbox . Esto mejora la experiencia visual al alinear el fondo con el color de acento de la imagen.
- Utilice el color de acento como tinte:
- De forma predeterminada, el Color de fondo de la caja de luz Se aplicará al visualizar imágenes en modo Lightbox.
- Cuando habilita esta opción, el Acentuar el color asociado con las imágenes se utilizará como color de fondo de Lightbox, ofreciendo un aspecto más dinámico y visualmente cohesivo.
- Opacidad del tinte:
- Puede administrar la opacidad de la Tinte de color de acento utilizando el control deslizante Tinte.
- Al ajustar la opacidad se fusionan las Acentuar el color con el color de fondo de Lightbox, lo que le permite lograr una estética perfecta y profesional.
Pantalla móvil
- Mostrar como : Elija mostrar la galería como un Control deslizante de imagen o en modo cuadrícula en la vista móvil.
- Columnas de cuadrícula: Elegir entre Vista de 1 columna o 2 columnas para la visualización de la cuadrícula en la vista móvil.
- Espaciado de la cuadrícula : Configure canal entre imágenes en vista móvil.
Artículos relacionados:
- Crear una galería
- Sube artículos a tu galería
- Prácticas recomendadas para la denominación de archivos de imagen
- Añadir subtítulos a las imágenes