Tutorial Smart Slider 3

Cómo crear carrusel de imágenes web

Instalación del carrusel de imágenes web

Instala y activa el plugin Smart Slider 3. El tema instalado en la demo es Ocean WP y para la maquetación visual Elementor.

Una vez instalado el plugin vamos a ir a la configuración desde el acceso rápido en la barra de navegación del administrador de WordPress o en el menú principal del escritorio Smart Slider 3.

Configuración de Smart Slider 3

Al entrar en los ajustes de Smart Slider veremos un carrusel que instala el plugin por defecto, se llama “Sample Slider”. Pasa el ratón por encima y haz clic en editar.

Veremos 3 banners cargados por defecto, los estilos son iguales, lo único que cambia es la imagen de fondo.

Localiza el Short code (código corto) y cópialo para mostrarlo en cualquier parte de nuestra página web.

Código corto

Abre tu página de inicio “Editar con Elementor”. Crea una sección nueva y colócala en la parte superior de la página. Extiende la sección al ancho completo y el ancho del contenido también a ancho completo.

Busca entre los elementos de Elementos el Short code y arrástralo a la nueva sección. Pega el short code que copiaste del carrusel de Smart Slider.

Elementor shortcode

Ahora se verá tu carrusel por defecto con las 3 imágenes pasando. Selecciona la columna interior de la sección para eliminar los márgenes que rodean el carrusel para que quede ancho y alto completo. En las opciones de Elementor con la columna seleccionada ve a “Avanzado” la opción de arriba a la derecha con el icono del engranaje. Añade 0 en todos los lados del Relleno.

Seleccionar columna

Modifica el carrusel web a tu gusto

Ve a los ajustes de Smart Slider. Selecciona el Sample Slider y haz clic en la pestaña tamaño. Coloca el ancho del slide a 1920px y el alto a 600px. Esto hará que el carrusel no ocupe el alto completo de la página de inicio y se muestre información relevante como pueden ser títulos, servicios, productos, etc.

Dimensiones del banner

Haz clic en el primer banner “Slide One” para editarlo. Desplaza la rueda del ratón hasta que veas el diseño de contenidos. Haz clic en cualquier elemento del carrusel para que aparezca la ventana emergente de edición, donde podrás modificar los contenidos, enlaces y estilos de cada elemento. Puedes añadir cualquier elemento nuevo con el icono verde del “+”.

Vídeo explicativo paso a paso de cómo crear carrusel de imágenes web

Contacto

Inicia tu proyecto conmigo

Resolveré todas tus dudas y te ayudaré con la contratación del alojamiento web y el registro de tu dominio.