Slider Revolution: la guía definitiva

Slider Revolution es literalmente uno de los complementos de WordPress más populares en la actualidad. Con más de 400 mil ventas y una calificación promedio de 4.75, el complemento ha demostrado su eficacia y grandeza.

Revolution Slider: lo que hace que el complemento sea tan bueno

Slider Revolution fue desarrollado por Themepunch. Este complemento es un constructor para crear contenido rico y dinámico para páginas web. El énfasis está en "dinámico", ya que le permite crear diapositivas emocionantes que agregan movimiento a las páginas.

El complemento se suministra con un constructor fácil de usar y toneladas de opciones. Los paquetes de configuraciones bien elaborados permiten al usuario ajustar cada detalle del control deslizante y permite trabajar con tipos de contenido absolutamente diferentes. Se pueden crear controles deslizantes para publicaciones separadas, para páginas completas y sus partes pequeñas. Para ser más precisos con el plugin puedes crear:

• deslizadores de imágenes y carruseles
• controles deslizantes de publicaciones destacadas
• fuentes de redes sociales
• galerías de medios
• bloques de héroes y portadas

Razones por las que deberías usar Slider Revolution con tu sitio web

No puedes equivocarte con Slider Revolution. Un complemento completo con herramientas fáciles de usar es una solución perfecta para crear hermosos controles deslizantes, y estas son las razones por las cuales.

Complemento incluido

Hoy en día, casi todos los temas de WordPress vienen con un complemento Slider Revolution. Por lo general, el paquete de temas incluye la versión gratuita del complemento. El complemento incluido se limita a características muy básicas, pero aún así, es muy conveniente obtener el tema junto con el generador de controles deslizantes.

Sin embargo, si desea acceder a muchas de las funciones del complemento, tiene la opción de comprar el complemento independiente. La licencia regular le costará $29 y puede obtenerla en el mercado de Codecanyon.

Para la licencia extendida, deberá pagar alrededor de $ 150 y obtener un año de soporte técnico por solo $ 9.

Sí, el complemento puede costarle algo de dinero, pero aún puede crear excelentes controles deslizantes incluso con la licencia normal del complemento.

Plantillas

El increíble complemento no solo lo impresionará con las herramientas y funciones, sino que también tiene una colección de atractivos diseños prefabricados. Una maravillosa colección de plantillas prefabricadas y la biblioteca de objetos multimedia gratuitos que puede usar en su diapositiva simplificarán y acelerarán la creación de diapositivas. Puede seleccionar la plantilla para cualquier proyecto suyo y, en lugar de crear un control deslizante desde cero, puede ahorrarse tiempo y continuar con el diseño preconstruido.

Simplemente importe la plantilla que eligió y comience a crear de inmediato.

Además de esto, obtendrá acceso a la gran biblioteca gratuita de diferentes objetos, como iconos de fuentes, imágenes de fondo, objetos PNG transparentes, SVG y otros. Puede usarlos e insertarlos fácilmente en sus diapositivas.

editor visual

Slider Revolution se suministra con un sorprendente editor WYSIWYG que hace que sea muy sencillo crear y modificar plantillas de control deslizante. A muchos propietarios de sitios web les resulta difícil escribir códigos complejos o contratar un equipo independiente para esa tarea. Gracias al editor de diapositivas, puede ahorrar tiempo y disfrutar de la función de arrastrar y soltar para crear diapositivas excepcionales.

El complemento de control deslizante le permite ser más creativo con los controles deslizantes que crea y presentarlos fácilmente en su sitio web. Tendrá toneladas de opciones personalizadas, como crear una ubicación personalizada del control deslizante, elegir el retraso del control deslizante, agregar transiciones, agregar capas de medios, etc. esto se puede hacer en poco tiempo usando la lista desplegable. Además, el complemento tiene muchas funciones de navegación que le permiten cambiar el estilo de navegación y agregar flechas, viñetas, pestañas y miniaturas.

Rendimiento de alta velocidad

Slider Revolution está bien codificado para cargar rápido. Todos los aspectos de los controles deslizantes están optimizados y utiliza opciones de depuración avanzadas para abordar cualquier problema, carga archivos principales automáticamente y escala con las funciones utilizadas. También emplea carga diferida inteligente y está optimizado para SEO.

Diseños receptivos

Uno de los mayores problemas que experimentan muchos desarrolladores web es que los controles deslizantes carecen de capacidad de respuesta. Como resultado, esos controles deslizantes no funcionan bien en dispositivos pequeños o no se muestran en absoluto. La capacidad de respuesta es un componente esencial de la experiencia del usuario. Con la gran cantidad de tráfico que proviene de los móviles, será una pena que tus controles deslizantes no funcionen bien en otros dispositivos.

Slider Revolution no es solo un simple control deslizante. El complemento está listo para responder, por lo que, independientemente de las diapositivas que cree, puede estar seguro de que se optimizarán para cualquier dispositivo en el que se utilicen.

Slider Revolution se ha asegurado de establecer los puntos de interrupción de respuesta para cada control deslizante, lo que hace que cualquier diseño se vea genial en diferentes dispositivos y pantallas pequeñas. Cualquiera que sea la opción que elija: control deslizante simple, carrusel o estándar, puede estar seguro de que se ve perfecto en cualquier dispositivo.

Opciones de personalización

Otra ventaja del complemento Slider Revolution son sus diversas opciones de personalización. Puede configurar retrasos de diapositivas, elegir flechas de navegación, fondos de paralaje, agregar capas de medios, insertar botones, configurar fuentes personalizadas, agregar márgenes y muchos otros.

