Control deslizante de logotipo

Una pared de logotipos de clientes empuja el resto de su página hacia abajo y todavía solo muestra un puñado de marcas. Un control deslizante de logotipo encaja en toda la lista en una tira compacta que gira por sí sola. El Control deslizante de logotipo widget adentro Complementos maestros para Elementor crea esa tira a partir de cualquier conjunto de imágenes de logotipo, luego agrega efectos de desplazamiento, información sobre herramientas, reproducción automática y flechas de navegación sin un complemento deslizante separado.

Cada logotipo puede vincularse al sitio del cliente, cambiar a una segunda imagen en el hover o revelar la marca y una breve descripción. Esta guía recorre el widget desde el primer arrastre al lienzo hasta el carrusel terminado en la página en vivo.

Qué hace el widget Logo Slider #

El widget toma una lista de imágenes de logotipos y lo convierte en un carrusel responsivo que se reproduce automáticamente. Controlas cuántos logotipos se muestran a la vez, qué tan rápido giran y qué sucede cuando un visitante pasa sobre uno. Funciona con el motor Swiper, por lo que el control deslizante es táctil en teléfonos y tabletas desde el principio.

Se encuentra en el grupo de complementos maestros de Slider Widgets, al lado del Carrusel de imágenes y Control deslizante de galería widgets. Esos dos están diseñados para fotografías y galerías. El control deslizante de logotipo está diseñado para marcas de marca: los logotipos permanecen pequeños, espaciados uniformemente y alineados en una sola fila.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
• Los logotipos de su cliente o socio están listos como archivos de imagen. Los logotipos con las mismas dimensiones se ven mejor; algo de alrededor de 300 por 150 píxeles con fondo transparente o blanco funciona bien.

Cómo agregar el widget Logo Slider #

En el editor Elementor, abra el Elementos panel y búsqueda Control deslizante de logotipo, o desplácese hasta la sección Addones maestros. Arrastre el widget a su página. Se carga con seis elementos de marcador de posición llamados Nombre de marca, para que vea la forma del control deslizante de inmediato y reemplace los marcadores de posición uno por uno.

Agregue sus logotipos en la sección Elementos del logotipo #

En el Contenido pestaña, abierta Artículos de logotipo. Cada entrada de la lista es un logotipo. Haga clic en un elemento para expandirlo o use los íconos de copia y eliminación a la derecha de cada fila. El Agregar artículo el botón en la parte inferior extiende la lista a tantos logotipos como necesite.

Debajo de la lista de elementos se encuentran tres configuraciones que se aplican a todo el control deslizante:

• Resolución de imagen: el tamaño de WordPress sirve para cada logotipo, desde miniatura hasta completo. Los logotipos son archivos pequeños, por lo que Full suele estar bien.
• Etiqueta HTML del título: la etiqueta de encabezado envuelve la marca en el hover, H5 de forma predeterminada. Elija una etiqueta que se ajuste a la estructura de encabezados de su página.
• Selectați Event: qué desencadena el efecto de desplazamiento. Como señala el panel, esto solo se activa cuando un tipo de desplazamiento está habilitado en el logotipo del cliente.

Dentro de cada elemento, haga clic en Logotipo del cliente campo para abrir la biblioteca multimedia de WordPress. Cargue los archivos de su logotipo o elija los que ya estén allí. El panel adjunto muestra las dimensiones del archivo, útil para comprobar que todos los logotipos comparten el mismo tamaño.

Establezca el enlace y el efecto flotante para cada logotipo #

Cada artículo del logotipo lleva el suyo propio Enlace campo. Pegue la URL del cliente y se podrá hacer clic en el logotipo en la página en vivo. El icono de equipo abre las opciones habituales del enlace Elementor, como abrir en una nueva pestaña.

El ¿flotar? dropdown decide qué sucede cuando un visitante mueve el mouse sobre el logo. Tiene tres modos:

• Ninguno: el logo simplemente se encuentra ahí. Limpio y sencillo.
• Texto: el logo se desvanece y a Nombre de la marca más corto Descripción aparece en su lugar.
• Imagen: el logotipo cambia a una segunda imagen que elijas.

