Cómo crear diapositivas de comercio electrónico fuertes

Verá diapositivas en todas partes en línea. Presentan nuevos productos, presentan hermosas fotos, atraen compradores para comprar y distribuir actualizaciones. ¿Pero es un control deslizante lo mejor para su sitio? ¿Y cómo creas diapositivas que realmente funcionan? Las ventajas y desventajas de las diapositivas antes de agregar un control deslizante a su tienda WooCommerce, es importante dar un paso atrás y comprender tanto los beneficios como las desventajas. Después de todo, una diapositiva no es adecuada para cada sitio web y para cada situación. Pero hay algunos aspectos positivos:
Son hiper-visión y captan atención. En muchos casos, una diapositiva es lo primero que alguien ve al visitar su sitio. Con imágenes audaces y atractivas que resaltan sus productos, ubicación o equipo, estas son una oportunidad para hacer una declaración al instante.
Guardo espacio en su sitio. Puede agregar más contenido al mismo lugar en una página, ahorrando valiosas propiedades inmobiliarias del sitio.
Son excelentes para los recorridos de productos. Muestra una variedad de productos nuevos o más vendidos en un solo lugar.
Pueden resaltar nueva información y actualizaciones. Agregue diapositivas con las últimas publicaciones de blog, ventas y noticias en la tienda.
Puede presentar imágenes de cartera de manera digerible. Si eres fotógrafo, diseñador gráfico o artista, una diapositiva es perfecta para presentar los últimos trabajos sin una gran galería.
Por supuesto, hay algunas desventajas:
Puedo ralentizar su sitio. Los grandes tamaños de archivos de imagen que no están optimizados para la velocidad pueden causar un retraso durante la carga.
Se pueden confundir. Las diapositivas generalmente tienen varias ofertas simultáneamente, no todas son aplicables a un visitante del sitio web. Presentar a alguien con demasiadas opciones puede ser menos efectivo que tener una sola oferta, estática. No siempre son excelentes para dispositivos móviles. La diapositiva que elija debe ser receptiva y verse bien en computadoras de escritorio, tabletas y teléfonos. De lo contrario, puede crear una experiencia de usuario ineficiente.
No son necesariamente la mejor manera de generar clics. De hecho, muy pocos visitantes del sitio web generalmente hacen clic en una diapositiva y casi todos los clics aparecen en la primera diapositiva.
En resumen, no use una diapositiva solo para tener una. Asegúrese de que tenga un propósito específico y esté dispuesto a cambiar las cosas en función de su análisis y considere qué aspecto y formato son los mejores para su público y contenido.
Cómo crear un control deslizante con WooCommerce para crear una diapositiva, el mejor lugar para comenzar es con un complemento. Hay una variedad de opciones para WordPress y WooCommerce, ya que, ya que tarda el tiempo en que comprenda cada una que considere. Aquí hay algunas preguntas para hacerte:
¿Tiene la funcionalidad que necesita? Asegúrese de poder mostrar el contenido deseado: productos, publicaciones de blog, imágenes, videos, etc. Además, piense en si desea agregar animación, botones, texto u otras características a la diapositiva.
¿Cuánto cuesta? ¿El complemento está libre o pagado? ¿Hay alguna tarifa de plantilla adicional? ¿Se renueva anualmente o es una inversión única?
¿Qué tan fácil es usar? Algunos complementos deslizantes tienen muchas campanas y silbatos, pero tienen una curva de aprendizaje empinada o requieren conocimiento de desarrollo. ¿Están bien en dispositivos de todos los tamaños? Por supuesto, desea que su control deslizante se vea genial para todos los visitantes de su sitio, ya sea que usen un escritorio, tableta o teléfono. Asegúrese de que el complemento que elija se redifunde automáticamente para dispositivos móviles sin requerir CSS complicado.
¿Está optimizado para la velocidad? ¿Considera la velocidad de los desarrolladores de arado? ¿Se cargan rápidamente las demostraciones y muestras con controles deslizantes? Leer reseñas y listas de características es una excelente manera de averiguarlo.
¿Tiene buenas críticas? Verifique las evaluaciones del complemento. ¿Les gustan las personas y cuáles son sus quejas más comunes?
¿Está bien compatible? ¿Hay algún foros de asistencia o un sistema de boletos? Si elige una opción premium, ¿cuánto tiempo se incluye la ayuda? ¿Se actualiza regularmente para trabajar con la última versión de WordPress?
Para obtener más detalles, lea esta guía de Jetpack sobre la elección de los mejores complementos de WordPress.
Para un control deslizante simple y eficiente que funcione, recomendamos la extensión de WooSlider. Ha sido desarrollado por WooCommerce, especialmente para las tiendas en línea y cuenta con el apoyo de un apoyo inigualable de nuestros ingenieros de felicidad.
Para crear una diapositiva con la extensión de WooSlider:
Compre la extensión, luego instálela y activela en su tienda.

