Revisión del complemento de Slider Revolution WordPress y guía práctica

Revolution Slider WordPress Plugin Review y guía práctica

Slider Revolution es un control deslizante premium disponible como un complemento de WordPress, jQuery y Joomla. Ha ganado una gran popularidad en la comunidad de WordPress debido a su gran variedad de características y facilidad de uso..


En esta descripción general, vamos a cubrir solo las características principales de Slider Revolution WordPress Plugin, y luego le mostraremos lo fácil que es hacer sus propios controles deslizantes desde cero.

Obtenga Slider Revolution gratis! El complemento Slider Revolution se incluye de forma gratuita con la compra de nuestro tema Total WordPress, por lo que no solo obtienes un complemento impresionante sino que también obtienes el tema Total y el complemento Visual Composer que también se incluye de forma gratuita!

Consigue Slider Revolution

Slider Revolution: ¿Qué hace que este plugin de WordPress sea tan genial?

Hay toneladas de excelentes funciones integradas en Slider Revolution para facilitar la creación de controles deslizantes personalizados para su sitio web. Aquí están algunos de nuestros favoritos.

Diseños receptivos

El complemento tiene capacidad de respuesta e incluye múltiples opciones de diseño de control deslizante para facilitarle la vida. Primero elija su tipo de control deslizante: control deslizante estándar, escena de héroe (diapositiva única) o un control deslizante de carrusel. Luego seleccione un diseño: automático, ancho completo o pantalla completa.

los diseño automático La opción le permite configurar el tamaño del control deslizante utilizando píxeles exactos, con opciones adicionales para configurar los tamaños del control deslizante en varios anchos de pantalla (escritorio, computadora portátil, tableta y teléfono) Si deja esta opción en su configuración predeterminada, estirará su control deslizante al ancho del contenedor principal según lo definido por su tema de WordPress.

los diseño de ancho completo es exactamente lo que parece: una opción de control deslizante de ancho completo que se extenderá por completo de izquierda a derecha. Aún tendrá que definir la altura de su control deslizante.

La opción de diseño más exclusiva es pantalla completa. Con esta opción, puede crear controles deslizantes fantásticos que literalmente llenen toda su pantalla, sin importar el tamaño de su navegador o dispositivo (incluso puede usar esta opción para agregar controles deslizantes de pantalla completa con videos para un mayor impacto).

Múltiples fuentes de contenido

¿Quieres crear un control deslizante para tus publicaciones? ¿O para sus productos WooCommerce? No es un problema, elija entre 11 fuentes de contenido diferentes al crear su control deslizante.

Al momento de escribir esta publicación, Slider Revolution admite contenido basado en publicaciones de blog, publicaciones específicas, la publicación / página actual (excelente si desea agregar un control deslizante destacado a la publicación de blog o elemento de cartera), Flickr, Instagram, WooCommerce, Twitter, Facebook , YouTube, Vimeo o el control deslizante predeterminado (sube tus propias imágenes / video).

Opciones fáciles

Slider Revolution facilita la creación de controles deslizantes personalizados al agregar opciones para casi todo. Elija el retraso de la diapositiva, las flechas de navegación, las fuentes personalizadas, agregue fondos de paralaje, ubicación del control deslizante (agregue márgenes), agregue capas de medios, inserte botones, seleccione transiciones de diapositivas y más, todo utilizando los menús desplegables en todo el complemento.

Y además, puede personalizar casi todo e incluso guardar sus propios ajustes preestablecidos para reutilizar estilos de fuente, transiciones de diapositivas, animaciones de capas y mucho más..

Soporte de medios

Agregue texto, enlaces, imágenes y videos con unos pocos clics de su mouse. Esto le brinda la capacidad de crear diapositivas ricas en información con las que sus lectores y clientes podrán identificarse. Además, cada uno de estos tipos de medios se agrega como su propia capa con animaciones, tiempos y estilos únicos que se configuran con las súper opciones de Slider Revolution.