El complemento Slider Revolution le permite personalizar cualquier cosa. Para ahorrar tiempo, puede guardar ajustes preestablecidos para usarlos más tarde en las transiciones de diapositivas, estilos de fuente y animaciones de capas.

Complementos de Slider Revolution

¿Quiere hacer que sus controles deslizantes sean más complejos y diversos con efectos de transición, animaciones?

tú eres bueno para irte. Slider admite diferentes tipos de contenido, como publicaciones de blog y publicaciones actuales, le permite usar fuentes de plataformas sociales como Twitter, Facebook, Vimeo, YouTube e Instagram. Puede agregar enlaces, videos, imágenes y texto en poco tiempo. Con la ayuda de la función Variaciones, puede crear una diapositiva rica en funciones y repleta de información que los visitantes pueden usar.

Seguridad

La seguridad es uno de los aspectos más importantes cuando se trata de sitios web. Es posible que escuche que hubo una vulnerabilidad de guerra afectada por Slider Revolution hace algunos años. Desde ese momento, Themepunch ha aumentado la protección del software y ahora está utilizando una organización de terceros para auditar los problemas del complemento con regularidad. Entonces puede estar seguro de que el complemento es altamente seguro.

Apoyo técnico

El complemento viene con la documentación detallada y una gran sección de preguntas frecuentes con las preguntas más populares sobre el complemento. Es por eso que es muy fácil comenzar con la revolución del control deslizante, incluso si no tiene experiencia trabajando con él. La disponibilidad de los tutoriales detallados simplifica la creación de diapositivas para el sitio web para todos.

Fuentes de contenido

El complemento maneja con éxito la creación de controles deslizantes para varias fuentes de contenido. Ya sea un producto de WooCommerce o una publicación común, Slider Revolution tiene las herramientas.

Las potentes funciones hacen de este complemento la opción número 1 para todos. Su principal ventaja es que presenta la categoría de una solución todo en uno. No necesita complementos adicionales, todo está dentro del complemento.

También debemos mencionar que es asequible. La licencia regular le costará $26. Teniendo en cuenta la cantidad de funciones que obtiene por el precio, Slider Revolution es el complemento de control deslizante más asequible de la industria.

En esta guía definitiva, cubriremos todo, desde la instalación del complemento hasta agregar una nueva diapositiva y colocarla en el sitio web.

Instalación del complemento y configuración principal

Muchos de los desarrolladores de temas incluyen Slider Revolution en el paquete de los temas.

Si ha comprado uno de los temas premium de WordPress de StylemixThemes, no tiene que instalar el complemento manualmente. Slider Revolution se instalará automáticamente con la importación de demostración.

Si el paquete del tema que está utilizando no incluye el complemento, debe descargarlo e instalarlo manualmente. Para obtener una copia de Slider Revolution, siga este enlace .

Deberá comprar el complemento. Inicie sesión en su cuenta de Envato y realice su compra. Después de eso, descargue el archivo: seleccione la opción de descarga para "Solo archivo de WordPress instalable".

Ahora necesita agregar un nuevo complemento a su sitio. Vaya a su tablero — Complementos > Agregar nuevo . Una vez finalizada la instalación, active el complemento.

¡Felicitaciones, ya está todo listo y puede comenzar a crear su primer control deslizante!

Cómo actualizar Slider Revolution

Themepunch lanza actualizaciones periódicas del complemento deslizante. Para actualizarlo, abra Slider Revolution desde su tablero y siga la pestaña Actualizaciones. En esta página puede encontrar una pequeña sección con el título "Actualizaciones de complementos". Aquí se especifica qué versión del complemento está instalada actualmente en su sitio web y una versión disponible para actualizar.

Además, puede usar la forma estándar e ir a Panel de control> Actualizaciones e instalar la nueva versión del complemento desde allí.

Revolución deslizante: Primeros pasos

Si está utilizando el control deslizante por primera vez, es posible que no sea lo suficientemente claro con toda la terminología utilizada allí. Hay tres elementos principales con los que se puede confundir. Son módulos, diapositivas y capas. Cada uno de ellos puede ser parte de otro así como trabajar individualmente.

Por ejemplo, puede crear un módulo diseñado para actuar como un control deslizante y contendrá diapositivas. Además de esto, puede crear módulos como menús de navegación o encabezados, que no son controles deslizantes en absoluto, pero aún contendrán diapositivas. La razón de esto es que Slider Revolution se creó inicialmente como un generador de controles deslizantes, sin embargo, ahora también se usa como un editor de sitios web completo. Entonces, con la ayuda de este, puede crear mucho más que simples diapositivas.

Relación entre módulos, diapositivas y capas

Los módulos son contenedores para Diapositivas que son contenedores para Capas.

Los módulos existen para contener diapositivas. Cada módulo debe tener al menos una diapositiva. Cuando crea un módulo en blanco, se agrega automáticamente una diapositiva vacía. Puede crear diapositivas adicionales o agregar todo a una sola diapositiva. Depende completamente del tipo de contenido que estés creando.

La diapositiva es un contenedor de capas. Cada diapositiva debe tener al menos una capa. Cuando se crea una nueva diapositiva, se agrega automáticamente una capa de fondo. Esta capa siempre está ahí, se puede renombrar y hacer invisible, pero no se puede eliminar. Esta área de fondo se puede rellenar con capas.

Las capas contienen elementos visuales, de audio o de diseño y se agregan a las diapositivas. Texto, botón, imagen, audio, video, grupo y fila son todos tipos de capas. Cada capa representa una sola pieza de medios. Las capas se pueden animar de la manera que mejor se adapte a su idea.

Cómo usar Slider Revolution: configuración global

Como ya mencionamos, Slider Revolution tiene toneladas de opciones, y esto no es una exageración. Es por eso que, antes de comenzar a construir el control deslizante, le recomendamos que primero revise la configuración global y aprenda los principios fundamentales para trabajar con el complemento.

Si hace clic en Slider Revolution desde su tablero, podrá abrir la pantalla de configuración del complemento.

Pantalla de configuración

En la parte superior de la pantalla se encuentra la pestaña con las siguientes opciones:

Módulos, Actualizaciones, Activación, Noticias, Globales, Preguntas Frecuentes, Soporte.

En esta etapa, trabajaremos solo con los dos: Módulos , para crear uno nuevo, y Globales , para ver la configuración global del complemento.

Ajustes globales

Comenzaremos con los Globales . La configuración global se divide principalmente en varias secciones de:

• General
• Puntos de interrupción de cuadrícula de diseño predeterminados
• fuentes
• Diverso

Estas configuraciones son responsables de las opciones de cuadrícula de respuesta predeterminadas que se aplican al crear un nuevo control deslizante, cargar fuentes personalizadas, crear bases de datos y más.

Solo hay varias opciones en las que deberá concentrarse. Primero, está la capacidad de respuesta, para asegurarse de que sus futuros controles deslizantes se vean bien en cualquier dispositivo. Aquí hay una guía rápida sobre los dispositivos y sus tamaños.

En la sección Punto de interrupción de cuadrícula de diseño predeterminado , puede establecer el ancho en píxeles para diferentes tipos de dispositivos: computadora de escritorio, computadora portátil, tableta y móvil.

Siempre que cada dispositivo tenga su propio tamaño, ingrese el ancho exacto para cada tipo para garantizar la visualización correcta de un control deslizante.

• Los monitores de escritorio estándar tienen un ancho de 1920 px.
• Los dispositivos portátiles, que incluyen todas las computadoras portátiles, MacBooks y tabletas orientadas horizontalmente, tienen un ancho de aproximadamente 1600px.
• Las tabletas orientadas verticalmente tienen un ancho de no más de 778 px (basado en el iPad).
• Y dispositivos móviles. Esta es una parte importante, ya que hoy en día más de la mitad de todo el tráfico de Internet se genera a través de dispositivos móviles y no será satisfactorio si los usuarios no pueden ver correctamente los controles deslizantes en su sitio web. Sin embargo, esto puede ser confuso, y la razón es que los teléfonos inteligentes modernos tienen tamaños absolutamente diferentes. Le sugerimos que utilice el número, no superior a 500px.

La segunda cosa que quizás desee controlar es el acceso al control deslizante. La opción Permiso le permite denegar el acceso al complemento a otros usuarios, excepto a los administradores y editores.

¡Ahora puede comenzar a construir sus controles deslizantes! Hay tres opciones que puede utilizar. Puede comenzar desde cero y crear un nuevo control deslizante, puede exportar un archivo desde las plantillas de Slider Revolution o importar controles deslizantes de muestra incluidos con su tema.

En nuestro artículo, revisaremos la primera opción y construiremos un nuevo control deslizante desde cero. Esto nos permitirá explorar más posibilidades de complementos.

Crear un nuevo control deslizante

Ahora, cuando hayamos terminado con algunas configuraciones principales, podemos proceder a crear una nueva diapositiva. Abra la configuración de Slider Revolution y haga clic en New Blank Module.

Se le ofrecerá pasar por la guía rápida. Haga clic en Guía de inicio si desea tomar una lección breve. O salga de la guía para omitir este paso.

Su pantalla se dividirá en varias áreas: desde la izquierda hay un marco donde se muestra todo el contenido, desde la derecha, es un espacio de trabajo con secciones y configuraciones.

Opciones generales

Comencemos con las Opciones generales . Haga clic en el icono de engranaje para abrir la configuración. En primer lugar, debemos nombrar nuestro módulo. En la sección Título ingrese el nombre y duplíquelo para el Alias ​​en minúsculas y con guiones entre las palabras en lugar de espacios.

Se necesita un alias para agregar el control deslizante a una página. También puede usar el código abreviado provisto copiándolo y colocándolo en la página o publicación en la que desea mostrar su control deslizante.

Después de eso, podemos personalizar el tipo y la altura y el ancho del área de la capa del escritorio. Estos ajustes se encuentran en la pestaña Diseño.

Para el tipo tienes tres opciones a elegir:

• Control deslizante: varias diapositivas animadas que giran para mostrarse una por una.
• Escena: una sola diapositiva que se puede usar como módulo de contenido.
• Carrusel: muchas diapositivas con múltiples visibles al mismo tiempo.

La siguiente configuración que debemos especificar es el tamaño. También hay tres opciones disponibles:

Automático : este es el parámetro predeterminado que estira su control deslizante al ancho del contenedor principal según lo define su tema de WordPress.

Ancho completo: una opción de control deslizante de ancho completo se extiende de izquierda a derecha (aún debe definir la altura)

Pantalla completa: para controles deslizantes grandes que ocupan toda la pantalla, sin importar el tamaño de su navegador o dispositivo.

Con el complemento Slider Revolution, puede animar cada parte de la página en el sitio web. Tenga en cuenta que al hacerlo, el peso de su página aumentará y, por lo tanto, llevará más tiempo cargar su página. Como resultado, puede afectar negativamente la clasificación SEO.

Ajustes de cambio de tamaño

El cambio de tamaño clásico o lineal garantiza que su control deslizante se comprimirá en consecuencia después de configurar los ajustes de tamaño de la pantalla principal (por ejemplo, un control deslizante de 1000x400px se comprimirá a un control deslizante de 500x200px con las fuentes, imágenes y otros elementos del control deslizante).

