Cómo agregar una tarjeta flotante sobre tu div

Casi en cada sitio web que visita, aparecen elementos y se quedan en la página. Advertencias y ocho pulgadas para cookies, registros de correo electrónico y cajas de chat. Todos tendemos a ignorarlos en algún momento, volviéndose ciego a todo lo que el sitio está tratando de decirnos. Simplemente haga clic en X sin leer. Pero eso no significa que estos tipos de elementos no puedan ser útiles y no pueden tener lugar. Con Div, puede crear fácilmente una tarjeta flotante que agrega valor a su sitio, explicando discretamente quién es usted y qué hace su marca para ver qué tan fácil es. Vista previa de escritorio

Móvil

1. Cree una plantilla de página Lo primero que desea hacer es decidir qué páginas desea incluir esta flotación sobre la tarjeta. Es posible que lo desee en cada página de su sitio web o simplemente lo desee en ciertas páginas de destino. En cualquier caso, puede usar Divic Builder para configurarlo. Ya sea como una plantilla global o como una plantilla que se aplica solo a ciertas páginas. Use el generador de temas para crear la plantilla para iniciar, acceder al creador de la Divic en el tablero de WordPress. Elija la sección del cuerpo personalizado de las páginas que desea aplicar la tarjeta flotante o el cuerpo global para aplicarla en todas partes.

Después de cargar la Divic de Visual Builder, elija Comience desde cero cuando le ofrezcan la opción.

Agregue un módulo con una columna de fila y publique el contenido y luego elija una sola fila de columna cuando sea necesario.

Entonces desea elegir el módulo publicar el contenido. Este es un ejemplo de nuestra función de contenido dinámico. El módulo muestra el diseño adjunto creado dentro del DIV en sí, lo que significa que este módulo mostrará un contenido diferente para diferentes páginas con esta plantilla. Para las publicaciones en el blog, este será el contenido del blog. Para las páginas de las tiendas, estos serán los productos. Y para las páginas individuales, el contenido personalizado que creó usando Div. Registre el espacio entre secciones y filas con las que están en su lugar, debemos hacer algunos ajustes de espacio. Vaya a la configuración de la sección (borde azul en el Builder Divi) y elimine todo el forro arriba e inferior. Haga esto en la pestaña Diseño, Spacing Share, luego establezca 0px en la parte superior e inferior bajo relleno.

Guarde los cambios e ingrese la configuración de la fila. Nuevamente, establezca el revestimiento superior e inferior en 0 px.

Luego encuentre el título de dimensionamiento y encienda el uso del ancho personalizado de la canaleta y establezca su valor en 1. Luego establezca el ancho y el ancho máximos en 100%.

Con la preparación realizada, ¡comencemos a hacer la tarjeta flotante! 2. Agregue una tarjeta flotante Agregue una nueva sección y primero, querrá agregar una nueva sección. Haga esto desplazándose a la parte inferior de la página y haciendo clic en el círculo azul + y eligiendo regularmente cuando se le pide el tipo de sección.

Agregue un módulo de propaganda. Esta será la sección dedicada a la tarjeta flotante. En el interior, queremos agregar otra fila con una sola columna. Y dentro de él, queremos usar un módulo de propaganda para la tarjeta flotante en sí. El módulo Div Div Brurb podría ser el módulo más versátil del fabricante, por lo que queremos aprovechar lo que ofrece para esta característica. Registre la configuración de la sección y las filas teniendo en cuenta esto, debemos ajustar el llenado y el posicionamiento de esto. línea y sección. Entonces, primero, acceda a la configuración de la sección y establezca el revestimiento superior e inferior en 0 PX en la pantalla – espaciado.

Luego, en la pestaña Avanzada, busque el título de posición. Establezca el índice Z en 12. Cuanto mayor sea el número, más la sección y su contenido serán “al frente”. Y como es un libro flotante, queremos flotar por encima de todos los demás elementos.

Finalmente, acceda a la configuración de la fila y configure el revestimiento superior e inferior nuevamente en 0 PX.

El contenido del módulo de la propaganda ahora es el momento de modelar la tarjeta en sí. Ingrese la configuración para el módulo de propaganda. Debido a que es un elemento que describe su negocio, querrá mencionar lo que hace su empresa o marca porque este es un ejemplo de una publicación, lo llené con algunos sabores zombi. Puede establecer el título y el contenido del cuerpo en la pestaña de contenido.

Establezca el color de fondo obviamente, desea la tarjeta flotante visualmente en su sitio, por lo que elegir el fondo correcto es muy importante. Vamos con #ffffff (blanco). La pestaña de contenido también aloja esto y lo encontrará bajo el fondo del título y la lata de pintura.

