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.
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 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 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 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 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 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. Vaya a la configuración de la Sección (borde azul en el constructor 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 en Relleno .
Guarde sus cambios e ingrese la configuración de Fila . Nuevamente, configure el Relleno superior e inferior en 0px .
A continuación, busque el encabezado Tamaño y active Usar ancho de medianil personalizado y establezca su valor en 1. A continuación, establezca Ancho y Ancho máximo en 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 círculo azul + 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 módulo de Blurb 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. Entonces, primero, vaya a la configuración de la Sección y configure el Relleno superior e inferior en 0px en 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 «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, vaya a la configuración de Fila y configure su relleno en la parte superior e inferior a 0px una vez más.
Contenido del módulo de Blurb
Ahora es el momento de diseñar la tarjeta en sí. Ingrese la Configuración 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 de lorem ipsum con sabor a zombi . Puede configurar 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 contiene esto, 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 ícono para el módulo, y queremos una imagen que represente a nuestra empresa. Nuevamente, en la pestaña Contenido , busque Imagen e ícono y simplemente cargue la imagen que funcione para su módulo.
Dale 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 la Alineación del texto en el 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 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,3 em
Luego, debemos ingresar 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 .
Dale estilo al texto de la tarjeta
A continuación, vaya a 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 esta configuración:
- Ancho de la imagen: 75%
- Ancho de contenido: 25vw
- Ancho: 25vw
- Ancho máximo: 30vw
En la configuración de capacidad de respuesta, ajuste los siguientes valores:
- Ancho de 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 normalmente es imposible de leer.
Espaciado para la publicidad
El encabezado Espaciado es una solución rápida, donde debe establecer el Margen izquierdo en 0px , el Relleno superior e inferior en 2vw y el Relleno izquierdo y derecho en 1vw.
Para la configuración receptiva, solo cambiará el relleno superior e inferior . Los fijaremos al 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 Box Shadow , y elegimos la sombra inferior básica.
Ajuste de CSS receptivo
Ahora es la parte divertida. Nos movemos 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 la página se cargue.
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 configuración de posición
Finalmente, vamos a colocar la carta donde queremos que flote. Primero, queremos dirigirnos a la pestaña Avanzado y desplazarnos a 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 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 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 a la parte inferior central 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 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!