Cómo construir Popover dinámico (menús flotantes) en Divi con Popper.js

Blair Jersyer Divi Tutorials Feb 24, 2021

¿Alguna vez ha oído hablar de la biblioteca llamada Popper.js? Esta biblioteca le permite crear popovers en JavaScript. El uso de popovers es bastante común en estos días, especialmente porque ayuda a mostrar más información sobre un elemento específico (botón, enlace, etc.). La razón para considerar el popover dinámico es principalmente para asegurarse de que se muestre en el lugar correcto con respecto a la posición del sujeto en la pantalla. Concretamente, si el sujeto está en la parte inferior de la pantalla, el popover se mostrará en la parte superior. Si está ubicado en la parte superior de la pantalla, la ventana emergente se mostrará en la parte inferior, etc.

En este tutorial, vamos a aprovechar el poder de Popper.js en Divi para crear popovers dinámicos (menús flotantes) cuando se hace clic en un botón. Esto permitirá que cualquiera pueda crear una ventana emergente con elementos Divi, para mostrar cualquier contenido después de hacer clic en un botón. También nos aseguraremos de que el popover sea dinámico, ya que ajustará su posición para preservar la visibilidad más ideal a medida que el usuario interactúa con su página.

Aquí hay una ilustración del posicionamiento de estos popovers ...

Para lograr esto, necesitaremos CSS y JavaScript personalizados. Pero aún podemos confiar en las poderosas capacidades de diseño de Divi Builder para crear un popover usando cualquier elemento Divi.

Create Amazing Websites

Con el mejor generador de páginas gratuito Elementor

Empezar ahora

¡Empecemos!

Vista previa del menú flotante

Aquí hay un vistazo rápido al menú flotante que diseñaremos en este tutorial. Puede ver cómo la posición del menú flotante cambia dinámicamente a medida que el usuario se desplaza o cambia el tamaño del navegador. Tampoco te pierdas la pequeña flecha que también está posicionada para apuntar dinámicamente a su referencia (o en este caso, el botón).

Creando un Popover con Popper.js en Divi

Como dijimos anteriormente, vamos a usar popper.js en Divi para crear un popover posicionado dinámicamente, que se revela al hacer clic en el sujeto del popover (botón). Con Divi, podemos crear fácilmente un menú flotante y un botón. Luego más adelante vamos a agregar el código necesario para que ambos trabajos estén en armonía.

La sección

Entonces, comenzaremos agregando una identificación de cliente a la sección regular que está lista de manera predeterminada. Abra la configuración de la sección y agregue la siguiente ID:

  • ID de CSS: sección emergente

Crea Popper Popover con Divi Row

A continuación, agregaremos una fila de una columna a la sección. Esta fila se convertirá en nuestro elemento emergente Popper que aparece al hacer clic en un botón.

Abra la configuración de la fila y actualice el estilo de la siguiente manera:

  • Color de fondo: # 333333
  • Ancho del canal: 2
  • Ancho: 100%
  • Ancho máximo: 500px
  • Relleno: 0px arriba, 0px abajo, 0px izquierda, 0px derecha
  • Esquinas redondeadas: 10px

Debido a que esta fila se convertirá en nuestro elemento emergente emergente, necesitamos agregar una ID de CSS para que sirva como selector en nuestro código. También debemos asegurarnos de que la visibilidad permanezca desbordada (está oculta por las esquinas redondeadas).

Vaya a la pestaña avanzada y actualice lo siguiente:

  • ID de CSS: popper-popup
  • Desbordamiento horizontal: visible
  • Desbordamiento vertical: visible

Agreguemos contenido a Popover Row

Podemos agregar cualquier módulo (s) que queramos a nuestra fila para llenar el menú flotante con el contenido que queramos. Para este ejemplo, vamos a agregar algunos botones a la fila que sirve como menú personalizado que aparece dentro del popover.

Para comenzar, agregue un módulo de botón a la columna de la fila.

Ahora agreguemos un poco de estilo a nuestro botón. Actualizaremos la configuración del botón de la siguiente manera:

  • Alineación de botones: centro
  • Usar estilos personalizados para el botón: SÍ
  • Ancho del borde del botón: 1 px
  • Color del borde del botón: # 555555
  • Radio del borde del botón: 10px
  • Icono de botón: ver captura de pantalla
  • Margen: 20px superior, 20px inferior, 20px izquierda, 20px derecha
  • Acolchado: 0.5em superior, 0.5em inferior, 2em izquierdo, 2em derecho

Importante: Estamos usando margen en el módulo para crear espacios en lugar de usar espacios entre filas porque agregaremos una flecha (usando un divisor) que debe colocarse en el borde de la fila (con posición absoluta). Cualquier relleno de fila o columna alejará la flecha del borde.

Ahora, debemos agregar el siguiente fragmento de CSS personalizado al elemento principal para que el botón abarque todo el ancho de la columna / fila:

display: block !important

Ahora puede duplicar el botón dos (o más) veces para agregar algunos botones más a nuestro menú emergente.

Creando la Flecha Popover

Popper.js admite el posicionamiento de una flecha junto con el popover. Para construir la flecha, agregue un nuevo divisor debajo del último botón de nuestra fila.

En la configuración del divisor, seleccione no mostrar el divisor. Luego, en la pestaña avanzada, agregue la siguiente ID de CSS:

  • ID de CSS: popper-arrow

Usaremos un CSS externo personalizado para diseñar y posicionar la flecha más adelante.

Creación del botón Popover (o referencia)