La herencia inteligente habilita la creación automatizada de tamaños de dispositivos en función de la configuración de escritorio que elija, con la opción de ajustar.

La configuración personalizada o manual le permite establecer el tamaño del control deslizante utilizando píxeles exactos, con la capacidad de establecer los tamaños del control deslizante en diferentes anchos de pantalla: computadora de escritorio, computadora portátil, tableta y teléfono.

Capacidad de respuesta de las diapositivas

Hacia adelante. Todavía no hemos terminado con la capacidad de respuesta. Hay un tamaño de área de capa donde puede especificar el ancho del navegador.

Por lo general, las opciones se establecen de manera predeterminada en Tamaños automáticos y solo se especifican los parámetros del escritorio. Puede hacer lo mismo con otras opciones encendiéndolas.

Además, si enciende el dispositivo específico, su área de trabajo (contenedor de diapositivas) se ajustará a los parámetros del dispositivo seleccionado, lo que significa que puede controlar la visualización del control deslizante para el dispositivo concreto.

Para cada dispositivo, habrá tamaños de cuadrícula específicos de la configuración global. La cuadrícula es el área en la que se encuentran las capas deslizantes. No hay números estrictos que deba ingresar. Descubrirá qué funciona mejor para usted después de probar y explorar varias opciones.  

Esto fue solo el comienzo, algunas opciones generales que facilitarán su trabajo posterior con el control deslizante. Y una vez que haya terminado con esta parte, puede cambiar al siguiente paso.

Una mirada más cercana a las opciones

Además de las opciones generales, hay otras tres pestañas con las que interactuará mucho. Queremos guiarlo a través de las configuraciones principales con las que operará. Básicamente, la creación de las diapositivas considera varios componentes que están involucrados en el proceso. Estas son opciones generales, configuraciones de navegación, opciones de diapositivas y capas.

No bromeábamos cuando decimos que Slider Revolution tiene toneladas de opciones. Hay demasiados elementos para cubrir, describámoslos todos ligeramente y luego revisemos de manera más detallada los más importantes.

1. Opciones generales

Ya mencionamos algunos elementos de las Opciones generales como Título y Diseño. Sin embargo, además de estos, hay otras cosas que debe ajustar.

En resumen, las opciones generales le permiten configurar lo siguiente:

Título : para proporcionar el nombre del control deslizante.
Diseño : seleccione el tipo de control deslizante (control deslizante, escena o carrusel) y el tamaño (automático, ancho completo o pantalla completa). Esto ayuda a editar los anchos y altos para el área de la capa, la posición de su módulo, un color o imagen de fondo predeterminado, y más.
Contenido : identifica la forma de agregar el contenido al control deslizante. Puede elegir entre 9 fuentes de contenido.

• Valores predeterminados: aquí sugerimos concentrarse en un parámetro importante: Duración de la diapositiva (cuánto durará cada diapositiva).
• General: esta sección incluye configuraciones de presentación de diapositivas para rotación automática, parada al pasar el mouse, diapositivas en bucle y selección de una primera diapositiva designada. Aquí también puede ocultar o deshabilitar su control deslizante en dispositivos móviles o en anchos de píxeles específicos.
• En desplazamiento: este permite a los usuarios seleccionar efectos de desplazamiento como paralaje, profundidades 3D, línea de tiempo, desvanecimiento, desenfoque, escala de grises y más. Todos los efectos van con configuraciones personalizables.
• Spinner, o precargador, y el complemento tiene 15 opciones de spinner para elegir.
• Las opciones avanzadas le permiten habilitar la carga diferida, seleccionar una imagen alternativa o simplificar su control deslizante en navegadores antiguos.
• CSS/jQuery: aquí puede agregar su propio código personalizado a los controles deslizantes. Tenga en cuenta que este es mejor para ser utilizado por profesionales o usuarios familiarizados con el concepto de programación y codificación.
• Como Modal: esta opción en particular es necesaria en caso de que desee crear un control deslizante que aparezca como una ventana emergente o una caja de luz y le brinda las opciones para la posición del control deslizante, el color de la cubierta y el código abreviado para usar al insertar su control deslizante modal en las páginas.
• Máscara: la máscara presenta el ajuste preestablecido que puede crear y asignar a las capas de texto (especifica el color del resaltado, el encabezado y el texto del contenido).

Complementos: aquí encontrará complementos (nota: los complementos solo están disponibles si compró su propia licencia deslizante).

2. Opciones de navegación

Si planea incluir más de una diapositiva, las opciones de navegación lo ayudarán a agregar herramientas de navegación al control deslizante, como viñetas, flechas y botones.

Todas las opciones incluyen configuraciones fáciles de personalizar para posición/alineación, tamaño, visibilidad y estilos/ajustes preestablecidos globales.

Los elementos de navegación incluyen:

• Progreso: barra de progreso o círculo que visualiza el progreso actual de la diapositiva.
• Flechas: facilite a los visitantes hacer clic en sus diapositivas.
• Viñetas: 14 estilos de puntos de navegación para agregar a su diapositiva.
• Pestañas: muy útil para los controles deslizantes de contenido donde se necesita la navegación por pestañas.
• Miniaturas: se requiere para mostrar una imagen en miniatura como opción de navegación. Hay 5 opciones disponibles.
• Tamaño anterior: especifica el tamaño de la imagen de vista previa.
• Toque: incluye opciones para desplazamiento de bloques, velocidad y dirección.
• Teclado: puede habilitar la navegación por teclado (recomendado para accesibilidad).
• Ratón: activa el control del ratón, como una función de carrusel o desplazamiento inverso.
• Editor de navegación: esta sección es para personalizar flechas, viñetas, pestañas o pulgares con su propio código personalizado.

3. Opciones de diapositivas

La siguiente parte de la configuración está relacionada con las opciones de diapositivas.

• Fondo: elija el fondo para su diapositiva. Elija entre transparente, de color (puede agregar un degradado), imagen, imagen externa o un video (YouTube, Video o HTML5).
• Miniatura: defina la miniatura visible por el administrador y la miniatura utilizada para la navegación.
• Animación: elija la animación de transición para sus diapositivas.
• Filtros: 22 filtros diferentes para agregar a sus diapositivas.
• Progreso: permite personalizar la duración de la diapositiva, la pausa y la visibilidad en una diapositiva.
• Reglas de publicación: controle si su diapositiva se publica o no.
• Etiquetas y enlace: ayuda a agregar datos personalizados de clase, ID y HTML para su diapositiva, así como un enlace.
• Parámetros: agregue hasta 10 parámetros personalizados para usar dentro de sus diapositivas y navegación.
• Capas de bucle: administre la configuración de bucle si su control deslizante solo tiene una diapositiva.
• En desplazamiento: personalice su paralaje y efectos de desplazamiento por diapositiva.

Agregar nuevas diapositivas

Después de terminar de configurar el control deslizante y ajustar todas las opciones, es hora de agregar una nueva diapositiva al proyecto. Puede ver el marco, que muestra el contenido de la diapositiva cuando lo agrega. Ahora es transparente. Puede cambiar la opción de fondo y agregar una imagen o establecer el color.

Puede cargar una imagen desde su computadora o usar una fuente externa (agregando un enlace). Además, puede establecer el color como fondo en lugar de una imagen. Se puede hacer con bastante facilidad.

Simplemente seleccione la opción Coloreado del menú desplegable Tipo en el panel Fuente y luego haga clic en el botón Color de fondo para elegir su color. Si desea utilizar el video, simplemente agregue la fuente.

Agregar una nueva capa a la diapositiva

En la parte superior de la pantalla, encontrará la opción +Agregar capa . Úselo para agregar una nueva capa a la diapositiva. Hay 8 opciones diferentes.

Las opciones más populares, sin embargo, son imágenes y textos con el apoyo de botones si necesita agregar algunas herramientas de navegación al control deslizante.

Opciones de capa: cómo usar

La flexibilidad de Slider Revolution se basa en la disponibilidad de múltiples opciones y la capacidad de configurar cada detalle por separado, así como ajustar todo el proyecto del control deslizante. Las capas no son una excepción. Cada vez que agrega una nueva capa a la diapositiva, puede controlar todas las opciones. En el ejemplo de agregar una nueva imagen a la diapositiva, revisaremos todos los parámetros que las opciones de capa le permiten cambiar.

Cuando desee agregar una capa de imagen a su diapositiva, simplemente haga clic en Imagen en el menú desplegable Agregar capa . Luego cargue la imagen deseada.

Junto al marco, encontrará varias opciones de capa (contenido, estilo, tamaño y posición, etc.).

Contenido de la capa muestra información básica sobre la capa. Puede configurar la carga diferida y cambiar su tipo de fuente.

Usando las opciones de Estilo de capa , podrá agregar un fondo de color.

La siguiente opción es el Espaciado . El espaciado nos ayuda a mover la capa de arriba hacia abajo, de izquierda a derecha, de abajo hacia arriba y de izquierda a derecha. Están marcados con la letra 'M'.

Pos. y Tamaño. Establezca la alineación, así como la posición y el tamaño de la capa de la imagen. Tanto la alineación vertical como la horizontal se pueden cambiar fácilmente, simplemente haga clic en uno de los iconos de alineación.

Después de eso, puede establecer la posición con Desplazamiento vertical desde las opciones de Posición alineada. Juega con los parámetros X e Y para mover tu capa en la diapositiva.

Opciones avanzadas de capa

Las opciones de Estilo avanzado le permiten Rotar una capa horizontal, vertical y centralmente y le permiten agregar sombras a las capas.

Opciones de animación de capa

La animación es la opción principal en Slider Revolution. La idea principal del complemento es agregar a su sitio elementos animados en lugar de elementos visuales estáticos y estándar.

Las opciones de animación agregan movimiento a sus diapositivas, con esta acción puede animar las diapositivas y configurar las animaciones de aparición y salida.

Hay dos líneas para las opciones de aparición y salida: IN y OUT.

Cada línea cuenta con un menú desplegable con diferentes tipos de animaciones. De forma predeterminada, la opción de fundido de entrada está configurada para todas las capas. Pruebe algunas animaciones para ver cómo se ve en su diapositiva y elija la mejor.

La siguiente sección se utiliza para la duración de la animación, la aceleración de la animación y para definir el inicio de la animación . La Duración define cuánto tarda en finalizar la animación, la opción Inicio define la duración del tiempo después del cual comenzará la animación una vez que se cargue la diapositiva. La aceleración define la velocidad a la que progresará la animación.

Línea de tiempo de animación

Si ha agregado varias capas a su diapositiva, probablemente no desee que aparezcan todas al mismo tiempo. La línea de tiempo de animación de Slider Revolution puede ayudarlo a manejar este problema. Se encuentra justo debajo de nuestro marco de trabajo.

El inicio de cuadro predeterminado para cada capa se establece en 0 milisegundos, lo que significa que las capas aparecerán en la pantalla después de 0 milisegundos de carga. La duración de aparición generalmente se establece en 3 segundos, lo que significa que una capa se vuelve completamente visible en 3 segundos. Para cambiar las opciones, elija la capa y edítela especificando un valor diferente.  

Asegúrese de establecer diferentes valores para diferentes capas, para que no aparezcan a la vez y se vean desordenados.

