Slider divi utilizado como fondo de 3 módulos blurb

En este tutorial te mostramos como añadir una galería de imágenes tambien conocido como slider.
Lo que haremos es mandarlo detras de una columna que tendra 3 bloquees o módulos para añadir información.

Este efecto se ve más en hospitales, arquitectura, escuelas.
todo depende de la creatividad 😀

 

Como este tutorial es nivel medio, iremos rápido. Vean el video tutorial para aclarar dudas. Si tienen más dudas sobre el slider dejarla en la caja de comentarios porfavor

Empecemos..

SECCIÓN GENERAL

Primero añadiremos una galeria de slider a tamaño completo, despues borraremos la seccion normal que tenemos al comienzo como se muestra en las imágenes siguientes.

Ahora entraremos a propiedades de la galeria

PROPIEDADES SLIDER PANTALLA COMPLETA

Seleccionamos uno de nuestros slider para modificar, esta vez solo voy a modificar un slider, para que no se haga muy largo el tutorial, ya saben tienen que experimentar

Una vez que hemos entrado a nuestra slider modificamos los datos como: Título, botón y contenido.

Despues ahi mismo vamos a la pestaña de DESING / DISEÑO Y escogemos la opción OVERLAY / Capa sobre puesta /CUBRIR y en Butón Hover escogemos transparente

Ya que escogimos la opción overlay vamos slider ajustes aquí daremos formato al texto

Orientación izquierda
Título del texto: H2
Peso de la tipografía: bold

BOTÓN

Personalizamos el color, lo que haremos aquí es solo dejar el borde en naranja, quitamos color de relleno.
y en hover solo dejamos el borde en naranja, esto lo hace ver más elegante.

FONDO / DEGRADADO

Añadimos la imagen que necesitamos, y ajustamos como muestran las imágenes (Recuerden que estos ajustes van en slider que estamos modificando )

color

último paso, desactivamos controles son los puntitos del slider solo dejamos las flechas

Aun no llegamos a la mitad

Creamos una sección de tres columnas


Entramos a justes de la columna, aquí vamos añadir los colores de fondo, el tamaño del margen, rellenos personalizados y el borde
adjunto capturas de pantalla

FONDO AJUSTES GENERALES

el siguiente paso es ir a, ajustes generales , para añadir el color de fondo y poner por encima nuestra columna de la geleria

Aqui esto es lo importante del tutorial, para flotar encima de la galeria nuestra columna tenemos que hacer añadir un top-90px; como en el ejemplo siguiente

En general todo lo que hemos hecho hasta ahorita debe de verse así.

Hasta aquí dejaremos el tutorial, ya que esta es la parte importante.
Lo demás es añadir nuestra información, duplicar modulos y arrastrar para tener el mismo estilo de tipografía y color.
Ya en este nivel medio no veo mucho la necesidad de extendernos demasiado.

En el video esta todo completo cualquier duda que tengan, no importa que sea básica pueden preguntarla en la caja de comentarios
gracias por su atención

descargar-divi-json-wordpress

¿Te parece interesante este artículo?
Puntaje
[Total: 2 Average: 5]

Suscríbete a nuestro boletín.

Recibe notificaciones cuando publiquemos algo nuevo.

Gracias por suscribirte

Shares