Tutorial del tema Avada: cómo utilizar el elemento Carrusel de imágenes para crear la página de inicio del efecto de rotación de imágenes

En diseño web.Rotación de fotosEl elemento Carrusel de imágenes de Avada puede ayudarle a conseguir rápidamente un bonito efecto de rotación de imágenes sin necesidad de escribir código. Este artículo le mostrará cómo utilizar el elemento Constructor Avada La creación de una rotación de imágenes le lleva paso a paso a través de todos los ajustes para mejorar fácilmente el atractivo visual de su sitio web.

I. ¿Qué es el elemento de rotación de imágenes Avada?

En Avada Elemento Image Carousel (Carrusel de imágenes) Permite añadir varias imágenes a una página, con ajustes flexibles para la visualización de desplazamiento automático o manual, compatibilidad conEfecto caja de luzyConfiguración de enlacesydiseño sensible, apto para exposición:

• Fotos del producto
• Casos de proyectos
• Logotipo del cliente
• Fotografía
• Otras presentaciones de contenidos visuales

En segundo lugar, los pasos detallados para crear una rotación de imágenes

1. Añadir un elemento de rotación de imagen

Vaya a la página que necesita editar y utilice Avada Builder para abrir la página:

• Haga clic para añadir un nuevo Contenedor.
• Opciones de disposición de los contenedoresancho totalLa anchura del contenido se fija en100%.
• En el contenedor, haga clic en "+" Añadir elementos

• Añadir un contenedor alCarrusel de imágenes Elementos.

2. Carga de imágenes por lotes

Avada ofrece dos tipos de cargafotografíaCamino:

• "Añadir imagen": sólo se puede cargar una imagen a la vez.
• "Añadir a granel"Opciones:Carga directa de imágenes por lotes.

3. Ajuste de los parámetros básicos de la rotación de imágenes

En "General", puede realizar los siguientes ajustes:

Nombre del parámetro	Ajustes recomendados e instrucciones
Pedir por(Imágenes en orden)	Se puede seleccionar y establecer una clasificación ascendente, descendente o aleatoria.
Tamaño de la imagen(Tamaño de la imagen)	Opciones sugeridas AutoLa imagen se redimensionará automáticamente según las dimensiones originales
Tipo Hover(Efecto Hover)	Efecto opcional de acercar, alejar, mover hacia arriba o ningún efecto
Reproducción automática(Reproducción automática)	Activado si se requiere auto-rotación, de lo contrario seleccione desactivado
Columnas máximas(número de columnas)	Se recomienda un ajuste de 4 para una presentación más clara de las imágenes individuales.
Espacio entre columnas(espacio entre columnas)	La configuración recomendada es30pxLos márgenes por defecto del contenedor son los mismos que los márgenes por defecto del contenedor

4. Configurar el efecto de desplazamiento

• Artículos de desplazamiento(Número de desplazamiento): establezca el número de imágenes que se mostrarán cada vez que se desplace, le recomendamos que lo establezca en "2" o que lo deje en blanco (si lo deja en blanco, se desplazará por defecto el número de imágenes que estén visibles en ese momento).
• Navegación(Flechas de navegación): Si la reproducción automática no está activada, se recomienda activar las flechas de navegación.
• Desplazamiento del ratón(Desplazamiento del ratón): Se recomienda desactivarlo por si afecta a la experiencia de visualización de la página.

5. Configurar el efecto de caja de luz (Lightbox)

Efecto caja de luz: Cuando el usuario hace clic en una imagen, aparece una ventana flotante o a pantalla completa que muestra una versión ampliada de la imagen.

• Caja de luz de imágenes opción Sí.

consejo::
Si se añade un enlace de salto para una imagen, el efecto lightbox se desactivará para esa imagen.

Vista previa del efecto

Guarde la página después de completar los ajustes y previsualice el front-end:

• Rotación de fotosAparecerá el contenido de la imagen que hayas seleccionado.
• Los usuarios pueden desplazarse por las imágenes utilizando las flechas de navegación, o hacer clic en la imagen para abrir el lightbox y disfrutar de los detalles de la imagen.

III. Precauciones y recomendaciones de optimización

• sugerenciaTamaño y escala de la imagenMantenga la coherencia para que la visualización de la rotación funcione mejor.
• Si tiene imágenes de distintos tamaños, utilice la función"Modo "AutoadaptableVisualice, pero preste atención al efecto visual general.
• hacer uso deEfecto caja de luzPuede mejorar la experiencia interactiva del usuario y es adecuado para álbumes de productos, carteras fotográficas y otros escenarios.
• fotografía Texto alternativoAyuda al SEOSe recomienda rellenar cada imagen con la descripción correspondiente.

resúmenes

Utilizando el elemento de rotación de imágenes de Avada Builder, puede crear fácilmente visualmente atractivas visualizaciones de rotación de imágenes. Los pasos detallados y los consejos presentados en este artículo no sólo optimizarán el aspecto visual de la página, sino que también mejorarán la experiencia general del visitante. Para saber másTutoriales relacionados con el tema AvadaPermanezca atento.Red de fluctuación de fotones.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres