Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
Cuando son utilizados correctamente, los sliders pueden ayudar a que un sitio web parezca más dinámico y animado, al mismo tiempo que proporciona más cantidad de información en un espacio limitado.
Si deseas añadir un plugin de slider gratuito pero que esté repleto de características a tu sitio web WordPress, este tutorial te mostrará cómo hacerlo. Te proporcionaré una guía paso a paso fácil de seguir sobre cómo usar el plugin gratuito Smart Slider 3.
¿Qué hace que Slider Revolution sea el mejor plugin de slider para WordPress?
.jpg)
.jpg)
Los 10 mejores plugins de slider y carrusel para WordPress de 2019
Las mejores maneras de crear un slider de imagen para WordPress
Por qué deberías usar Slider Revolution en tu sitio WordPress
Descripción general de Smart Slider 3
Antes de profundizar en este tutorial, permitidme proporcionar una breve descripción general del plugin y sus características para que puedas determinar si dispone de todo lo que buscas en un plugin de este tipo.
- Los sliders que crees serán totalmente responsivos, estarán optimizados para el SEO, y funcionarán con todos los temas de WordPress.
- Puedes editar cada diapositiva utilizando una interfaz fácil de usar y visualizar una vista previa en vivo en tiempo real.
- Con un poco de creatividad, puedes crear tus propias diapositivas personalizadas con diseños únicos. Tienes control total sobre el aspecto de todos las titulares, el texto, los botones, etc. Puedes cambiar todo, desde la tipografía hasta el ancho del borde, el color de fondo, etc.
- Los sliders son compatibles con dispositivos móviles. Se verán perfectamente en dispositivos de todos los tamaños de pantalla.
- Las personas que no deseen empezar desde cero podrán simplemente usar las plantillas proporcionadas por el plugin y configurar rápidamente su propio slider cambiando solo las imágenes de las mismas.
Ofrece muchas más características que puedes encontrar en la página del plugin. Smart Slider no se limita solo al uso de imágenes y vídeos. Puedes usarlo para crear sliders para entradas, entre otras cosas.
Editar diapositivas individuales
Después de haber instalado y activado el plugin, su panel de administración debería parecerse a la imagen de abajo.
Crearemos nuestro primer slider usando plantillas preconstruidas. Para ello, haz clic en Template Library (Biblioteca de plantillas) y a continuación, en la siguiente página, elige Free (Gratuitas). Ahora, dirígete a la tercera plantilla llamada Image Slider (Slider de imagen) y haz clic en Import (Importar). Esto añadirá el slider al panel.
En la página del escritorio, ahora puede pasar el cursor sobre la plantilla importada y hacer clic en el botón de edición para comenzar a editar el slider.
Primero, editaremos las diapositivas y cambiaremos las imágenes y los subtítulos. Para ello, pasa el cursor sobre cada diapositiva y, a continuación, haz clic en el botón de edición que aparece. También puedes duplicar, eliminar o establecer una imagen determinada como primera diapositiva.
Ahora deberías ver algo similar a la imagen que mostramos a continuación.
La imagen de fondo puede cambiarse haciendo clic en el botón Backround (Fondo). Esto te mostrará una serie de opciones. Puedes cambiar la imagen del fondo por otra o establecer que este sea simplemente un color o un degradado sólido.
Al activar el interruptor de superposición en la imagen anterior, se superpondrá el fondo de la imagen con un color o degradado semitransparente. Si solo desea mostrar un color sólido o degradado en una diapositiva específica, sin ninguna imagen, simplemente haga clic en el botón Color y seleccione los colores que desea utilizar para el degradado.
Una vez hayas cambiado la imagen, puedes cambiar fácilmente el texto White Brown Cow haciendo clic sobre él. Esto te proporcionará un par de opciones como la de añadir un enlace o cambiar el color de fondo, el estilo de fuente, su tamaño, su color, etc.
Intenta jugar con diferentes valores y opciones para ver los únicos y diferentes resultados que puedes llegar a obtener según los distintos ajustes.
Como puedes ver en la anterior imagen, tienes un control total sobre la apariencia del título. Incluso puedes hacer clic en el botón More (Más) para añadir CSS personalizado y así personalizar aún más su aspecto.
¿Qué pasa si deseas añadir más elementos a la diapositiva?
Por ejemplo, imagina que queremos contarle a los lectores algo más sobre los tigres. En este caso, puedes hacer clic en el botón verde más de la esquina superior izquierda para añadir más elementos como por ejemplo titulares, texto e imágenes sobre la diapositiva.
Después de realizar todos los cambios, puedes previsualizar instantáneamente cómo se vería la diapositiva en diferentes dispositivos mediante el botón ubicado en la parte superior. También existen botones para deshacer y rehacer los cambios en la barra superior para que puedas deshacer cualquier cambio que no te guste.
Una vez estés satisfecho con los resultados, simplemente haz clic en el botón Save (Guardar) para guardarlos de forma permanentemente. Puedes cambiar el contenido y la apariencia de todas las restantes diapositivas de una manera similar.
Cambiar la configuración del slider
Después de realizar cambios en diapositivas individuales, es posible que también desees cambiar los ajustes que afectan al slider en su conjunto. Para ello, sencillamente haz clic en el slider que desees editar desde la página del administrador y desplázate hacia abajo hasta la sección de edición. Aquí tienes una captura de pantalla de la página desde la que puedes editar todas las opciones del slider.
Empecemos cambiando la apariencia y la posición de las flechas. Puedes optar entre no mostrar ninguna flecha en absoluto o mostrarlas con un fondo o ninguno. La primera opción añadirá una superposición oscura bajo las flechas para destacarlas de la imagen del fondo. Puedes elegir entre diferentes formas para los iconos y también, mostrarlas solo cuando los usuarios pasen el cursor sobre la diapositiva activando la opción Shows on hover (Mostrar al pasar el ratón). También puedes optar entre 13 posiciones predefinidas distintas para las flechas.
También puedes mostrar viñetas (en forma de círculos) acompañando a cada slider para que los usuarios puedan saltar directamente a una imagen en una posición determinada. Existen un par de opciones que puedes activar, como mostrar solo las viñetas al pasar el ratón o mostrar la miniatura de la diapositiva con cada viñeta. En este caso, yo las he desactivado porque nuestro slider tendrá miniaturas bajo cada diapositiva, y por lo tanto, las viñetas serán redundantes.
Puedes mostrar las miniaturas de forma permanente desactivando la opción Shows on hover. El ancho y alto de las miniaturas está establecido por defecto en 100 px por 60 px. Por lo general, esto tendrá un buen aspecto: las miniaturas no son lo suficientemente grandes como para distraer, pero sí lo suficientemente grandes como para mostrar una rápida vista previa. También puedes alinear las miniaturas a la izquierda, al centro o a la derecha.
Más ajustes del slider
Hay algunos otros ajustes generales que podrías cambiar, como el nombre del slider, sus dimensiones y si los usuarios pueden navegar a través de las diapositivas mediante el teclado. También puedes establecer una animación para la transición entre las diferentes diapositivas y especificar una duración para la misma.
Hay algunas otras configuraciones que puedes cambiar, como establecer el tamaño del slider y limitar su anchura en los ordenadores de escritorio, las tabletas o los dispositivos móviles.
Por último, puedes publicar el slider utilizando uno de los tres distintos métodos.
El primero consiste en añadir directamente el shortcode en tus entradas y páginas. El shortcode proporcionado por el plugin ya contiene el ID correspondiente al slider incrustado en él. Todo lo que tienes que hacer es copiarlo y pegarlo en la ubicación que desees.
El plugin también añade un icono al editor nativo de WordPress que te permite añadir fácilmente un slider en cualquier página o entrada.
Por último, puedes integrar el slider en tu tema usando un fragmento de código PHP para emitir el shortcode del control deslizante.
Pensamientos finales
En este tutorial, usamos el plugin gratuito Smart Slider 3 para crear un slider de imagen. Sin embargo, también puedes usarlo para crear sliders para las entradas de WordPress basadas en una categoría o etiqueta. Intenta jugar con todas las características de este plugin para ver si se ajusta a tus necesidades.
Las personas que busquen más características deben considerar echar un vistazo a algunos de los populares plugins de slider para WordPress disponibles en CodeCanyon.
¿Qué hace que Slider Revolution sea el mejor plugin de slider para WordPress?
Los 10 mejores plugins de slider y carrusel para WordPress de 2019
Las mejores maneras de crear un slider de imagen para WordPress
Por qué deberías usar Slider Revolution en tu sitio WordPress
Además, si quieres usar plugins personalizados pero no te sientes cómodo jugando con el código y prefieres que alguien lo haga todo por ti, considera el alojamiento administrado de WordPress. Gracias a la asociación de Envato con SiteGround, puedes obtener hasta un 60% de descuento en el alojamiento administrado de WordPress.
By
