Efecto de Superposición entre dos secciones de Divi
Como lo hemos dicho anteriormente, Divi es un Theme para WordPress muy Robusto y Versátil, y se puede hacer casi cualquier cosa que te puedas imaginar en cuestión de diseño web…
…Sobre todo cuando deseamos personalizar nuestro sitio web, de tal manera que las cosas queden donde queremos que estén, y luzcan como deben lucir.
Por ejemplo, si tu deseas “Resaltar” un contenido, o un elemento en específico de tu sitio web, o de una carta de ventas, este tipo de efectos es el que logra dicho cometido
En el video tutorial que está en esta página, te ilustramos cómo puedes crear un efecto de superposición. Para este ejemplo, haremos la creación de una caja de contenido superpuesta entre dos secciones.
Primero debemos crear las secciones con la ayuda del constructor Divi, y la sección de en medio la convertiremos en una caja que estará superpuesta en la primera sección, luego insertaremos los códigos de estilo CSS en los lugares correspondientes, tal como lo muestra el video.
A continuación, te proporcionamos los “Estilos CSS” que se utilizan en este video. Los hemos colocado en orden numérico.
———————————–
1) Clase CSS:
[php light=”true”]boxed[/php]
———————————–
2) Código CSS:
[php light=”true”]
/* boxed sections */
.boxed {
max-width: 1200px;
float: none;
margin-bottom: 25px;
margin-top: 25px;
left: 50%;
margin-right: -50%;
transform: translate(-50%, 0%);
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.7);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.7);}
@media only screen and (max-width : 1350px) {
.boxed {max-width: 95%;}}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){
.boxed {
max-width: 100%;
float: none;
margin: 0;
left: 0%;
margin-right: 0%;
transform: translate(0%, 0%);}}[/php]
———————————–
3) Clase CSS:
[php light=”true”]boxed move-up[/php]
———————————–
4) Código CSS:
[php light=”true”]
/* boxed-up sections */
.move-up {
margin-top: -50px;
border-radius: 5px;}[/php]
———————————–
Como puedes ver, el resultado final es algo que literalmente es imposible pasar desapercibido, y No prestar atención, al área que has decidido resaltar con este efecto de superposición, y lo más seguro es que tus lectores, y hasta tu competencia quedarán impresionados, y se preguntarán, ¿cómo le hizo para que se vea así?
NOTA 1: Para aprender más acerca del “Theme Divi” para WordPress. Clic aquí para visitar su sitio web oficial >>
–
NOTA 2: Respecto al “Child Theme” que se menciona en el video, y si deseas saber cómo obtener tu propio child theme. Clic aquí para visitar el articulo relacionado con este tema >>
–
NOTA 3: Si deseas saber sobre por qué nosotros consideramos a Divi como “El Mejor Theme para WordPress”. Clic aquí para mostrarte nuestras razones >>
–
Si te pareció que esta información es útil, por favor compártela y déjanos tus comentarios. ¡Gracias!
También te puede interesar
Deja una respuesta
Política de Comentarios de Media Digital Fácil
Media Digital Fácil te informa que los datos de carácter personal que nos proporciones rellenando el presente formulario serán tratados por Media Digital Facil (Media Digital Fácil ) como responsable de esta web.La finalidad de la recogida y tratamiento de los datos personales que te solicitamos es para gestionar los comentarios que realizas en este blog.
Legitimación: Consentimiento del interesado.
- Como usuario e interesado te informo que los datos que me facilitas estarán ubicados en los servidores de Siteground (proveedor de hosting de Media Digital Fácil ) dentro de la UE. Ver política de privacidad de Siteground. (https://www.siteground.es/privacidad.htm).
Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en Nuestro Sitio de Soporte así como el derecho a presentar una reclamación ante una autoridad de control.
- Por favor lea nuestra Política de Privacidad antes de dejar tu comentario.
20 Comentarios
Muchísimas gracias sr. Ariza, gracias a usted, pude superponer mi menú y mi logo sobre la imagen de slider, tal y como me decían desde el departamento de diseño, que había solicitado un cliente, no tengo palabras….
gracias
Gracias a usted Guillermo por sus palabras, y por confirmar que con nuestra ayuda ha podido mejorar su diseño. Gracias también por compartir su experiencia.
Un saludo
Pedro
Pedro gracias por la info, esta excelente. Te pregunto, hice la misma superposicion pero con una imagen que tiene fondo transparente, sin embargo cuando superpuse la imagen me siguio apareciendo la caja con relleno color blanco a pesar de que ya le quite la sombra de la caja, que crees que sea? Gracias nuevamente!
La verdad Jaime, es que sin ver lo que hiciste no sabría saber que puada estar pasando.
Lamento no serte de mas ayuda.
Un saludo
Pedro
Gran tutorial. He podido superponer desde margin-top. A la hora de superponer por abajo del contenido me deja hacerlo en el Constructor visual y se previsualiza bien pero cuando guardo y refresco la pagina no se ve la superposición por debajo. Agjunto la imagen por si psaber qué hacer
[IMG]http://i64.tinypic.com/1zz6w47.png[/IMG]
Para saber que esta pasando deberíamos acceder a tu sitio. Si nos contactas a través de nuestro sistema do soporte podemos ver como ayudarte. Este en el enlace a nuestro soporte https://pedroariza.freshdesk.com/
Muchas gracias por tu comentario Juanfa.
Un saludo
Pedro
Hola Pedro: excelente información ya que se puede resaltar lo que uno quiera. Sin embargo me gustaría tratar de reducir los márgenes laterales donde queda insertado el video (hablando de tu video). He buscado como reducir los márgenes y no he encontrado solución. Es mas, sería espectacular que el video quedara con un marco de 10px. ¿si se puede? Gracias por la información.
Muchas gracias por tu comentario Noriaki. En cuento a tu pregunta, tanto las secciones, como las filas y los módulos de Divi te permiten personalizar tanto los margenes como el relleno de los mismos.
Solo tienes que editar las opciones de la fila y jugar con el rellena hasta logar el diseño deseado, aunque hay un relleno mínimo que ya no podrás acortar mas.
Un saludo
Pedro
Que tal, exelente tuto, solo que me gustaria saber como le hago para que la seccion quede sobrepuesta en la union de las dos, ya que la parte que queda en blanco en el video no la puedo eliminar… ojala me puedas ayudar
La verdad Eulises, es que sin ver tu sitio no puedo identificar el problema y darte una solución. La parte que queda en blanco en el video es una sección que tiene como color de fondo el blanco.
Un saludo
Pedro
Pedrito que tal muy buen video.. una pregunta como hago que no sea un cuadro si no que sea completamente la seccion ancho completo super puesta? Gracias saludos
Lo podrías hacer de la misma forma Raul, pero si superpones toda una sección con otra, no se va a notar el efecto.
Un saludo
Pedro
Gracias Pedro.
Muy Interesante y Útil… la Herramienta Divi no tiene limites.
Agradezco el esfuerzo que realizan para comprender mejor los alcances que tiene el Tema.
Saludos !!
Gracias a ti Mauricio, me alegra que te haya gustado y por aquí seguiremos analizando y ampliado la informacion sobre Divi.
Un saludo
Pedro
En definitiva, es una exelente herramienta mas apara crear una pagina mas personalizada, gracias Pedro
Gracias a ti por participar Juan. Me alegra que te haya gustado
Un saludo
Pedro
Excelente Pedro, me parece genial todo el aporte que ustedes nos dan, muchas gracias.
Me alegra que te haya gustado Armando. Muchas gracias por participar.
Un saludo
Pedro
Me parece muy interesante el tema que estás presentando Pedro… Más aún cuando nuestros clientes son principalmente visuales y en solo tres segundos con esta técnica lograr atraer la atención de ellos es un plus en el espacio de marketing
Tienes toda la razón Marcelo, si logramos llamar la atención de nuestros visitantes, tenemos parte de camino recorrido. Gracias por participar
Un saludo
Pedro