Los dos elementos clave de un popper popover incluyen el elemento popover (o popper) y el tema al que se adhiere el popover. Puede usar cualquier elemento Divi como referencia que genere el popover, pero para este ejemplo, usaremos un botón.

Creando Asunto para Popper: Botón

Antes de crear nuestro botón, debemos agregar una nueva fila de una columna debajo de nuestra fila emergente.

Luego agregue un nuevo módulo de botones a la fila.

Actualice la configuración de los botones con un estilo básico de la siguiente manera:

  • Color del texto del botón: #ffffff
  • Color de fondo del botón: # a043e8
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 10px

A continuación, agregue la ID de CSS necesaria que nos permitirá apuntar y usar el botón como nuestra referencia de ventana emergente más adelante:

  • ID de CSS: botón emergente

Agreguemos el código

Ahora que nuestra ventana emergente y el botón están completos, estamos listos para agregar el código para que suceda la magia.

Para hacer esto, agregue un módulo de código debajo del módulo de botón de referencia en la segunda fila.

Es importante que el código esté al final de la página para que funcione.

Primero, agregaremos el CSS.

En el cuadro de contenido del código, agregue las etiquetas de estilo necesarias para envolver CSS en HTML. Luego copie y pegue el siguiente CSS entre las etiquetas de estilo:

/*hide and show popup styling*/ #popper-popup {display: none;}#popper-popup[data-popper-reference-hidden] {visibility: hidden;pointer-events: none;}#popper-popup[show-popper] {display: block;z-index: 9999;} /*keep popper visible in the Divi Builder for editing*/ #et-fb-app #popper-popup {display: block;}   /*build the arrow targeting the divider with class 'popper-arrow'*/ #popper-arrow,#popper-arrow::before {position: absolute;width: 8px;height: 8px;background: #333333;}#popper-arrow {visibility: hidden;}#popper-arrow::before {visibility: visible;content: "";transform: rotate(45deg);} /*position arrow using popper.js data-popper-placement attribute*/ #popper-popup[data-popper-placement^="top"] #popper-arrow {bottom: -4px;} #popper-popup[data-popper-placement^="bottom"] #popper-arrow {top: -4px;} #popper-popup[data-popper-placement^="left"] #popper-arrow {right: -4px;} #popper-popup[data-popper-placement^="right"] #popper-arrow {left: -4px;} /*hide arrow when reference outside of viewport*/#popper-popup[data-popper-reference-hidden] #popper-arrow::before {visibility: hidden;}

A continuación, necesitamos acceder a la biblioteca popper.js agregando un script que importe Popper.js desde su CDN (https://unpkg.com/@popperjs/core@2). Debajo de la etiqueta de estilo final, pegue la siguiente secuencia de comandos en el cuadro de código.

Utilice el siguiente src dentro de una etiqueta de secuencia de comandos para importar la biblioteca:

src="https://unpkg.com/@popperjs/core@2"

Debe tener un aspecto como este:

Ahora importaremos Popper.js antes de agregar el código que lo usará. Entonces, después de que la secuencia de comandos apunte a Popper.js, agregue las etiquetas de secuencia de comandos necesarias para envolver el Javascript que necesitamos agregar. Luego pegue el siguiente Javascript entre las etiquetas del script.

const popperButton = document.querySelector("#popper-button");const popperPopup = document.querySelector("#popper-popup");const popperSection = document.querySelector("#popper-section");const popperArrow = document.querySelector("#popper-arrow"); let popperInstance = null; //create popper instancefunction createInstance() {popperInstance = Popper.createPopper(popperButton, popperPopup, {placement: "auto",//preferred placement of poppermodifiers: [{name: "offset",//offsets popper from the reference/buttonoptions: {offset: [0, 8],},},{name: "flip",//flips popper with allowed placementsoptions: {allowedAutoPlacements: ["right", "left", "top", "bottom"],rootBoundary: "viewport",},},],});} //destroy popper instancefunction destroyInstance() { if (popperInstance) {popperInstance.destroy();popperInstance = null;}} //show and create popperfunction showPopper() {popperPopup.setAttribute("show-popper", "");popperArrow.setAttribute("data-popper-arrow", "");createInstance();} //hide and destroy popper instancefunction hidePopper() {popperPopup.removeAttribute("show-popper");popperArrow.removeAttribute("data-popper-arrow");destroyInstance();} //toggle show-popper attribute on popper to hide or show it with CSS function togglePopper() {if (popperPopup.hasAttribute("show-popper")) {hidePopper();} else {showPopper();}}//execute togglePopper function when clicking the popper reference/buttonpopperButton.addEventListener("click", function (e) {e.preventDefault();togglePopper();});

¡Eso es! Todos hemos terminado. Veamos ahora el resultado final.

Vista previa del resultado final

Para ver el resultado de este tutorial, necesitamos crear un espacio de desplazamiento para probar la magia de posicionamiento del popper popover.

Para hacer esto, abra la configuración de la sección y agregue un margen de la siguiente manera:

  • Margen: 80vh arriba, 80vh abajo

Así es como se ve la funcionalidad:

Observe cómo la posición de la ventana emergente (y la flecha) cambia dinámicamente a medida que el usuario se desplaza o cambia el tamaño del navegador.

Resumiendo

Si desea crear un popover usando popper.js en Divi, deberá confiar en una buena parte de Javascript, pero el resultado vale la pena. El posicionamiento dinámico del popover es un gran componente de interfaz de usuario que beneficiaría a cualquier sitio web. ¿Qué piensas sobre eso? ¿Ya lo has probado? Haznos saber.

Divi WordPress Theme