Elija una imagen de tarjeta El módulo de la propaganda le brinda la opción de incluir una imagen o icono para el módulo y queremos una imagen que represente a nuestra empresa. Nuevamente, en la pestaña Contenido, busque imagen e icono y simplemente cargue la imagen que funciona para su módulo. Encuentre las opciones de esquinas redondeadas y configure cada esquina en 25 px. Esto suavizará los bordes afilados y cuadrados, sin cambiar la forma del libro general.

Alineación del texto bajo el título de texto, establece la alineación del texto en el centro.

Estilice el texto del título de la tarjeta flotante El texto del título que estableció anteriormente es H4. Para estilizarlo, vaya al título de texto del título, elija la pestaña H4 y cambie las siguientes opciones para el título:


Fuente: Poppins

Peso de fuente: en negrita

Color de texto: # 22303F
Tamaño de texto: 20 PX
Altura de la línea: 1.3em
Luego, debemos ingresar la configuración de receptividad y cambiar el tamaño del título para dispositivos móviles. Cambie el tamaño del texto del título a 14 px. Estilice el texto de la tarjeta y luego explore el texto del cuerpo y cambie la fuente de su cuerpo a Poppins para que coincida con la fuente del título.
Luego haga clic en la pestaña del enlace (icono de la cadena) y cambie el color del texto del enlace con un color gratuito para su sitio. Elegimos # 97C357.
Dimensionamiento de la tarjeta alrededor de la dimensión del título, agregue los siguientes valores a estas configuraciones:

Ancho de imagen: 75%

Ancho de contenido: 25VW

Ancho: 25VW
Ancho máximo: 30 VW
En la configuración de receptividad, ajuste los siguientes valores:
Ancho de contenido: 90VW
Ancho: 90VW

Ancho máximo: 95VW
Estos valores se asegurarán de que la tarjeta ocupe todo el ancho de la pantalla en dispositivos móviles, porque una tarjeta flotante en la esquina generalmente es imposible de leer. El espacio de Blurbor es una solución rápida, donde debe configurar el margen izquierdo para que el margen izquierdo 0 PX, revestimiento superior e inferior a 2 VW y el revestimiento izquierdo y derecho a 1VW.
Para la configuración receptiva, solo cambiará el revestimiento superior e inferior. Los estableceremos en 5%.
Agregue la sombra de la caja porque la tarjeta flotante permanecerá fija en su ubicación, queremos parecer que flota por encima de su contenido. Este efecto es lo suficientemente simple al agregar una base de la caja básica al módulo. Esta opción se puede encontrar en Box Shadow y elegí la Base Base Shadow.

El ajuste CSS de ajustivo ahora es la parte divertida. Pasamos a la pestaña Avanzada, donde haremos la solución de la tarjeta flotante en la página. Para hacer esto, nuestro primer paso es detener la imagen que agregamos para el escritorio. Las imágenes en el módulo de propaganda realmente pueden afectar el tamaño y el grado de uso en el móvil, además es algo más para cargar la página. Entonces, queremos agregar pantalla: Ninguno; En el campo de imagen de la propaganda solo para dispositivos móviles CSS personalizados.
Remedia y huye de la tarjeta con la configuración de posición al final, posicionaremos el libro donde queremos flotar. Primero, queremos ir a la pestaña avanzada y ejecutar en la posición. Seleccione fijo en el menú Drop -down.

Luego encuentre las opciones de ubicación. Este es el punto en la pantalla donde permanecerá la tarjeta flotante. Para el escritorio, queremos estar en la esquina inferior de la pantalla. Entonces, haga clic en el cuadrado que se correlacione con él. También queremos que se compensa fácilmente desde el borde de la ventana, por lo que cambiaremos la brecha vertical a 3% y la brecha horizontal al 2%. Luego, queremos crear otra ubicación y un desplazamiento. Arriba, configure el ancho de la tarjeta para estirar todo el ancho de la pantalla. En vista de esto, cambiaremos la ubicación fija en el centro inferior, de modo que la tarjeta flota en la parte inferior de la pantalla en cualquier momento.

Además, cambiaremos la brecha vertical solo para dispositivos móviles. Establezca este valor en 3%. No hay necesidad de compensación horizontal, porque es el ancho de la pantalla móvil y centrada. Resultados finales Cuando todo se establece correctamente y se ajusta para su sitio personal, el producto final debe parecer similar a él. Escritorio

Móvil

Conclusión Con las poderosas opciones de la Divic y la interfaz intuitiva, puede diseñar y arreglar una tarjeta flotante en su sitio en el menor tiempo. Si les informa a los usuarios con los que están tratando desde el principio, está obligado a obtener una cierta lealtad a la marca. ¿Para qué has usado tarjetas flotantes en tus sitios web? ¡Dinos en los comentarios!