#carrusel divi | Explore Tumblr posts and blogs

soyrafaramos · 3 years ago

Text

¿Qué es un slider de imágenes?

/*! elementor - v3.3.1 - 20-07-2021 */ .elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#818a91;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#818a91;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}

¿Qué es un slide?

Un slider es un recurso de diseño web que consiste en mostrar distintas imágenes que se van deslizando unas sobre otras. Cada una de las imágenes se llama slide y pueden contener texto e incluso vídeo y botones.

El significado de slide en español es diapositiva y de slider es deslizador. Así que en una traducción muy básica: un slider de slides es un deslizador de diapositivas. En español se suele utilizar la expresión: carrusel de imágenes web.

Los sliders son carruseles de imágenes espectaculares que se suelen situar en una parte destacada, habitualmente al comienzo de la web (header), para dar dinamismo e interactividad a los diseños. Un slide se parece bastante a una diapositiva en una presentación, ya que contienen incluso una transición.

Técnicamente, un slider web es un conjunto de HTML y CSS creado y animado por JavaScript. Éste es el principal motivo por el que no suele ser leído por los buscadores (como Google), así su contenido no aparecerá indexado. Poner un slider para SEO no es una buena idea.

Las páginas web con carrusel de imágenes tienen el riesgo de ralentizar demasiado una web y tener una mala experiencia en dispositivos móviles. Por ello, hay que tener cuidado con este recurso.

¿Para qué sirve un slider?

Un slider de imágenes sirve principalmente para dos cuestiones:

Destacar contenido: es ideal para promociones, ofertas, primeras impresiones… con imágenes que llamen la atención.

Generar interacción: gracias a su impacto visual, son una manera de atraer clics.

Si tenemos más de un slide en el carrusel, va a ser complicado dirigir al usuario a todos esos sitios, probablemente nada más que vea la primera diapositiva. Por otro lado, varios sliders multiplican los recursos y ralentizan la web.

El slider web se suele colocar en la parte superior de la página de inicio (header), pero también se puede poner en el mismo lugar de cualquier landing page. Si utilizamos la imagen destacada para el slide, hay que tener en cuenta que no tendrá utilidad para SEO, al ser una imagen de fondo.

Un slide individual tiene el mismo efecto que una imagen de fondo, con una carga mucho mayor de recursos. Por este motivo, se están sustituyendo los espectaculares carruseles de imágenes del pasado, por imágenes de fondo optimizadas para móvil.

Los sliders suelen tener una imagen de fondo o un vídeo, con un texto destacado por encima, un texto secundario y finalmente un botón con una llamada a la acción. La idea es conseguir llamar la atención del usuario y dirigirla al botón, que lo llevará al sitio que nosotros pretendíamos.

Diferencia entre banner y slider

La diferencia entre banner y slider web es muy fina. Un banner puede ser un slide, así de simple, puede ser una de las imágenes del carrusel.

Los banners suelen identificarse con contenido publicitario, y al igual que un slide, puede tener animaciones. Así que un slider de un único slide y un banner, pueden ser lo mismo, aunque no se suelen utilizar con la misma finalidad.

Los banners suelen tener tamaños muy diversos (para tener cabida como publicidad en cualquier web), así encontramos algunos realmente pequeños, algo no muy habitual en un slider que suelen reservarse gran espacio al comienzo de las págins.

Los sliders suelen utilizarse en páginas propias y los banners están más orientados a ser colocados en páginas ajenas, para conseguir imagen de marca y algo de tráfico.

Inconvenientes de usar un slider

El problema de los sliders de imágenes viene de su mal uso y de su abuso:

Afecta al rendimiento de la web: si el slider web está lleno de código CSS y JavaScript, si ponemos demasiadas imágenes (slides), si las imágenes son demasiado grandes, si además le añadimos animaciones y transiciones… Si además es lo primero que se carga, estaremos dando una muy mala usabilidad a nuestros usuarios por móvil.

Absorben la interacción: hay usuarios que ven un slider, ni esperan a la segunda diapositiva, y ya hacen clic. Básicamente dejan de navegar y se fijan en los primeros impactos con motivo de la espectacularidad de las imágenes.

Invisibles para Google: al ser elementos creados por JavaScript, su contenido no suele ser leído por Google.

Necesitan cambiarse: un slide en una web durante mucho tiempo deja de tener su efecto y nos termina cansando. Deben de cambiarse de manera periódica.

Por tanto, las páginas web con carrusel de imágenes deben minimizar el peso de sus fotos o vídeos de fondo, reducir el número de slides, ajustar las transiciones, animaciones y efectos, tener contenido que no sea importante indexa y llevar al sitio correcto desde el call to action.

Poner un slider sin tener en cuenta estos inconvenientes, suele tener negativas consecuencias para el SEO y la experiencia del usuario.

Buenas prácticas para usar en sliders

Vamos a enumerar algunas buenas prácticas para que los sliders no sean un problema:

Piensa siempre en cómo se va a ver el carrusel de imágenes en el móvil: mobile first.

Reduce al máximo el número de diapositivas y elimina carga innecesaria.

Utiliza imágenes comprimidas y en formatos nuevos, pero que sean imágenes impactantes.

Todas las imágenes deben tener el mismo tamaño.

Cuidado con las transiciones, animaciones y las interacciones pesadas como 3D, parallax, efecto Ken Burns…

No pongas contenido para indexar, ya que no suelen ser indexados.

Mejor una imagen optimizada que un vídeo optimizado de fondo.

Si son vídeos o imágenes de fondo, se debe reducir la calidad.

Colocar siempre un texto con una botón como llamada a la acción para dirigir al tráfico.

A modo de resumen: debemos pensar en cómo se verán los sliders de imágenes en los dispositivos móviles, con los mínimos slides, con imágenes comprimidas y optimizadas, eliminando efectos innecesarios.

Como poner un slider en WordPress

Para poner un slider de imágenes en WordPress o en cualquier CMS, podemos optar por utilizar un constructor visual o un plugin especial para sliders.

El plugin para sliders más famoso puede ser Slider Revolution, que tiene carruseles espectaculares con imágenes, vídeos, efecto ken burns… pero la parte negativa es su terrible rendimiento por sus elevados tiempos de carga.

Sin embargo, para hacer un slider simple, es muy recomendable utilizar page builders como Elementor, DIVI, WPBakery o alguno semejante.

Que no se nos olvide, un slider, suele tener una imagen o vídeo de fondo, una frase principal, una secundaria y un botón como llamada a la acción para dirigir la atención tomada.

/*! elementor - v3.3.1 - 20-07-2021 */ .elementor-widget-video .elementor-widget-container{overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0)}.elementor-widget-video .elementor-open-inline .elementor-custom-embed-image-overlay{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-background-size:cover;background-size:cover;background-position:50%}.elementor-widget-video .elementor-custom-embed-image-overlay{cursor:pointer;text-align:center}.elementor-widget-video .elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play i{opacity:1}.elementor-widget-video .elementor-custom-embed-image-overlay img{display:block;width:100%}.elementor-widget-video .e-hosted-video .elementor-video{-o-object-fit:cover;object-fit:cover}

The post ¿Qué es un slider de imágenes? appeared first on Agencia de Marketing Digital | Rafa Ramos.

source https://soyrafaramos.com/que-es-un-slider/

0 notes