Instalación de Slider Revolution

Primero deberá obtener una copia del complemento Slider Revolution WordPress. Existen algunos métodos diferentes para instalar el complemento dependiendo de si compró su propia copia del complemento o si se incluyó con su tema premium.

1. Instale su copia de Slider Revolution

Descargar el complemento Slider Revolution

Si compró su propia copia de Slider Revolution de CodeCanyon, inicie sesión en su cuenta de Envato y vaya a su página de descargas (puede acceder a esta página al pasar el mouse sobre su nombre de usuario). Luego localice su copia de Slider Revolution y seleccione la opción de descarga para “Solo archivo de WordPress instalable”.

Cargue el archivo zip del complemento

A continuación, inicie sesión en su sitio de WordPress y navegue hasta Complementos> Agregar nuevo y haga clic en el botón “Cargar complemento” en la esquina superior izquierda de la pantalla.

Desde aquí, use el botón “Elegir archivo” para seleccionar el archivo de complemento que acaba de descargar de CodeCanyon y haga clic en el botón “Instalar ahora”. Después de eso, solo active el complemento y estará listo para comenzar a crear controles deslizantes!

Descomprima la carpeta de complementos para cargar a través de FTP

Nota: También puede instalar su complemento a través de FTP iniciando sesión en su servidor y cargando el complemento extraído (descomprimido) a su carpeta ubicada en wp-content / plugins.

2. Instale Slider Revolution incluido con un tema Premium

Muchos temas premium incluyen copias de complementos premium con la descarga del tema. Si así es como desea instalar su copia de Slider Revolution, deberá hacer referencia a la documentación de su tema. Pero la mayoría de los desarrolladores hacen todo lo posible para facilitar este proceso.

Complementos recomendados totales

Por ejemplo, si está utilizando el tema Total WordPress, debería ver un mensaje en pantalla que le recomienda instalar Slider Revolution (y otros complementos incluidos con el tema). Simplemente haga clic en el enlace para comenzar a instalar y luego active el complemento.

Instale Slider Revolution con Total

Total también incluye una opción personalizada en el importador de demostración para instalar y activar Slider Revolution al importar datos de muestra. Si se usó Slider Revolution para crear la demostración que está importando, se le pedirá que instale el complemento como se ve arriba.

Importar controles deslizantes Slider Revolution con Total

Luego, asegúrese de que esté seleccionada la opción “Importar controles deslizantes”, y el tema importará automáticamente los controles deslizantes personalizados de la demostración. Fácil!

Guía de Slider Revolution

Después de instalar el complemento, debe agregar un elemento de menú a su panel principal de WordPress. Haga clic en esto para acceder a la página principal de administración de Slider Revolution..

Configuración principal de la revolución del control deslizante

Desde aquí puede crear o editar controles deslizantes, activar su licencia si compró su propia copia del complemento (si el control deslizante se incluyó con su tema, puede ignorar esta sección) y ver si su copia del complemento está actualizada.

Configuración global de Slider Revolution

Antes de comenzar a construir, recomendamos visitar el Ajustes globales opción (que es un elemento de submenú debajo de Slider Revolution).

control deslizante Revolution Global Settings

Aquí hay muchas opciones importantes para la configuración de cuadrícula receptiva predeterminada (que se aplica al crear nuevos controles deslizantes), URL de carga de fuente personalizada, creación de base de datos para el complemento y más. Pero hay dos opciones que le recomendamos ajustar.

La primera opción que debería considerar editar es Ver permiso de complemento que puede usar para restringir el acceso de complementos solo a los administradores. Esta es una manera fácil de asegurarse de que usted, su diseñador web u otros administradores son los únicos que crean controles deslizantes en su sitio (especialmente útil si tiene autores invitados en su blog).

La segunda opción que puede desear deshabilitar es la Permitir notificaciones opción. Si está utilizando una copia de Slider Revolution que se incluyó con un tema premium, es posible que vea avisos de “actualización” o “ingrese su licencia” cuando no sea necesario. Simplemente deshabilite esta opción para ocultar avisos. Luego guarda tu configuración.

¡Ahora puedes comenzar a construir tus controles deslizantes! Tiene tres opciones: comenzar desde cero, obtener un archivo de exportación gratuito de los “ejemplos de uso” de Slider Revolution o importar controles deslizantes de muestra incluidos con su tema.

Importar un control deslizante de muestra

Slider Revolution Sample Sliders

Si elige importar un control deslizante de muestra de Slider Revolution ejemplos de uso primero descargue el archivo deslizante de su sitio, luego vuelva a su WordPress y haga clic en el Control deslizante de importación opción. Desde aquí, busque el archivo de muestra que descargó y haga clic en Subir. Esto debería agregar el control deslizante de muestra y todas sus configuraciones para que pueda usarlo como base para un nuevo control deslizante.

Crear un nuevo control deslizante

Si está creando un control deslizante desde cero, haga clic en el Nuevo control deslizante opción. Ahora comienza desde arriba

Fuente de contenido de Slider Revolution

Seleccione una fuente de contenido: elija cómo desea agregar contenido a su control deslizante. Hay 11 fuentes de contenido para elegir, pero en su mayor parte querrá seleccionar el defecto opción.

Slider Revolution Título y shortcode

Agregar un título deslizante y código corto: Seleccione un nombre para su control deslizante que lo ayudará a recordar qué contiene o en qué página lo está utilizando. Aquí también encontrará el código corto fácil para que su control deslizante lo inserte en publicaciones y páginas.

Tipo de revolución deslizante

Seleccione un tipo de control deslizante: Elija un tipo de control deslizante y seleccione un valor predeterminado para cargar los valores predeterminados incluidos en el complemento.

Diseño de revolución deslizante

Elija un diseño de diapositiva: Seleccione el diseño del control deslizante y la cuadrícula (en píxeles). Puede establecer tamaños de cuadrícula personalizados en función del tamaño de la pantalla, aunque la pantalla completa ocupará toda la pantalla del navegador. Independientemente de la opción que elija, deberá agregar un ancho y alto de cuadrícula que determinará el tamaño del contenedor de capas.

Luego, retroceda hasta la parte superior de la pantalla para comenzar a editar la configuración general de su control deslizante.

Configuración del control deslizante

A la derecha verás un montón de opciones de control deslizante.

Configuración general: Configure las opciones de presentación de diapositivas, establezca la duración predeterminada de la diapositiva (tiempo durante el cual se muestra una diapositiva), edite transiciones / animaciones y fondos predeterminados, habilite la barra de progreso (y edite la posición y el estilo), edite la configuración de la primera diapositiva, habilite la siguiente diapositiva en foco y deshabilitar desenfoque.

Diseño y visual: Edite sombras, superposiciones, fondo del control deslizante principal, habilite una rueda giratoria del cargador, desactive el control deslizante en dispositivos móviles (o en anchuras específicas) y seleccione una posición del control deslizante en la página.

Navegación: Personaliza las opciones y configuraciones para las flechas laterales, viñetas, pestañas y miniaturas. También habilite la navegación táctil, deslizar, la navegación del teclado y el desplazamiento del mouse.

Paralaje y 3D: Habilite el soporte de paralaje y / o 3D, además de editar la sensibilidad del mouse y los niveles de profundidad de paralaje.

Rendimiento y SEO: Habilite la carga diferida y controle el rendimiento del control deslizante.

Manejo de problemas: Habilite los retrocesos y solucione los errores del control deslizante.

Fuentes de Google: Cargue familias de fuentes de Google personalizadas específicamente para su control deslizante (agregue las fuentes que desee o necesite para agregar capas de texto que coincidan con el resto de su sitio web a sus diapositivas).

Importar / Exportar / Reemplazar: Importe plantillas personalizadas, exporte su control deslizante actual para reutilizar en otro sitio web y use opciones para reemplazar las URL en su control deslizante.

