ElegantThemes

Cómo agregar una tarjeta Floating About a su sitio Divi

Los elementos aparecen y se adhieren a casi todos los sitios web que visita. Advertencias y opt-ins de cookies, registros de correo electrónico y cajas de chat. Todos tendemos a ignorarlos en algún momento y ser 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 o tener su lugar. Con Divi, puede crear fácilmente una tarjeta de información flotante que agrega valor a su sitio web y explica discretamente quién es usted y qué está haciendo su marca. Veamos lo fácil que es.

avance

Escritorio

Teléfono celular, teléfono móvil

version móvil

1. Crea una plantilla de página

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

Utilice el generador de temas para crear la plantilla

Para empezar, ve a Divi – creador de temas en su panel de WordPress. Selecciona el Cuerpo personalizado Sección de las páginas donde puede encontrar la tarjeta flotante o la Cuerpo global aplícalo en todas partes.

Seleccionar plantillas

Después de cargar Divi Visual Builder, seleccione Comenzar de nuevo si tienes una opción.

construir desde cero

Agregue una fila de una sola columna y un módulo para publicar contenido

Luego, seleccione una fila de una sola columna cuando se le solicite.

flotar sobre una hilera de cartas

A continuación, quieres 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 integrado en la propia página Divi, lo que significa que este módulo mostrará contenido diferente para diferentes páginas utilizando esta plantilla. Para las publicaciones de blog, es el contenido del blog. En el caso de las páginas de la tienda, son los productos. Y para páginas individuales, el contenido personalizado que creó con Divi.

Módulo de contenido de publicación

Ajustar la sección y el espaciado de línea

Si están en su lugar, tendremos que hacer algunos ajustes de espaciado. Ve a la sección Configura (marco azul en Divi-Builder) y quita toda la tapicería superior e inferior. Haces esto debajo de eso borrador Tab que distancia Rumbo y luego ajuste 0px para Cima y fondo debajo tapicería.

Acolchado para sección

Guarde sus cambios e ingrese el línea la configuración. Selecciona el Cima y fondo Tapicería también 0px.

Relleno de línea

A continuación, busque el Dimensionamiento Rumbo y alternancia Utilice el ancho de canaleta personalizado y establezca el valor en 1. A continuación, establezca amplio y Ancho máximo al 100%.

Ancho y ranura para flotar por el mapa

Cuando terminen los preparativos, ¡bajemos al mapa flotante!

2. Agregar tarjeta flotante

Agregar una nueva sección y línea

Primero, desea agregar una nueva sección. Para hacer esto, desplácese hasta la parte inferior de la página y haga clic en circulo + azul y elige Regular cuando se le pregunte por el tipo de sección.

sección

Agregar un módulo de Blurb

Esta es la sección dedicada a la tarjeta flotante. En el interior, queremos agregar otra línea de una sola columna. Y en esto queremos un. usar Propaganda Módulo para la tarjeta flotante en sí El módulo Divi Blurb es posiblemente el módulo más versátil del Builder, por lo que nos gustaría aprovechar sus beneficios para esta función.

Módulo de solapa

Ajustar la configuración de la sección y la serie

Con eso, necesitamos ajustar el relleno y la posición de esta fila y sección. Así que ve al primero sección Configuración y ajuste Cima y fondo tapicería para 0px debajo Pantalla – distancia.

Acolchado para sección

Entonces debajo de eso Progresivo Tab, encuentra el posición Bóveda. Selecciona el Índice Z Respecto a 12. Cuanto mayor sea el número, más «adelante» se sentará la sección y su contenido. Y como es un mapa flotante, queremos que flote por encima de todos los demás elementos.

índice z de 12

Finalmente ve a la línea Configuración y ajuste de la tapicería. Cima y fondo para 0px una vez más.

Relleno de línea

Contenido del módulo Blurb

Ahora es el momento de diseñar la tarjeta nosotros mismos. Introducir el ajustes para el módulo Blurb. Dado que este es un elemento que describe a su empresa, vale la pena mencionar brevemente lo que hace su empresa o marca. Dado que esta es una publicación de muestra, la hemos llenado con algunas Sabor zombi Lorem Ipsum. Puede elegir el título y el contenido del texto en la contenido Pestaña.

El mismo zombi

Establecer el color de fondo

Por supuesto, desea que el mapa flotante coincida visualmente con su sitio web, por lo que elegir el color de fondo correcto es de gran importancia. Vamos contigo #ffffff (Blanco). los contenido Esto también se encuentra en la pestaña, y puede encontrarlo en antecedentes Titular y el Lata de pintura.

El color de fondo puede

Seleccione una imagen de tarjeta

El módulo Blurb le permite agregar una imagen o icono para el módulo y nos gustaría una imagen que represente a nuestra empresa. De nuevo bajo el contenido Tab, buscar Imagen y símbolo y simplemente cargue la imagen que sea apropiada para su módulo.

