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:

boxed

———————————–
2) Código CSS:

/* 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%);}}

———————————–

3) Clase CSS:

boxed move-up

———————————–

4) Código CSS:

 /* boxed-up sections */
    .move-up {
            margin-top: -50px;
            border-radius: 5px;}

———————————–

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!

Pedro Ariza

About Pedro Ariza

Experto en Marketing Online, especializado en sitios wordpress y la seguridad de los mismos, para protegerlos de Hackers, o cualquier otra intrusión ilegal. Experto en productos con derechos de reventa. Conferencista internacional, Autor, Coach, y consultor de pequeñas y medianas empresas.

18 Comentarios

18
Política de Comentarios de Media Digital Facíl

Mi Blog al Instante te informa que los datos de carácter personal que nos proporciones rellenando el presente formulario serán tratados por Mi Blog al Instante (Mi Blog al Instante ) 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 HospedajeWP (proveedor de hosting de Mi Blog al Instante ) Fuera de la UE.
El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no atender pueda tu solicitud.
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.

avatar
3000
9 Comment threads
9 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
10 Comment authors
jaimeJuanfaNoriakiEulisesRaul Izaguirre Recent comment authors

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

Mas Reciente Mas Antiguo Mas Votado
jaime
Invitad@
jaime

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!

Juanfa
Invitad@
Juanfa

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]

Noriaki
Invitad@

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.

Eulises
Invitad@
Eulises

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

Raul Izaguirre
Invitad@
Raul Izaguirre

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

Mauricio
Invitad@
Mauricio

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 !!

Juan Acevedo
Invitad@
Juan Acevedo

En definitiva, es una exelente herramienta mas apara crear una pagina mas personalizada, gracias Pedro

Armando
Invitad@

Excelente Pedro, me parece genial todo el aporte que ustedes nos dan, muchas gracias.

Marcelo Lavergne
Invitad@

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

Pin It on Pinterest

¿Te ha parecido útil la información que hay aquí?

Entonces por favor ayúdanos y compártela, para que más personas se beneficien. ¡Gracias!

¿Te ha parecido útil la información que hay aquí?

Entonces por favor ayúdanos y compártela, para que más personas se beneficien. ¡Gracias!