Funciones API: Edite métodos y eventos de la API (le recomendamos que ignore esta pestaña a menos que sea un desarrollador avanzado).

Enlaces rápidos de Slider Revolution

Una vez que haya terminado de hacer sus selecciones, haga clic en archivo verde en la parte superior de la pantalla para guardar sus cambios. Después de eso, haga clic en el lapiz azul para comenzar a editar diapositivas!

Agregar o editar diapositivas

Agregar o editar slider Revolution Slides

Ahora puedes comenzar a agregar tus diapositivas. Existen dos o tres opciones de diapositivas según si está comenzando desde cero o si está usando un control deslizante de muestra: Capas estáticas / globales, cualquier diapositivas ya creadas y Añadir diapositiva.

Capas estáticas / globales se verá como una superposición sobre las diapositivas que cree. Esta es una excelente manera de agregar un logotipo o marca de agua, incluir un botón “Comprar ahora” para su producto o incluso un enlace para suscribirse a su boletín.

Elige un diapositiva de salida para realizar cambios en una diapositiva que creó o importó previamente como parte de un control deslizante de muestra. Esta es una de las formas más fáciles de comenzar con Slider Revolution si eres nuevo en el complemento, ya que sus controles deslizantes de muestra muestran cómo usar adecuadamente varias funciones del complemento para crear controles deslizantes impresionantes..

Haga clic en Añadir diapositiva para comenzar a crear una diapositiva desde cero.

Slider Revolution: Establecer fondo de diapositiva

Primero, use el Antecedentes principales opciones para seleccionar el fondo de la diapositiva: imagen, URL externa, transparente (nota: si establece un fondo del control deslizante principal en la configuración general del control deslizante, será visible), color sólido o video. Luego, use las opciones de configuración de fuente de medios, filtros, nivel de paralaje (%) y Ken Burns (un efecto panorámico y de zoom animado) si desea personalizar aún más su diapositiva.

Slider Revolution: Establecer configuración general de diapositivas

Siguiente paso a la Configuración general. Aquí es donde puede establecer un retraso de la diapositiva si no desea que su control deslizante se anime tan pronto como se cargue, edite las opciones de bucle de diapositivas o agregue una fecha de vencimiento (excelente si crea un control deslizante para un feriado o promoción). Otra característica útil en esta pestaña es la capacidad de configurar su Estado de diapositiva a inédito – de esta manera puede continuar editando su diapositiva y previsualizarla en el back-end de su sitio web sin que la nueva diapositiva sea visible para los visitantes de su sitio web.

Si está utilizando una navegación en miniatura para su control deslizante, el Miniatura La pestaña ofrece opciones para seleccionar una imagen de diapositiva y dimensiones personalizadas. Pero si optó por no usar este estilo de navegación, puede omitir esta pestaña.

Slider Revolution: Establecer animación de diapositiva

Una vez hecho esto, puede pasar al Animación de diapositivas pestaña para personalizar la animación de transición del control deslizante. Hay más de 80 animaciones para elegir, más opciones de rotación, duración y relajación..

Revolution Slider también ofrece opciones para Enlace y SEO ajustes, Información de diapositiva (parámetros personalizados y descripción) y Sobrescribir navegación para agregar flechas de navegación personalizadas, viñetas o miniaturas específicamente a su diapositiva.

Ahora es un buen momento para hacer clic en eso archivo verde icono en la parte superior de la pantalla para guardar su configuración antes de agregar capas y estilos a su diapositiva.

Agregar capas de diapositivas

Slider Revolution: Agregar capas de control deslizante

