Curso Wordpress + Divi para diseñadores
TRUCOS: Slider a pantalla completa
Tu progreso en este curso...
Divi no tiene de momento opción para convertir un slider de ancho completo en un slider a pantalla completa como ocurre con la cabecera de ancho completo, pero podemos conseguir un efecto similar con un sencillo truco de css.
En el vídeo tienes las instrucciones y tras el vídeo los fragmentos de código para que puedas copiar y pegar en el apartado adecuado.
Apúntate al CURSO DE WORDPRESS + DIVI para acceder a los contenidos completos de esta lección y del resto de lecciones del curso.
SI ya estás apuntado accede AQUÍ con tu usuario y contraseña
Código para pegar en el css personalizado en los ajustes de Divi:
.fullheight .et_pb_slide {
height: 100vh;
}
.fullheight .et_pb_slide_description {
left: 0;
right: 0;
padding: 0;
margin: 0 auto;
position: absolute;
bottom: 40px;
}
Un pequeño truco adicional si quieres conseguir que el botón tenga forma de círculo:
.fullheight .et_pb_button, .fullheight .et_pb_button:hover {
padding: 10px 18px !important;
}
Código de la flecha hacia abajo para poner en el texto del botón: ▼
Y si quieres probar con otros tipos de flechas aquí puedes encontrar un montón de códigos de flechas para probar: https://en.wikipedia.org/wiki/Arrow_%28symbol%29#Arrows_in_Unicode. Solo tienes que reemplazar los 4 últimos caracteres del código del botón (25BC) por los 4 últimos de la flecha que quieras probar (lo que aparece tras el «U+» en la lista). No todas funcionan bien en todas las tipografías.
Índice
Curso Contenido
8 Comentarios
Enviar comentario
Lo siento, debes estar conectado para publicar un comentario.
Gracias Jaume por los trucos, los he hecho pero personalmente sigo con mucho espacio en el slide, por la parte superior e inferior, en la versión móvil, hay otra alternativa ??? saludos
Disculpa Deisy, no me salió el aviso sobre este comentario y lo acabo de ver ahora. En la nueva lección sobre el módulo de código creo que tienes justo lo que necesitas 🙂
Hola Jaume! Tengo una duda, ¿se puede hacer el slider más grande pero sin que sea a ancho completo? Es decir me gustaría que fuera menos apaisado para que se vieran las fotografías completas pero sin llegar a hacerlo a ancho y pantalla completa. Ni idea de si se puede hacer.
Muchas gracia por tu ayuda.
Carla
Estos sliders de Divi están pensados para usar la foto como fondo para mostrar un texto en un tamaño adecuado sea cual sea el dispositivo. Su altura se ajusta de manera automática según el texto que muestras dentro y se pueden usar algunos trucos para hacer que dejen un poco más espacio arriba y abajo del texto, pero si quieres garantizar que siempre se ve la foto completa es mejor usar un plugin de sliders de fotos en lugar de el módulo de Divi.
En la lección «Módulo de código: Ejemplo con Master Slider» puedes ver cómo hacerlo con Master Slider que es un plugin gratuito y muy bueno para sliders de fotos en los que quieres estar segura de que se va a mostrar la foto completa. Mira si es lo que necesitas y si no vemos algún truco para el de Divi.
Sí, me he instalado el Master Slider y era justo lo que estaba buscando, muchas gracias Jaume y perdona porque no había visto esa lección antes de preguntarte.
Gracias!!
Hola Jaume! Como podemos poner por encima del slider nuestro logotipo? Gracias!
Hola!
os he respondido con más detalle por email pero básicamente se trata de poner una imagen de fondo en la diapositiva y luego poner el logo en el apartado «Imagen de diapositiva:». De esa forma la imagen del logo se muestra superpuesta a la de fondo. Hay que tener en cuenta en estos casos que la imagen sea un png transparente si quieres el logo sin fondo.
Hola Jaume, el truco del botón no me funciona y sigo tus instrucciones. Aparece el codigo y no la flecha.
Gracias!