Cómo crear un control deslizante de imagen en WordPress

Con WordPress, crear un sitio web es bastante fácil. Crear un sitio web deslumbrante y llamativo es una olla de pescado diferente, y el texto por sí solo no es suficiente cuando no hay escasez de elementos gráficos bellamente diseñados para elegir. En este tutorial, le mostraremos uno de ellos: el control deslizante de imagen.

Crear un control deslizante de imágenes en WordPress es fácil, y le mostraremos cómo hacerlo usando solo uno de los 60 hermosos y funcionales widgets que vienen con nuestro propio complemento Qi Addons para Elementor. Pero antes de mostrarte cómo crear un control deslizante de imágenes llamativo, nos gustaría tomarnos un tiempo para analizar los controles deslizantes en sí y algunos casos de uso que quizás quieras considerar. Esto es de lo que hablaremos.

¿Qué son los controles deslizantes de imágenes?

En diseño web, un control deslizante de imágenes es una presentación de diapositivas de imágenes utilizadas en una página web. Consisten en Varias imágenes que cambian de posición en una animación de transición. ya sea automáticamente o como respuesta a la acción del usuario, como un clic, un desplazamiento o, en dispositivos móviles, un deslizamiento. Ya sean automáticos o activados por el usuario, tienden a llamar la atención.

Sin embargo, además de lo puramente estético, un control deslizante también puede realizar funciones de navegación y transmitir información importante a los visitantes.

Cuándo usar controles deslizantes de imágenes

Un control deslizante de imagen se usa generalmente como parte de un sitio web de cartera o un sitio web comercial, pero no existe un límite real en cuanto a cuándo se puede usar un control deslizante.

Un control deslizante de imagen bien diseñado normalmente contendrá la mayoría de los información importante un sitio web desea transmitir a un usuario empaquetado en gráficos atractivos. Para un sitio web empresarial, podría ser una declaración de misión, por ejemplo. Para una librería o un sitio web de reseñas de películas, podría ser un escaparate de nuevos lanzamientos. Y cualquier tienda podría usarlo para anunciar una nueva oferta por tiempo limitado o un trato similar.

Alternativamente, puede adoptar un enfoque minimalista: simplemente amueblar su sitio web con hermosas fotos o gráficos para que disfruten sus visitantes: una solución quizás más adecuada para sitios web de fotografía, galerías, portafolios de artistas o museos.

Cuándo no usar controles deslizantes de imágenes

Hay una desventaja de los controles deslizantes de imágenes: su tamaño. Un control deslizante generalmente contiene muchas imágenes de alta calidad y alta resolución, que puede causar una carga lenta y un funcionamiento lento de su sitio web, lo que puede conducir a malas experiencias de usuario, mayores tasas de rebote y peor clasificación de SERP.

Si usa imágenes de alta resolución, no se exceda. Y si las desventajas superan los posibles beneficios, lo mejor es evitar los controles deslizantes por completo.

Otra cosa a considerar son los dispositivos móviles. Si la funcionalidad de su control deslizante depende de gráficos de gran formato con muchos detalles finos, puede ser inútil en dispositivos móviles y probablemente debería excluirse o modificarse para la versión móvil de su sitio web.

Cómo crear un control deslizante de imagen usando complementos de Qi para Elementor

Crearemos un control deslizante de imagen usando Qi Addons para Elementor, un complemento gratuito que hemos desarrollado para expandir la ya impresionante variedad de widgets de Elementor. Sin embargo, antes de comenzar a usarlo, debe instalar la última versión de Elementor y luego instale y active Qi Addons para Elementor.

Complementos Qi funcionará con la versión gratuita de Elementor, por lo que todo el kit y el caboodle no tienen por qué costarle ni un centavo. Todo lo que importa es que su versión de Elementor esté actualizada. También usaremos nuestro tema Qi gratuito, que recomendamos de todo corazón, pero los complementos Qi funcionarán con cualquier tema.

Una vez que haya hecho eso, agregar un control deslizante de imagen a su sitio web de WordPress es fácil y toma minutos. Puedes ver cómo se hace en el siguiente video:

Pero si prefiere un tutorial textual paso a paso, lo tenemos cubierto. Sigue leyendo.

Agregaremos un control deslizante de imagen a una publicación, pero podría agregarlo fácilmente a una página. Agregar el widget de control deslizante de imagen funciona como con cualquier otro elemento de Elementor: simplemente búsquelo en el menú del lado izquierdo y arrástrelo a donde lo desee.

En relación :  Cómo forzar a Chrome a abrir archivos PDF en una aplicación externa
Arrastrar elemento deslizante de imagen

Ahora tiene el elemento en su lugar, pero no contiene imágenes. Para agregar imágenes, haga clic en el más icono en el Imagenes sección de la Contenido / General pestaña.

Añadir imágenes

Ahora puede seleccionar imágenes de su biblioteca de medios o cargar algunas nuevas. Una vez que haya hecho su selección, haga clic en Crear galería.

Crear galería

Ahora puede revisar o editar esta galería antes de insertarla. También puede cambiar el orden de sus imágenes tal como aparecen en el control deslizante arrastrándolas. Cuando esté satisfecho con su galería, haga clic en Insertar galería.

Insertar galería

Ahora debería poder ver el control deslizante de su imagen en la sección de vista previa.

Vista previa del control deslizante de imagen

Pasando a la Configuración general / deslizante sección, encontramos los controles para el comportamiento de nuestro control deslizante de imagen.

Habilitar Slider Loop se puede configurar en o Noy hace que el control deslizante vuelva a girar sobre sí mismo. Queremos que nuestras imágenes sigan moviéndose por sí mismas, por lo que lo dejamos en Sí, que es el valor predeterminado. El Habilitar diapositivas centradas El control se utiliza para centrar imágenes asimétricas, mientras que Habilitar la reproducción automática del control deslizante hace que el control deslizante funcione sin la interacción del usuario.

El Duración de la diapositiva y el Duración de la animación de diapositivas se utilizan para establecer el tiempo durante el cual una imagen está en su lugar y la duración de la animación de transición. La unidad utilizada es milisegundos. Estableceremos nuestro Duración de la diapositiva a 2000, pero no tocaremos el Control de duración de la animación.

El Habilitar la navegación deslizante El control permite al usuario utilizar flechas para navegar por el control deslizante, mientras que el Habilitar la paginación del control deslizante gobierna los puntos de paginación del control deslizante. No usaremos los puntos para este control deslizante que estamos creando, así que lo cambiaremos a Apagado.

Configuración del control deslizante

A continuación, el Proporciones de imagen control tiene una serie de opciones que puede utilizar para hacer que sus imágenes parezcan más uniformes si no lo son, como Miniatura, Cuadrado, Retrato, y otros. Lo dejaremos por defecto Original, manteniendo las proporciones originales de las imágenes.

Habilitar columna parcial le permite mostrar la parte de la columna final que estableció el Valor de columnas parciales por. El Número de columnas El menú le permite elegir el número de columnas de su control deslizante. Estableceremos el nuestro en Una.

El Columnas receptivas El menú le permite configurar diferentes números de columnas para diferentes tamaños de dispositivos, lo que generalmente significa menos columnas en dispositivos más pequeños. Dado que solo tenemos una imagen que se muestra a la vez (según nuestro Número de columnas ajuste), podemos dejarlo en Predefinido ya que no hay forma de mostrar menos de una columna.

El Espacio entre elementos El control deslizante le permite ingresar un valor de píxel entre cada diapositiva. Estableceremos el nuestro en 0, ya que no queremos ningún espacio entre las imágenes. El Efecto de diapositiva menú le permite elegir entre el Diapositiva y Desvanecerse animaciones de transición. Dejaremos el nuestro en Diapositiva.

A continuación, encontramos el Habilitar ventana emergente de Lightbox. Si está habilitado, como es el predeterminado, abrirá una imagen en la que se hizo clic en una superposición. El Desplazamiento de la imagen El menú controla el comportamiento del control deslizante al pasar el mouse por el usuario. Puedes elegir entre Acercar, Alejar, Ninguno, y Muevete. Dejaremos el nuestro en Ninguna.

El Color de superposición y el Color de desplazamiento de superposición La configuración le brinda la posibilidad de elegir una superposición de color para sus imágenes, ya sea de forma predeterminada o al pasar el mouse. No lo usaremos para nuestra demostración.

Configuración del control deslizante

Pasando a la Estilo pestaña. Verá dos secciones: la Estilo de navegación del control deslizante, que se ocupa de las flechas de navegación, y el Estilo de paginación del control deslizante, que tiene que ver con la paginación. Para los propósitos de este diseño, hemos desactivado la paginación, por lo que no usaremos esas configuraciones.

En el Estilo de navegación del control deslizante sección la primera opción es la Posición de navegación menú. Aquí puede elegir la posición de las flechas que hacen que el control deslizante cambie de imagen. Los colocaremos Fuera de, pero también puede elegir el predeterminado Dentro y Juntos, que los colocará debajo de la imagen.

En relación :  COD Mobile: Cómo desbloquear Peacekeeper-Mosaic en la temporada 6

A continuación, encontramos el Ocultar navegación opción, que le permite ocultar las flechas de navegación para dispositivos por debajo de un cierto ancho de pantalla. Los haremos invisibles para los dispositivos. Por debajo de 768 píxeles ancho.

Los controles deslizantes de compensación (Desplazamiento vertical de navegación y Desplazamiento horizontal de navegación) le permiten mover las flechas de navegación desde sus posiciones predeterminadas. Puede deslizarlos usted mismo o ingresar valores en píxeles, ems o porcentajes. No usaremos el control deslizante de desplazamiento vertical, pero configuraremos el Desplazamiento horizontal de navegación a 6,5%.

Navegación de estilo

Las siguientes dos opciones son las Flecha de navegación Anterior (flecha izquierda) y Flecha de navegación Siguiente (flecha derecha) le permite cambiar las flechas de navegación predeterminadas. Puede elegir uno de su biblioteca de iconos o puede cargar un SVG. Nos gustan las flechas tal como son, por lo que no las cambiaremos.

A continuación, puede modificar el comportamiento de sus flechas de navegación utilizando el Normal / Hover palanca. Establecer los atributos de las flechas en el Normal El modo cambiará las flechas a medida que le aparezcan al usuario, mientras que el Flotar el modo gobierna su comportamiento al pasar el mouse.

Las dos primeras opciones son Color de la flecha de navegación y Color de fondo de la flecha de navegación. Aquí puede elegir o ingresar el color de sus flechas de navegación o su fondo. No usaremos las opciones de color para este diseño.

Los últimos tres controles deslizantes controlan las dimensiones de la propia flecha y su soporte. El Tamaño de la flecha de navegación le permite controlar el tamaño de la flecha, mientras que el «soporte» en Ancho del soporte de la flecha de navegación y Altura del soporte de la flecha de navegación se refiere al fondo de la flecha. Si ha seleccionado un color para Fondo de flecha de navegación, puede utilizar estos controles deslizantes para cambiar sus dimensiones. Aumentaremos el tamaño de nuestras flechas a 45 píxeles.

Navegación de estilo

Cambiando al Flotar sección de la palanca, podemos ver un control adicional: Habilitar movimiento de flecha flotante. De forma predeterminada, anima la flecha una vez que un usuario pasa el mouse sobre ella. Lo cambiaremos a No.

Estilo al pasar el mouse

El Estilo de paginación del control deslizante La sección ofrece un conjunto similar de opciones: colores, desplazamiento, bordes y tamaño, pero nos gusta nuestro control deslizante de imagen tal como está, solo con flechas de navegación, por lo que no usaremos las opciones de paginación.

Dicho esto, nuestro control deslizante de imagen está listo.

Control deslizante de imagen

Cómo crear un control deslizante de imagen de ancho completo usando complementos Qi

Ahora, suponga que desea un control deslizante de ancho completo. Con Qi Addons para Elementor, también puede hacer eso.

Lo primero que debe hacer es ir al Ajustes sección haciendo clic en el Engranaje en la parte inferior del menú del lado izquierdo. Encuentra el Diseño de página menú y seleccione Elementor Ancho completo como su diseño. Si está utilizando nuestro tema Qi, también puede seleccionar Qi de ancho completo.

Configuración de página Ancho completo

A continuación, haga clic en el icono del medio de la pestaña de la sección azul para editarlo.

Editar sección

Deberías ver el Disposición pestaña de su sección. El primer menú es Ancho del contenido. Está configurado para En caja, pero necesitas cambiarlo a Ancho completo. Una vez que haya seleccionado eso, el siguiente menú debería ser el Espacio entre columnas menú. Seleccionar Ningún espacio en él no dejará ningún espacio entre el elemento y los bordes de la pantalla.

Diseño de ancho completo

Sin embargo, incluso si está trabajando con el En caja diseño, todavía puede utilizar el Ancho control deslizante para cambiar el ancho de su widget. Si lo arrastra completamente hacia la derecha, o si ingresa el ancho de su diseño en píxeles, también obtendrá un control deslizante de imagen de ancho completo.

Ancho en caja

En conclusión

Como puede ver, configurar un control deslizante de imágenes hermoso y llamativo en WordPress es fácil y solo toma un par de minutos. Con Qi Addons para Elementor, también puede ser completamente gratuito. El widget viene repleto de opciones de estilo fáciles de usar con los efectos inmediatamente visibles en la sección de vista previa de Elementor. Ahora ya sabe todo lo que necesita saber para crear hermosos controles deslizantes de imágenes para su sitio web de WordPress, sin importar el estilo.

Please rotate your device