Al agregar o editar diapositivas, Slider Revolution está repleto de opciones, y siguen apareciendo. Puedes elegir entre 8 diferentes Añadir capa opciones:

  • Texto / HTML Las capas son perfectas para agregar encabezados, descripciones o incluso enlaces. Agregue lo que quiera decir en su diapositiva.
  • Imágenes son excelentes para insertar su logotipo, agregar profundidad en las diapositivas de paralaje, insertar conjuntos de antes / después y más.
  • Audio y Vídeo Las capas son bastante sencillas. Elija los medios que desea insertar y seleccione un archivo de su biblioteca de medios o inserte un enlace (YouTube, SoundCloud, etc.). Luego agregue configuraciones para habilitar el bucle, la reproducción automática, la siguiente diapositiva al final, el volumen base, el inicio / final del segmento y la precarga. Esta es una manera fácil de agregar testimonios reales a su control deslizante, un video de introducción o un tutorial.
  • Botón Las opciones de capa incluyen 21 combinaciones de tamaño y radio de borde para las que puede editar el color, el fondo, el color del borde, el icono, la fuente, el estado de desplazamiento y el texto. Además, hay una serie de ajustes preestablecidos útiles para enlaces sociales, iconos animados de desplazamiento del mouse, menú de hamburguesas o incluso reproducir / pausar.
  • Formas se puede usar para agregar efectos (como pulsar o irradiar un color detrás de un botón), para definir una parte de una capa de texto (use una forma para resaltar solo una palabra o frase) o para agregar interés visual. Seleccione su fondo, color / tamaño del borde, radio del borde de la forma (0 para un cuadrado, 100 para un círculo), tamaño de la forma en píxeles y relleno.
  • Objeto las capas se pueden usar para insertar un png, jpg, svg o icono de la biblioteca de recursos gratuitos de ThemePunch.
  • Importar para copiar una capa o diapositiva de otro control deslizante en su biblioteca. Rápido y sencillo!

Haga clic en el botón azul “Agregar capa” para comenzar, luego use las opciones para personalizar realmente o aplicar capas.

Opciones de capa

Si mira justo al norte de la sección de vista previa del control deslizante principal, debería ver una barra blanca con muchas opciones que puede usar para editar y personalizar sus capas a medida que las agrega.

Estilo de capa de revolución deslizante

Utilizar el Estilo opciones para editar sus fuentes, colores y ubicación de capa. Esto incluye todo, desde una fuente personalizada de Google, tamaño de fuente, altura de línea, color de texto, fondo de capa, relleno / margen, perspectiva, desplazamiento, alternar y más.

Slider Revolution Layer Animation

los Animación La pestaña es exactamente lo que espera: tiene la opción de agregar y personalizar las animaciones de entrada y salida para su capa. Seleccione una plantilla de animación preestablecida, agregue una relajación y edite el tiempo de duración de la animación.

Slider Revolution Layer Loop

Lazo la configuración es simple: déjelo deshabilitado para que su capa simplemente se cargue con la animación que ya seleccionó, o habilite el bucle seleccionando el tipo. Elija entre péndulo, rotación, bucle lateral, pulso y onda para darle a su capa una animación constante y en bucle.

Slider Revolution Layer Visibility

La configuración móvil se encuentra en Visibilidad. Desde aquí puede especificar si una capa debe ser visible en dispositivos específicos, oculta bajo un ancho establecido o solo debe aparecer al pasar el mouse.

Comportamiento de la capa de revolución deslizante

Comportamiento incluye algunos conmutadores útiles para personalizar la configuración de tu capa. El primero es una configuración para habilitar la capacidad de respuesta automática de la capa y la capacidad de respuesta del elemento hijo. Por defecto, las capas de diapositivas se reducirán a medida que se reduzca la ventana del navegador, deshabilite esta configuración para mantener el tamaño de la capa. También puede editar la alineación de su capa y el desplazamiento receptivo desde aquí.

Acciones de la capa de revolución deslizante

Utilizar el Comportamiento pestaña para agregar configuraciones de capa personalizadas al hacer clic, ingresar con el mouse o salir del mouse. Las acciones incluyen desplazamiento, alternar, reproducción multimedia, pausa, ingresar a pantalla completa, silenciar y más.

Atributos de la capa de revolución deslizante

