Cómo agregar una tarjeta flotante sobre su sitio Divi

En casi todos los sitios web que visita, los elementos aparecen y se adhieren a la página. Advertencias de cookies y suscripciones, suscripciones por correo electrónico y cajas de chat. Todos tendemos a ignorarlos en algún momento, quedando ciegos a lo que sea que el sitio web esté tratando de decirnos. Simplemente hacemos clic en la X sin leer. Pero eso no significa que este tipo de elementos no puedan ser útiles ni tener un lugar. Con Divi, puede crear fácilmente una tarjeta flotante que agregue valor a su sitio, explicando discretamente quién es usted y qué hace su marca. Veamos lo fácil que es.

Avance

Escritorio

Móvil

1. Cree una plantilla de página

Lo primero que debe hacer es decidir qué páginas desea incluir esta tarjeta flotante. Es posible que lo desee en todas y cada una de las páginas de su sitio web, o es posible que solo lo desee en páginas de destino específicas. De cualquier manera, puede usar Divi Theme Builder para configurarlo. Ya sea como una plantilla global o una plantilla que se aplica solo a determinadas páginas.

Utilice el generador de temas para crear la plantilla

Para comenzar, vaya a Divi - Theme Builder en su panel de WordPress. Elija la sección Cuerpo personalizado de las páginas a las que desea aplicar la tarjeta flotante sobre o el Cuerpo global para aplicarlo en todas partes.

Una vez que haya cargado Divi Visual Builder, elija Comenzar desde cero cuando se le dé la opción.

Agregar una fila de una columna y un módulo de contenido de publicación

Y luego elija una fila de una sola columna cuando se le solicite.

A continuación, desea elegir el módulo Publicar contenido . Este es un ejemplo de nuestra función de contenido dinámico. El módulo muestra el diseño adjunto construido dentro de la propia página Divi, lo que significa que este módulo mostrará contenido diferente para diferentes páginas con esta plantilla. Para las publicaciones de blog, será el contenido del blog. Para las páginas de la tienda, serán los productos. Y para páginas individuales, el contenido personalizado que ha creado con Divi.

Ajustar el espaciado de secciones y filas

Con esos en su lugar, necesitamos hacer un par de ajustes de espaciado. Vaya a la configuración de la Sección (borde azul en el generador Divi) y elimine todo el relleno superior e inferior. Haga esto en la pestaña Diseño , el encabezado Espaciado , y luego establezca 0px en Superior e Inferior debajo de Relleno .

Guarde sus cambios e ingrese a la configuración de Fila . Nuevamente, establezca el Relleno superior e inferior en 0px .

A continuación, busque el encabezado Tamaño y active Usar ancho de canal personalizado y establezca su valor en 1. A continuación, establezca Ancho y Ancho máximo en 100%.

Con la preparación hecha, ¡empecemos a hacer la tarjeta flotante!

2. Agregar tarjeta flotante

Agregar una nueva sección y fila

Primero, querrá agregar una nueva sección. Para ello, desplácese hasta la parte inferior de la página y haga clic en el círculo azul + y elija Regular cuando se le solicite el tipo de sección.

Agregar un módulo Blurb

Esta será la sección dedicada a la tarjeta flotante. En el interior, queremos agregar otra fila de una sola columna. Y dentro de eso, queremos usar un módulo Blurb para la propia tarjeta flotante. El módulo Divi Blurb podría ser el módulo más versátil del constructor, por lo que queremos aprovechar lo que ofrece para esta función.

Ajustar la configuración de sección y fila

Con eso en su lugar, necesitamos ajustar el relleno y la posición de esta fila y sección. Así que, primero, entrar en la configuración de sección y fijar la parte superior e inferior del acolchado a 0px bajo Pantalla - Espaciado.

Luego, en la pestaña Avanzado , busque el encabezado Posición . Establezca el índice Z en 12. Cuanto mayor sea el número, más "al frente" se colocará la sección y su contenido. Y como es una carta flotante, queremos que flote sobre todos los demás elementos.

Finalmente, vaya a la configuración de Fila y configure su relleno en la parte superior e inferior a 0px una vez más.

El contenido del módulo Blurb

Ahora es el momento de diseñar la tarjeta en sí. Ingrese a la Configuración para el módulo Blurb. Dado que es un elemento que describe su negocio, querrá hacer una breve mención de lo que hace su empresa o marca. Como esta es una publicación de ejemplo, la llenamos con un lorem ipsum con sabor a zombies. Puede establecer el título y el contenido del cuerpo en la pestaña Contenido .

Establecer el color de fondo

Obviamente, desea que la tarjeta flotante coincida visualmente con su sitio, por lo que elegir el color de fondo correcto es muy importante. Vamos con #ffffff (blanco). La pestaña Contenido también lo alberga, y lo encontrará en el encabezado Fondo y la lata de pintura .

Elija una imagen de tarjeta

El módulo de Blurb te da la opción de incluir una imagen o un 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 funcione para su módulo.

