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 contenido al pasar el mouse usando pestañas de esquina expandibles. Esto permite al usuario desplazarse 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, vamos a crear 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 expansible para las cuatro esquinas de una columna en Divi.

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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 «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Vistazo

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

pestañas de esquina expandibles

Lo que necesitas para empezar

pestañas de esquina expandibles

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo ha hecho, instale y active el Divi Theme .
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (visual builder).
  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: crear una pestaña de esquina desplegable desde la posición inferior derecha

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

pestañas de esquina expandibles

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

  • Ancho de canal: 4

pestañas de esquina expandibles

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

Comencemos agregando un módulo de publicidad.

Añadir módulo de publicidad

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

pestañas de esquina expandibles

No lo vamos a diseñar todavía. Básicamente necesitábamos algo de contenido para poder diseñar la columna que contiene la propaganda.

Configuración de columna 1

Con la propagación 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 imagen de fondo: tamaño real

pestañas de esquina expandibles

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

Columna 1 Borde
  • 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

pestañas de esquina expandibles

CSS personalizado y desbordamiento

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

01
height: 400px;

La actualización lo siguiente:

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

pestañas de esquina expandibles

Esta altura personalizada es necesaria para que nuestro módulo de propagación (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 difusión 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 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

pestañas de esquina expandibles

Diseñando el Módulo Blurb

Déle 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)

pestañas de esquina expandibles

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: 40 px
  • Peso de la fuente del cuerpo: semi negrita
  • Color del texto del cuerpo (escritorio): transparente
  • Color del texto del cuerpo (desplazarse): # 121212

pestañas de esquina expandibles

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

pestañas de esquina expandibles

  • Esquinas redondeadas (predeterminado): 20 píxeles arriba a la izquierda
  • Esquinas redondeadas (desplazamiento): 10 píxeles arriba a la izquierda
  • Ancho del borde superior: 4px (escritorio), 2px (pasar el mouse)
  • Color del borde superior: # e94558
  • Ancho del borde izquierdo: 4 px (escritorio), 2 px (hover)
  • Color del borde izquierdo: # e94558

pestañas de esquina expandibles

Opción de transformación (escritorio)
  • Escala de transformación Eje Y: 50%
  • Escala de transformación del eje X: 50%
  • Transformar Traducir Y Eje: 50%
  • Transformar Traducir Eje X: 30%
  • Transformar origen: abajo a la derecha

pestañas de esquina expandibles

Opciones de transformación (pasar el mouse)
  • Escala de transformación Eje Y (desplazamiento): 100%
  • Escala de transformación del eje X (desplazamiento): 100%
  • Transformar Traducir Eje Y (desplazamiento): 0%
  • Transformar Traducir Eje X (flotar): 0%

pestañas de esquina expandibles

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

01
direction: rtl

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

pestañas de esquina expandibles

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.

pestañas de esquina expandibles

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 impulsar el diseño duplicando toda la columna. Abra la configuración de fila y la columna duplicada 1. Luego elimine la columna adicional para que solo tenga dos duplicados exactos.

pestañas de esquina expandibles

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

pestañas de esquina expandibles

Actualizar 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 (desplazamiento): 10 píxeles arriba a la derecha
  • Ancho del borde izquierdo: 0px
  • Ancho del borde derecho: 4 px (escritorio), 2 px (hover)
  • Color del borde derecho: # e94558

pestañas de esquina expandibles

  • Transformar Traducir Eje X (escritorio): -30%
  • Transformar origen (escritorio): abajo a la izquierda

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

pestañas de esquina expandibles

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.

pestañas de esquina expandibles

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

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

pestañas de esquina expandibles

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

pestañas de esquina expandibles

Actualizar la configuración del módulo Blurb

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

  • Esquinas redondeadas (escritorio): 20 px abajo a la izquierda
  • Esquinas redondeadas (desplazamiento): 10 píxeles en la parte inferior izquierda
  • Ancho del borde superior: 0px
  • Ancho del borde inferior: 4px (escritorio), 2px (pasar el mouse)
  • Color del borde inferior: # e94558
  • Transformar Traducir Y Eje (escritorio): -50%
  • Transformar Origen: arriba a la derecha

pestañas de esquina expandibles

Blurb CSS personalizado

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 imágenes borrosas 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 publicidad con algunos CSS personalizados.

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

01
02
03
position: absolute;
bottom: 0;
left: 15px;

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

01
02
direction: rtl;
height: 100%;

pestañas de esquina expandibles

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 desplegable, 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: 10 píxeles superior izquierda
  • Ancho del borde inferior: 0px
  • Ancho del borde superior: 2px
  • Color del borde superior: # e94558

pestañas de esquina expandibles

Actualizar 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 abajo a la derecha
  • Esquinas redondeadas (desplazamiento): 10px abajo a la derecha
  • Ancho del borde superior: 0px
  • Ancho del borde inferior: 4px (escritorio), 2px (pasar el mouse)
  • Color del borde inferior: # e94558

pestañas de esquina expandibles

Luego actualice las opciones de transformación:

  • Transformar Traducir Eje X (escritorio): -30%
  • Transformar origen: arriba a la izquierda

pestañas de esquina expandibles

Blurb CSS personalizado

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

01
02
03
position: absolute;
bottom: 0%;
right: 0%;

Luego agregue el siguiente CSS al cuadro Contenido de Blurb:

01
height: 100%;

pestañas de esquina expandibles

Parte 4: Terminar el 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

pestañas de esquina expandibles

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.

pestañas de esquina expandibles

Agregue el contenido: «Estacional».

Luego actualice la siguiente configuración:

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

pestañas de esquina expandibles

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!