Superposicion contenidos Divi

por | 19 Dic, 2016 | Divi, Tutoriales

Presentación del tutorial Divi

En este tutorial divi vamos a crear un ejercicio en el que se va a superponer una sección y todo su contenido sobre otra sección. La sección que estará debajo será una imagen de anchura completa, aunque no es imprescindible. La sección que superpondremos contendrá texto y un panel desplegable (conmutador). Sin embargo podría contener otro tipo de elementos, como imagen, por ejemplo.

Veamos entonces cuáles son los pasos necesarios para lograr el efecto.

La primera sección

En primer lugar, creamos una sección de anchura completa. Eliminamos ahora la sección estándar que viene por defecto (color azul) y que ha quedado arriba.

tutorial divi seccion-ancho-completo

A continuación, en la nueva sección (color morado), pulsamos en insertar módulo y seleccionamos imagen de anchura completa de las opciones posibles. Hemos elegido este módulo, sin embargo podemos probar con otro tipo de módulo.

utorial divi pantalla-modulo-tipo

Lo siguiente será Insertar la imagen en el módulo. En este caso hemos usado una imagen con estas dimensiones: 1280 px de ancho x 450 px de alto. Además, desactivamos la animación. Ajustes generales > Animación > Sin animación.

Nada más que configurar en esta sección. Por lo tanto cerramos la configuración de este módulo y creamos la nueva sección. En este caso la sección será estándar.

El contenido superpuesto

Ahora creamos la siguiente sección, que en esta ocasión será estándar (azul) y añadimos 3 módulos: uno de texto que contendrá el título. Debajo otro módulo de texto con el párrafo. Inmediatamente debajo, el conmutador o panel desplegable.

El motivo de usar dos módulos de texto es para controlar mejor el espacio entre título y párrafo. En mi opinión, si uso sólo un módulo el espacio entre los textos será o muy corto o muy largo. Por el contrario, con dos módulo tengo más opciones de control de esa distancia.

Este es el aspecto que tendrá tu admin a estas alturas del ejercicio.

 seccion2-divi-tutorial

Para el primer módulo de texto, el del titular, yo elegí estos parámetros. El texto es H1 y centrado. La tipografía Cherry Cream Soda. Por supuesto, tú puedes escoger la que quieras.

El segundo módulo de texto contiene el párrafo de texto simulado. Tipografía Bree Serif, tamaño 14.

Y, finalmente, el conmutador. Puedes configurarlo como te parezca. Yo, en ajustes generales, lo he titulado Más información y he añadido el texto correspondiente.

En Ajustes avanzados de diseño:

  • Color de fondo abierto: rgba(0,46,61,0.15)
  • Título color de texto: #0c71c3

El resto lo he dejado igual.

Vamos a ver seguidamente los ajustes para la sección y la fila que contienen los textos y el conmutador.

ajustes-fila-seccion

Ajustes de la sección

Ajustes generales
  • Color del fondo transparente: SÍ

Hay que activar el fondo transparente. De otra manera, no podremos aislar la fila para superponerla a la imagen. Se vería todo con fondo blanco.

Ajustes de la fila

Respecto a la fila, pulsamos el botón para lo ajustes, como puedes ver en la imagen un poco más arriba.

Ajustes generales
  • Usar anchura personalizada: SÍ.
  • Unidad: %.
  • Anchura personalizada: 75%.

Ajusta la anchura dependiendo del ancho disponible en tu pantalla. Dependerá si estas usando un sidebar o no. Sin embargo, aunque puedes ir probando, a mí me fue bien con un 75%.

  • Relleno personalizado: superior, derecha, base e izquierda: 4%.

Estos parámetros determinan la distancia entre el contenido de la fila y los topes de la fila. Mira la imagen de abajo.

Relleno-personalizado

Ajustes avanzados de diseño

Seguidamente nos vamos a los ajustes avanzados de diseño. A continuación vamos a modificar el margen superior para superponer la fila a la imagen que tenemos.

  • Margen personalizado: superior: -35%.

Los demás los dejamos como están.

Y, por último, ya solo nos faltaría contornear la fila y darle un poco de sombra para rematar la faena.

CSS personalizado
CSS Personalizado >> Elemento principal
border: 2px solid #5e8393;
box-shadow: 0px 5px 12px #888888;

De esta manera añadimos un poco de personalización al ejercicio.

El primer script crea un contorno de 2 píxeles, solido y de un verde oscuro.

El segundo añade una sombra suave. los valores que podemos modificar son desplazamiento horizontal, vertical, cantidad de sombra y color. Experimenta con distintos valores y descubre los resultados.

Aquí puedes ver el resultado final.

 

rana-en-charca

La naturaleza salvaje

Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dellas.Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no…
Más Información
Sobre la mesa había desparramado un muestrario de paños – Samsa era viajante de comercio-, y de la pared colgaba una estampa recientemente recortada de una revista ilustrada y puesta en un marco dorado. Aunque la estampa mostraba a una mujer tocada con un gorro de pieles, envuelta en una estola también de pieles, y que, muy erguida, esgrimía un amplio manguito, asimismo de piel, que ocultaba todo su antebrazo. Por lo tanto, Gregorio miró hacia la ventana; estaba nublado, y sobre el cinc del alféizar repiqueteaban las gotas de lluvia, lo que le hizo sentir una gran melancolía. «Bueno -pensó-; ¿y si siguiese durmiendo un rato y me olvidase de…