Índice de contenidos
Contenido
Vamos a ver como crear un slider de imágenes para WordPress de una forma muy sencilla.
Un slider de imágenes es de gran utilidad y es muy empleado en páginas web de negocios, donde en una pantalla principal muestran sus productos más destacados. También es muy útil en páginas web de fotógrafos profesionales, donde cualquier potencial cliente puede ver en pocos segundos sus mejores trabajos.
No solo eso, en los slider que vamos a crear, podemos añadir también textos y enlazar a ciertos artículos o secciones de nuestra página web, lo cual los hace interesantes también para muchos otros tipos de página web.
Veremos como crear y como editar nuestros slides y como hacerlos SEO friendly para que ayuden a mejorar nuestro posicionamiento web.
Instalar Smart Slider 3
Lo primero que vamos a hacer es instalar y activar el plugin Smart Slider desde el repositorio de WordPress.
Este plugin es gratuito, aunque dispone de una versión pro con más opciones de personalización y plantillas para importar.
Hay una gran cantidad de plugins para crear sliders, sin embargo, este es el más sencillo de utilizar y con más opciones.
Smart Slider 3 no requiere de ningún tipo de configuración. Una vez instalado podemos diriginos, desde el menú de nuestro WordPress, a la aplicación Smart Slider para empezar a crear y diseñar nuestros sliders.
Como crear el slider
Una vez que accedemos a este plugin nos encontramos con un escritorio donde podemos crear un nuevo slider o seleccionar uno creado anteriormente.
En la parte inferior nos encontraremos varias opciones, dos de las cuales son las que vamos a utilizar:
- Crear un slider nuevo: partiendo de cero, vamos a configurar dimensiones, colores de fondo, tipo de slider y disposición de las imágenes, botones y textos.
- Importar una plantilla: Vamos a trabajar a partir de algunos sliders prediseñados, lo cual nos ahorra una gran cantidad de trabajo, ya que solo tenemos que sustituir imágenes y textos.
Crear un slider nuevo
Si optamos por esta opción, nos llevará a una pequeña ventana donde vamos a poder dar un nombre, dimensiones y disposición o diseño. También nos vuelve a dar la opción de importar alguno de sus sliders predefinidos. El tamaño lo vamos a editar luego, con lo cual no hay que modificar nada.
Una vez elegido el formato, nos lleva a la ventana donde podemos añadir los Slides.
Los Slides son cada una de las imágenes, videos, textos o artículos que va a mostrar el slider.
En la imágen, hemos añadido dos artículos como ejemplo, nuestro slider, en lugar de imágenes tendrá la introducción a dos artículos
Es tan sencillo como seleccionar el tipo, y subir la imágen, video, o lo que queramos.
Cuando hayamos añadido todos los slides pulsamos en "Guardar", en la esquina superior derecha..
Justo debajo de la pestaña Publicar, en la parte inferior de la imágen, obtenemos el shortcode, que tendrá un formato similar a este: [ smartslider3 slider=2 ].
Ya solo nos quedará dirigirnos a la página donde queremos publicar el slider y pegar el shortcode. De este modo, podremos ir realizando modificaciones en el diseño y viendo si encajan en nuestra web, guardando el slider y actualizando la página donde lo hemos ubicado.
Trabajar con un slider prediseñado
Trabajar con un slider prediseñado puede ahorrarnos bastante trabajo, siempre que alguno de los que disponemos en la biblioteca pueda encajar con nuestro diseño web.
Para acceder a los sliders que nos ofrece este plugin, en lugar de Nuevo Slider, hacemos click en "Biblioteca de Plantillas"
En la Biblioteca encontraremos algunos sliders gratis que podemos utilizar. Hay bastantes más de pago si nos interesa la versión premium del plugin, organizados según el tipo de slider que necesitemos.
Una vez tengamos claro cual vamos a utilizar, hacemos click en importar.
Esto nos llevará a la misma pantalla que si creamos un slider nuevo, pero ya tendrá algunos slides insertados, a los que vamos a poder editar el diseño, imágenes o textos.
Como hemos explicado para crear un slider nuevo, en este caso haremos lo mismo exactamente. Vamos a guardar el slider, copiar el shortcode y pegarlo en la página donde lo vayamos a publicar.
Editar diseño web del slider
En diseño del slider contamos con dos partes distintas, el diseño del slider y el diseño de slides.
Pulsando sobre un slide, accedemos al editor de slides. Una vez en el editor de slides, podemos volver al editor del slider en el menú superior -> slider.
Diseño del slider
Lo primero que haremos es configurar el diseño de nuestro slider.
Debajo de los slides que hemos colocado, tenemos el menú de ajustes generales, formatos y dimensiones.
Como ya tenemos nuestro slider publicado en la página, vamos a ir probando formatos y guardando, hasta que veamos que tipo de slider queda mejor. Aquí también ajustaremos los tamaños, si queremos un slider centrado, estirar, en mosaico, rellenar con efecto blur, etc.
En la parte inferior tenemos otros menú de ajustes de diseño, donde podemos poner barras de textos, miniaturas, flechas para pasar de un slide a otro o añadir sombras.
Diseño de los slides
Lo primero que debemos hacer es acceder al editor de slides y aprender a cambiar las imágenes, en caso de usar un slider importado desde la biblioteca, o si queremos cambiar algun slide de los que hemos puesto inicialmente.
Una vez dentro del editor de slides tenemos 3 opciones, Fondo, Animación y Opciones. Debajo de estas opciones, un editor visual, donde podemos ver los cambios y podemos añadir texto, imágenes o botones.
En estas dos pestañas, podemos cambiar la imágen de fondo, los textos, el título o enlace, e incluso si queremos dar un formato distinto a uno de los slides. Su uso es realmente sencillo.
Todos los cambios, podemos revisarlos debajo, en el editor visual, donde podremos realizar algunos pequeños ajustes de posicionamiento de imágenes, textos o botones:
Como puede verse, no tiene ningún tipo de dificultad, aunque pueda llevar unas horas de trabajo ajustando formatos y tamaños para adaptarlo bien a nuestro diseño web.
Si tenemos cualquier otra duda sobre su funcionamiento, en los editores de sliders y slides hay videotutoriales donde podemos ver más detalles.
