Índice
Los sliders son uno de los recursos más utilizados en las páginas webs, ya sean webs corporativas, eCommerce, plataformas…
Se suelen añadir sliders en la parte superior de la páginas de inicio, con la finalidad de atraer al visitante y mostrar las instalaciones, los productos o la temática en general de la web, de forma interactiva.
En este post vamos a ver cómo configurar el módulo Slider de ancho completo en Divi, el cual la plantilla llama «Control deslizante de anchura completa».
Cómo hacer un Slider perfecto para tu web
Antes de nada, ten en cuenta que un slider en una página principal es la primera toma de contacto que tiene el visitante con tu web y no todas las imágenes son ideales para ubicarlas aquí.
Por lo tanto, recuerda estos detalles:
- Una imagen de calidad es de suma importancia. Procura que la imagen elegida contenga las dimensiones que marca la plantilla para que se muestren correctamente, que tenga la calidad suficiente y que ayude a resaltar el contenido que deseas.
- Si añades texto sobre el slider, este debe de ser corto y preciso, para que que el usuario pueda leerlo fácilmente y captar la idea de inmediato.
- Determina un tiempo adecuado para la trasición de cada diapositiva o imagen, considerando los segundos necesarios para que al usuario le de tiempo a ver la imagen y leer el mensaje.
- Evita que el slider acapare toda la atención de la página web. Es cierto que si se hace bien es un gran atractivo visual para el usuario, pero probablemente tengas otras secciones que te interesa remarcar igualmente, como por ejemplo, la sección de productos de tu tienda online, la tabla donde muestras tus servicios, tu página de cursos, la página de proyectos…
- Recuerda que prácticamnete la mitad de los usuarios, si no más, utilizan el teléfono móvil o la tablet para navegar por internet. Así que, aunque Divi sea una plantilla responsive, intenta utilizar imágenes y textos en el slider cuyo contenido se visualice adecuadamente en todos los dispositivos.
Cómo hacer que un Slider tenga anchura completa en el tema Divi
Crear un slider de ancho completo en la plantilla Divi no es complicado pero debes de conocer antes cómo funciona. Sobre todo porque las posibilidades de diseñar un slider con este contructor son infinitas.
Para añadir un slider a una web con Divi, hay que añadir un módulo de slider. La plantilla lo llama «Control deslizante de anchura completa». A continuación habrá que configurar todos sus ajustes.
Este módulo se encuentra dentro de las secciones de anchura completa y es la vía más rápida para configurar un slider que rellene todo el ancho de la web. También podrías añadir el módulo «Deslizador» en una sección estandar y hacer que tenga ancho completo con CSS, pero lógicamente requiere de más trabajo.
Configurar el módulo «Slider» de Divi paso por paso
Añadir y configurar un Slider de ancho completo en Divi es tan sencillo como seguir los siguientes pasos:
Entra en la página que quieres editar y activa el Constructor Divi.
Lo primero que debes añadir es una Sección de anchura completa.
Clica en Insertar módulo y entre los nueve módulos que te aparecen disponibles para ancho completo, añade el de Control deslizante de anchura completa.
Si entras en esta sección (icono de las tres líneas), te aparecerán las pestañas de ajustes comunes a todos los módulos de Divi:
- Ajustes generales.
- Ajustes avanzados de diseño.
- CSS Personalizado.
Vamos a ir personalizando el módulo de slider de Divi viendo las opciones de configuración de cada una de estas pestañas:
Ajustes generales
Estos son los ajustes generales del slider de anchura completa. Todo lo que modifiques aquí afectará al módulo en conjunto, osea a todas las imágenes que incluyas.
Las opciones que puedes ajustar en esta ventana son:
Añadir nueva diapositiva: entrando aquí podrás editar cada imagen del slider por separado, añadiendo un título, un texto y una url al botón, o una imagen, vídeo o color al fondo.
Crea una nueva diapositiva y clica en el icono de las tres líneas cada vez que necesites editarla.
Estos ajustes individuales de cada diapositiva prevalecen sobre los anteriores. Por tanto, tenlo en cuenta a la hora de modificar ajustes como el tamaño, tipografía o color del texto.
Al igual que todos los módulos, aquí volverás a encontrar los tres apartados comunes: Ajustes generales, Ajustes avanzados de diseño y CSS Personalizado.
Si vuelves hacia atrás, volverás a la ventana de los ajustes generales del módulo. Esto puede confundir un poco al principio, pero la dinámica que sigue el tema Divi es siempre la misma.
Una vez tengas las diapositivas creadas, te aparecerán alistadas en los ajustes del Control Deslizante o Slider. La plantilla Divi te permite ordenarlas de forma intuitiva arrastrando los bloques con el ratón.
Flechas: tienes la opción de añadir o eliminar las flechas laterales con las que el usuario avanza sobre las diapositivas o imágenes.
Puedes seleccionar el color de estas flechas en los Ajustes avanzados de diseño, bien del módulo en general o bien de cada diapositiva por separado. Lo ideal es que sea un color visible en función de la imagen de fondo que hayas elegido.
Controles: se refiere a los puntitos inferiores que marcan el orden de las diapositivas. Puedes activar o desactivar esta opción.
Igualmente puedes elegir el color de estos controles en los Ajustes avanzados de diseño.
Animación automática: tienes la opción de permitir que las diapositivas se vayan deslizando automáticamente o dejarlas estáticas para que sea el usuario el que las pase.
Si activas esta opción aparecerá un nuevo campo en el que debes indicar la velocidad de las diapositivas en milisegundos. Por ejemplo, si quieres que pasen cada 3 segundos, indica 3000 en este campo.
Usar efecto paralaje: puedes hacer que tus diapositivas tengan efecto paralaje, es decir, que al hacer scroll, la imagen del fondo se desplaza a una velocidad más lenta que el resto de elementos de la web, creando un efecto de profundidad en ella y haciendo que se vaya mostrando poco a poco.
Recuerda que si activas esta opción, tu imagen tomará las dimensiones del ancho y el alto de la pantalla.
Aunque los parallax sean muy atractivos visualemente en la web, te recomiendo no abusar de ellos y activar este efecto si dispones de imágenes con buena calidad.
Eliminar sombra interior: aquí puedes activar o desactivar la opción de sombra interna. Resulta ideal activarla cuando tienes fondos de color o imágenes de fondo.
Desactivar el: aquí se muestran tres casillas con cada dispositivo, escritorio, tableta o smartphone. Activa la casilla en la que quieras que no se muestre esta sección completa.
Puedes desactivar una sección cuando en la versión móvil la web se ve muy sobrecargada, con exceso de información para el lector.
Etiqueta de administración: Este es el título con el que se muestra el módulo en el contructor web de Divi de la edición de la página.
Puedes sustituir, por ejemplo, «Control deslizante de anchura completa» por «Slider ancho completo» o por «Slider con ofertas de Navidad», para reconocerlo mejor al entrar en el constructor.
Ajustes avanzados de diseño
Entrando en estos ajustes personalizarás aspectos más detallados del slider, que afectarán a todas las diapositivas en conjunto. Los ajustes que Divi te permite personalizar aquí son los siguientes:
Relleno superior: añade un relleno superior al slider en general e indícalo en píxeles. Esto te ayudará a agrandar o reducir la altura del slider desde la parte superior de la sección.
Si clicas en el icono del teléfono móvil que te aparece en la parte derecha, podrás personalizar el relleno superior en cada tipo de dispositivo, para que se adapte a la perfección.
Relleno inferior: añade un relleno inferior al slider en general e indícalo en píxeles. Esto te ayudará a agrandar o reducir la altura del slider desde la parte inferior de la sección.
Si clicas en el icono del teléfono móvil que te aparece en la parte derecha, podrás personalizar el relleno inferior en cada tipo de dispositivo, para que se adapte a la perfección.
Ocultar contenido en dispositivos móviles: si quieres desabilitar esta sección en los dispositivos móviles, activa esta casilla.
Ocultar CTA en dispositivos móviles: si quieres desabilitar el botón de «Call to Action», es decir, el botón del slider, activa esta casilla.
Este botón tiene sentido si enlazas hacia un contenido importante que te interese, como pueden ser tus productos, tus proyectos, una promoción…
Mostrar imagen o vídeo en dispositivos móviles: habilita esta casilla para mostrar las imágnes o vídeos del slider en los dispositivos móviles.
Ajustes cabecera: te aparecerán varios apartados en los que puedes seleccionar la fuente, el tamaño, el color de texto, el espacio entre letras y el interlineado de todos los títulos de cabecera que aparecen en el slider.
Ajustes cuerpo de texto: te aparecerán varios apartados en los que puedes seleccionar la fuente, el tamaño, el color de texto, el espacio entre letras y el interlineado de todos los textos que aparecen en el slider.
Utilizar estilos personalizados para botón: si activas esta casilla, se abrirán campos nuevos que te permitirán dar dar estilo a todos los botones en general que aparecen en el slider.
Puedes elegir el tamaño y el color del texto, el color de fondo, el ancho y el color del borde, el radio frontera (redondeo de los bordes), el espacio entre letras, la fuente del texto del botón, el color y ubicación del icono que irá dentro del botón y el aspecto del botón en hover (al pasar el ratón po encima).
CSS Personalizado
En este apartado puedes añadir CSS para esta sección en general y modificar cualquier aspecto que la plantilla Divi no tenga incluido, lo cual te permite personalizar por completo el diseño.
Con todos estos ajustes, ya quedaría configurado el slider de ancho completo en Divi. La plantilla te da tantas posibilidades de crearlo fácilmente, que a partir de aquí, podrás buscar la definición de slider que más se enfoque a tu negocio online.
Todas las configuraciones de las capturas de pantalla que ves en este post son reales y me han servido para hacer un slider sencillo con Divi, utilizando solo los ajustes que trae la plantilla y sin añadir ningún código. Algo que prácticamente cualquier persona con unos conocimientos base podría hacer.
¿Te imaginas ahora todo el potencial que tiene el tema Divi para crear un slider de ancho completo?
Por último, si quieres reutilizar el mismo slider en diferentes páginas, guarda este módulo en la Biblioteca de Divi y agrégalo a la página o páginas que desees con tan solo un click. Esta es otra de las maravillas de Divi.
Buenas tardes, como puedo o con que codigo puedo hacer la animación de solo el titulo en el modulo de control de deslizante de anchura completo quiero que solo cambia el titulo o el subtitulo automatica no el fondo.
Buenas tardes
de antemano les doy las gracias.
en el constructor divi me apararece este Texto: » No se pudo mostrar la sección et pb
ocultar mensaje de error
typeerror: no se puede leer la longitud correcta de indefinido
en n div en ETBbuilsección en div en ETBuilderRoot
solo cuando doy habilitar contructor visual y solo me pasa con el Control deslizante de anchura completa y no se puede ver la imagen y el texto y no puedo hacer las modificaciones desde el contructor visual. en la pagina si se ve bien las imagenes y eltexto.
Buenas tardes, como puedo hacer para personalizar el título del control deslizante? quiero ponerlo en la parte inferior de la imagen
Hola tengo la misma duda!! estoy casi seguro que la ubicación del titulo sólo se modifica con CSS ya que al mover el múdulo los fondos tambien se mueven. Espero puedan ayudarnos!!
Hola amigo, lograste solucionar como poner el titulo al final de la imagen? gracias.
Saludos, tengo un problema con el slider de anchura completa.
Quiero colocar un vídeo de fondo que está alojado en youtube, pero al actualizar no muestra nada. Luego intente descargando el vídeo y subirlo a la biblioteca de medios, lo busco y ya, de ese modo funciona, pero cuando actualizo la página y busco la diapositiva del vídeo, éste reproduce pero sin audio. Me pueden ayudar con alguna solución? ya sea la de cargar el vídeo directamente desde youtube o solucionando el problema de audio. gracias
No entiendo bien la pregunta quieres un slider con video?.
la unica solución que he encontrado es embebiendo el video de youtube
con el módulo de código y un poco de css para añadir texto.
El audio se pone en mute automaticamente que si añades el iframe desde el video
se puede quitar.
Te dejo un enlace para que puedas ver lo que te digo. y pido disculpas al admin, no es spam trato de ayudar.
https://youtu.be/KxHayHex2r0
Saludos, quisiera crear un control deslizantes de imágenes pero quisiera que las imágenes se vieran una al lado de otra, mas no que se vea 1 sola imagen en pantalla completa, es posible eso??
Hola, Muy buén trabajo, gracias por los tutoriales, tengo un problema quees el siguiente:
Quiero poner un control deslizante o slider , pero en la visualización en dispositivos móviles me anula imagen y desaparece. ¿Como puedo hacer un deslizante tipo anuncio con su imagen y que aparezca en los dispositivos?
Hola,
Estoy creando una pagina web con DIVI y quiero incluir in slider a tamaño completo.
Quiero que las diapositivas vayan cambiando a un intervalo de tiempo, tal y como lo haces tu.
El problema que tengo es que no veo por ninguna parte el botón de animación automática ni el campo para definir el tiempo entre diapositivas.
¿Hay que activarlo en algun sitio?
¿No debería aparecer por defecto como a ti?
He actualizado la versión de DIVI la semana pasada, así que el que sea una versión antigua no puede ser el orígen del problema.
Muchas gracias.
Hola David, con las nuevas actualizaciones los controles se han modificado un poco, pero igualmente existe la opción de activar la animación automática.
Debes entrar en el módulo de Control deslizante -> Diseño -> activar botón «Animación automática» (es el último juste). Al activar este botón, automáticamente se abrirán dos campos nuevos; uno para definir el tiempo de las diapositivas y otro para continuar con la animación en hover.
Espero que te sirva de ayuda.
Un saludo!
Hola, estoy creando un modulo de anchura completa para añadir slide.
Cuando incluyo las imágenes me aparecen cortadas de alto. Las tengo definidas a 1080×608 px pero cuando las subo en la parte de slides salen en ancho completo pero cortadas.
He probado la opción de ponerlas como fondo de diapositiva y sale cortada.
También como imagen de diapositiva, pero sale en pequeña y a la izquierda,
No consigo crear el slide de ancho completo y el alto que yo desee.
no sé si es que no utilizo el contenedor correcto o que.
Gracias
A mi me pasa muy parecido. La primera imagen del slide me sale bien, pero las siguientes me salen cortadas de abajo y desplazadas hacia abajo. El tema es que si voy pasando las imágenes se van arreglando y se cventran y se ven correctamente. Lo he mirado todo y no hay mnanera. Si ue es verdad que solo me pasa cuando las publico, en edición me funciona correctamente.
Dejo el enlcace: https://berdac.com/xavi_test_4bussiness/
No se como cambiar el color de las flechas de un deslizador a pantalla completa, son las flechas para cambiar de diapositiva, ahora no se ven en color blanco por tener un fondo muy claro, gracias de antemano
Hola Juan! Es muy sencillo.
Entra en los «Ajustes del control deslizante», después en los «Ajustes de diapositiva» que quieras personalizar (se hace de forma individual) y ve a la pestaña de «Diseño». Te aparecerá un apartado llamado «Navegación» donde eiges el color de las flechas y del navegador de puntos.
Espero haberte ayudado 😉
Hola, tengo un problema, espero me puedas ayudar, tengo una pagina donde puse un video de fondo, únicamente quiero que se vea ese video y se reproduzca una vez, pero el video se reinicia una y otra vez, cuando solo quiero que al visitar la página sea una sola reproducción. ¿Puedes orientarme? Gracias.
Hola Gustavo!
Prueba a poner este código en Divi > Opciones del tema > Integrations 😉
<script>(function($) {
$(document).ready(function() {
$('.no-loop .et_pb_section_video_bg').each(function() {
$(this).find('video').removeAttr('loop');
});
});
})(jQuery);
</script>
Hola Tengo un problema con lo slider de divi a ancho completo y consiste en que salen las fotos en pequeños y no sé como solucionarlo con divi o si por contra me recomiendan algún plugin de slider que merezca la pena porque con divi, no acierto a que me salgan en grande las fotos.
muchas gracias,
Muy buen articulo.
Espero que me ayuden tengo un problema cuando la primera imagen se muestra se sube para arriba después hay como 4 segundos en blanco sin ninguna imagen luego aparece la segunda imagen sin casi notarse luego desaparece y así vuelve a la primera imagen.
De antemano muchas gracias.
Hola Joel! desde aquí no puedo saber qué puede estar pasando, pero podría ser que hayas añadido alguna nueva diapositiva al módulo y no le hayas añadido contenido, por eso te sale en blanco. En cuanto a la imagen que se sube, comprueba que no tengas añadida ninguna animación y que el tamaño de la imagen subida es el adecuado. Saludos!
pero el unico problema que veo de esta plantilla divi, es que este slider no es responsive, ya que en el celular no se acopla al tipo de pantalla, no se ve la imagen como uno quiere, esta cortado y no hay una configuración para eso.
Hola Edson, tienes razón en que en el slider de ancho completo la plantilla puede no mostrarse responsive. En ese caso, lo ideal es personalizar el relleno para que se muestre correctamente en todos los dispositivos o crear una nueva sección con otro tamaño de imagen y activarla para mostrar solo en dispositivos móviles. Saludos!
Una pregunta, qué anchura y altura utilizas para un slider? Generalmente uso 1920px de ancho para que me ocupe el tamaño completo de la plantilla, pero tengo duda en la anchura, había leído en algún sitio que debería utilizar un tamaño de 1024 o 1080 de alto, pero lo veo excesivo. ¿Qué tamaños sueles utilizar para los sliders de tamaño completo?
Hola Jorge!
El ancho y el alto de las imágenes lo puedes configurar en WordPress>Ajustes>Medios>Tamaño grande. Por defecto viene 1024 x 1024. Por lo que si subes las imágenes con esas dimensiones, después deben mostrarse enteras en la web. Espero que te sirva. Saludos!
Hola, buen día.
No sé si a alguien le haya pasado el problema donde no deja editar el texto o cuando creas u nuevo módulo de anchura no te deja seleccionar la casilla de título o color del texto.
Espero me puedan ayudar, Saludos.
Hola Angel, ¿lo has podido solucionar? con las nuevas actualizaciones de Divi se han incluido muchas opciones de personalización directa de los títulos y textos en la parte de «diseño» de cada módulo. Saludos!
Saludos desde Ecuador, quisiera que me ayuden en algo…… quisiera insertar un vídeo con ancho completo, lo que pasa es que estoy utilizando una sección con dos columnas en la primera va un texto y el segunda el vídeo, pero quiero que ocupe todo el espacio de la columna que me queden margenes y rellenos en cero, de antemano gracias por la ayuda 😀
No me aparece la opción «Animación automática» en el control deslizante de Divi.
¿Existe algún parámetro que pueda estar ocultando esta opción?
Gracias.
Solucionado… está al final de pestaña avanzado
Gracias
Hola Pablo tengo la ultima versión instalada version 3.0. 91 y No me aparece la opción “Animación automática” en el control deslizante de Divi. tampoco al final de la pestaña de la pestaña avanzada. ¿como lo encontrate tu? Gracias
Hola Jose Antonio,
¿Sigue sin aparecerte?
En la versión Versión: 3.0.92, esta opción es la que se muestra al final del todo en la pestaña «Diseño» que aparece a abrir los ajustes del módulo. Está incluida tanto en el deslizador de ancho completo como en el deslizador de ancho standar, y es simplemente un botón.
Saludos!
Estimado
Gracias por la información. Pagué y descargué el tema divi pero al parecer viene con problemas. En la opción de construir un slider he seguido todos los pasos que describes, pero me faltan las opciones de animación en la caja ????, no vienen. Que hacer?
Saludos
Hola Patricio!
Con la nueva actualización de Divi, la opción de activar la «animación automática» del slider y la velocidad de las diapositivas, se encuentran en la pestaña de «Avanzado», casi al final. Se sigue configurando de la misma forma que explico en el post.
Espero que logres configurarlo, saludos!
Hola,
es posible que en la versión de divi 3.0.71 haya algún bug en el tema divi y no crea correctamente el slider de ancho completo. Me pone la imagen en pequeño.
Hola Juan Carlos,
Aún no he podido actualizar este post, pero con la nueva actualización de Divi han cambiado algunas opciones de diseño dentro de los módulos. Ahora ofrece más opciones.
Para configurar el slider de anchura completa, tendrás que añadir la imagen de fondo entrando en los ajustes de la diapositiva, en el apartado «Fondo» y clicando en la tercera pestaña (image). Una vez se haya subido la imagen, la puedes previsualizar sin salir del constructor y justo abajo podrás configurarla tal como quieres que se muestre, (Imagen de Fondo de Tamaño > Ajuste, Cubierta o Tamaño Real).
Recuerda también que para que las imágenes se adapten lo mejor posible, deben contener las dimensiones que marca la plantilla (WordPress > Ajustes > Medios).
Espero que te sirva de ayuda.
Gracias por leer el blog. Un saludo!
Perdon de nuevo, ya se el problema exacto. Es el hueco que se deja para el titulo de las paginas. Lo malo es que aunque quede vacio sigue mostrandose ese hueco. Asique no se. Si sabes alguna solucion estaria agradecido. Si no muchas gracias igualmente. Un saludo
Hola de nuevo Hector! Dejamos tu duda abierta por si alguien ha tenido el mismo problema 😉 Gracias!
Hola:
¿Alguien consiguió solución para este problema? Yo tampoco soy capaz de eliminar ese hueco, ni indicando los 0px en el relleno.
Un saludo.
Hola Alejandro,
¿Habéis probado a añadir una medida en pixeles en el apartado «Separación» de los ajustes del módulo? Donde aparecen solo dos campos: Relleno superior y Relleno inferior. Por ejemplo, podéis añadir 200px al Relleno superior, o 500px al Relleno inferior, según queráis mostrar las imágenes…
Poco a poco tendremos que dar con la solución! 😉
Ya nos contáis. Saludos!
He mirado las dos cosas y nada. Es como si estuviese fijo. ¿No tendra que ver con la plantilla? Estoy rediseñando la pagina y anteriormente ya tenia ese hueco. Yo creia que al instalar un nuevo tema se restablecian las plantillas al nuevo tema o se añadian nuevas plantillas para el nuevo tema. El problema es que no tengo mucha idea de codigo y estoy atascado con esto.
Muy buen articulo pero tengo un problema que me gustaria que me ayudases a solucionar y es que siempre me queda un hueco en blanco entre el menu y la primera seccion y no se como subir la seccion para que lo tape ya que no queda nada bien y lo he intentado de mil formas pero no hay manera. Seguramente sea una tonteria pero no doy con ello. Muchas gracias
¡Buenos días Hector! En principio no sabría decirte exáctamente, pero yo empezaría mirando el «Relleno personalizado» de la sección. A veces, el tema Divi mete por defecto un hueco en el relleno superior y en relleno base, y poniendo «0px» en cada una de estas casillas, se soluciona.
También podría ser por la «Altura de sección», en Divi / Personalizador de temas / Ajustes generales / Ajustes de formato.
Espero que tengas suerte! Gracias por leer el blog 😉