imagen

Dar forma a las esquinas de la tarjeta

Luego ve al borrador Tab y en el frontera Bóveda. Encuentra el Bordes redondeados Opciones y configurar cada rincón 25px. Esto suavizará los bordes afilados y angulares sin cambiar la forma de todo el mapa.

Redondea las esquinas de la tarjeta Acerca de

Alineación del texto

Bajo la texto Titular, ponga el Alineación del texto hacia el centro.

Alineación de propaganda

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

El texto del título que configuró anteriormente es el predeterminado H4. Para darle estilo, vaya al Texto del título Rumbo, elige el H4 Tab y cambie lo siguiente título Opciones:

  • Fuente: Poppins
  • Peso de la fuente: negrita
  • Color de texto: #22303f
  • Tamano del texto: 20 píxeles
  • Altura de la fila: 1.3em

Opciones de título

Entonces tenemos que ir a eso sensibilidad Configuraciones y cambia el tamaño del título para dispositivos móviles. Cambia eso Tamaño del texto del título para 14 píxeles.

Diseña el texto de la tarjeta

A continuación, navegue hasta A granel y cambia el Fuente del cuerpo para Poppins que coincida con la fuente del título.

A granel

Luego haz clic en eso atajo Tab (símbolo de cadena) y cambie el Color del texto del enlace un color gratis para su sitio web. Decidimos # 97c357.

Color del texto del enlace

Sobre el tamaño de la tarjeta

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

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

Ancho del contenido

Ajuste los siguientes valores en la configuración de reacción:

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

valores móviles

Estos valores garantizan que el mapa ocupe todo el ancho de la pantalla en los dispositivos móviles, ya que un mapa flotante en la esquina generalmente no es legible.

Liquidación para la propaganda

los distancia El rumbo es una solución rápida en la que obtienes el Margen izquierdo para 0px, los Cima y fondo tapicería para 2vw, y el Izquierda y Tapicería derecha para 1pw.

distancia

Solo el Cima y Acolchado de suelo cambiará. Vamos a poner esto en 5%.

tapicería sensible

Agregar sombra de cuadro

Dado que el mapa flotante permanece anclado en su lugar, queremos que parezca que en realidad está flotando sobre su contenido. Este efecto es bastante simple al agregar una simple sombra de cuadro al módulo. Puede encontrar esta opción en Sombra de la caja, y elegimos la sombra inferior básica.

la sombra

Personalizar CSS receptivo

Ahora es la parte divertida. Nos estamos moviendo hacia eso Progresivo Pestaña donde uniremos la propia tarjeta flotante al lateral. Para hacer esto, nuestro primer paso es deshabilitar la imagen que agregamos para el escritorio. Imágenes en Propaganda El módulo realmente puede afectar el tamaño y la usabilidad en dispositivos móviles, y es algo más para la carga de páginas.

Así que agreguemos Pantalla: ninguna; bajo la Solo para dispositivos móviles Imagen borrosa Campo debajo CSS personalizado.

no mostrar imagen

Congelar y hacer flotar el mapa con ajuste de posición

Finalmente, colocaremos el mapa donde queremos que flote. Primero queremos Progresivo Tab y desplácese hasta posición. Escoger Reparado en el menú desplegable.

flotando sobre la posición fija del mapa

A continuación, busque el Localización Opciones. Este es el punto de la pantalla donde permanecerá el mapa flotante. Para el escritorio, queremos que esté en la esquina inferior de la pantalla. Entonces hacemos clic en el cuadrado que se correlaciona con él. También queremos que se desvíe un poco del borde de la ventana, así que cambiemos eso Desplazamiento vertical para 3% y Desplazamiento horizontal para 2%.

Opciones de posición para flotar sobre el desplazamiento del mapa

A continuación, queremos crear una ubicación diferente y un desplazamiento para dispositivos móviles. Arriba establecemos el ancho del mapa para que se extienda por todo el ancho de la pantalla. Con eso en mente, seremos los Ubicación fija en la parte inferior central para que el mapa se mantenga en la parte inferior de la pantalla en todo momento.

desplazamiento móvil y ubicación fija

Además, solo estamos cambiando eso Desplazamiento vertical para móvil. Pon este valor en 3%. No se requiere desplazamiento horizontal ya que es el ancho de la pantalla móvil y está centrado.

Resultados finales

Si todo está configurado correctamente y personalizado para su sitio web personal, el producto final debería tener un aspecto similar.

Escritorio

Resultado de escritorio

Teléfono celular, teléfono móvil

version móvil

diploma

Las poderosas opciones y la interfaz de usuario intuitiva de Divi facilitan el diseño e instalación de una tarjeta de información flotante en su sitio web. 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!

El cargo Cómo agregar una tarjeta Floating About a su sitio Divi apareció primero Blog temático elegante.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *