Las mejoras que se han introducido en las últimas versiones del tema DIVI de Elegant Themes, suponen un gran avance para conseguir resultados de una manera más rápida y sencilla, como veremos en la explicación de este artículo con un deslizador o carrusel a pantalla completa.
Ya no es necesario utilizar código CSS para conseguir un buen resultado, aunque como os dejaré en los ejemplos, puede que lo necesitéis para conseguir algún efecto muy concreto.
Divi sigue siendo el tema de WordPress más vendido y utilizado gracias a su constructor integrado que, en muchas ocasiones, evita tener que añadir plugins adicionales que sobrecargan la web. Pero el usuario que se enfrenta por primera vez a este tema, o que quiere hacer algo diferente a lo previamente establecido, necesita saber qué opciones son las que tiene que tocar para conseguir el resultado que quiere.
Fullscreen slider o Carrusel a pantalla completa con Divi
Divi dispone de varios tipos de carruseles, a través de diferentes módulos, que se utilizan dependiendo de lo que queramos mostrar. Como queremos un carrusel completo que llene la pantalla, nos centraremos en el módulo llamado "Control deslizante de anchura completa", que sólo podemos utilizar desde una sección de "Anchura completa".
Este artículo es una actualización de uno que ya estaba escrito y que será sustituido por esta nueva versión, donde ya no es necesario algunos procesos que requerían algún tipo de conocimiento de programación. Ahora no es necesario ningún código a no ser que seas muy exquisito y necesites hacer algo muy especial.
Los sliders son elementos que no todo el mundo utiliza por razones técnicas o estéticas, pero es un elemento visual muy llamativo cuando uno accede a una web. Si eres de los que han considerado colocar un carrusel a pantalla completa, voy a explicarte la forma más sencilla de hacerlo.
Proceso para crear un pase de diapositivas a pantalla completa
Divi ha mejorado mucho la manera como trabaja su constructor, aumentado la velocidad de uso y la visualización en tiempo real de los cambios que vamos haciendo. Mi consejo es que hay que ir olvidándose de maquetar en la parte de administración y hacerlo visualmente en la parte frontal o front-end. De esta forma invertiremos menos tiempo y ganaremos en productividad.
Pero como se suele decir, para gustos los colores, y los que estáis acostumbrados a utilizar Divi desde el editor de WordPress, tenéis que activarlo primero desde las opciones del tema.
Para poder tener una guía completa del proceso comenzaré desde cero, creando una nueva página en WordPress para luego añadir el carrusel a pantalla completa en Divi.
Los que tengáis una página ya creada podéis saltaros este paso y editarla directamente desde la parte visual.
Añadir nueva página
Al añadir una nueva página, lo primero de todo será asignar el título que tendrá, como estoy creando una página de inicio, la llamaré así.
Después tendremos que decidir si trabajar con un borrador o publicar la página para que esté accesible en internet. En el caso de trabajar en borrador, habrá que publicarla al terminar de configurar la página por completo.
Otra opción importante, que añade Divi al editor, es elegir si mostramos el menú al cargar la página o que aparezca al desplazarse. Puede ser interesante dependiendo del contenido que tengamos. Si elegimos esta opción, podemos no modificar las opciones de la cabecera y dejarla con un color de fondo macizo.
Por último, picamos en el botón "Usar Divi Builder" para empezar a componer la página en el modo visual.
Si el carrusel o slider a pantalla completa lo queremos colocar en una entrada en lugar de una página, es necesario modificar las opciones del apartado "Ajustes de página de Divi" del panel de la derecha del editor de WordPress para que no aparezca la barra lateral.
Elegir la forma de diseñar la página
Al iniciar el constructor Divi Builder aparecen tres opciones:
- Empezar a construir desde cero
- Elegir un diseño pre configurado de Divi
- Clonar una página que ya hemos creado con anterioridad.
Para tener algo de contenido y no enfrentarme a una página en blanco, voy a elegir la segunda opción y cargar uno de los layouts que Divi ofrece prediseñados, pero al ser el carrusel un elemento independiente, podemos añadirlo a pantalla completa desde cualquiera de las otras dos opciones.
EXTRA:
Para poder cargar los diseños es necesario haber introducido una de las claves API, que podemos generar desde nuestra cuenta de Elegant Themes, en la pestaña "Actualizaciones" de las opciones de Divi.
Si no estás suscrito, te recomiendo que lo hagas para mantener tu sitio con buena salud y protegido con las actualizaciones periódicas. Además de poder utilizar el repositorio de diseños (layouts) de Divi.
Seleccionar la sección y el módulo del slider
Para configurar un carrusel a pantalla completa en Divi, tenemos que elegir una sección de ancho completo, y colocar dentro un módulo de "Control deslizante de anchura completa".
Si la página es nueva, cerramos las opciones de los módulos que aparecen de forma automática hasta que sólo quede el recuadro azul de la sección estándar.
Colocando el cursor en la parte inferior de esa sección, picamos en el signo más y seleccionamos la sección de ancho completo.
Seguidamente elegimos el módulo de control deslizante de anchura completa.
Al seleccionar este módulo, se abrirá automáticamente el panel de las opciones para empezar a configurarlo, pero de momento cerramos el panel para poder mover la sección y colocar el carrusel a pantalla completa en la parte superior.
No deberíamos tener problemas en cambiar la posición de la sección picando en la cruz con flechas y arrastrando hacia arriba, pero si se resiste podemos pasar a vista de esquema (wirefire) y desplazar la sección hasta colocarla en su posición.
Añadir imágenes a las diapositivas del carrusel
Ahora ya se pueden configurar las diferentes diapositivas del carrusel a pantalla completa, aunque de momento sólo será de anchura completa.
Para configurar cada diapositiva o slide, es necesario acceder a las opciones individuales de cada una picando en la rueda de opciones que tienen a la izquierda.
Dentro de cada diapositiva tenemos la pestaña "Contenido", donde podemos cambiar el título, el nombre del botón (si queremos utilizarlo) con la dirección del enlace y colocar la imagen. Las imágenes se añaden picando en cada diapositiva y añadiéndolas como fondo de imagen, de lo contrario se colocarán como un elemento flotante dentro del carrusel.
EXTRA:
Te dejo unas recomendaciones para las imágenes que uses:
- Dependiendo del encuadre de la imagen, se puede utilizar el efecto de paralaje o buscar la posición inicial para mostrar mejor la diapositiva.
- En la opción del tamaño debe estar seleccionada "Cubierta".
- Es importante que las imágenes estén optimizadas, recortadas y dimensionadas al tamaño correcto, y que no pesen entorno 200/250 Kb para no ralentizar la carga de la web demasiado. Seguiremos unas proporciones 16:9, que es el formato que tienen la mayoría de los monitores, y que dan un tamaño de 1920x1080 píxeles. Podemos reducir el tamaño en un 20% para optimizar la carga con una pérdida mínima de calidad y dejarlo en 1530x860 píxeles.
Ajustes de la cabecera de la página
Para conseguir un fullscreen completo, hay que configurar el formato de la cabecera para poder ver correctamente las diapositivas del carrusel a pantalla completa en Divi.
Hay que usar un poco el sentido común, según el tipo de imágenes que utilicemos convendrá configurar estas opciones de una forma u otra.
Si no quieres colocar la cabecera sobre el carrusel, puedes desplazarte hasta el apartado donde explico cómo ajustar la altura del deslizador respetando el tamaño de la cabecera.
Configurar el menú pre-establecido del tema DIVI
Los cambios que hagamos en la cabecera por defecto, en el personalizador de WordPress, se replicarán en toda la web. Te aconsejo que visites alguna otra página para ver el efecto de lo que vas seleccionando.
Por ejemplo, si optamos por elegir un menú con el fondo totalmente transparente para que se vean las imágenes del carrusel, al cambiar de página y hacer scroll, se mezclará con el contenido de esa página, creando un aspecto desordenado y mal diseñado.
La mejor opción, en esta situación, es aplicar un color semitransparente en el menú, o configurar la página para que no se muestre el menú hasta que nos desplacemos. Si eliges esta opción de ocultar el menú, no es necesario que realices los cambios siguientes.
Los ajustes de este tipo de cabecera se hacen desde el apartado "Cabecera y navegación > Barra del menú principal". La cabecera los podemos modificar en cualquier momento, pero si lo hacemos desde el principio podremos ir viendo con mayor claridad el resultado.
EXTRA:
Si decides utilizar el color blanco, es posible que al visitar otras páginas quieras mostrar una separación visible con el resto de elementos, puedes añadir el siguiente código CSS para crear una línea y/o una sombra bajo la barra de la cabecera.
Hay que añadirlo en la pestaña "CSS Adicional" del personalizador de WordPress.
|
1 2 3 4 |
#main-header { border-bottom: solid 1px rgba(0,0,0,0.3); box-shadow: 0px 0px 10px grey !important; } |
Si sólo quieres modificar la cabecera en la página donde está el carrusel a pantalla completa, y mantener el resto como está, debes localizar el identificador (id) o clase (class) de la página y colocar el código siguiente en la pestaña "CSS Adicional". En este caso, como la página es la de inicio de la web, la clase que lo identifica se llama ".home".
El color "white" (blanco) del texto del menú puedes cambiarlo a tu gusto.
|
1 2 3 4 5 6 7 8 9 10 |
.home #main-header { background: transparent !important; box-shadow: none; } .home #main-header a { color: white !important; } .home #page-container { padding-top: 0px !important; } |
Configurar menú personalizado de Divi
Con este tema se pueden crear menús personalizados desde el "Generador de temas" de las opciones de Divi. Esté menú funciona de forma independiente y no se pueden cambiar sus propiedades desde el personalizador de WordPress como hemos hecho con el anterior.
Pero es mucho más completo y fácil de configurar como queremos, porque se hace desde las propiedades de los módulos que lo forman.
El primero de los dos pasos es superponer la cabecera al resto del contenido para que podamos colocar la altura total en el carrusel a pantalla completa. La opción se encuentra en la pestaña "Avanzado" (de la sección), y hay que asignar una posición "Absoluta" en la propiedad "Puesto".
El segundo de los pasos es asignar un color transparente al fondo en la sección que contiene los elementos de la cabecera, en la pestaña "Contenido". Desde las últimas versiones de Divi, el menú se puede modificar habilitando el constructor visual en la misma página.
Ajustar el carrusel a pantalla completa en Divi a la altura de la ventana
No es necesario asignar ningún nombre de clase css para aplicar unos estilos personalizados con código, como se hacía antes. Ahora sólo es necesario asignar la altura de la pantalla en el apartado del tamaño del módulo.
Apúntalo bien, tienes que estar en las opciones generales del módulo "Deslizador de anchura completa", ni en las opciones de la sección ni en las de las diapositivas individuales.
Como puedes fijarte en la imagen, hemos aplicado un valor "100vh" al tamaño de la altura del módulo para que ocupe toda la zona visible del navegador cuando se cargue la página.
Si cambiamos el tamaño del navegador, o visualizamos la página en una tableta o móvil, el deslizador se adaptará para llenar toda la pantalla.
EXTRA:
Si el tamaño del carrusel a pantalla completa tiene que respetar el tamaño ya existente de la zona del menú como un elemento independiente, el valor que hay que poner en la altura es el tamaño total de la ventana menos lo que mide la cabecera en altura.
Como los cálculos de las medidas no se pueden añadir en los campos de las opciones de los módulos o secciones, hay que hacerlo a través de CSS.
El código CSS que vamos a añadir lo colocaremos en la pestaña "Avanzado" en las opciones de la propia página en DIVI. Picando en el círculo inferior de los tres puntos se despliegan las opciones de página. Una de ellas, la rueda dentada de opciones, es la que abrirá la ventana que necesitamos.
Colocamos el siguiente código en la pestaña "CSS personalizado". En este ejemplo, los 80 px es la altura de mi cabecera del menú.
|
1 2 3 |
.et_pb_slide { height: calc(100vh - 80px) !important; } |
Ajustar el deslizador de Divi en móviles y otros dispositivos
Todo el proceso anterior sirve para mostrar el carrusel a pantalla completa en cualquier dispositivo, ya que Divi es un tema totalmente "responsive". Pero pueden existir situaciones en las que puntualmente no queramos que ocupe toda la pantalla. Por ejemplo, al utilizar un Smartphone verticalmente o porque al reducir la imagen esta pierde el centro de atención.
Desde las opciones de los módulos podemos asignar diferentes dimensiones en altura para intentar ajustar a tu gusto el carrusel.
Cuando se pasa el cursor por encima de cada apartado del módulo, aparece el icono que despliega las opciones para realizar ajustes específicos en diferentes dispositivos.
No puedo darte unos ajustes concretos, ya que dependen mucho de lo que quieras hacer. Solo te muestro el camino.
En mi caso, voy a mostrar el carrusel al 50% de la altura de la pantalla cuando se vea en móviles, pero también se puede dar valores en píxeles (px) o tantos por ciento (%).
Esta cualidad para realizar ajustes en el carrusel a pantalla completa también se puede realizar con la fotografía del fondo. Si al visualizar el carrusel en un formato más pequeño, la imagen se recorta por donde no queremos, existe la posibilidad de indicar la posición que más se ajuste a las necesidades del momento.
Ajustes específicos del deslizador para móviles
A continuación os dejo unas hojas de estilo para el que quiera, pueda profundizar un poco más en el tema. Primero hay que asignar un nombre de clase al módulo si no lo hemos hecho todavía (yo le puse "carruselinicio"), y en la pestaña "CSS adicional" del personalizador de WordPress podemos colocar los siguientes códigos de ejemplo:
Reducir el tamaño del carrusel según el dispositivo
Divi tiene unos tamaños fijos para indicar cuando tienen que cambiar de tamaño o posición los elementos de una página. Si queremos un mayor control y asignar diferentes tamaños a diferentes medidas de pantalla, hay que hacer uso del CSS.
|
1 2 3 4 5 6 7 8 9 10 |
@media (max-width: 768px) { .carruselinicio .et_pb_slide { height: 70vh; } } @media (max-width: 480px) { .carruselinicio .et_pb_slide { height: 50vh; } } |
De esta forma, cuando la resolución de la pantalla sea inferior a 768 px el slider ocupará el 70% de la altura total, y cuando sea inferior a 480 px ocupará la mitad. Se pueden modificar estos valores hasta encontrar el ajuste que más nos guste.
Desplazar la imagen según el dispositivo
Si deseamos mantener el carrusel a pantalla completa en cualquier dispositivo, podemos sustituir el código anterior por el siguiente o combinarlo, permite mover la imagen cambiando los valores en píxeles y así encontrar el encuadre perfecto.
|
1 2 3 4 5 |
@media (max-width: 768px) { .carruselinicio .et_pb_slide { background-position-x: -200px; } } |
Cambiar las imágenes por otras diferentes
Este efecto se puede realizar con las opciones integradas en el panel del módulo. En el apartado "Fondo", activamos las configuraciones de diferentes dispositivos como ya hemos visto, y según vamos marcando cada una podemos sustituir la imagen para que se muestre la que queramos en cada dispositivo (ordenado, tableta y teléfono).
Pero también se puede hacer con CSS, primero tenemos que subir las imágenes a WordPress, copiar la url de cada imagen y sustituirla en el código de abajo.
Las imágenes deben estar optimizadas para dispositivos, por lo que el tamaño y formato deben ser verticales. Un tamaño adecuado sería de 730x10240 píxeles con una relación de aspecto 5:7.
|
1 2 3 4 5 6 7 8 |
@media (max-width: 768px) { .carruselinicio .et_pb_slide_0 { background-image: url(https://tudominio.com/wp-content/uploads/2019/04/slider-3.jpg); } .carruselinicio .et_pb_slide_1 { background-image: url(https://tudominio.com/wp-content/uploads/2019/04/slider-4.jpg); } } |
En esta opción hay que ir añadiendo cada slider por separado tantas veces como imágenes componen el carrusel. Cada slide está identificado con un número que empieza con el cero.
Cambiar la posición del texto en el carrusel a pantalla completa de Divi
Por defecto, y como hemos visto en todo el tutorial, el título, el texto y el botón aparecen centrados en la pantalla. Pero es muy probable que queramos colocarlo en otra posición.
Los valores que voy a mostrar se pueden colocar como opciones generales que afecten a todas las imágenes por igual, o de forma individual en cada dispositiva si queremos que el texto esté en diferentes lugares en cada imagen que aparezca.
Añadir el código CSS necesario
Antes de darle forma al texto hay que obligar al tema que se comporte de forma diferente al que muestra por defecto, y eso sólo se puede hacer añadiendo tres líneas de código en la pestaña "Avanzado" del módulo del deslizador, en el apartado "CSS personalizado" y dentro de la casilla "Descripción de diapositiva".
Para conseguir un estilo responsive correcto, este código lo colocaremos en las casillas de las opciones de dispositivo con los valores adecuados. Incluso podemos colocar el texto en diferentes sitios según el dispositivo si cambiamos los valores en cada uno.
Ordenador:
|
1 2 3 4 |
position: absolute; top: 0; left: 0; width: 50%; |
Tablet:
|
1 2 3 4 |
position: absolute; top: 0; left: 0; width: 75%; |
Teléfono:
|
1 2 3 4 |
position: absolute; top: 0; left: 0; width: 100%; |
Según la posición que queramos, hay que cambiar el código con los valores siguientes:
- Posición vertical en la línea 2:
- top - Arriba
- bottom - Abajo
- Posición horizontal en la línea 3:
- left - izquierda
- right - derecha
- Anchura en la línea 4:
- La anchura del contenedor en %
Ajustar los márgenes
Si cambiar la posición del texto en el carrusel del punto anterior no es suficiente, podemos ajustar los márgenes desde la pestaña "Diseño" añadiendo los valores que queramos en las casillas de "Relleno" en el apartado "Separación".
Te recomiendo que empieces por poner 0 a todo y que marques la cadena para que los valores sean los mismos arriba y abajo y a la derecha e izquierda.
Dar un estilo personalizado al carrusel a pantalla completa
Este punto ya es más personal, puedes jugar con todas las opciones que tiene el módulo, poner una capa superpuesta, cambiar la tipografía, la justificación del texto, activar el botón si lo necesitas...
Aquí sólo puedo decirte que investigues hasta que consigas lo que te gusta. Puedes dar un aspecto general desde las opciones del módulo o con un estilo diferente a cada diapositiva desde las opciones individuales de cada una.
El mayor descuento en Divi por el aniversario de Elegant Themes
Añadir más botones en los módulos del tema Divi
Divi Cloud, el diseño de páginas web en la nube
Divi para diseñadores web: La herramienta imprescindible para crear páginas web de forma rápida y atractiva
Cómo crear un footer en DIVI atractivo y funcional
Zonas activas con DIVI en la página principal
Buenas tardes, como puedo o con que codigo puedo hacer que solo el Título o el subtitulo que me cambie automatica en el modulo de control de deslizante de anchura completa en tema divi. quiero que ayudes con este pregunta.
Si quieres mantener la misma imagen siempre puedes añadirla de fondo en el módulo en lugar de poner una diferente en el fondo de cada diapositiva. Luego sólo tienes que cambiar el texto que quieras que será el que cambiará en la rotación.
Hola Juan,
acabo de descubrirte y me ha parecido muy interesante el contenido que haces. Te he encontrado buscando información porque tengo una web en la que utilizo DIVI y con respecto al control deslizante de anchura completa, no se como puedo cambiar la ubicación del Titulo con respecto de la imagen. Por defecto aparece el texto en el centro de la imagen, pero si quiero cambiarlo y ponerlo en la esquina izquierda (por ejemplo), como podría hacerlo?
Muchas gracias de antemano. Isabel.
Hola Isabel,
He aprovechado tu comentario para actualizar el post. Divi a cambiado mucho desde que escribí por primera vez este artículo y se merecía una revisión. Además de actualizar cómo poner el deslizador a pantalla completa he añadido varios Extras y ampliado con la duda que me planteabas al final del texto. Espero que pueda ayudarte. En estos días publicaré el vídeo actualizado.
Hola Juan!! Acabo de verlo!! Un contenido muy completo, has resuelto mi duda con creces. Este post me va a ser muy provechoso para los cambios que tengo que hacer en la pagina inicial de mi web. Muchas gracias!!
Hola Juan,
Lo primero, felicitarte por tu buen trabajo, me encantan tus vídeos y sobre todo, tu manera de explicarlo tan sencillo y tan bien; ¿y si en vez de slide lo hacemos con un vídeo fullscreen? ¿se podría?
Un saludo,
Hola Juan. Muchas gracias por este excelente tutorial. He aplicado todo el ejercicio y hasta ahora sin problema en la altura. Pero quiero que me ayudes por favor para configurar que el slider avance automáticamente. No encuentro la opción para activar las transacciones.
Muchas gracias por tus tutos y por la ayuda.
Hola Rafael,
Dentro de la pestaña "Diseño" de la configuración del módulo del deslizador, la última propiedad que pone "Animación" contiene una opción que está desactivada que pone "Animación automática".
Cuando la activas puedes elegir el tiempo en milisegundos que tarda en pasar de una diapositiva a otra y si quieres que se detenga cuando se pasa el ratón por encima.
Hola estimado,
Está genial el tutorial, lo puse en practica y todo quedo muy bien.
Ahora, si quisiera que las imágenes sean aleatorias, que tendría que hacer?
Gracias de antemano por la respuesta. 🙂
Hola Eduardo,
No se puede hacer un "random" de imágenes para que aparezcan aleatoriamente con el slider de Divi, puede que en un futuro incluyan esta función que ahora no existe.
Seguramente con un poco de javascript se podría hacer, pero ya hay que andar modificando código que podría interferir en otros módulos o configuraciones.
Buenas tardes, Juan.
Lo primero, felicitarte por tu página y agradecerte el contenido.
He implementado el código en una página que estoy desarrollando, pero en el momento en que empiezo a deslizar las imágenes pierdo el footer (navegando en web y smartphone) y el menu (navegando en smartphone). El footer estoy forzando que aparezca usando el código
footer {
position:fixed;
left:0px;
bottom:0px;
height:50px;
width:100%;
}
¿Cómo podría solucionarlo?
También te quería preguntar como deslizar la imagen navegando con el ordenador al hacer scroll.
Un saludo y muchas gracias.
Hola Marta,
Posiblemente sea una cuestión de superposición de capas. Desconozco como está configurado el Slider, así que te doy una solución para el footer. Añade en la pestaña CSS adicional un z-index mayor que el que pueda tener el Slider, por ejemplo:
#main-footer {
z-index: 9999 !important;
}
No es necesario que elimines el resto de código que tengas.
Hola Juan, gracias por tu aportaciones. Esta solución me funciona a medias, veo la img a pantalla completa pero la siguiente sección se ve en medio de la imagen.
Hola Antonio,
Acabo de actualizar el artículo y pronto colgaré el nuevo vídeo, al leer tu comentario pensé que alguna opción estaba obsoleta y producía algún fallo, pero a parte de tener algunas opciones en sitios diferentes a la versión anterior de DIVI, todo funciona bien.
Comprueba la pestaña "Separación" de las dos secciones, la del carrusel y la que tengas debajo, por si tienes asignado algún margen o espacio incorrecto.
También puedes comprobar la superposición de capas z-index en la pestaña "Avanzados" por si se están colapsando.
¿se ouede usar en blogger?,es que no encuentro ningún tutorial como este en donde el slider sea tan bonito
Hola neptuniana, blogger es una plataforma para blogs muy limitada en cuanto a modificaciones, para crear un slider tendrás que modificar el código y añadir funciones dinámicas, pero es muy complejo y nunca quedará como en el tema Divi. Este tema es para instalarlo en un servidor online contratado, y no depende de una plataforma gestionada por terceras partes, por eso es más sencillo realizar cambios. Con blogger tienes que adaptarte a lo que ofrece, con Divi puedes realizar infinitos cambios a tu gusto.
Hola gracias amigo por tan excelente información,
Sin embargo mi sitio no consigo que se pueda visualizar bien en tablet y smarthphone.
He seguido al pie de la letra todo el video y revisado muy bien los codigos.
los códigos que he creado son los siguientes:
.alturaseccionslider,
.alturaseccionmodulo,
.et_pb_slide {
height:100vh
}
@media (max-width: 768px) {
.alturaseccionslider,
.alturamoduloslider,
.et_pb_slide {
height: inherit;
}
}
Agradezco tu ayuda.
Hola kike García,
Comprueba los nombres que has utilizado para las clases CSS, en tu código veo que no coincide el de la altura del módulo y debería ser el mismo.
hola buenas ,antes que nada muchas gracias por tomarte el tiempo de explicar, he tenido un problema ,el tamaño de la seccion si es a pantalla completa ,pero la foto del modulo se muestra a la mitad, he seguido al pie de la letra todo los pasos y no se en que pude equivocarme,si pudieras orientarme,te lo agradeceria mucho.
Hola Mauricio,
Comprueba que cada imagen que has incluido en el fondo tiene seleccionada la propiedad "Cubierta" en "Imagen de fondo de tamaño".
No está de más comprobar también los nombres de las clases que hemos puesto en las pestañas "Avanzado" para ver que no nos hemos comido ninguna letra, no hay espacios al principio o al final y coinciden con los colocados en el código de los estilos.
Hola!
Hize tal cual indicas en el tutorial pero el problema que se me presento es que al pasar de una imagen a otra la primera imagen tiene un efecto de subirse hacia arriba y la siguiente imagen baja pero no se vee casi nada y vuelve a cambiar a la primera imagen.
Quiere que la transición sea de una imagen a la otra.
Muchas gracias por tu ayuda.
Hola Joel, comprueba que has escrito bien todos los códigos, si has aplicado algún efecto de animación al módulo, déjalo sin animación, ya que esto afecta al contenido y no al cambio de diapositivas.
Muy buena solución. Pero se me plantea una duda. Al usar la etiqueta ".et_pb_slide ", afecta a todos los sliders de la web. ¿ Hay alguna manera de personalizar que solo afecte a algunos?
Un saludo.
Hola Dani, la etiqueta .et_pb_slide hace referencia todos los sliders de toda la web, para conseguir que sólo afecte a uno, o a los que tu elijas, tienes que añadir un escalón más en la cadena que hace referencia a la dirección .et_pb_slide
Tienes que añadir delante de la etiqueta general del slider el nombre que asignaste al módulo en la clase CSS
Quedaría así:
.alturaseccionslider,
.alturamoduloslider,
.alturamoduloslider .et_pb_slide {
height: 100vh;
}
Hola Buenas!
Muchas gracias por la ayuda, lo primero. Tengo un problema con con Slider.
La imagen no me va hasta el final de la pantalla, me sale un pequeño footer al hacer el scrolll, ¿Podrías ayudarme? muchas gracias!
Hola Beatriz,
El pequeño footer que te aparece en la parte inferior es un elemento que no estás utilizando pero que aparece porque suele llevar algún contenido.
Prueba a colocar este código en la pestaña de "CSS adicioanl" desde el personalizador y me cuentas si te funcionó.
#footer-bottom {display: none !important;}
Hola, gracias por tu ayuda pero tengo un problema mi pagina no se puede adaptar así como lo explicas en el vídeo, por favor si me pudieras ayudar. gracias
Hola Michel, he visitado tu web y no puedo determinar cual es tu problema, no aparece ninguna imagen en el slider. Si pudieras concretar algo más sobre tu problema podríamos buscar una solución