Cómo revelar contenido al pasar el mouse con pestañas de esquina expandibles en Divi (descarga GRATUITA)

Vistazo

Aquí hay un vistazo rápido al diseño de la pestaña de esquina expandible que construiremos juntos. Observe cómo los efectos de desplazamiento y el contenido son bellamente simétricos.

Descarga el diseño GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a Divi Builder .

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo has hecho, instala y activa el tema Divi .
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
3. Elija la opción «Construir desde cero».

Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.

Crear el diseño de superposiciones de contenido expandido desde cero

Parte 1: crear una pestaña de esquina desplegable desde la posición inferior derecha

Para comenzar, agregue una fila de dos columnas (la mitad de la mitad) a la sección regular.

Antes de agregar un módulo, actualice la configuración de la fila con un ancho de medianil personalizado de la siguiente manera:

• Ancho del canalón: 4

Para este primer elemento destacado, crearemos una imagen de fondo de columna que tendrá una pestaña en la esquina (usando un módulo de publicidad) en la parte inferior derecha de la columna que se expande y superpone toda la columna/imagen al pasar el mouse.

Comencemos agregando un módulo de propaganda.

Añadir módulo Blurb

Agregue un módulo de propaganda a la columna 1.

Todavía no vamos a diseñarlo. Básicamente, necesitábamos algo de contenido para poder diseñar la columna que contiene la propaganda.

Configuración de la columna 1

Con la propaganda en su lugar, abra la configuración de la fila y luego haga clic para editar la configuración de la columna 1. Luego actualice lo siguiente:

• Imagen de fondo [insertar imagen]
• Tamaño de la imagen de fondo: Tamaño real

NOTA: para mi ejemplo, estoy usando las imágenes de cerveza de fondo transparente tomadas del paquete de diseño de cervecería. Son 128 px por 359 px, por eso estoy usando el tamaño real de la imagen.

Borde de la columna 1

• Esquinas redondeadas: 10px abajo a la derecha
• Ancho del borde derecho: 2px
• Color del borde derecho: #e94558
• Ancho del borde inferior: 2px
• Color del borde inferior: #e94558

CSS personalizado y desbordamiento

En la pestaña avanzada, agregue el siguiente CSS personalizado al elemento principal:

La actualización lo siguiente:

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Esta altura personalizada es necesaria para que nuestro módulo de publicidad (pestaña de esquina) expanda la altura completa de la columna. Y se necesita el desbordamiento oculto para que podamos ocultar la mayor parte del módulo de publicidad fuera de la columna hasta el estado de desplazamiento.

Adición de contenido del módulo de Blurb

Ahora estamos listos para comenzar a personalizar el módulo de publicidad dentro de la columna 1. Abra la configuración de publicidad y actualice lo siguiente:

• Título: Mango IPA
• Cuerpo:
  

  01 02 03

  <p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p> <p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p> <p>4.8% ABV / 4 IBUs</p>

• Imagen: agregue la misma imagen utilizada para el fondo de la columna

Diseño del módulo de Blurb

Dale a la publicidad un color de fondo al pasar el mouse de la siguiente manera:

• Color de fondo (escritorio): transparente
• Color de fondo (desplazamiento): rgba(255,255,255,0.9)

En la pestaña de diseño, actualice lo siguiente:

• Colocación de imagen/icono: Izquierda
• Fuente del título: Oswald
• Estilo de fuente del título: TT
• Tamaño del texto del título: 40px
• Peso de la fuente del cuerpo: semi negrita
• Color del cuerpo del texto (escritorio): transparente
• Color del cuerpo del texto (pasar el cursor): #121212

• Ancho de la imagen: 100 px (escritorio), 64 px (teléfono)
• Ancho de contenido: 100%
• Altura: 100%
• Relleno (escritorio): 15 % arriba, 15 % abajo, 8 % a la izquierda, 8 % a la derecha
• Relleno (desplazamiento): 8 % arriba, 8 % abajo, 8 % a la izquierda, 8 % a la derecha

• Esquinas redondeadas (predeterminado): 20px arriba a la izquierda
• Esquinas redondeadas (desplazamiento): 10 px arriba a la izquierda
• Ancho del borde superior: 4px (escritorio), 2px (desplazamiento)
• Color del borde superior: #e94558
• Ancho del borde izquierdo: 4px (escritorio), 2px (desplazamiento)
• Color del borde izquierdo: #e94558

Opción de transformación (escritorio)

• Eje Y de escala de transformación: 50%
• Transformar escala eje X: 50%
• Transformar Traducir Eje Y: 50%
• Transformar Traducir Eje X: 30%
• Transformar origen: abajo a la derecha

Opciones de transformación (desplazamiento)

• Eje Y de escala de transformación (desplazamiento): 100 %
• Eje X de la escala de transformación (desplazamiento): 100 %
• Transformar Trasladar el eje Y (pasar el mouse): 0%
• Transformar Trasladar el eje X (pasar el cursor): 0%

Para voltear la imagen publicitaria hacia el lado derecho, agregue el siguiente CSS personalizado al cuadro Contenido publicitario:

NOTA: La dirección «rtl» significa «derecha a izquierda», que cambia el orden predeterminado del contenido (de izquierda a derecha).

Resultado

Veamos el resultado final de nuestra pestaña de esquina expandida desde la posición inferior derecha. Observe cómo se expande para llenar toda la columna al pasar el mouse.

Parte 2: crear una pestaña de esquina desplegable desde la posición inferior izquierda

Duplicar la columna

Para crear la pestaña de la esquina desplegable desde la posición inferior izquierda, podemos iniciar el diseño duplicando toda la columna. Abra la configuración de la fila y duplique la columna 1. Luego elimine la columna adicional para que solo tenga dos duplicados exactos.

