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

Siempre es divertido descubrir formas nuevas y creativas de involucrar a los usuarios con su contenido utilizando efectos de desplazamiento únicos. Una excelente manera de hacer esto es revelar el contenido al pasar el mouse usando pestañas de esquina expandibles. Esto permite al usuario pasar el cursor sobre una pestaña en la esquina de una columna o imagen para expandir una superposición con contenido útil adicional para el usuario.

Para este tutorial, crearemos un diseño Divi completamente único que revelará el contenido al pasar el mouse usando pestañas de esquina expandibles. De hecho, le mostraremos cómo diseñar una pestaña de esquina en expansión para las cuatro esquinas de una columna en Divi.

¡Empecemos!

Vistazo

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

Descarga el diseño GRATIS

Para poner sus manos sobre 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

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

Vamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active Divi Theme.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Elija la opción "Construir desde cero".

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

Creación del diseño de superposiciones de contenido desplegable desde cero

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

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

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

• Ancho de la canaleta: 4

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

Comencemos agregando un módulo de propaganda.

Agregar módulo Blurb

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

No vamos a darle estilo todavía. 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 Brewery Layout Pack. Son 128px por 359px, por eso estoy usando el tamaño real de la imagen.

Borde de la columna 1

• Esquinas redondeadas: 10 px en la parte inferior 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:

height: 400px;

La actualización lo siguiente:

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

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

Agregar contenido del módulo Blurb

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

• Título: Mango IPA
• Cuerpo:

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

Dale a la propaganda 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:

• Ubicación de la 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 texto del cuerpo (escritorio): transparente
• Color del texto del cuerpo (desplazamiento): # 121212

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

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

Opción de transformación (escritorio)

• Transformar el eje Y de la escala: 50%
• Transformar el eje X de la escala: 50%
• Transformar traslación del eje Y: 50%
• Transformar trasladar eje X: 30%
• Transformar el origen: abajo a la derecha

Opciones de transformación (desplazamiento)

• Transformar el eje Y de la escala (flotar): 100%
• Transformar el eje X de la escala (flotar): 100%
• Transformar el eje Y de traslación (desplazamiento): 0%
• Transformar trasladar eje X (desplazamiento): 0%

Para voltear la imagen de la propaganda hacia el lado derecho, agregue el siguiente CSS personalizado al cuadro Contenido de Blurb:

direction: rtl

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

Resultado

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

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

Duplica la columna

Para crear la pestaña de la esquina en expansión desde la posición inferior izquierda, podemos impulsar 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: 10 px en la parte inferior 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): 20 px arriba a la derecha
• Esquinas redondeadas (desplazarse): 10px arriba a la derecha
• Ancho del borde izquierdo: 0px
• Ancho del borde derecho: 4 px (escritorio), 2 px (desplazamiento)
• Color del borde derecho: # e94558

• Transform Translate X Axis (escritorio): -30%
• Transform Origin (escritorio): parte inferior 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: Creación de una pestaña de esquina desplegable desde la posición superior derecha

Ahora estamos listos para comenzar con nuestros dos últimos diseños de pestañas de esquina en expansión. Para empezar, 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 Blurb

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

• Esquinas redondeadas (escritorio): 20 px en la parte inferior izquierda
• Esquinas redondeadas (desplazarse): 10 px en la parte inferior izquierda
• Ancho del borde superior: 0px
• Ancho del borde inferior: 4 px (escritorio), 2 px (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 propaganda que no muestra nuestro título como los otros dos anuncios en la fila de arriba. Para mostrar el título dentro de la pestaña, necesitamos reposicionar el título en la parte inferior izquierda de la propaganda con algo de CSS personalizado.

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

position: absolute;
bottom: 0;
left: 15px;

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

direction: rtl;
height: 100%;

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

Para nuestro cuarto y último efecto de desplazamiento de la pestaña de la esquina en expansión, 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 propaganda en la columna 2 y actualice lo siguiente:

• Esquinas redondeadas (escritorio): 20 px en la parte inferior derecha
• Esquinas redondeadas (flotar): 10 px en la parte inferior derecha
• Ancho del borde superior: 0px
• Ancho del borde inferior: 4 px (escritorio), 2 px (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:

position: absolute;
bottom: 0%;
right: 0%;

Luego agregue el siguiente CSS al cuadro Contenido de Blurb:

height: 100%;

Parte 4: Finalización del diseño del diseño

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 el 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 título 2: Merriweather
• Peso de fuente del encabezado 2: Negrita
• Estilo de fuente del título 2: TT
• Alineación del texto del encabezado 2: centro
• Color del texto del encabezado 2: # 999999
• Tamaño del texto del encabezado 2: 50 px (escritorio), 30 px (tableta), 24 px (teléfono)
• Encabezado 2 espaciado de 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 incluir 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 utilizando solo las pestañas de la esquina superior derecha para mostrar el contenido al pasar el mouse. Las capacidades de diseño son abundantes con este. Divertirse.

Espero tener noticias tuyas en los comentarios.

¡Salud!