Si deseas tener un deslizador o slider a pantalla completa en tu web, te habrás dado cuenta que no es posible configurarlo de forma automática en el tema Extra. Pero eso no quiere decir que no podamos modificar los estilos del slider para conseguir adaptarlo a nuestras necesidades, y que además, sea responsive o adaptable a los diferentes dispositivos.
Configurar un Deslizador o Slider a pantalla completa
Para los que habéis visto el vídeo, este artículo puede servir para reforzar los conocimientos y ver otra forma de conseguir un deslizador a pantalla completa, incluso para poder extrapolarlo a otros temas de WordPress.
Puede que seas un artista o un fotógrafo que quiera tener, en la pantalla inicial de su página web, una imagen que lo ocupe todo, o un restaurante que muestre alguna de sus creaciones culinarias en primer plano.
El tema Extra no permite crear un deslizador o slider a pantalla completa configurando únicamente las opciones que trae por defecto. Pero podemos añadir unas normas de tamaño, a través del código CSS, en las pestañas destinadas para ello.
Pasos para configurar un carrusel fullscreen en el tema Extra
En las últimas actualizaciones del tema se han mejorado mucho las funciones visuales, por lo que el tutorial lo realizaré utilizando esta opción.
Si deseas seguir trabajando desde la administración, con la llegada de Gutenberg como nuevo editor de WordPress, es necesario activar la opción del editor clásico en las opciones del tema, dentro de la pestaña "Builder" (Constructor).
Ajustar la barra principal del menú
No es suficiente añadir un módulo del constructor y configurarlo, para crear un efecto profesional hay que ajustar otros elementos como la cabecera, donde se encuentra la barra superior y el menú con el logo.
Los cambios que hagamos desde el personalizador afectarán a todo el sitio, por lo que si no lo hacemos bien, es muy posible que en algunas secciones o páginas de la web no se visualice correctamente.
Por eso utilizaremos la pestaña "CS adicional" para añadir un pequeño código que sólo afecta a la primera página, y el resto actuará como esté configurado en el personalizador del tema.
Este código separa la cabecera del diseño global, para que el deslizador o slider a pantalla completa se cuele por debajo hasta posicionarse en el borde superior de la ventana.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /*MENÚ HOME TRANSPARENTE*/ .home header { position: absolute; width: 100%; } .home #top-header { display: none; } .home #main-header { /*display: none;*/ background-color: rgba(255,255,255,0); } .home .et-fixed-header #main-header { display: inherit; background-color: rgba(0,0,0,1); } |
También oculta la barra secundaria y añade un color transparente a la barra principal del menú, el cual podemos cambiar según el gusto, modificando el valor "rgba" y colocando un color sólido o semitransparente.
El último trozo de código hace referencia a la navegación fija, y sólo se aplicará en el caso de haber elegido este tipo de navegación en las opciones del tema. Al igual que el caso anterior, también podemos modificar los colores cambiando los valores "rgba".
Este código sólo hace cambios en la página principal, el resto de páginas o entradas, se someterán a las reglas y opciones que elijamos desde el personalizador.
Editar o crear una nueva página
Lo primero es saber dónde vamos a colocar el módulo del deslizador a pantalla completa de Extra.
Si estamos empezando crearemos una página nueva, que podemos llamar Inicio o Home. Si ya tenemos creada la página, la abrimos y la editamos con el editor visual Divi Builder.
Esta página tiene que tener desactivada la barra lateral y los datos que nos molesten. Además seleccionamos un diseño de anchura completa o fullwidth.
Configurar el diseño de la página del slider
Al iniciar el constructor Divi, podemos elegir empezar de cero un diseño, cargar alguno del repositorio de Elegant Themes (si estamos registrados) o reutilizar alguno que ya hayamos realizado con anterioridad en la web.
Sea cual sea la opción que elijamos, tenemos que añadir una sección de "Anchura completa" con un módulo de "Control deslizante de anchura completa", y colocarlo en la primera posición de la página.
Configuración de la sección
En la sección sólo añadiremos un nombre a la clase CSS en la pestaña "Avanzado".
Este nombre puede ser cualquiera siempre que sea en minúsculas, sin espacios ni caracteres raros. Yo utilizaré "alturasecciónslider".
Configuración del módulo
En la pestaña del CONTENIDO añadimos todas las diapositivas que queramos, pero nunca como imagen, tenemos que añadir las fotos como fondo de la diapositiva. De lo contrario la imagen no se adaptará a la pantalla y quedará pequeña y descolocada.
Es importante que las imágenes tengan buena resolución y un tamaño acorde con la pantalla en la que vamos a visualizarlas. Por lo general, una pantalla de ordenador mantiene unas proporciones 16:9, cuyo tamaño en alta resolución corresponde a 1920x1080 px.
Las imágenes no deberían superar los 200/250 kb de tamaño de archivo, para no ralentizar la carga de la página. Por esta razón, podemos reducir un poco las imágenes en proporción, por ejemplo a 1530x860 px.
En la siguiente pestaña, DIESEÑO, la que corresponde al módulo y no a cada diapositiva, que también tiene, podemos activar la transición automática y la velocidad entre cada cambio.
Hay otras opciones que te pueden interesar, pero ya corresponder al aspecto personal que quieras dar, y por tanto no me voy a meter.
En la última pestaña del módulo (nunca en las diapositivas), AVANZADO, añadimos un nombre a la clase como hicimos en la sección, en este caso yo utilizaré "alturamoduloslider".
Cambiar la altura del Deslizador
Como podrás observar, el slider sigue aún con el tamaño predeterminado.
Para adaptarlo a pantalla completa vamos a utilizar los nombres que hemos asignado a las clases de la sección y el módulo, y vamos a colocar el siguiente código CSS a continución del que pusimos para la cabecera, dentro de la pestaña CSS adicional del personalizador
1 2 3 4 5 6 | /*ALTURA DEL SLIDER*/ .alturaseccionslider, .alturamoduloslider, .alturamoduloslider .et_pb_slide { height: 100vh; } |
Es posible que los cambios no se vean hasta que guardes los cambios, pero el resultado será el esperado.
Ahora ya sólo queda personalizarlo a nuestro gusto, usar los colores que queramos, configurar el menú... sabiendo que se adaptará a cualquier dispositivo y tamaño de pantalla, ocupando el 100% de alto y de ancho.
Puedes pinchar a aquí para ver todas las entradas relacionadas con esta plantilla.
Suscríbete para no perderte ningún artículo nuevo, te aviso por email
Los slider, o diapositivas deslizantes, son muy llamativos al ocupar toda la pantalla, creando una intro impactante. ¿Pondrías un slider en tu web?
Hacer que las redes sociales se abran en una nueva ventana- La mejor forma de personalizar la página de producto de Woocommerce con Divi Builder
- Aprende a utilizar el Constructor Divi en EXTRA
- Modificar la cabecera y poner una imagen para personalizar el tema Extra
- Cambiar los colores de los módulos y los widgets
- Crear enlaces a módulos, filas o secciones dentro de una página de Extra o Divi
Buenos días, Juan.
Estoy siguiendo tus cursos y tengo un problema con esto del Slider... sigo tus instrucciones pero las diapositivas se quedan mas pequeñas de los que deben, en medio de los que sería el área total del slider... he probado con mayores resoluciones y no cambia. Como apunte te diré que estoy utilizando tu tutorial de hacer un blog con Extra y quería ponerle este Slider a la página de inicio.
Muchas gracias!
Hola Héctor,
Acabo de actualizar el artículo y estoy pendiente del vídeo, pero el problema que te surge es porque seguramente estás colocando las imágenes en el apartado de "imagen" y tienes que colocar las fotos como fondo de la diapositiva.
Hola buenas dias te queria preguntar si sabes como hacer este efecto es lo unico que no se hacer (efecto) son deslizadores con dos imagenes que hacen efecto paralaje
Hola Alex,
Aquí tienes el tutorial para realizar ese efecto. https://www.ingresosviaweb.com/efecto-de-paralaje-en-extra/
Hola amigo me parece genial tus articulos quería preguntarte si sabes como hacer un menu pegagoso de Extra en versiones moviles creo que para una buena experiencia es mas facil que el menu este fijo con la lupa al lado para hacer nuevas busquedas que ir siempre moviendose de abajo para arriba.
Hola Alex, aun no he escrito el artículo, pero puedes ver el vídeo en Youtube. https://youtu.be/zJ9-gEmmw-A