Ahora, echemos un vistazo más de cerca a las opciones de la línea de tiempo

1. Vista de lista

Estos iconos se pueden utilizar para ocultar o mostrar las capas y ocultar o mostrar las filas en función de la alineación vertical. Solo el administrador del sitio web tiene acceso a estas opciones.

2. Duración de la línea de tiempo
La duración total de la línea de tiempo se define en Opciones generales del módulo > Valores predeterminados. Además, se puede configurar individualmente en Opciones de diapositiva > Progreso.

Al arrastrar el bloque en la línea de tiempo hacia la izquierda y hacia la derecha, puede ajustar fácilmente la duración de la diapositiva. Otra opción que puedes hacer es hacer clic en el ícono del reloj y editarlo en porcentaje.

3. Vista previa de la línea de tiempo

Para obtener una vista previa de la línea de tiempo, debe hacer clic en el icono Reproducir o simplemente arrastrar el bloque inactivo.

4. Cambiar el nombre de las capas

Para cambiar el nombre de la capa, haga doble clic en el texto de la capa en la línea de tiempo y cámbiele el nombre. Además, puede editar el título de la capa en la parte superior central del Editor.

5. Índice z de capas / Orden de apilamiento

Para establecer el orden de apilamiento/índice z, solo tiene que arrastrar las capas en la línea de tiempo.

6. Animaciones

Para cada capa, hay una animación de entrada y salida y animaciones de fotogramas clave adicionales. Todas las animaciones se presentan en la línea de tiempo.

Arrastre un bloque de animación para ajustar el punto de inicio de la animación en la línea de tiempo. Y edite la duración de la animación arrastrando el punto final del bloque

Opciones de bucle de capa

La pestaña Bucle le permite crear animaciones en bucle. Puede elegir un tipo de animación, definir la velocidad y la aceleración del bucle y establecer una hora de inicio y finalización para el bucle.

Hay 8 tipos entre los que puede elegir: personalizado, bucles de péndulo, bucles de efectos, onda, ondulaciones, rotación, deslizamiento y desplazamiento, y pulso. Cada animación de bucle tiene su propio conjunto de opciones.

Pendulum hace que tu capa se balancee de lado a lado. Entre las opciones que puede configurar está el grado final y de inicio: esto identifica los grados entre los que ocurrirá la animación y el punto de origen X e Y: este parámetro determina el punto del eje desde el cual rotará la capa, puede especificarlo en porcentajes

Effect Loops le permite elegir entre varias opciones: escala de grises, parpadeo, flattern e iluminación. Todos los efectos se ven diferentes, por lo que te recomendamos mirar cada opción para elegir cuál es mejor para ti.

La animación Wave hace que su capa gire con un movimiento similar al de la onda. Gira alrededor de un eje fuera de la capa. Puede establecer un punto de rotación X e Y para determinar la posición del eje alrededor del cual girará la capa, un ángulo de inicio para identificar la posición de inicio de la animación y un radio para la órbita de la rotación.

El bucle Wiggle hará que su capa se mueva de un lado a otro, de arriba hacia abajo, de izquierda a derecha y viceversa. Utilice el menú desplegable para elegir la opción que desee.

El bucle giratorio hace que su capa gire alrededor del punto del eje establecido. La capa rotará y formará un círculo completo si elige el primer elemento del menú desplegable Rotación: el elemento Rotar.

Para hacer que su capa se mueva de izquierda a derecha, de derecha a izquierda, de arriba hacia abajo, en diagonal, puede usar la animación Deslizar y pasar el mouse. Puede establecer una posición inicial y final para la animación.

La animación Pulse hace que su capa se acerque y aleje continuamente. Especifique Zoom Start y Zoom End. Los valores predeterminados aquí son 1 para el inicio y el final. Esto significa que la capa permanecerá al 100% de su tamaño. En otras palabras, no se animará. Si ingresa 0.5 para Zoom Start, su capa comenzará en el 50% de su tamaño y se acercará al 100% de su tamaño, luego volverá al 50%, etc.

Opciones de desplazamiento de capa

Los efectos de desplazamiento son los elementos básicos de una buena experiencia de usuario. Los efectos de desplazamiento generalmente indican que la acción es requerida o realizada, especialmente porque este método se usa activamente con los controles deslizantes. Con Slider Revolution, puede hacer que las capas, los textos y las imágenes cambien al pasar el mouse.

Agregar efectos de desplazamiento en Slider Revolution

Primero, debe activar el desplazamiento de la capa. Seleccione la capa a la que desea agregar el efecto y haga clic en Pasar el mouse debajo de Opciones de capa. Haga clic en Habilitado para activarlo.

A continuación, encontrará todas las opciones que necesita para configurar el comportamiento de su capa al pasar el mouse por encima. Si deja todo como está, la capa no mostrará ningún cambio.

Configuración de desplazamiento

Lo primero que puede configurar aquí es el Cursor. En el menú desplegable, puede encontrar diferentes opciones para el Cursor. Automático y Predeterminado realizan las mismas funciones y no reflejarán ninguna diferencia. La cruz y el puntero definen la forma del cursor del mouse en la pantalla.

Hay incluso más estilos de cursor aquí. Algunos de ellos son bastante inusuales, sin embargo, la mayoría de ellos indican la acción que tiene la capa cuando se activa. Por ejemplo, si está vinculando la capa al Centro de soporte, puede elegir el cursor de Ayuda.

Evento de puntero por defecto está configurado en Auto. Ninguna opción se utiliza cuando no hay contenido vinculado. Esta sección le permite elegir la apariencia del cursor en el desplazamiento de la capa, habilitar la animación y configurarla.

Animación de desplazamiento