Navegue a la presentación → Configuración y elija las opciones de deslizamiento. Hay varias categorías:
Configuración general: elija la animación predeterminada, la dirección de la diapositiva, la velocidad de la diapositiva y la velocidad de animación. Asegúrese de que el control deslizante pase lo suficientemente lento, para que los visitantes del sitio puedan absorber su contenido. Control Diseño: dictar cómo los visitantes del sitio pueden controlar su control deslizante. Agregue botones de reproducción/descanso, navegación de teclado, flechas anteriores/siguientes y más.
Configuración: personalice el texto para cada uno de los botones deslizantes.
Seleccione un tipo de presentación de diapositivas y elija su configuración. Hay varias opciones:
Imágenes adjuntas: Mostrar imágenes adjuntas a la página o publicación específica a la que agrega el control deslizante.
Publicaciones: Muestra las últimas publicaciones de blog en su sitio.
Diapositivas: presente diapositivas personalizadas con las imágenes que crea.
Productos: Cargue productos recientes, presentados o de stock. Tenga en cuenta que también necesitará la presentación de diapositivas de los productos WooCommerce para activar esta opción.
Agregue el control deslizante a su sitio. Puede hacerlo con un código corto, un widget o un cambio del archivo de plantilla.
Para obtener más detalles, incluida la información sobre la creación de diapositivas, lea nuestra documentación.
Si desea aún más control sobre su diapositiva, junto con la posibilidad de agregar botones y texto personalizados, le recomendamos que pruebe la imagen deslizante y la extensión de video. Todavía es muy fácil de configurar, pero agrega características adicionales que pueden ser útiles dependiendo de sus necesidades. Cómo crear imágenes deslizantes atractivas para diseñar sus diapositivas, recomendamos usar una herramienta de edición de fotos como Photoshop o Canva. O bien, puede construir las diapositivas directamente en el complemento con el que trabaja. Aquí hay algunas buenas prácticas para diseñar diapositivas atractivas: comience con imágenes de alta calidad, la base de la diapositiva debe ser una imagen de calidad. Asegúrese de que el sujeto esté enfocado y que nada no esté claro. Si la diapositiva es entera, asegúrese de que las imágenes sean lo suficientemente grandes como para llenar el espacio, incluso en pantallas grandes. Y no se preocupe, no necesariamente tiene que contratar a un profesional para obtener excelentes fotos. Aquí le mostramos cómo tomar excelentes fotos de los productos por su cuenta. Sea creativo para colocar el contenido si agrega texto y botones a la diapositiva, considere la extensión más allá de la alineación central típica. Aunque esta es la elección correcta en algunos casos, la imagen de la colocación de contenido en la imagen izquierda o derecha (¡o tercera!) Puede hacer partes importantes de la imagen.
https://mystore.msi.com/ Varía colocar el texto en cada diapositiva. Y no solo que las imágenes de la imagen atraerán la atención de los visitantes de su sitio, sino que pueden determinar y sentir una cierta emoción. Por ejemplo, si alguien ve a una persona sonriendo, es más probable que asocie emociones positivas con su marca. Entonces, si tiene fotos con personas felices que usan sus productos, ¡preséntelos en diapositivas! Elija las fuentes y colores correctos al seleccionar fuentes y colores para la diapositiva, comience por asegurarse de que coincidan con su marca y el diseño de su sitio. Luego asegúrese de que sean fáciles de leer. Elija fuentes suficientemente grandes y audaces. Pero considere cómo funciona por encima de su imagen. Hay varias formas en que puede hacer que las fuentes se destacen a la imagen de fondo:
Oscuridad o ilumina la imagen. Si el tema de la imagen en sí no es súper importante (tal vez sea una textura o modelo), entonces esta podría ser una gran opción. Agregue una superposición oscura a la imagen, luego use texto blanco en la parte superior. O use una superposición blanca con texto oscuro.
Usa espacio en blanco. Cuando las cosas están llenas, es difícil para algo destacar. Al hacer del texto el único espectáculo en la ciudad, atraerá mucha más atención. El espacio en blanco es un área sin imagen de una imagen, donde nada es importante. Al agregar texto a esta área, brinde tanto la imagen como el texto la atención que merece.
Agregue un color detrás del texto. Un fondo colorido detrás de sus palabras, piense en el negro o el azul detrás del texto blanco o gris claro o rosa detrás del texto negro, también puede hacer el truco. Elija un color de fuente en negrita. Dependiendo de la imagen, un color brillante del texto podría ser suficiente para que las personas lean fácilmente sus palabras.


