En las deslizadores son elementos que se pueden encontrar en casi todas las páginas de inicio de los sitios web. Inteligente deslizante 3 es un potente complemento disponible en versión gratuita y premium.

Las principales características de este complemento

Como característica, ofrece entre otros:

  • Una interfaz de usuario intuitiva.
  • Un generador de páginas de video de arrastrar y soltar con vista previa en vivo / 8
  • Diapositivas dinámicas que se pueden crear usando artículos y filtrar por ID o páginas personalizadas
  • Generación de diapositivas (Dinámicamente) desde una variedad de redes sociales (Facebook, Dribbble, Flickr, Instagram, Twitter, YouTube y más).
  • Deslizadores de control personalizables 
  • Animaciones deslizantes en segundo plano (Ken Burns)

Gratis vs Premium

Si todo lo que busca es un control deslizante básico, Smart Slider 3 está disponible en WordPress.org en el directorio de complementos. Incluso la versión gratuita es impresionante y especial en comparación con algunos de los otros controles deslizantes.

Una licencia personal para un solo sitio cuesta solo $ 25 (la renovación es en 15 $).

Smart-biela-plantillas

Existen algunas diferencias clave entre la versión gratuita y la premium en términos de contenido y características. Esto es lo que obtendrá con la versión premium:

  • Un generador ilimitado de diapositivas dinámicas.
  • Comandos avanzados
  • Modo experto
  • Animaciones en el fondo
  • Un visor y editor de imágenes
  • Demos de control deslizante 43

Tutorial: creación de un control deslizante básico

Si nunca ha instalado WordPress, descubra ¿Cómo instalar un blog de WordPress pasos 7 et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog.

Una vez activado, el Plugin de WordPress Slider Smart pone su propio menú en la parte inferior del panel de administración de WordPress.

Si nunca ha instalado un Plugin de WordPress descubrir Cómo instalar un plugin en WordPress

Haga clic en el menú Control deslizante inteligente, se abre la interfaz principal donde la primera opción que verá es un gran botón verde: " crear deslizante » que abre una ventana de configuración inicial como se ve a continuación.

Smart-deslizante-Create-deslizante

Desde allí, puede nombrar su control deslizante y elegir un estilo general. Hay muchos estilos para elegir (como ancho completo, página completa, carrusel, miniatura y más), pero vamos a optar por un control deslizante de bloque basado en el diseño de nuestro sitio web existente.

Cliquez sur "Crear" y Slider Smart comenzará a diseñar su modelo de control deslizante básico. Después de unos segundos, se encontrará en una página que proporciona todos los detalles básicos sobre el complemento.

Descubre Cómo crear una política de privacidad en WordPress

Lo primero a tener en cuenta aquí es la sección " publicar deslizante". Deberá utilizar uno de estos tres métodos (Shortcode, editor de página o publicación o código PHP) cuando llega el momento de publicar su diapositiva (n ° 1 abajo). Antes de que podamos hacer eso, necesitamos crear diapositivas.

Aquí es donde el complemento realmente demuestra su facilidad de uso.

Todo lo que necesita hacer es hacer clic en el botón verde " Añadir diapositiva Imagen "(n ° 2 abajo) y se abrirá su biblioteca multimedia. Desde allí, puede seleccionar tantas imágenes como desee, o comenzar con solo una, luego hacer clic en " Seleccione En la ventana de la biblioteca multimedia.

Smart-deslizante-Nueva Diapositivas

Nota: No está limitado a las imágenes al seleccionar su diapositiva. También puede utilizar videos o artículos, así como crear diapositivas vacías, estáticas o incluso dinámicas.

consultar Cómo duplicar (copiar) tus páginas en WordPress: el tutorial

Smart Slider carga su diapositiva en la interfaz y está listo para guardar y publicar o comenzar a personalizar. Sin embargo, si publico mi presentación de diapositivas, funcionará bien, pero no es exactamente lo que estaba buscando, como puede ver en la imagen a continuación.

Control deslizante inteligente fuera del centro 1

Para corregir esto fui al menú "Talla" y me desplacé hasta la sección modo receptivo. La selección fue "Ancho completo", así que elegí "Auto" y salvó mi progreso. A partir de ahí, volví a la " general "y una alineación central seleccionado.

Smart-deslizante-Tamaño-Change

Cuando hablo de facilidad de uso aquí, tenga en cuenta que todo este proceso tomó menos de 5 minutos para mi primer intento.

Ahora es el momento de trabajar en la diapositiva. Cuando pase el cursor sobre sus diapositivas en la ventana gráfica, notará que aparece un cuadro verde en la esquina superior izquierda. Como habrá adivinado, al hacer clic se marcará esta diapositiva como la primera de la secuencia.

Ver también 5 excelentes plugins de WordPress premium para agregar un control deslizante

Con mi control deslizante creado y el fondo en su lugar, llegó el momento de agregar contenido y transiciones. Para realizar este paso, simplemente hice clic en la diapositiva que quería editar que va a la sección de capas.

Hay muchas configuraciones individuales en el panel derecho, pero si te desplazas hacia abajo encontrarás una imagen de tu diapositiva. Luego puede hacer clic en uno de los elementos del panel izquierdo para colocarlos en su diapositiva.

Smart-deslizante-Elements

Crear estas diapositivas es otra escuela. Hay tantas opciones disponibles. Para darle una idea de la flexibilidad de este complemento, eche un vistazo a lo que cada elemento puede hacer por su control deslizante a través de:

  • Un menú de elementos
  • Entretenimiento
  • Configuraciones de capa

En cada uno de estos menús, hay múltiples submenús. Por ejemplo, cuando crea un elemento de texto, puede ajustar la configuración de fuente como: 

  • Las familias de fuentes
  • El color del texto
  • tamaño de la fuente
  • La altura de la línea de
  • La decoración del texto
  • Alineación
  • Espaciado entre letras y palabras
  • Configuración de edición de texto
  • Sombra de texto

Cada elemento de texto en su control deslizante puede tener configuraciones únicas, animaciones únicas y su propia configuración de sincronización. Incluso hay una sección para el CSS personalizado.

A medida que agrega elementos y animaciones a su diapositiva, en la versión pro también notará una función de calendario, que le permite controlar el tiempo de visualización de elementos individuales y la duración de sus animaciones usando barras deslizantes simples.

Confiaba en esta función cuando agregué diferentes capas para esta diapositiva un poco más tarde.

Smart-deslizante-Cronología

Agregar capas y animaciones

Con nuestro control deslizante en su lugar y el fondo instalado, es hora de presentar algunos différents elementos y capas. Comenzaremos agregando una imagen de un muñeco de nieve a la diapositiva. Para hacer esto voy al menú "Capas" y haga clic en " Imagen ". Esto colocará una imagen ficticia en la diapositiva.

Descubrir también Cómo configurar el complemento WordPress Slider Revolution

Desde allí, puede hacer clic en la imagen ficticia en la parte inferior izquierda, luego seleccionar y cambiar el tamaño de la imagen en la biblioteca de medios.

Smart-deslizante-Imagen-Elemento-Redimensionar

Una vez que haya elegido, insertado y redimensionado mi imagen, es hora de agregar alguna animación básica que se puede lograr en solo unos pocos pasos.

La primera es seleccionar la pestaña "Animaciones" como se ve a continuación. Una vez hecho esto, daremos clic en el botón de animación verde "En".

Smart-deslizante-Animaciones

La siguiente pantalla es donde puedo elegir mi animación y ajustar el horario. Para esta diapositiva en particular, presento una animación "DERECHA" y aumento la duración a 2200ms.

¿Está buscando un ftp para administrar sus archivos y carpetas de WordPress? Descubra Cómo utilizar FTP en Windows 10

También agregaré un retraso de 300ms. En la parte inferior de esta pantalla hay una opción para tener un evento específico y un disparador para esa animación, como un desplazamiento del mouse o un clic en la diapositiva. No voy a complicar las cosas con estas configuraciones para este ejemplo.

Smart-biela-en-animación-Configuración

Luego agregaré algo de texto. Siguiendo el mismo proceso que el anterior, haga clic en el elemento " añadir texto Y haz los ajustes necesarios. Ingresé el texto y luego fui a la configuración de fuente donde cambié el tamaño y el color.

Agrego una animación " Fundido En Y ajustó el calendario para que comience justo después de la animación del muñeco de nieve.

También notará en este menú que existe la posibilidad de tener texto específico para tabletas y dispositivos móvil. Este es un gran ejemplo de los tipos de características que hacen que este complemento sea tan flexible y fácil de usar.

En algunos "otros" controles deslizantes, me habría visto obligado a utilizar una consulta de medios y CSS personalizado.

Text-Layer-Opciones-Smart-deslizante