A continuación, hay una animación flotante que puede configurar según sus preferencias. Hay varias cosas que debe tener en cuenta. Primero, no se ve bien cuando la capa cambia al pasar el mouse por encima y la transición ocurre en un momento. Siempre mejor cuando la transición ocurre con el retraso. . De forma predeterminada, el retraso está establecido en 300 ms, déjelo así si le conviene o cambie el valor.

Además, puede establecer la aceleración para la transición. Tienes varias opciones para elegir.

Filtrar

A su capa, puede agregar Filtro. En otras palabras, puedes difuminar la lira hasta cierto punto. La opción se expresa en píxeles. Cuanto mayor sea el valor, más “grueso” será el desenfoque.

Estilo

También hay una parte de Estilo donde puede configurar el color de fondo y ajustar el borde, es decir, cambiar su color y seleccionar el estilo del borde.

En las opciones de capa de desplazamiento

Las opciones de desplazamiento hacen posible que la diapositiva se mueva con el desplazamiento del mouse. There are three options – Parallax , Timeline Scroll Based , and Filter Effect Scroll Based .

Layer Action Options

Actions make your layers interactive. For example, you can make a layer open a link when a user clicks on it.

Click on the Action icon to choose the type of action you need. The first dropdown is where you can choose the type of action that you would like to occur . There are a lot of options here: Link Actions, Slide Actions, Layer Actions, Media Actions, and Fullscreen Actions. Your chance is full depends on you and your goals, whether you want the layer to open the link or to switch the slide.

After you made a choice of what action to add, you need to set this particular option. For example, we are going to add a link. Select the option of Simple Link, and on the new screen, you will be offered to enter some parameters such as the URL itself, selecting the interaction and action type, and more.

Layer Visibility Options

If you want your layer to be visible on all devices , then make sure the switches shown in the image below are all turned ON under the Visibility section . The first one is for desktop, the second one is for laptops and horizontally oriented tablets, the third one is for vertically oriented tablets, and the last one is for mobile phones.

If you don't want your slider to be shown on some devices, simply turn off this option.

Text layer

After we review most of the options that we need for the layer setup, let's move to the other type of layer and try to add some text to our slide.

There are two options to choose from Quick Style heading or content. The main difference between them is pre-styled options.

Let's just point out some primary options you need to set for the text layer. They are the following:

• In the Content section, we add our text, and aligned it.
• In Style changed the font and its size, weight, line-height
• Customized the Size & Pos to change the location of the layer within the slider
• In Animation, we add some effects and speed for our text.

When adding a text layer there will appear a black box. You need to enter your text there. Everything you change will be visible in your work-frame.

Moving on to the Style tab. By default the font style that is applied to the text is Roboto. Choose the font family you prefer from the dropdown. Make sure that you selected the text layer before you start editing it.

Besides choosing a font family, you can also determine the font-size, line-height, font-weight, and letter spacing here as well. All these options adjust the look and feel of the text. So take your time to set it up and play around with these options to find the best combination.

Next, choose the color for your text. You can use the color picker and find the color that suits your page and slide perfectly. After that, you can save the change and see how the slider looks on your page.

If everything is good, you can move to the next step which defines the horizontal and vertical alignment of the text layer. For instance, you would like to have your text layer start 300px from the left edge of the screen, and 100px from the top. According to this, the horizontal alignment will be set to left, and vertical alignment to top. Fill in the X and Y fields respectively and save the changes to check how the text looks.

For customizing options you can use the same options we went through during the image layer setup. You can add animations, define visibility, create actions, etc.

You can also input HTML code into your text layer field. Thanks to this option, you can insert different shortcodes and create your own HTML elements using text layers.

Cómo crear un efecto de paralaje con la revolución del control deslizante

Parallax es uno de los efectos más populares que hace que el sitio web sea más impresionante y dinámico. Probablemente haya visto muchos sitios web y temas integrados con ese efecto particular. Y ahora vamos a mostrar cómo puede construir uno por su cuenta usando el complemento Slider Revolution.

¿Qué es Parallax?

El efecto de paralaje se puede definir como un efecto donde los elementos en el fondo y los elementos en primer plano se mueven a diferentes velocidades y crean la ilusión de profundidad. Por lo general, los elementos del fondo se mueven más lento

Hay diferentes maneras de cómo puede lograr este efecto en su sitio web. Afortunadamente para nosotros, Slider Revolution tiene todas las funciones para ayudarte a lograr el efecto de paralaje.

Creando Parallax en Slider Revolution

Primero encienda el paralaje . Vaya a Opciones generales del módulo > En desplazamiento > Funciones basadas en desplazamiento > Parallax y cambie el interruptor Parallax Enabled a On .

Hay muchos valores de profundidad diferentes que ofrece el complemento. Seleccione el que sea mejor para usted. También puede introducir sus propios valores.

Adición de paralaje a las imágenes de fondo

Para agregar el efecto de paralaje a su imagen de fondo, vaya a Opciones de diapositiva > En desplazamiento > Configuración de paralaje y 3D , y elija la profundidad preferida del menú desplegable.

Hay reglas estrictas al seleccionar la profundidad. Es mejor si prueba diferentes valores y ve cuál funciona mejor con su control deslizante. Diferentes profundidades afectan directamente y crean diferentes efectos. Por eso te recomendamos que los pruebes para ver el resultado.

Agregar paralaje a las capas

En Slider Revolution, el efecto de paralaje se puede agregar no solo a las imágenes de fondo sino también a las capas individuales. Lo bueno de este efecto es que les da a los usuarios una ilusión si controlan las partes del control deslizante en la página con solo mover el mouse. Esto se ve muy bien en el sitio web y, lo que es más, es muy fácil de configurar.

Seleccione su capa, vaya a Opciones de capa > En desplazamiento > pestaña Paralaje y 3D , y elija el nivel de profundidad deseado.

Como resultado, obtendrá la capa con paralaje que se activa con el movimiento del mouse.

Ya sea una imagen de fondo o una capa individual, agregar el efecto de paralaje Slider Revolution es extremadamente fácil. Aunque, no todos los controles deslizantes necesitan paralaje. Úselo principalmente para controles deslizantes simples, ya que los dinámicos con mucha animación probablemente funcionarán mejor sin este efecto.

Agregar una capa de botón

Con Slider Revolution, puede crear y diseñar el botón para agregar a su control deslizante para la navegación. Para hacerlo, primero, debemos agregar una capa de botón al marco de trabajo del control deslizante.

Cuando agregue el botón, aparecerá en el formulario de texto, solo necesita personalizarlo. En el lado derecho de la pantalla, puedes encontrar muchas opciones de botones prediseñados. Puede seleccionar uno de ellos para su botón.

Además, puede optar por algo original, ya que hay variaciones de botones de reproducción, conmutadores y otros. Además, es posible agregar un efecto de sombra y hacer que el botón se vea más interesante.

Una vez que elija el estilo, puede cambiar la configuración avanzada y personalizar su apariencia. Todos los ajustes se pueden encontrar en la pestaña Opciones de capa.

Puede cambiar el aspecto inicial del botón, cambiar el texto, cambiar su visualización al pasar el mouse y configurar animaciones.

Cómo hacer que el control deslizante responda

Al principio, ya hemos configurado algunos parámetros para que nuestras diapositivas respondan. Eso no es suficiente. Para eso, también debe asegurarse de que cada capa en cada una de sus diapositivas se adapte perfectamente a todos los dispositivos y tamaños de pantalla.

Entonces, una vez que agregue todas sus diapositivas y capas a su control deslizante, es hora de ajustarlas para todos los demás dispositivos disponibles.

Al editar diapositivas en el marco de trabajo, principalmente las está configurando para que se vean bien en los dispositivos de escritorio. Cuando esté seguro de que todo se ve perfecto en el escritorio, puede comenzar a jugar con diseños para otros dispositivos.

Ahora puede elegir el dispositivo que le gustaría emular desde el menú desplegable. Encienda el dispositivo en el que desea comprobar la visualización del control deslizante. Los dispositivos disponibles son: escritorio, portátil, tableta, móvil.

Puede modificar todo para cada dispositivo. Por ejemplo, para las capas de texto, puede establecer diferentes tamaños de fuente, altura de línea, grosor de fuente y color, todo según el dispositivo en el que se ve el control deslizante. Para la capa de imagen, para cambiar su tamaño, debe agregar un ancho diferente y la altura de la imagen se ajustará automáticamente de acuerdo con el ancho.

Preste atención a los bordes de la cuadrícula azul. Estos definen los bordes del dispositivo con el que está trabajando actualmente. Por lo tanto, si alguna de sus capas se extiende fuera de los bordes, asegúrese de cambiar la configuración de esas capas.

Finalmente, guarde su control deslizante y vea cómo se ve en vivo.

Agregar el control deslizante a la página

Ha hecho un buen trabajo y ahora es el momento de ver cómo se ve su control deslizante en la página. Para hacerlo, use el código abreviado Slider Revolution que creó anteriormente. Este shortcode se puede encontrar en la pestaña Título de la sección Opciones generales.

O si abres Slider Revolution desde tu tablero. Busque el módulo actual y seleccione la opción Incrustar.

En la ventana emergente, seleccione la opción Para las páginas y publicaciones y copie el código abreviado.

El shortcode debería verse como [rev_slider alias=”title”][/rev_slider] con el “título” basado en el alias que le diste al control deslizante.

Mostrar control deslizante con Elementor

Usar el método de shortcode para mostrar el control deslizante en la página es bastante simple. Sin embargo, hay una manera que podría ser aún más fácil. Todos los controles deslizantes que crea con el complemento Slider Revolution se pueden insertar en la página usando el widget de Elementor. Seleccione la página en la que desea mostrar el control deslizante y ábralo a través del editor de Elementor. Luego simplemente arrastre y suelte el elemento en el marco de trabajo. En el panel de widgets, busque el widget Slider Revolution 6 y agréguelo a la página. Cuando arrastre el widget, deberá elegir el control deslizante que desea usar.

Úselo como una alternativa al código corto, ya que a algunos propietarios de sitios web les resulta más fácil trabajar con widgets de creación de páginas.

Cómo exportar controles deslizantes

Para exportar el control deslizante, vaya a Slider Revolution haciendo clic en la pestaña correspondiente del menú de su tablero. Todos los controles deslizantes que haya importado o creado se mostrarán allí.

Pase el mouse sobre la miniatura del módulo que desea exportar. Haga clic en la flecha pequeña en la esquina inferior derecha. Entre todas las opciones que aparecen, seleccione Exportar y haga clic en él.

Verá el cuadro de diálogo de confirmación que le notificará que la exportación puede tardar algún tiempo. Haga clic en 'Sí, exportar control deslizante' y comenzará la descarga. Cuando finalice la descarga, tendrá un archivo .ZIP de su control deslizante.

Para concluir

Casi todos los temas desarrollados por StylemixThemes incluyen el complemento Slider Revolution en el paquete. Nos encanta este poderoso software que nos brinda la oportunidad de hacer que los sitios web sean más atractivos, atractivos e interactivos.

Esperamos que nuestra guía haya ayudado a comprender mejor el proceso de creación del control deslizante con este increíble complemento. Si está buscando más información, siga la página principal de Slider Revolution.