Con Texto seleccionados, aparecen dos campos. Escriba la marca y una descripción de una línea, y el widget los mostrará sobre el logotipo en el hover. Esto se adapta a las agencias que quieren decir lo que hicieron por cada cliente sin salir del control deslizante.

Con Imagen seleccionado, a Imagen del logotipo flotante en su lugar aparece el campo. Un truco común: utilice un logotipo en escala de grises como imagen principal y la versión a todo color como imagen flotante, para que los logotipos se iluminen a medida que los visitantes se mueven por la franja.

Agregue información sobre herramientas a un logotipo #

Cada artículo también tiene un Información sobre herramientas alternar. Enciéndalo y aparecerá una pequeña burbuja cuando los visitantes pasen el cursor sobre ese logotipo. El Ajustes tab controla el comportamiento:

• Contenido: el texto dentro de la información sobre herramientas.
• Colocación: donde se encuentra la burbuja, arriba de forma predeterminada.
• Sigue al cursor: deje que la información sobre herramientas siga al mouse en lugar de permanecer fija.
• Animación y gatillo: cómo aparece la información sobre herramientas, escale on Hover de forma predeterminada.

El Estilo la pestaña al lado de Configuración estiliza la burbuja misma: colores, tipografía y espaciado. La información sobre herramientas funciona bien para etiquetas cortas como “Socio desde 2019” que no necesitan el modo de desplazamiento de texto completo.

Configura las flechas de navegación #

Abre el Navegación sección para controlar cómo los visitantes mueven el control deslizante con la mano. El Navegación dropdown establece el tipo de control, con flechas como opción estándar.

• Mostrar barra de desplazamiento?: agrega una barra arrastrable debajo del control deslizante.
• Poziția Fleșii: El centro coloca una flecha a cada lado del control deslizante. El centro superior o el centro inferior agrupan ambas flechas encima o debajo de él.
• Colocación: mantiene las flechas dentro del cuadro deslizante o las mueve fuera de él.
• ¿Ocultar flecha en el móvil?: deja caer las flechas en pantallas pequeñas, donde deslizar el dedo hace el trabajo.
• Icono siguiente e icono anterior: intercambie los galones predeterminados por cualquier icono en la biblioteca Elementor.

Sintoniza el comportamiento del carrusel #

El Configuración del carrusel la sección impulsa el movimiento del control deslizante. Aquí es donde una fila estática de logotipos se convierte en la franja giratoria que esperan los visitantes.

• Diapositivas por columna: cuántos logotipos se muestran a la vez, del 1 al 6. Cuatro o cinco se adaptan a la mayoría de los diseños de escritorio y el icono responsivo le permite establecer un recuento menor por dispositivo.
• Diseño: Carousel es el control deslizante plano estándar.
• Altura automática: permite que la altura del control deslizante siga la fila del logotipo.
• Autoplay y velocidad de reproducción automática: gire los logotipos automáticamente. La velocidad es el retraso en milisegundos, por lo que 5000 significa un nuevo conjunto cada cinco segundos.
• Pausa en Hover: detiene la rotación mientras el cursor está sobre el control deslizante, que combina bien con efectos de desplazamiento e información sobre herramientas.
• Diapositivas para desplazarse: cuántos logotipos avanzan por paso.
• Diapositiva central, Cursor de agarre, Modo libre de arrastre: centre el logotipo activo, muestre un cursor de agarre o permita que los visitantes lancen la tira libremente.
• Bucle: ejecuta el control deslizante sin cesar, que es lo que casi siempre quiere una tira de logotipo. Una cosa a tener en cuenta: el bucle necesita más logotipos que las diapositivas por número de columnas. Con cinco columnas y sólo cinco logotipos, no hay nada extra para rotar.

Estilee el control deslizante del logotipo #

Cambiar al Estilo pestaña. Cuatro secciones cubren el aspecto del control deslizante: Artículos del carrusel, Pasear artículos del carrusel, Icono y Navegación.