Finalmente, agrego dos capas más. La primera es una capa de texto y la segunda es una capa de imagen. Nuevamente, estoy pasando por exactamente el mismo proceso que el anterior, pero he tomado un poco más de tiempo en la animación. Puedes ver los resultados finales a continuación.

En general, crear esta diapositiva fue un proceso de 20 minutos.

Nota: Convierta esta diapositiva a GIF Modificará ciertos plazos de las hermosas animaciones seleccionadas que he reunido cuidadosamente.

Listo ! Después de probar muchos complementos WordPress de control deslizante, tanto gratis como premium, honestamente puedo decir que este es uno de los mejores que he probado. No es solo una característica específica lo que lo hace único. Es una combinación de cosas que muestran lo bueno que es un complemento.

Es importante tener en cuenta que no he cubierto todas las funciones individuales.

Descubrir también Cómo saber qué tema se usa en un blog de WordPress

Estoy seguro de que si pasara un poco más de tiempo trabajando con este complemento, encontraría algunas cosas que me gustaría cambiar, y tal vez incluso algunos errores. Creo que la facilidad de uso mantiene a las personas allí el tiempo suficiente para que eventualmente puedan aprovechar al máximo la multitud de funciones que se ofrecen. Y créeme, hay muchos.

Descargar Smart Slider 3

Descubre también algunos complementos premium de WordPress  

Puedes usar otros plugins de WordPress para dar una apariencia moderna y optimizar el manejo de tu blog o sitio web.

Ofrecemos aquí algunos complementos premium de WordPress que lo ayudarán a hacerlo.

1. Constructor de páginas WooCommerce

WooCommerce Page Builder es un Plugin de WordPress muy popular que ofrece una cantidad bastante constante de códigos cortos y que le permite crear varios tipos de páginas personalizadas (producto, cesta, pago, “mi cuenta”) en su sitio web WooCommerce. Es una extensión de Compositor plug-in Visual que debes instalar de antemano.WooCommerce páginas constructor

Gracias a este complemento, tendrás la posibilidad de crear sitios web de comercio electrónico único usando cualquier tema de WordPress, y te hará ganar mucho dinero.

Descargar | Demo | alojamiento web

2. Elementor

Lanzado originalmente en 2016, el complemento Elementor WordPress es uno de los creadores de páginas más jóvenes de esta lista. A pesar de su inicio tardío, Elementor acumuló rápidamente más de 1 de instalaciones activas en WordPress.org, lo que lo convierte en uno de los Constructores visuales de las páginas de WordPress más populares.

elementor pro e1544277036401
Lo que hace que su reputación sea su interfaz visual fluida, sus diferentes opciones de estilo y otras características poderosas como la creación completa de Temas de WordPress.

Su interfaz se divide en dos partes principales, con una tercera zona para ciertos parámetros. La versión gratuita de Elementor ofrece widgets gratuitos de 28. La versión Pro trae otros widgets 30, un total de widgets 58 en la versión Pro. La versión gratuita incluye aproximadamente plantillas gratuitas de 40, mientras que la versión Pro trae cientos de plantillas adicionales.

 Descargar | Demo | alojamiento web

3. Ninja Popups

Con más de 30 ventas y una calificación de 000 estrellas, Ninja Popups es uno de los plugins de WordPress los más populares disponibles en Code Canyon.

Los complementos de wordpress de Ninja Popups crean popup pop up opt in

Además de una amplia gama de modelos para una variedad de usos, también viene con varias características como: un constructor visual de emergente, 10 posiciones de visualización diferentes de ventanas emergentes, 74 efectos de animación diferentes, compatibilidad con tecnología antibloqueo para evitar los bloqueadores de anuncios, una variedad de opciones de orientación, estadísticas en el salpicadero, bloqueo de contenido para correo electrónico opcional o para compartir en redes sociales, toneladas de integraciones con servicios de marketing por correo electrónico y más.

Descargar | Demo | alojamiento web

Recursos recomendados

Conozca otros recursos recomendados para ayudarlo a construir y administrar su sitio web.

Conclusión

Listo ! Eso es todo por este tutorial y espero que te ayude a crear fácilmente controles deslizantes o diapositivas con la ayuda de Plugin de WordPress Smart-SliderSi te gustó, no dudes en comparte con tus amigos en tus redes sociales favoritas

Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress.

Pero, mientras tanto, cuéntenos sobre su comentarios y sugerencias en la sección dedicada.

...