Cómo agregar una tarjeta flotante a su sitio Divi

En casi todos los sitios web que visita, aparecen elementos que se adhieren a la página. Advertencias de cookies y suscripciones, registros de correo electrónico y cuadros de chat. Todos tendemos a ignorarlos en algún momento, y nos volvemos ciegos a lo que sea que el sitio web intente decirnos. Simplemente hacemos clic en la X sin leer. Pero eso no significa que este tipo de elementos no puedan ser útiles ni tengan cabida. 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 qué fácil es.

Avance

Escritorio

Móvil

1. Crear una plantilla de página

Lo primero que debe hacer es decidir qué páginas desea incluir en esta tarjeta flotante. Es posible que lo desee en todas y cada una de las páginas de su sitio web, o 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 ciertas páginas.

Use el generador de temas para crear la plantilla

Para empezar, vaya a Divi – Creador de temas en tu panel de WordPress. Elegir la Cuerpo personalizado sección de las páginas a las que desea aplicar la tarjeta flotante o la Cuerpo mundial para aplicarlo en todas partes.

Una vez que haya cargado Divi Visual Builder, elija Empezar desde el principio cuando se le da la opción.

Agregar una fila de 1 columna y publicar un módulo de contenido

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

A continuación, desea elegir el Publicar Contenido módulo. 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 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 has creado usando Divi.

Ajustar la sección y el espacio entre filas

Con eso en su lugar, necesitamos hacer un par de ajustes de espacio. Entra en el Sección configuración (borde azul en el constructor Divi) y elimine todo el relleno superior e inferior. Haces esto bajo el Diseño pestaña, la Espaciado encabezado y luego ajuste 0 píxeles a Parte superior y Abajo por debajo Relleno.

Guarde sus cambios e ingrese el Fila ajustes. De nuevo, establezca el Parte superior y Abajo relleno para 0px.

A continuación, encuentre el Dimensionamiento encabezado y alternar Usar ancho de canalón personalizado y establezca su valor en 1. A continuación, establezca Ancho y Anchura máxima al 100%.

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

2. Agregar tarjeta flotante

Agregar una nueva sección y fila

Primero, querrá agregar una nueva sección. Haga esto desplazándose hasta la parte inferior de la página y haciendo clic en el azul + circulo y eligiendo Regular cuando se le solicite el tipo de sección.

Agregar un módulo de 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 Propaganda módulo para la propia tarjeta flotante. El módulo Divi Blurb podría ser el módulo más versátil del generador, 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 el posicionamiento de esta fila y sección. Así que primero, entra en el Sección ajustes y establecer el Parte superior y Abajo Relleno a 0px por debajo Pantalla – Espaciado.

Entonces, bajo el Avanzado pestaña, busque el Posición Bóveda. Selecciona el Índice Z a 12. Cuanto mayor sea el número, más «frente» se ubicará la sección y su contenido. Y dado que es una carta flotante, queremos que flote sobre todos los demás elementos.

Finalmente, entra en el Fila ajustes y establecer su relleno en Parte superior y Abajo a 0px una vez más.

Contenido del módulo de Blurb

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

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). los Contenido tab contiene esto también, y lo encontrará en Fondo encabezado y el Lata de pintura.

Elija una imagen de tarjeta

El módulo de Blurb te da la opción de incluir una imagen o un ícono para el módulo, y queremos una imagen que represente a nuestra empresa. De nuevo, bajo el Contenido pestaña, encontrar Imagen e Icono y simplemente cargue la imagen que funcione para su módulo.

Dale forma a las esquinas de la tarjeta

A continuación, acceda a la Diseño pestaña y en la Borde Bóveda. Encuentra el Esquinas redondeadas opciones y establecer cada esquina en 25px. Esto suavizará los bordes afilados y cuadrados sin cambiar la forma de la tarjeta en general.

Alineación del texto

Bajo la Texto título, establezca el Alineación del texto al centro

Dale estilo al texto del título de la tarjeta flotante

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

• Fuente: Poppins
• Peso de la fuente: Audaz
• Color de texto: #22303f
• Tamano del texto: 20px
• Altura de la línea: 1.3em

Entonces, tenemos que entrar en el Sensibilidad configuración y cambiar el tamaño del título para dispositivos móviles. Cambiar el Tamaño del texto del título a 14 píxeles.

Dale estilo al texto de la tarjeta

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

Luego haga clic en el Enlace pestaña (icono de cadena) e intercambie el Color del texto del enlace a un color complementario para su sitio. Nosotros elegimos #97c357.

Dimensionamiento de la tarjeta Acerca de

Bajo la Dimensionamiento encabezado, agregue los siguientes valores a esta configuración:

• Ancho de la imagen: 75%
• Ancho del contenido: 25vw
• Ancho: 25vw
• Anchura máxima: 30vw

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

• Ancho del contenido: 90vw
• Ancho: 90vw
• Anchura máxima: 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 normalmente es imposible de leer.

Espaciado para la publicidad

los Espaciado el encabezado es una solución rápida, en la que debe establecer el Margen izquierdo a 0 píxelesla Parte superior y Abajo Relleno a 2vwy el Izquierda y Relleno derecho a 1vw.

Para configuraciones receptivas, solo el Parte superior y Acolchado inferior cambiará. Los estableceremos en 5%.

Agregar sombra de cuadro

Debido a que la tarjeta flotante permanecerá fija en su ubicación, queremos que se vea como si estuviera 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 Sombra de la cajay elegimos la sombra inferior básica.

Ajuste de CSS receptivo

Ahora es la parte divertida. nos estamos mudando a la Avanzado pestaña 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. Imágenes en el Propaganda El módulo realmente puede afectar el tamaño y la usabilidad en dispositivos móviles, además es algo más para que la página se cargue.

Entonces queremos agregar pantalla: ninguno; bajo la solo móvil Imagen de publicidad campo bajo CSS personalizado.

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

Finalmente, vamos a colocar la carta donde queremos que flote. En primer lugar, queremos dirigirnos a la Avanzado pestaña y desplácese hasta Posición. Seleccione Fijado del menú desplegable.

A continuación, encuentre el Ubicación opciones Este es el punto de la pantalla donde permanecerá la carta flotante. Para el escritorio, queremos que esté en la esquina inferior de la pantalla. Así que 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 a 3% y Desplazamiento Horizontal a 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, vamos a cambiar el Ubicación fija hacia la parte inferior central para que la tarjeta flote en la parte inferior de la pantalla en todo momento.

Además, sólo vamos a cambiar el Desplazamiento vertical para móvil Establezca este valor en 3%. No hay necesidad de 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 debería ser similar a este.

Escritorio

Móvil

Conclusión

Con las potentes opciones y la interfaz intuitiva de Divi, puede diseñar y colocar una tarjeta flotante en su sitio en muy poco tiempo. Al informar a sus usuarios con quién están tratando desde el principio, seguramente obtendrá cierta lealtad a la marca.

¿Para qué habéis utilizado tarjetas flotantes en vuestros sitios web? ¡Cuéntanos en los comentarios!