Cómo mostrar las características en las pestañas Hover con div Div

¿Busca formas nuevas y creativas para presentar características y / o productos en sus páginas web? Si es así, continúe leyendo, porque en esta publicación le mostraremos cómo mostrar las características en las pestañas de movimiento utilizando solo las opciones de división construidas. Las posibilidades que tiene con este enfoque son ilimitadas y ciertamente le permitirán comprender la división en un nivel más profundo. El efecto de desplazamiento de la pestaña solo aparecerá en los medios de oficina compatibles con el movimiento. Cuando las pestañas de viaje se ven desde dimensiones de pantalla más pequeñas, las características se enumerarán en su forma original.
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

¡Empecemos a crear! Suscríbase a nuestro canal de YouTube Agregue una nueva sección de fondo de gradiente Agregue una nueva página o abra una existente y agregue una nueva sección. Abra la configuración de la sección y agregue un fondo de gradiente a la sección. Usaremos el fondo de gradiente para cubrir el lado izquierdo de las pestañas de viaje, como puede ver en las pantallas de impresión anteriores.
Color 1: # F2F2F2
Color 2: #ffffff
Dirección de gradiente: 87 grados
Posición inicial: 20%
Posición final: 20%

Extienda luego, elimine el llenado superior e inferior personalizado de la sección agregando “0px” a ambas opciones.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:

Color de fondo sin agregar módulos, abra la configuración de la fila y cambie el color de fondo.
Color de fondo: #ffffff

Alineación de las filas modificadas y la alineación de las filas.
Alineación de filas: a la izquierda

Tamaño predeterminado y modifique la configuración de tamaño.
Use ancho personalizado: sí
Unidad: PX
Ancho personalizado: 400 PX
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1

Coloque el cursor en el mouse. Esto permitirá que la fila se expanda cuando se coloque en el avión.
Ancho personalizado: 2000 PX

Espacio y luego, acceda a la configuración de espaciado y elimine los valores de llenado y relleno inferior predeterminado.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Border predeterminado Agregue “20 PX” a la esquina superior derecha de la fila y agregue un borde izquierdo en una fila.
Ancho del borde izquierdo: 20 PX
Color del borde izquierdo: # 6d44ff

Coloque el mouse sobre el borde Retire la esquina redondeada “20px” desde la parte superior derecha desde el flotador agregando “0px”.

La sombra de cuadro predeterminada por último, pero no menos importante, agregue una sombra de cuadro sutil.
Poder de poco claro de la sombra de la caja: 80 px
Poder de extender la sombra de la caja: -10px
Color de la sombra: RGBA (0.0,0,0.11)

Hover Box Shadow y cambie el color de la sombra en un color completamente transparente en el flotador.
Color de la sombra: RGBA (255,255,255.0)

Agregue el modo de propaganda en una fila Agregar contenido ahora que hemos terminado de cambiar todos los conjuntos, podemos continuar y agregar un módulo de propaganda a la columna. Siéntase libre de usar cualquier otro modo de su elección. Después de haber agregado el módulo, agregue un contenido a su elección.

Seleccione el icono Seleccione el siguiente icono en su elección.

Configuración del icono y cambiar la apariencia del icono en la configuración del icono.
Colocando iconos: arriba
Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 54 PX
Configuración predeterminada para el texto de texto y luego cambie la configuración del texto del título.

Título de la fuente: Poppins
Alineación del texto del título: Centro
Color de texto del título: # 5323ff
Título Tamaño del texto: 25 PX
Cartas de título de espacio: -1 PX
Altura de la línea de título: 1em
Coloque el cursor en la configuración del texto del título y cambie la altura de la línea de título al salir.

Altura de la línea de título: 1.5em
Configuración predeterminada para el texto del cuerpo luego, acceda a la configuración del texto del cuerpo y realice algunos cambios. Esto incluye cambiar el tamaño del texto a “0px”. Esto nos ayudará a hacer que el texto del cuerpo aparezca solo en la carrera flotante.

Cuerpo de fuentes: Poppins

Peso de la fuente del cuerpo: luz
Alineación del texto del cuerpo: Centro
El color del texto del cuerpo: # 000000
Tamaño de texto del cuerpo: 0 PX (escritorio), 15 px (tableta y teléfono)
La altura de la línea del cuerpo: 2.2em
Coloque el cursor en la configuración de texto del cuerpo para asegurarse de que el texto del cuerpo aparezca en el flotador, cambie el tamaño del texto en el flotador.

Tamaño del texto del cuerpo: 15 PX
Espacio predeterminado para darle al módulo un espacio de respiración, agregue algunos módulos de llenado personalizados, superior e inferior al módulo.

Revestimiento superior: 80 px
Finamiento inferior: 80 PX
La distancia con el mouse cambiaremos la configuración de espaciado cuando salga. No podrá ver el resultado final antes de salir de Visual Builder, ya que aplicamos opciones de viaje en una fila y en el módulo de propaganda.

Revelaje superior: 80 pxcatuse inferior: 80 px
Junta izquierda: 20 VW
Junta derecha: 20 VW
Clone la fila 3 veces después de haber terminado de cambiar la primera fila y su módulo de propaganda, puede seguir adelante y puede clonar la fila tantas veces como desee.
Cambie la fila y la propaganda # 2 Modium Cambie el espacio de fila Abra el primer duplicado y agregue un margen izquierdo personalizado. Esto nos permitirá crear el efecto de escala que puede ver para obtener una vista previa de esta publicación.

Margen izquierdo: 6VW

Cambie el color del marco de la fila, cambie el color de la fila izquierda.
Color del borde izquierdo: # 00FFCC

Cambie el contenido y el icono de la propaganda, abra el módulo de la propaganda y cambie el icono.
Cambie el color del icono del módulo de propaganda junto con el color del icono.

Icono de color: # 00eda6

Cambie el color del texto del título y el color del texto del título.
Color de texto del título: # 00EDA6

Cambie la fila y la propaganda # 3 modium modium cambia el espacio de espacio agregado y un margen izquierdo personalizado al segundo duplicado.
Margen izquierdo: 12VW

Cambie el color del marco de la fila Cambie el color de la fila a la izquierda.
Color del borde izquierdo: #Afebff

Cambie el contenido y el ícono de la propaganda junto con el icono y el contenido de la propaganda.
Cambie el color del icono del módulo de propaganda modifique y el color del icono.

Icono de color: # 68d9ff

Cambie el color del texto del título y el color del texto del título.
Color de texto del título: # 68d9ff

¡Cambie la fila y la propaganda # 4 Cambie el espacio de fila al siguiente y último duplicado! Agregue un borde izquierdo personalizado en una fila.
Margen izquierdo: 18 VW

Cambie el color del marco de fila Cambie y el color de la fila izquierda.
Cambie el contenido y el icono de la propaganda Abra el módulo de la propaganda en una fila y cambie el icono y el contenido del módulo.

Cambie el color del icono del módulo de propaganda junto con el color del icono.
Icono de color: # dd6aca

Cambie el color del texto del título y el color del texto del título también.

Color de texto del título: # dd6aca
Vista previa ahora que hemos recorrido el tutorial, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio

Móvil
Pensamientos finales En esta publicación, le mostré cómo usar las opciones de división incorporadas solo para crear pestañas de cruce. Este enfoque lo ayudará a compartir contenido sobre funciones o producido de manera interactiva. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.