Dar forma a las esquinas de la tarjeta

A continuación, vaya a la pestaña Diseño y al encabezado Borde . Busque las opciones de Esquinas redondeadas y establezca cada esquina en 25px . Esto suavizará los bordes afilados y cuadrados sin cambiar la forma de la tarjeta en general.

Alineación del texto

Debajo del encabezado Texto , establezca Alineación del texto en el centro.

Aplicar estilo al texto del título de la carta flotante

El texto del título que configuró anteriormente tiene el valor predeterminado H4 . Para darle estilo, vaya al encabezado Texto del título, elija la pestaña H4 y cambie las siguientes opciones de Título :

• Fuente: Poppins
• Peso de fuente: negrita
• Color del texto: # 22303f
• Tamaño del texto: 20px
• Altura de la línea: 1.3em

Luego, debemos ir a la configuración de Capacidad de respuesta y cambiar el tamaño del título para dispositivos móviles. Cambie el Tamaño del texto del título a 14px .

Estilo del texto de la tarjeta

A continuación, navegue hasta el texto del cuerpo y cambie la fuente del cuerpo a Poppins para que coincida con la fuente del título.

Luego haga clic en la pestaña Enlace (icono de cadena) y cambie el Color del texto del enlace a un color complementario para su sitio. Elegimos # 97c357 .

Dimensionamiento de la tarjeta Acerca de

Debajo del encabezado Tamaño , agregue los siguientes valores a estas configuraciones:

• Ancho de imagen: 75%
• Ancho del contenido: 25vw
• Ancho: 25vw
• Ancho máximo: 30vw

En la configuración de capacidad de respuesta, ajuste los siguientes valores:

• Ancho del contenido: 90vw
• Ancho: 90vw
• Ancho máximo: 95vw

Estos valores asegurarán que la tarjeta ocupe todo el ancho de la pantalla en los dispositivos móviles porque una tarjeta flotante en la esquina generalmente es imposible de leer.

Espaciado de la propaganda

El encabezamiento espaciamiento es una solución rápida, donde es necesario establecer el margen izquierdo a 0px, la parte superior e inferior del acolchado a 2vw, y la Izquierda y Derecha relleno para 1vw.

Para configuraciones receptivas, solo cambiarán el acolchado superior e inferior . Los fijaremos en un 5% .

Agregar sombra de cuadro

Debido a que la tarjeta flotante permanecerá fija en su ubicación, queremos que parezca que en realidad está flotando sobre su contenido. Este efecto es bastante simple al agregar una sombra de cuadro básica al módulo. Esta opción se puede encontrar en Box Shadow , y elegimos la sombra inferior básica.

Ajustar CSS receptivo

Ahora es la parte divertida. Nos estamos moviendo a la pestaña Avanzado donde haremos que la tarjeta flotante se adhiera a la página. Para hacer esto, nuestro primer paso es apagar la imagen que agregamos para el escritorio. Las imágenes en el módulo de Blurb realmente pueden afectar el tamaño y la usabilidad en dispositivos móviles, además es algo más para que se cargue la página.

Entonces queremos agregar display: none; en el campo Imagen de Blurb solo para dispositivos móviles en CSS personalizado .

Fijar y hacer flotar la tarjeta con ajuste de posición

Finalmente, vamos a colocar la carta donde queramos que flote. Primero, queremos ir a la pestaña Avanzado y desplazarnos hasta Posición . Seleccione Fijo en el menú desplegable.

A continuación, busque las opciones de ubicación . Este es el punto de la pantalla donde permanecerá la tarjeta flotante. Para el escritorio, queremos que esté en la esquina inferior de la pantalla. Entonces hacemos clic en el cuadrado que se correlaciona con eso. También queremos que esté ligeramente desplazado del borde de la ventana, por lo que cambiaremos el desplazamiento vertical al 3% y el desplazamiento horizontal al 2%.

A continuación, queremos crear una ubicación y un desplazamiento diferentes para dispositivos móviles. Arriba, configuramos el ancho de la tarjeta para estirar todo el ancho de la pantalla. Con eso en mente, cambiaremos la ubicación fija al centro inferior para que la tarjeta simplemente flote en la parte inferior de la pantalla en todo momento.

Además, solo vamos a cambiar el Desplazamiento vertical para dispositivos móviles. Establezca este valor en 3% . No es necesario un desplazamiento horizontal porque es el ancho de la pantalla del móvil y está centrado.

Resultados finales

Cuando todo esté configurado correctamente y ajustado para su sitio personal, el producto final debe tener un aspecto similar a este.

Escritorio

Móvil

Conclusión

Con las poderosas opciones y la interfaz intuitiva de Divi, puede diseñar y colocar una tarjeta flotante en su sitio en poco tiempo. Al permitir que sus usuarios sepan con quién están tratando desde el principio, seguramente ganará algo de lealtad a la marca.

¿Para qué ha utilizado tarjetas flotantes en sus sitios web? ¡Háznoslo saber en los comentarios!