¿Sabía usted que un sitio web intuitivo y fácil de usar es probable que aumente las tasas de conversión? Por eso la UX o experiencia del usuario juega un papel tan importante en la actualidad. Para ello, los deslizadores son herramientas útiles tanto para la navegación como, sobre todo, para causar una buena primera impresión a los visitantes. Por lo tanto, este artículo tratará de un elemento esencial de la página de inicio: un Silder que, en la mayoría de los casos, se encuentra justo después del menú de navegación. De hecho, es la segunda parte, después del menú de navegación, con la que los visitantes entran en contacto y su impacto en la decisión de continuar la visita es grande. Por lo tanto, no debe descuidar su creación y le guiaré «paso a paso» durante todo el proceso. Además, no dude en consultar el vídeo que acompaña a este artículo y que apoya los pasos descritos en él.
La corredera de la revolución
Table des matières
Hoy le presento en mi vídeo
cómo crear y configurar un deslizador de revolución. Lo voy a hacer como parte de la creación de mi sitio web para mi agencia de SEO Twaino:¿Qué es una revolución deslizante?
Un deslizador es una funcionalidad que le permite mostrar varias informaciones en bucle o no. Esta información puede estar compuesta por texto, imágenes, vídeos, enlaces, etc. y se agrupa por «diapositivas».
Así, un deslizador puede incluir una o varias diapositivas cuyos elementos multimedia pueden ser animados o interactivos para reaccionar a las acciones del usuario.
Hay varias herramientas disponibles para crear un deslizador, pero en esta guía utilizaremos «Slider Revolution». En realidad, se trata de un plugin premium de WordPress muy potente y popular, con más de 4 millones de usuarios. Este plugin está integrado en el tema Avada de forma gratuita al adquirirlo.
Las diferentes opciones de deslizamiento
Hay varios estilos de correderas entre los que elegir y principalmente hay tres. Tenga en cuenta que la elección de uno u otro depende en gran medida de los productos o servicios que quiera mostrar en su sitio.
Imagen con texto superpuesto
Por lo general, este estilo de deslizador incluye elementos visuales que combinan una imagen grande, un mensaje claro y conciso y una llamada a la acción. Es el estilo más común, ya que le permite mantener la información esencial que desea destacar.
Por lo tanto, es muy adecuado para un sitio web que quiera presentar un producto o servicio emblemático, o que esté haciendo una oferta o promoción limitada en el tiempo.
Personalmente, prefiero este tipo de deslizador, que es muy económico en términos de recursos y por lo tanto le permite tener un sitio web rápido y eficiente.
La presentación de diapositivas o carrusel
Muchos sitios web optan por este estilo, que tiene cierto dinamismo. Por lo tanto, es muy fácil pensar que es la mejor opción para ofrecer a los usuarios una bonita interfaz. Además, esta opción ofrece la posibilidad de poder destacar varias informaciones.
Por otro lado, las cifras muestran que no es la solución ideal, ya que apenas un 1% de los usuarios hace clic en las presentaciones o carruseles. Esta observación se hizo tras un estudio sobre la Universidad de ND basado en 3.755.297 visitas a la página de inicio.
Además, el 89,1% de los que hicieron clic lo hicieron sólo en la primera página. Estas estadísticas indican que el carrusel no es la mejor opción para aumentar las conversiones.
Por lo tanto, le recomiendo que sólo lo elija si lo encuentra relevante para su sitio web y para lo que quiere destacar. Para tener éxito, elija un máximo de tres diapositivas y procure clasificarlas según su prioridad.
Además, elija un carrusel de desplazamiento manual para que los usuarios tengan la opción de desplazar o no sus diapositivas. Pero no espere que los usuarios estén realmente interesados en las últimas diapositivas.
Vídeo
Esta opción es cada vez más popular porque, a diferencia de los pases de diapositivas, los vídeos crean un impacto muy fuerte inmediatamente y tienen una tasa de conversión mucho mayor. Por ello, cada vez más empresas eligen esta opción para destacar un producto innovador y sofisticado o una oferta especial. Es probable que esto atraiga rápidamente el interés de los visitantes.
Para ello, debe asegurarse de que tiene una secuencia de vídeo que encaja perfectamente con su marca y es de calidad profesional. No dude en recurrir a un fotógrafo que domine los vídeos o aprenda a hacerlo usted mismo.
Mejores prácticas para crear un buen Slider Revolution
Tenga en cuenta que debe destacar los puntos más relevantes al diseñar su página de inicio, ya que la capacidad de atención de los usuarios es muy limitada. Sea cual sea su objetivo, debe utilizar su silenciador para dirigir su atención después de que aterricen en su sitio web.
Elija los elementos visuales adecuados
Casi todos los sitios web utilizan imágenes, ilustraciones o vídeos para comunicar lo que ofrecen de forma visual. Debe asegurarse de que los elementos visuales que utilice para el diseño de su deslizador hagan exactamente eso y que sean de alta calidad.
Para ello, le sugiero que no se limite a la belleza de sus elementos visuales, sino que los elija porque representan lo que quiere que los visitantes comprendan de un vistazo cuando lleguen a su sitio web.
Información sobre límites y animaciones
No confunda a los visitantes sobrecargando su deslizador con mucha información. Si están confundidos, pueden abandonar rápidamente su sitio web. Por ello, prefiera un mensaje claro y preciso con un botón que llame a la acción.
Le sugiero que se tome el tiempo necesario para pensar cuidadosamente e identificar los mensajes más relevantes para su negocio. Además, tenga en cuenta que, así como mucha información puede alejar a la gente, muy poca información puede tener a veces el mismo resultado.
En efecto, demasiado espacio libre sin elementos visuales y sin un mensaje fuerte no atrae el interés de los visitantes que pueden abandonar su sitio web.
Por otro lado, le recomiendo que haga un uso razonable de las animaciones de su silder y que no abuse de ellas para que los visitantes puedan encontrar rápidamente lo que buscan en su sitio.
Creación de una resolución paso a paso Slider
Dado el modelo de mi sitio web que tuve la oportunidad de crear, tuve la oportunidad de mostrarle en mi último artículo cómo crear un menú de navegación. A continuación, voy a crear un slider de revolución en la página de inicio que incluirá sólo el menú.
Para ello, utilizaremos el plugin Slider Revolution, que ofrece una serie de opciones para crear sliders. Sin embargo, me gustaría advertirle que no es fácil de usar y que se necesita práctica para orientarse rápidamente.
Hay cuatro pasos principales para crear un deslizador:
- Elección de la ubicación del deslizador y realización de las configuraciones;
- Configuración de los elementos visuales: color de fondo, textos, botones, imágenes;
- Cambiar el tamaño del deslizador;
- Optimización del deslizador para diferentes medios.
Acceda a la cuenta «Admin» de su sitio
Antes de empezar a crear el deslizador, debe iniciar sesión en la cuenta de administrador de su sitio web. Para ello, simplemente añada «…./wp-admin» a la URL de su sitio web. En la interfaz que aparece, rellene las casillas con sus identificadores y valide para acceder al «Tablero» de WordPress.
Elija la ubicación del deslizador y realice las configuraciones
1) Cambiar la página de inicio
Una vez que haya accedido a su Dashboard, iré a la página de inicio de mi sitio Twaino.com, ya que es ahí donde quiero integrar mi deslizador
A continuación, haga clic en la ventana «Editar página» con el icono del lápiz en la parte superior, justo después de «+ Crear».
En la interfaz que aparece, bajo el epígrafe «Constructor» de «Fusion Builder», tiene el «Slider Revolution» que le permitirá insertar su Slider. Tenga en cuenta que puede añadir deslizadores a algunas o a todas sus páginas en función de sus necesidades.
Si tiene varios deslizadores en diferentes páginas, puede acceder a todos ellos directamente yendo a la sección «Slider Revolution» de la barra lateral izquierda del panel de control y haciendo clic en la opción con el mismo nombre.
2) Vaya a la interfaz de configuración del deslizador
En la sección «Builder» etiquetada como «Slider Revolution», haga clic en el botón azul «Edit Slider» para entrar en el área de configuración del deslizador.
La página que aparece ofrece las opciones en la ventana etiquetada como «Param. Deslizador», haga clic en la primera ventana de la izquierda «Todos los deslizadores».
3) Duplicar la seda por defecto
Para agilizar las cosas, le recomiendo duplicar el deslizador predeterminado para realizar los cambios necesarios. No sólo ahorrará tiempo, sino que también evitará perderse en los diferentes ajustes de la herramienta.
Para ello, pulse la flecha hacia abajo junto al nombre de su deslizador, el mío se llama «1# avada-seo-hero».
A continuación, seleccione la opción «Duplicar» para tener una copia del deslizador.
Introduzca el título del deslizador duplicado en el cuadro de diálogo que aparece, yo introduzco «Twaino Home Page».
A continuación, pulse el botón «Duplicar» para validar la duplicación.
4) La interfaz de configuración del deslizador
Una vez completada la duplicación, haga clic en la copia que acaba de hacer para realizar los cambios. En la interfaz de configuración, verá en la primera posición el número de diapositivas, yo tengo tres a mi nivel.
En la segunda posición, hay diferentes opciones:
- Fondo / Imagen principal;
- URL externa
- Transparente ;
- Colorido ;
- Vídeo de YouTube ;
- Vídeo de Vimeo ;
- Vídeo HTML5.
Estas diferentes opciones le permiten elegir el tipo de visual que desea colocar en la diapositiva. En mi nivel, está seleccionado «Coloreado» y al modificarlo, observo que el fondo de mi primera diapositiva cambia de color.
En la tercera posición, hay una proyección de la diapositiva que muestra directamente su aspecto después de cada modificación. Justo debajo, están los ajustes de los diferentes elementos que se ordenarán según sus necesidades y el tiempo que desee.
Si pulsa el botón «Reproducir», obtendrá una vista previa de las animaciones configuradas. Puede cambiar los tiempos al segundo a voluntad, pero personalmente decido no hacerlo ahora porque es un ajuste que requiere mucho tiempo para configurarlo correctamente.
5) Eliminar las diapositivas innecesarias
A mi nivel, tengo tres diapositivas cuando sólo quiero tener una y para ello, borraré las dos últimas.
Para ello, vaya a las diapositivas en cuestión y arrastre hacia abajo para elegir «Eliminar» en el menú desplegable.
Luego puede guardar yendo y haciendo clic en el botón verde con el icono de guardar. Le sugiero que guarde a menudo para validar sus cambios.
En cuanto al siguiente paso, ya tengo la maqueta de mi sitio web que me muestra el resultado que quiero conseguir. Sólo tengo que utilizarlo para obtener el resultado final y le aconsejo encarecidamente que haga lo mismo.
Configuración de los elementos visuales: color de fondo, textos, botones, imagen
1) Cambiar el color de fondo
Para ello, copiaré el código de color que quiero utilizar directamente en Adobe Illustrator
Si también tiene la maqueta de su página web y no sabe necesariamente el código de colores que quiere utilizar, pregúntele a su diseñador gráfico. Este código suele estar compuesto por 6 caracteres que incluyen números y letras.
A continuación, haga clic en la zona coloreada de la opción «Coloreado» que mencioné en el punto 4. Aquí puede elegir un color sólido o un gradiente de color, según sus deseos y necesidades.
Se trata de un degradado de dos colores a mi nivel, así que selecciono «Color del degradado» y hago doble clic en cada flecha de la parte inferior del degradado para insertar mis códigos de color.
2) Insertar texto en la diapositiva
A continuación quiero insertar el texto «¿Quiere aumentar su tráfico orgánico?» en la diapositiva. Para ello, haga clic en el texto por defecto que es «Proporcionamos los mejores servicios de Seo».
Observará que la misma prueba aparece en un rectángulo negro en la parte superior y que el texto de la diapositiva está enmarcado, lo que demuestra que puedo modificarlo.
Así que copie su texto y péguelo en el rectángulo negro en lugar del otro texto. Observará que su texto aparece ahora en la diapositiva.
Si ve la palabra
«», debe saber que se trata de una etiqueta que le permite ir ala línea.
En el rectángulo negro, tengo mi texto que tiene el siguiente aspecto:
«¿Quiere aumentar su tráfico orgánico?
Pero que se ve como quiero en la diapositiva:
«¿Quiere aumentar su tráfico orgánico?
su tráfico orgánico?
Cuando haga clic en el texto, verá que hay opciones de texto que aparecen en la parte superior del campo de configuración. Para cambiar el tipo de letra de este texto, introduzca el nombre de la fuente que desee en la casilla correspondiente. En mi caso introduzco «Gudea» en lugar de «Source sans pro».
Cambie también el tamaño a su gusto, yo lo puse en «55» para este texto. Hago lo mismo para añadir el segundo texto «Descubra nuestra metodología, y nuestros consejos para aumentar su visibilidad». Sólo que esta vez la fuente es «Dosis» y el tamaño es «25».
3) Modificar los botones de la diapositiva
3-1) Modificar el texto y dar al botón su primer color
Para modificar los botones de la diapositiva, debe proceder en dos pasos:
- Sustituya el texto;
- Cambie el color del botón.
Para el primer paso, debe hacer clic en el texto del botón. Encontrará el rectángulo negro con el texto por defecto. Lo cambio escribiendo «BLOG» en su lugar y para el segundo botón «SERVICIOS».
Para obtener el color exacto que aparece en la plantilla, copie el código de la misma. A continuación, haga clic en el propio botón y tendrá varias opciones en la parte superior del campo, una de las cuales es «Fondo», situada a la derecha de «Fuente». Selecciónelo y elija el color que desee o pegue el código para tener un color determinado.
También aprovecho para cambiar la fuente y el tamaño del texto en el menú de la parte superior del «Fondo», con «Gudea» como carácter y «15» como tamaño.
3-2) Dar un segundo color interactivo a los botones de deslizamiento
Después de haber dado un color a los botones, voy a añadir un segundo que se mostrará cuando un usuario pase el ratón por encima del botón. Para ello, vaya a «Visión general», que se encuentra en la misma línea que «Fondo» y completamente a la derecha.
A continuación, tendrá el menú «Visión general», que también incluye «Fuente», «Fondo» y otras opciones. A continuación, haga clic en «Fondo» y «Color» para elegir el tipo de color que desea. También puede cambiar el tipo de letra del texto, como hice yo con el mío.
A continuación, vuelva al menú «Idle», que está justo al lado de «Overview», para volver a los ajustes anteriores.
Guarde los cambios y cuando pase por encima del botón verá que sí cambia de color.
Después, hago exactamente lo mismo con el segundo botón «SERVICIOS».
4) Cambie la imagen de su diapositiva
Para cambiar la imagen, basta con hacer doble clic en la imagen predeterminada para acceder a la «Biblioteca de medios».
A continuación, pulse «Cargar archivos», lo que le permitirá cargar su imagen con la opción «Seleccionar archivos».
Así que importo mi imagen y me encargo de ponerle un nombre.
Tenga en cuenta que, de antemano, miré el tamaño de la imagen por defecto para adaptar el tamaño de la mía. Para ello, puede ir a la sección «Medios» de la barra lateral izquierda del tablero de mandos y luego a «Biblioteca».
Esto le dará una galería de todas las imágenes del sitio web y todo lo que tiene que hacer es buscar la imagen en cuestión y luego hacer clic en ella para ver sus detalles.
Para el mío, tengo las dimensiones 613 x 650 píxeles.
5) Vincule el nuevo deslizador a la página correcta
Los cambios anteriores no aparecerán directamente en su página de inicio cuando vaya a ella. Para ver su aspecto, asocie el deslizador que acaba de crear con la página de inicio en cuestión.
En primer lugar, vaya a la página de inicio y haga clic en la ventana «Editar página» con el icono del lápiz en la parte superior.
A continuación, tiene la configuración de Fusion Builder y desplácese hasta el menú «Sliders» en «Opciones de Fusion Slider»
Haga clic en la barra desplegable «Seleccionar Slider Revolution Slider» y seleccione el nombre de su tema. Elijo «Página de inicio de Twaino (#4)» y hago clic en el botón azul «Actualizar» de la esquina inferior derecha para guardar el cambio.
Haga clic directamente en «Vista previa», que se encuentra junto a «Actualizar», para ver el aspecto de la página de inicio.
Tengo en cuenta los cambios a mi nivel, pero mi deslizador tiene mucho espacio innecesario que voy a reducir.
Cambiar el tamaño del deslizador
1) Reducir el tamaño de la diapositiva
Vaya a la sección «Slider Revolution» en la barra lateral del panel de control y luego a la sección «Param. Ventana «Slider».
A continuación, dispondrá de diferentes configuraciones que incluyen :
- Fuente Centent ;
- Título del deslizador y código corto;
- Seleccione un tipo de deslizador;
- Disposición del deslizador ;
- Personalizar, construir e implementar;
El ajuste «Seleccionar tipo de deslizador» le permite tener el tipo de deslizador que desee. Elijo el deslizador que no tiene una flecha de «Escena de héroe» para tener mi única diapositiva.
El parámetro «Disposición del deslizador» le permite modificar el tamaño de la diapositiva.
En primer lugar, está el diseño «Full Width», que ya me viene muy bien. Justo en la parte inferior están las dimensiones que voy a cambiar, pero necesito saber al menos el ancho de mi sitio web para hacerlo.
Para saber cuál es esa anchura, vaya a las opciones de su tema.
Así que hago clic en «Avada» y luego en «opciones del tema» y en «Diseño» encontrará «Ancho del sitio» que es el ancho de su sitio web.
Copie la dimensión que encuentra justo delante de la opción «Site Width», la mía es «1260 px».
A continuación, simplemente péguelo en el parámetro «Diseño del deslizador» y precisamente en el primer rectángulo justo debajo del diseño de la pantalla del ordenador con las palabras «Escritorio grande».
También disminuya la altura de la diapositiva, por lo que cambio el valor por defecto «820 px» a «600 px». Hago lo mismo con la pantalla de la derecha marcada como «Portátil», teniendo cuidado de pegar el ancho en la casilla correspondiente y de escribir «600 px» en la segunda casilla.
Tenga en cuenta que puede cambiar estas dimensiones en cualquier momento para adaptarse a usted. A continuación, guarde los cambios para validarlos y, una vez en la página de inicio, veo que se han tenido en cuenta las nuevas dimensiones.
Sin embargo, ahora tiene que reenfocar los textos y la imagen de la diapositiva.
2) Vuelva a centrar el contenido de su silbato
Vaya a la sección «Slider Revolution» en la barra lateral del tablero y luego a la ventana «Slide Editor». En este punto, simplemente haga clic en cada elemento y muévalo hacia arriba.
Guarde esta modificación y vaya a la página de inicio para apreciar el resultado.
Le aconsejo que vaya y venga varias veces si es necesario para conseguir el ajuste correcto.
Tenga en cuenta que esto es para una pantalla grande y que la presentación puede diferir de un medio a otro.
Optimización del deslizador para diferentes medios
Los deslizadores no se muestran de la misma manera en los ordenadores que en los móviles o tabletas. Para ello, diríjase a la ventana «Editor de diapositivas» de «Slider Revolution» y, una vez en el campo de configuración, encontrará tres iconos en la parte superior derecha, que simbolizan el escritorio, el portátil y el teléfono móvil.
Haga clic en cada uno de estos iconos para ver cómo se ve su sitio web en estos diferentes medios. En mi caso, el primero muestra bien mi sitio web, a diferencia de los dos últimos iconos en los que el contenido no está centrado y algunas partes de los textos están cortadas.
1- Optimizar la pantalla de un portátil
Para volver a centrar el contenido de su diapositiva en el portátil, haga clic en el icono en cuestión y desplace hacia arriba cada elemento como en el paso anterior.
También puede cambiar el tamaño del texto si lo desea.
Sin embargo, tenga en cuenta que estos cambios no afectan en absoluto a los otros tipos de visualización.
2- Optimizar la visualización en los teléfonos móviles
En el caso de los teléfonos móviles, haga clic en el icono correspondiente para proceder a la optimización.
Observo que hay dos líneas que enmarcan mi deslizador.
De hecho, delimitan el área de visualización y cualquier elemento que esté fuera de ellas no aparece en el soporte.
Para ello, reduzco el tamaño de mi texto desbordado y aumento el tamaño de mi segundo texto. Le recomiendo que haga los botones un poco más grandes y para ello, haga clic en cada uno de ellos para obtener las diferentes opciones que están justo en la parte superior del campo de configuración.
Así que cambie el tamaño del texto después de estirar el botón. Recuerde también centrar el texto haciendo clic en la flecha del botón azul «Estilo» de la esquina superior izquierda y luego en la ventana «Espacio».
A continuación, pulse el menú desplegable «Heredar» y elija «Centrar».
Por otro lado, también está la imagen que voy a volver a centrar, teniendo cuidado de reducir un poco su tamaño para que encaje bien.
Guardo los cambios y al minimizar mi navegador para simular la visualización de mi sitio en un teléfono móvil, veo que todo está bien.
Compruebe los cambios una última vez
Este último paso consiste en comprobar la visualización final de su sitio web en todos los soportes para ver cómo queda. Para ello, no dude en utilizar también su smartphone, así como su tableta y cualquier otro tipo de soporte para realizar la comprobación.
¡Eso es! Acabamos de terminar de crear el deslizador de la página de inicio.
En otro artículo, le mostraré cómo asociar los botones del deslizador con URLs o páginas específicas para facilitar la navegación.
Conclusión
Después de crear el menú de navegación de un sitio web, el siguiente paso suele ser crear un deslizador para su página de inicio. Y como ya he mencionado, tiene varias opciones en cuanto a elementos visuales, incluyendo imágenes fijas, presentaciones de diapositivas y vídeos. Sin embargo, debe elegir un deslizador que combine un buen diseño con una velocidad de carga extremadamente rápida. Por la sencilla razón de que el deslizador es uno de los primeros elementos que se presentarán a los visitantes y que tiene un gran impacto en su decisión de seguir o no navegando por su sitio web. Por lo tanto, le sugiero que utilice Slider Revolution que es una herramienta poderosa y eficiente, pero que puede ser bastante compleja de usar y consumir mucho tiempo. Espero que los pasos presentados anteriormente le ayuden mucho para que sea mucho más rápido con la herramienta.
¡Hasta pronto!
