Deslizador o Slider en Extra a pantalla completa

22 de marzo - 2017

Temas Elegant Themes

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.

Suscríbete:

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.

Deslizador o Slider a pantalla completa. Fullscreen
Slider responsive en Extra

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.

codigo CSS para la barra del tema Extra
Pestaña "CSS adicional" de WordPress

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.

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.

Crear página en el tema Extra a pantalla completa y sin barra lateral
Crear nueva página en Extra y activar Divi Builder

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.

Posición de las secciones en DIVI
Posición de las secciones desde el visor de módulos

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".

Nombre para la clase de la sección del carrusel
Nombre para la clase de la sección del deslizador

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".

Nombre para la clase del módulo de slider a pantalla completa
Clase para el módulo del carrusel a pantalla completa

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

Es posible que los cambios no se vean hasta que guardes los cambios, pero el resultado será el esperado.

Deslizador o Slider a pantalla completa. menú transparente

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.
 

Temas Elegant Themes

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?

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

6 Comentarios

  1. Héctor Capel Ríos

    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!

    Responder
    • Juan

      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.

      Responder
  2. Alex

    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

    Responder
  3. Alex

    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.

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Mi canal de Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Anuncio - WordPress Gestionado de SiteGround - Potente pero simple de usar. Haz clic para aprender más. Descuento directo DIVI -  10 por ciento