Para usuarios avanzados o desarrolladores, el Atributos la sección se puede usar para agregar su propia ID, clases y envoltorios para apuntar con código personalizado.

Slider Revolution Layer Parallax / 3D

Y por último, el Parallax / 3D ofrece un selector desplegable para elegir el “nivel” del efecto de paralaje que desea agregar a una capa. Cuanto mayor sea el porcentaje, más se moverá tu capa.

Tiempos de marco de capa

Continuando, debajo de la vista previa del control deslizante debería ver un calendario. Desde aquí, puede editar el retraso de cuándo sus capas se animarán en su diapositiva. También puede ver un calendario visual que muestra el tiempo de la capa en comparación con el tiempo total de la diapositiva. La sección bloqueada es el tiempo de animación de tu capa, y la barra de color más claro es el tiempo completo que tu capa estará visible.

Slider Revolution Layer Timing

Para editar la duración total de su diapositiva, simplemente haga clic y arrastre la etiqueta azul en la parte superior derecha de la tabla.

Una vez que haya agregado varias capas, también puede usar esta sección para reorganizar sus capas editando el número de posición, la hora de entrada o arrastrando y soltando las capas en orden. Además, puede usar esta sección para reproducir su diapositiva para obtener una vista previa de su tiempo mientras realiza ediciones.

Guarda tu diapositiva

¡El paso más importante es guardar tu diapositiva! Asegúrese de guardar o actualizar su diapositiva después de realizar cualquier cambio. Si navega fuera de su diapositiva (incluso si se trata de otra diapositiva) puede perder todo su trabajo duro. Así que asegúrese de guardar, guardar, guardar!

Después de guardar, puede continuar y trabajar en otras diapositivas o controles deslizantes.

Usando su control deslizante

Para agregar su fabuloso control deslizante a cualquier publicación o página, use el código abreviado de Slider Revolution que creó anteriormente. Este código corto se puede encontrar haciendo clic en el elemento del menú Slider Revolution en su tablero. El shortcode debería verse como [alias rev_slider] según el alias que le dio al control deslizante cuando lo creó por primera vez.

Simplemente pegue el shortcode en el contenido de su publicación o página. O si su tema admite ubicaciones de control deslizante adicionales, también puede agregar el código abreviado allí. Algunos temas de WordPress incluso incluyen módulos especiales para el control deslizante. Por ejemplo, el tema Total de usos múltiples de WordPress incluye Slider Revolution y con el generador de páginas incorporado puede agregar controles deslizantes a cualquier publicación o página simplemente insertando un módulo Slider Revolution. Todo lo que tiene que hacer es agregar el módulo, seleccionar un control deslizante en el menú desplegable (mostrará una lista de todos los controles deslizantes que ya ha creado), insertar y luego arrastrar y soltar el control deslizante en su lugar. Derecho fácil?

Terminando

Creemos que Slider Revolution es uno de los complementos deslizantes premium más fáciles de usar, especialmente porque ofrecen una serie de plantillas gratuitas (e incluso más plantillas premium si compra su propia licencia para el complemento), un editor visual fácil de usar y toneladas de funciones integradas para que no tenga que saber CSS para diseñar sus diapositivas (¡botones, fuentes, colores y más ya están ahí!). Tiene 5 estrellas sólidas y, en nuestra opinión, tendrá dificultades para encontrar un mejor complemento de control deslizante.

Esperamos que nuestra guía lo haya guiado a través del proceso de inicio, pero para obtener más información (o para obtener su propia copia) visite la página principal de Slider Revolution de ThemePunch. Muestran excelentes ejemplos de su control deslizante, así como enlaces a las demostraciones en vivo donde puede ver lo que puede hacer Slider Revolution.

Más acerca de Slider Revolution

Pero nos encantaría saber de usted. Háganos saber lo que piensa de Slider Revolution en los comentarios a continuación, o no dude en hacernos cualquier pregunta que pueda tener. Estamos felices de ayudar!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map