Los sliders en el diseño web con Elementor son un elemento muy llamativo en una web que nos permite visualizar de forma rápida y con efectos animados una selección de productos o artículos que queremos destacar a primera vista de nuestros lectores. En esta guía aprenderás a crear  sliders con Elementor de manera muy sencilla y rápida.

El diseño de sliders en Elementor es muy sencillo, y nos permite crear diseños muy originales y con gran facilidad sin conocimientos avanzados de HTML o CSS.

También te puede interesar:
Ventajas de los Page Builder en WordPress
Diseña Popups con Elementor Popup Builder
Diseña Tablas de Precios en WordPress con Elementor Widget Price Table
Desactivar las comillas españolas en WordPress para siempre

¿Cómo insertar un slider en una Landing Page con Elementor?

Una de las ventajas de los sliders en general es que podemos añadirlos tanto en entradas como páginas.

Aunque lo ideal es usarlo en las landing pages para presentar nuestros servicios o destacar los productos más destacados de nuestra tienda online por ejemplo.

Ejemplo de slider diseñado con Elementor

Añadir un slider con Elementor es muy sencillo.

  1. Editamos nuestra página o entrada con el editor de elementor.
  2. Creamos una sección.

Crear una sección en Elementor

  1. Después pulsamos sobre el botón + para insertar un widget o buscamos por la palabra “slider” en el buscador de la izquierda.
  2. Seleccionamos el widget Slides de Elementor.

  1. Lo arrastramos a nuestra sección para incluirlo en nuestra entrada o página.

Por defecto se crea con tres diapositivas de ejemplo. Podemos añadir más o quitar las que no necesitemos. 

Aquí podemos ver el slider de ejemplo que nos crea Elementor nada más insertarlo.

Slider creado con Elementor

Como podéis ver, ya viene un título, una descripción y botón para enlazar con el contenido que estamos destacando en el slider.

Vamos a personalizar nuestro slider con Elementor

Para personalizar nuestro slider con Elementor solo necesitamos pensar qué servicios vamos a destacar o qué información queremos hacer más relevante en nuestra página.

Una vez pensado el contenido, tenemos que decidir si queremos usar una imagen de fondo, o color liso o degradado.

Después debemos pensar en un título, una descripción, y el CTA o Call To Action para llamar la atención y que el usuario haga clic en ese botón para llevarlo al artículo en cuestión o producto que queremos vender.

Editar widget slides de Elementor

Desde la ventana principal del widget slides de elementor podemos añadir o quitar slides. Podemos incluso hacer copias de una ya creada para agilizar la creación de nuestras diapositivas.

editar diapositivas de un slider de elementor

Efectos y características de las diapositivas

Elementor ofrece distintos efectos animados al pasar las diapositivas del slider. Y dispone de diferentes características que podemos elegir para personalizar el diseño.

  • Transición e Interacción: Podemos seleccionar el tipo de animación cuando pasamos de diapositiva.

Añadir efectos animados a un slider de elementor

  • Alineación y posición: Podemos definir la alineación del contenido de la diapositiva y colocar el título y la descripción en la posición que nos interese.

Modificar la alineación de un slider en Elementor

  • Flechas y puntos de navegación: Podemos mostrar u ocultar las flechas para pasar de diapositiva, o usar puntos de navegación para que el usuario pueda saltar a la que prefiera o volver a la que le interesa para obtener más información.

Añadir flechas o puntos de navegación a un slider en Elementor

Crear un slider sin plugins

Cómo habéis podido ver, es muy sencillo crear un slider con Elementor. Tener en nuestras manos una plantilla WordPress de estas características nos trae muchas ventajas. 

Y una de ellas y muy importante es que te ahorras el utilizar plugins externos para cubrir esta funcionalidad. Además de que es mucho más versátil y puedes crear tu slider viendo cómo va quedando y puedes colocarlo donde quieras.

Sliders en Elementor PRO

Recuerda que Elementor Slider está disponible sólo en las versiones de Elementor PRO.

Si quieres actualizar a Elementor PRO pincha aquí para poder usar este widget y me ayudarás a seguir escribiendo más tutoriales y seguir mantenimiento mi blog 😉.

Actualiza a Elementor PRO

¿Utilizas sliders en tu web?

Para terminar me gustaría saber si utilizas sliders en tu web y si le sacas provecho.Me llamo Javier Rodríguez y agradezco mucho a la Web de tu Vida por dejarme escribir en su blog y compartir con vosotros un tutorial sobre Elementor Page Builder que espero que os sea de gran utilidad para vuestros diseños.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR