A todo lo ancho Los deslizadores son un elemento de diseño popular que capta la atención y resulta ideal para mostrar imágenes destacadas, promociones y mensajes clave. Elementor facilita la creación de un control deslizante de ancho completo en un sitio de WordPress. Esta guía proporciona pasos detallados y ejemplos para ayudar a configurar y personalizar un control deslizante de ancho completo.
Paso 1: Instalar y activar el plugin Elementor
If Elementor isn’t installed, follow these steps:
- Inicie sesión en el panel de control de WordPress.
- Navegue hasta Plugins > Añadir nuevo Plugins.
- En la barra de búsqueda, escriba Elementory, a continuación, haga clic en Instale.
- Una vez instalado, pulse Active.
Esta guía utiliza Elementor Proque incluye el Deslizador widget. If Elementor Pro isn’t available, a third-party plugin like Complementos esenciales para Elementor también ofrece la función de deslizador.
Paso 2: Crear una nueva página o editar una existente
Para añadir la corredera crear una nueva página o editar una ya existente:
- Ir a Páginas > Añadir nueva Página para una nueva página, o seleccione una página existente para editarla.
- Haga clic en Editar con Elementor para abrir el editor de Elementor.
Paso 3: Añadir el widget deslizante
Dentro de Elementor, utilice el widget Slider:
- Pulse el botón Añadir nuevo contenedor y elija un diseño a una columna.
- En el panel izquierdo, busque el Deslizador widget y arrástrelo a la sección.
Paso 4: Configurar los ajustes del deslizador
Personalice el contenido del deslizador:
- Añadir contenido de diapositivas: Haga clic en cada diapositiva, cargue imágenes y añada un título, descripción, y un llamada a la acción botón.
- Ejemplo: A travel blog could showcase popular destinations with a “Más información" o "Explore” button.
- Establecer imágenes de fondo: Utilice imágenes de alta resolución (al menos 1920px de ancho) para mantener la claridad.
- Buenas prácticas: Optimice las imágenes entre 100KB y 300KB para una carga más rápida.
- Enlaces de botones: Link each slide’s button to relevant pages, such as product pages or blog posts.
Paso 5: Establezca el diseño de ancho completo
Para mostrar el deslizador en toda su anchura:
- Seleccione la sección con el widget deslizante y haga clic en Editar contenedor.
- En el Disposición ficha, establezca Anchura del contenido a Ancho total.
- Fije Hueco entre columnas a Sin brecha para que el deslizador cubra todo el ancho de la pantalla.
- Ir a la Avanzado y configure Margen y Acolchado a cero, asegurándose de que el deslizador se alinea con los bordes de la pantalla.
- Un portafolio de fotografía podría utilizar sliders de ancho completo para imágenes apaisadas, cubriendo la pantalla sin márgenes.
Step 6: Customize the Slider’s Appearance
To adjust the slider’s style:
- Ajustes de altura: En el Contenido ajuste la altura para adaptarla al diseño. Opciones como Ajustar a la pantalla o ajustes de altura personalizados (por ejemplo, 600px) están disponibles.
- Superposición de fondo: En la pestaña Estilo, añada una superposición de fondo semitransparente para mejorar la legibilidad del texto.
- Utilice una superposición oscura sobre imágenes claras o una superposición clara sobre imágenes oscuras.
- Tipografía: You can adjust fonts, styles, and colors to match the site’s branding. Elementor allows you to customize typography for titles, descriptions, and buttons.
- Efectos de animación: Añada Animaciones de entrada o Efectos Hover en el Avanzado para la interactividad.
Paso 7: Guardar y previsualizar
Tras finalizar la configuración de la corredera:
- Haga clic en Publique o Actualización.
- Utilice el Vista previa (icono del ojo) para ver el aspecto que tendrá la corredera en directo.
Compruebe que el deslizador se carga correctamente y se muestra bien en varios dispositivos (ordenador de sobremesa, tableta y móvil).
Conclusión
Un deslizador de ancho completo añade impacto visual, resaltando contenidos destacados como promociones o mensajes críticos. Elementor ofrece una amplia gama de opciones de personalización, lo que simplifica la creación de un deslizador atractivo y con capacidad de respuesta.
Preguntas frecuentes
1. Why isn’t the slider displaying in full width?
Compruebe que el Sección y Columna los diseños se ajustan a Ancho total y que el margen y Acolchado se ponen a cero.
2. ¿Cómo puedo acelerar los tiempos de carga del deslizador?
Optimice las imágenes guardándolas en formatos como JPEG o WebP. Lo ideal es que el tamaño de los archivos esté entre 100 KB y 300 KB.
3. ¿Cómo puedo hacer que la barra deslizante sea más interactiva?
Utilizando Animaciones de entrada y Efectos Hover in Elementor’s Avanzado puede añadir un toque dinámico.