Artículos de carrusel #

Esta sección enmarca cada celda del logotipo, con estados Normal, Flotar y Activo.

• Fondo, tipo de borde, radio de borde, sombra de caja: dale a cada logotipo un marco estilo tarjeta o deja todo vacío para obtener una tira limpia.
• Relleno y brecha de artículos: espacio dentro de cada celda y la distancia entre logotipos. La brecha es la forma más rápida de hacer respirar una franja abarrotada.
• Modo Sombra y Opacidad: sombras de bordes suaves y transparencia para los logotipos.

Artículos del carrusel flotan #

Esta sección diseña el estado flotante que eligió en la pestaña Contenido, incluida la superposición de texto.

• Fondo, Borde, Sombra de caja, Acolchado, Margen: el marco alrededor de un logotipo flotado.
• Color del nombre, tipografía del nombre, espaciado: el texto de la marca que aparece en el modo de desplazamiento de texto.

Icono #

La sección Icono diseña el pequeño icono que se muestra con contenido flotante: su color, fondo, borde, relleno, margen y tamaño de fuente.

Flechas de navegación #

La sección de Navegación diseña los botones de flecha, con estados separados Normal y Hover.

• Color și fundal: el glifo de flecha y el botón detrás de él.
• Tipo de borde, radio de borde, relleno, tamaño: darle forma a los botones; un radio completo hace que los botones redondos se vean en la mayoría de los sitios modernos.
• Espacio entre flechas: el espacio entre los dos botones cuando se colocan juntos encima o debajo del control deslizante.

El resultado en la página #

Obtenga una vista previa o publique, y el control deslizante se ejecutará en vivo: los logotipos giran en el temporizador de reproducción automática, responden a las flechas y activan sus efectos flotantes y información sobre herramientas. Aquí está la tira terminada con cinco logotipos por vista y una flecha a cada lado.

Casos de uso comunes #

• Tiras de logotipos de clientes en páginas de inicio de agencias y autónomos, con cada logotipo vinculado a un estudio de caso.
• Carruseles de socios y patrocinadores para eventos, organizaciones sin fines de lucro y páginas de integración SaaS.
• Barras de prensa “Como aparecen en” con logotipos de publicaciones vinculados a la cobertura.
• Exhibiciones de marca en sitios de distribuidores y minoristas que enumeran las etiquetas que llevan.
• Pilas tecnológicas en sitios de cartera, utilice información sobre herramientas para nombrar cada herramienta.

Consejos para un mejor control deslizante de logotipos #

• Mantenga cada logotipo del mismo tamaño. Las dimensiones mixtas hacen que la fila salte mientras se desliza. Exportar todos los logotipos en lienzos idénticos, como 300 por 150, mantiene la tira estable.
• Utilice el desplazamiento de escala de grises a color. Establezca una imagen principal en escala de grises y la versión en color como imagen del logotipo de Hover. La tira permanece en silencio hasta que los visitantes interactúan con ella.
• Active Pausa en Hover con reproducción automática. Nadie puede leer la información sobre herramientas en un objetivo en movimiento.
• Ocultar flechas en el móvil. El deslizamiento los reemplaza y la tira permanece limpia en pantallas pequeñas.
• Haga coincidir las diapositivas por columna con el ancho del logotipo. Los logotipos de marcas denominativas anchas necesitan menos columnas que las marcas de iconos compactos. Si un logotipo parece comprimido, reduzca el recuento en uno antes de tocar los archivos de imagen.

Preguntas frecuentes #

Envolviendo #

El widget Logo Slider cubre todo el trabajo de un carrusel de logotipos de cliente en Elementor: un repetidor de logotipos, enlaces por logotipo y efectos de desplazamiento, información sobre herramientas, reproducción automática con bucle y estilo hasta los botones de flecha. Para controles deslizantes de fotos y galerías, mire el Carrusel de imágenes y Control deslizante de galería widgets. Explore el conjunto completo de Widgets y extensiones de complementos maestros, y mira el página de precios por lo que Pro agrega encima.