Usa una sombra. Una pequeña sombra puede hacer que las fuentes aparezcan desde el fondo de la imagen.
Esta diapositiva de https://yourbenefitstore.com/ tiene texto sobre el espacio de ladrillo blanco. Lo más importante es que hay suficiente contraste de color entre su texto y el resto de la diapositiva. Esto mejora la experiencia visual para todos, incluidas personas con daltonismo o deficiencias de la visión. El verificador de contraste de Webaim es una excelente manera de evaluar sus diapositivas.
Consejos para la conversión con una diapositiva El propósito de un control deslizante no siempre es hacer una venta. Podría ser informar a los visitantes del sitio o presentar su trabajo, por ejemplo. Pero si desea convertir, aquí hay algunas cosas para recordar: elija un buen impulso de tomar medidas no tomará medidas a menos que les pida que lo hagan. Por lo tanto, asegúrese de agregar un botón u otro enlace visible a las diapositivas con texto claro y activo, lo que les dice a los visitantes al sitio lo que desea hacer. Aquí hay unos ejemplos:
Compre nuestra venta anual
Obtenga la guía de café gratis
Únase a nuestra lista de correo electrónico para obtener descuentos exclusivos
Obtenga más información sobre nuestro proceso

CTA también debe destacarse al resto de la diapositiva con un color brillante, un texto de fuente diferente o aldine. Use una navegación transparente. más. ¡Eso significa que no debe configurar el control deslizante para que pase automáticamente! En su lugar, use flechas, números o marcadores de navegación visibles e incluya un botón de descanso. No seas demasiado complicado, definitivamente puede ser divertido para jugar con animaciones únicas, colores vibrantes y efectos visuales ordenados. Pero en casi todos los casos, es más fácil. El control deslizante aún puede ser divertido, pero reducirlo, de modo que el mensaje que realmente desea brillar.
Recuerde que una accesibilidad accesible, un control deslizante accesible es fácil de usar para todos, incluidos aquellos con discapacidades físicas o mentales. Un buen comienzo es asegurarse de que tenga un contraste de color adecuado, que discutimos anteriormente. Pero también debe asegurarse de agregar texto alternativo para cada imagen, asegúrese de que el control deslizante funcione bien en dispositivos móviles y active la navegación del teclado. Obtenga más información sobre la accesibilidad del comercio electrónico. Elija mensajes concisos que no desea agregar párrafos de texto a las diapositivas: ¡nadie dejará de leer todo! En su lugar, indique su punto de vista de manera clara y concisa, en la menor cantidad de palabras posible.
Joe Coffee anuncia la aplicación de recompensa gratuita en solo unas pocas palabras cómo optimizar una diapositiva de velocidad como mencioné anteriormente, las diapositivas pueden ser pesadas y ralentizar su sitio. Es importante minimizar esto lo más posible. Además de elegir un enchufe deslizante que priorice la velocidad, aquí hay algunos pasos que puede seguir: use la imagen de tamaño más pequeño. Si el control deslizante se establece en 1500 píxeles de ancho, no use una imagen de ancho de 6000 píxeles. En su lugar, cambie el tamaño para que se ajuste exactamente en la caja que está tratando de llenar.
Comprima tus imágenes antes de cargarlas. Use un instrumento como ImageOptim para reducir el tamaño del archivo de imagen antes de agregarlo a su biblioteca de medios.
No agregue demasiadas características brillantes. Muchas animaciones, transiciones brillantes y otros extras no distraen solo la atención, pero pueden ralentizar las cosas. Recuerde: Simple suele ser el mejor.
Organice sus videos fuera del sitio. Si el control deslizante lo acepta, incorpore los videos que desee usar desde YouTube o Vimeo, en lugar de almacenarlos en su sitio web. Los videos son muy pesados ​​y pueden ralentizar su sitio.
Active la configuración de velocidad específica del arado. Muchos complementos deslizantes proporcionan funciones de optimización de velocidad que simplemente tiene que activar. Buscando cosas como la carga perezosa, el almacenamiento en caché y minimización.
Use una imagen CDN.Un CDN para tiendas de imágenes y entrega sus imágenes fuera del sitio en servidores súper rápidos.Jetpack tiene un CDN de WordPress gratuito que lo cambiará de tamaño y imágenes para dispositivos móviles, haciéndolos relámpagos en teléfonos y tabletas. Tenga cuidado e intencionalmente cuando agregue una diapositiva a su tienda de WooCommerce, tómese el tiempo para hacerlo correctamente.Piense en lo que desea presentar, a quién desea llegar y cómo puede optimizar su control deslizante especial para estas personas.¿Tiene una diapositiva efectiva en su sitio?¡Distribuirlo en los comentarios!