Arrastra el Widget de control deslizante de logotipo, agregue cada logotipo como una fila repetidora, configure diapositivas por vista para escritorio, tableta y dispositivos móviles, y active la reproducción automática con bucle. Es un widget gratuito, uno de toda una familia de widgets de carrusel, y todo dura unos cinco minutos.
La configuración es fácil. Lo que no es fácil es hacer que doce logotipos de doce empresas diferentes parezcan pertenecer a la misma fila. Ese es el problema real con cada tira de logotipo, y la segunda mitad lo cubre.
Paso 1: agregue el widget del control deslizante del logotipo
Busque en el panel Elementor el “control deslizante de logotipo” y arrástrelo hacia adentro. Es parte del complemento gratuito Master Addons y el colapso libre versus profesional tiene la lista completa de qué más hay en ese nivel. El Documentación del control deslizante de logotipo cubre todos los controles si desea la versión de referencia. La mayoría de los complementos complementarios envían algún tipo de widget de logotipo y comparación de complementos de carrusel dice cuáles lo ponen detrás de una licencia.
Paso 2: agrega tus logotipos
Cada logotipo es una fila repetidora: la imagen del logotipo, un enlace opcional y un texto flotante o imagen flotante opcional. El texto alternativo proviene del campo Texto alternativo de la imagen en la Biblioteca multimedia.
Dos cosas que hacer aquí que la mayoría de la gente omite:
Escribe texto alternativo real. “logotipo de Acme Corp”, no “logotipo-1.png.” Una tira de logotipo es uno de los pocos lugares donde el texto alternativo contiene información genuina, porque los nombres de las empresas son el contenido. Los usuarios lectores de pantalla no obtienen nada de doce imágenes llamadas “imagen”
Vincula cada logo sólo si el destino es útil. Vincular logotipos de clientes a sitios web de clientes desvía su tráfico de una página donde se estaba convirtiendo. En su lugar, vincúlelos a sus estudios de caso o no los vincule en absoluto. Una tira de logotipo funciona bien como señal de confianza estática.
Paso 3: Diseño y comportamiento
Las tiras de logotipos tienen valores predeterminados diferentes a los carruseles de imágenes, porque el trabajo es diferente. Nadie estudia un logo. Lo registran en medio segundo.
- Diapositivas por vista: seis en escritorio, cuatro en tableta, dos o tres en móvil. Mayor densidad que un carrusel de fotos, porque los logotipos son pequeños y el punto es la cantidad.
- Reproducción automática: en. Esto es lo opuesto a la regla testimonial. No hay nada que leer, por lo que el movimiento continuo no cuesta nada y muestra más logotipos que una fila estática.
- Velocidad: más lento de lo que parece correcto. 4000 a 6000 ms. Una tira rápida del logotipo se lee agitada.
- Bucle: encendido y asegúrese de tener al menos el doble de diapositivas por vista. Seis por vista necesita doce logotipos como mínimo o la envoltura saltará visiblemente.
- Fleșe și punte: apagado. Una tira de logotipo no es algo por lo que la gente navega.
Configure el retraso de reproducción automática en 0 y el carrusel se convierte en una marquesina continua en lugar de pasar de diapositiva en diapositiva. Ese es el aspecto que utilizan la mayoría de los sitios modernos para las tiras de logotipos, y la guía de marquesinas cubre la configuración en detalle.
Paso 4: haga que los logotipos que no coinciden parezcan consistentes
Aquí está el verdadero problema. Tienes doce logotipos. Cuatro son marcas denominativas anchas, tres son íconos cuadrados, dos tienen un enorme relleno interno incrustado en el PNG y uno es un bloqueo alto y apilado. Déjalos en una fila del mismo ancho y parecerá una nota de rescate.
Dimensionar por ancho es el error. Una marca denominativa ancha establecida en 160px de ancho es visualmente pequeña; un icono cuadrado de 160px de ancho es enorme. Son el mismo número y no se parecen en nada.
En su lugar, tamaño por área óptica. Exporte cada logotipo en el mismo lienzo, dé a cada marca una altura visual similar de aproximadamente 40 a 50 px en la tira final y ajuste los archivos individuales hacia arriba o hacia abajo hasta que parezcan equilibrados. El widget muestra cada logotipo con la misma resolución de imagen, por lo que este equilibrio se produce en los archivos de imagen. Entrecierra los ojos en la fila: cualquier logotipo que salte es demasiado grande, cualquiera que desaparezca es demasiado pequeño. Confía en tu ojo sobre los números, porque tu ojo es lo que usarán los visitantes.
Las tarjetas de producto coinciden con la misma discrepancia desde la otra dirección, donde retrato y fotografías cuadradas en una tira es lo que hace que a carrusel de productos parece barato. La solución es una relación de aspecto fija en lugar de una altura fija.
Dos soluciones más para el mismo problema:
Recorta el acolchado horneado. Los logotipos exportados desde kits de marca a menudo tienen un generoso espacio libre dentro del archivo de imagen. Ese relleno es invisible y hace que el logotipo sea más pequeño que sus vecinos a la misma altura. Recorta el cuadro delimitador visible antes de cargarlo.
Utilice SVG donde pueda. Los logotipos son ilustraciones vectoriales. Un SVG se mantiene nítido en cualquier tamaño, pesa una fracción de PNG y, esta es la parte útil, se puede volver a colorear con CSS, lo que hace que el tratamiento en escala de grises que se muestra a continuación sea trivial.
Paso 5: La escala de grises flota
Logos desaturados en reposo, a todo color flotando. Es el tratamiento predeterminado por una razón: doce logotipos en doce paletas de marcas es un caos visual y la escala de grises los convierte en una textura coherente.
El control deslizante de logotipo no tiene interruptor de escala de grises, por lo que hay dos formas de hacerlo. Cargue archivos en escala de grises como logotipo del cliente y las versiones de color como imagen del logotipo de Hover, o agregue un filtro de escala de grises CSS a los logotipos con CSS personalizado y elimínelo al pasar el cursor. La configuración de Opacidad en Carousel Items puede atenuar los logotipos a alrededor de 0,6 en reposo y 1 en el cursor. Si usa CSS, mantenga la transición entre 200 y 300 ms. Más rápido que eso y parpadea; más lento y se siente pegajoso.
Un caso en el que no deberías: si los logotipos son menciones de prensa en lugar de clientes, el tipo de tira de Forbes y TechCrunch, déjalos en color. Esos logotipos se reconocen por su color y desaturarlos le cuesta el reconocimiento que estaba comprando.
La tira terminada
Dónde ponerlo: inmediatamente debajo del héroe, o inmediatamente debajo del llamado principal a la acción. Ambas posiciones funcionan porque ambos son momentos en los que un visitante decide si confiar en usted.
Dónde no ponerlo: el pie de página. Una tira de logotipo en el pie de página es decoración. Nadie se desplaza hacia el pie de página para convencerse.
Las tiras de logotipos son una de las pocas secciones en las que un widget de archivo supera a uno diseñado, razón por la cual ninguno de los veinte Creador de widgets los diseños intentan reemplazarlo. Si desea diseños Pro para otras secciones, el página de precios tiene los niveles.
¿cuántos logotipos?
De ocho a dieciséis. Menos de ocho y una franja de desplazamiento llama la atención sobre lo pocos que hay, porque una fila estática de seis parece más segura que seis logotipos en bicicleta. A partir de los dieciséis años, nadie ve la mitad trasera, así que lidera con los nombres que la gente reconocerá.
Y si sólo tienes cuatro clientes: muestra cuatro, en fila estática, en un tamaño decente. Un carrusel es una forma de manejar la abundancia. Usar uno para ocultar la escasez hace lo contrario de lo que deseas.
Preguntas frecuentes
¿elementor tiene un widget de carrusel con logo?
No en el núcleo. Ni Elementor free ni Pro incluyen un carrusel de logotipos dedicado, aunque el carrusel de imágenes central puede mostrar una simple fila de logotipos. El control deslizante de logotipo de complementos maestros gratuito agrega enlaces por logotipo, texto flotante o imágenes flotantes, información sobre herramientas y una tira estilo marquesina cuando la velocidad de reproducción automática está configurada en 0.
¿cómo hago un pergamino de carrusel con logo continuamente en Elementor?
Active la reproducción automática y el bucle infinito, luego configure el retraso de reproducción automática en 0. Un retraso de cero elimina la pausa en cada diapositiva, por lo que la pista se mueve continuamente en lugar de pisar. Establezca la velocidad de 4000 a 6000 ms para que parezca más tranquila que frenética.
¿cómo hago logotipos del mismo tamaño en un carrusel?
Establezca una altura de contenedor fija, de 40 a 50 px, y deje que el ancho se ejecute automáticamente, en lugar de fijar el ancho. Luego ajuste los logotipos individuales a simple vista, porque una marca denominativa ancha y un ícono cuadrado en la misma medida parecen tamaños completamente diferentes. Primero, elimine cualquier relleno incorporado de los archivos de imagen.
¿los logotipos deberían ser en escala de grises o a todo color?
Escala de grises en reposo con el color sobre el flote para los logotipos de clientes y socios, porque convierte una docena de paletas en conflicto en una tira coherente. Mantenga los logotipos de prensa y medios a todo color, porque se reconocen por su color y al desaturarlos se pierde el reconocimiento.
¿cuántos logotipos debe haber en un carrusel de logotipos?
De ocho a dieciséis. Menos de ocho se ve mejor como fila estática que como tira móvil, porque desplazarse llama la atención sobre lo pocos que hay. Más de dieciséis significa que la mitad trasera nunca se ve, así que ponga los nombres reconocibles en primer lugar.
¿Puedo vincular cada logotipo a una página diferente?
Sí, cada fila repetidora tiene su propio campo de enlace. Sin embargo, considere si desea hacerlo: vincular logotipos de clientes a sitios de clientes elimina el tráfico de conversión. Vincularlos a sus propios estudios de caso mantiene al visitante y hace más trabajo.
Siguiente
¿Fotografías en lugar de logotipos? Widget diferente, valores predeterminados diferentes: cómo crear un carrusel de imágenes en Elementor. También hay una colección de veinte diseños de controles deslizantes con nombre, ocho de ellos de importación gratuita, aunque ninguna es una tira de logotipo, por lo que para los logotipos, el control deslizante de logotipo sigue siendo la herramienta.
Si la tira deja de moverse después de una actualización del complemento de almacenamiento en caché, eso es un problema de inicialización de Swiper y la solución está aquí. Todo lo que tiene forma de carrusel vive en el Widgets del carrusel Elementor página.