Actualizar la configuración de la columna 2

A continuación, abra la configuración de la columna 2 y actualice lo siguiente:

• Esquinas redondeadas: 10px abajo a la izquierda
• Ancho del borde derecho: 0px
• Ancho del borde izquierdo: 2px
• Color del borde izquierdo: #e94558

Actualizar la configuración de Blurb

A continuación, actualice la configuración de Blurb de la siguiente manera:

• Alineación de texto: derecha
• Esquinas redondeadas (escritorio): 20px arriba a la derecha
• Esquinas redondeadas (desplazamiento): 10 px arriba a la derecha
• Ancho del borde izquierdo: 0px
• Ancho del borde derecho: 4px (escritorio), 2px (desplazamiento)
• Color del borde derecho: #e94558

• Transform Translate X Axis (escritorio): -30%
• Transform Origin (escritorio): abajo a la izquierda

Luego, asegúrese de eliminar el CSS personalizado en el cuadro Contenido de Blurb.

Resultado

Aquí está el resultado. Observe cómo este es simétrico al primero y se expande desde la posición inferior izquierda de la columna.

Parte 3: crear una pestaña de esquina desplegable desde la posición superior derecha

Ahora estamos listos para comenzar con nuestros últimos dos diseños de pestañas de esquina expandibles. Para comenzar, dupliquemos toda la fila que contiene la propaganda que ya diseñamos.

Actualizar la configuración de la columna 1

A continuación, abra la configuración de la fila duplicada y luego abra la configuración de la columna 1 y actualice lo siguiente:

• Esquinas redondeadas 10px arriba a la derecha
• Ancho del borde inferior: 0px
• Ancho del borde superior: 2px
• Color del borde superior: #e94558

Actualizar la configuración del módulo de Blurb

A continuación, abra la configuración del módulo de publicidad y actualice lo siguiente:

• Esquinas redondeadas (escritorio): 20px abajo a la izquierda
• Esquinas redondeadas (desplazamiento): 10 px abajo a la izquierda
• Ancho del borde superior: 0px
• Ancho del borde inferior: 4px (escritorio), 2px (desplazamiento)
• Color del borde inferior: #e94558
• Transform Translate Y Axis (escritorio): -50%
• Transformar Origen: arriba a la derecha

CSS personalizado de Blurb

En este momento solo podemos ver la parte inferior izquierda del módulo de publicidad que no muestra nuestro título como las otras dos publicidades en la fila de arriba. Para mostrar el título dentro de la pestaña, debemos reposicionar el título en la parte inferior izquierda de la publicidad con un poco de CSS personalizado.

Agregue el siguiente CSS personalizado al cuadro Título de Blurb:

Luego agregue el siguiente CSS al cuadro de contenido de Blurb:

Parte 4: crear una pestaña de esquina desplegable desde la posición superior izquierda

Para nuestro cuarto y último efecto de desplazamiento de pestaña de esquina expandible, lo colocaremos en la esquina superior izquierda para completar el diseño simétrico de todo el diseño de la cuadrícula.

Actualizar la configuración de la columna 2

En la configuración de la fila, abra la configuración de la columna 2 y actualice lo siguiente:

• Esquinas redondeadas: 10px arriba a la izquierda
• Ancho del borde inferior: 0px
• Ancho del borde superior: 2px
• Color del borde superior: #e94558

Actualizar la configuración de Blurb

A continuación, abra la configuración de la publicidad en la columna 2 y actualice lo siguiente:

• Esquinas redondeadas (escritorio): 20px abajo a la derecha
• Esquinas redondeadas (desplazamiento): 10 px abajo a la derecha
• Ancho del borde superior: 0px
• Ancho del borde inferior: 4px (escritorio), 2px (desplazamiento)
• Color del borde inferior: #e94558

Luego actualice las opciones de transformación :

• Transform Translate X Axis (escritorio): -30%
• Transformar origen: arriba a la izquierda

CSS personalizado de Blurb

Luego agregue el siguiente CSS personalizado al cuadro Título de Blurb:

Luego agregue el siguiente CSS al cuadro Contenido de Blurb:

Parte 4: Terminando el Diseño del Layout

Color de fondo de la sección

Agregue un color de fondo de sección de la siguiente manera:

• Color de fondo: #efefef

Agregar el título

Para crear el título, agregue una fila en medio de las dos filas y agregue un módulo de texto a la fila de una columna.

Agregue el contenido: «Estacional».

Luego actualice la siguiente configuración:

• Fuente del encabezado 2: Merriweather
• Encabezado 2 Peso de fuente: Negrita
• Título 2 Estilo de fuente: TT
• Encabezado 2 Alineación de texto: Centro
• Título 2 Color del texto: #999999
• Título 2 Tamaño del texto: 50 px (escritorio), 30 px (tableta), 24 px (teléfono)
• Encabezado 2 Espaciado entre letras: 1em
• Relleno: 50 px a la izquierda (escritorio), 30 px a la izquierda (tableta), 24 px a la izquierda (teléfono)

Resultado final

Vea el resultado final del diseño con pestañas de esquina expandibles.

Y aquí está el diseño en el móvil.

Pensamientos finales

Las pestañas de las esquinas en expansión que aparecen en este diseño de diseño definitivamente funcionarán para todo tipo de contenido que desee presentar en su sitio web Divi. Tampoco tienes que usar las cuatro esquinas. Por ejemplo, puede crear un diseño de cuadrícula para imágenes usando solo las pestañas de la esquina superior derecha para revelar el contenido al pasar el mouse. Las capacidades de diseño son abundantes con este. Divertirse.

Espero escuchar de usted en los comentarios.

¡Salud!