Complemento de WordPress: abra un video en una caja de luz con Elementor

Lightbox de video abierto del botón Elementor

Adoptamos un sitio web con un cliente que se creó con Elementor, un fantástico plugin de edición de arrastrar y soltar para WordPress que transforma lo fácil que es crear diseños complejos y hermosos que responden ... sin necesidad de programar ni de entender los códigos cortos.

Elementor tiene algunas limitaciones, una de las cuales encontré trabajando en el sitio de un cliente. Simplemente querían un botón que abriera un video en un Lightbox… algo que Elementor no ofrece. Puede solucionar el problema utilizando una imagen con o sin un botón de reproducción ... pero Elementor tiene un gran elemento de botón. Me sorprende que no ofrecieran esto fuera de la caja.

¡Afortunadamente, hay un complemento para eso!

Complementos esenciales para Elementor

Afortunadamente, hay varios complementos excelentes para Elementor en el mercado. Sin embargo, debe tener mucho cuidado al seleccionar un desarrollador de complementos. Tener un sitio de WordPress construido en Elementor crea una dependencia de Elementor. Luego, tener un complemento creado por otro proveedor crea otra dependencia. Es fundamental para el éxito de su sitio de WordPress asegurarse de que el desarrollador de complementos tenga muchas instalaciones y los ingresos asociados para mantener y mejorar los complementos a medida que se actualizan las versiones de WordPress y Elementor.

Un complemento fantástico es el Complementos esenciales para Elementor. Con más de 800,000 instalaciones, el complemento puede ser el complemento de complemento de elemento más popular del mercado para Elementor. Una característica clave de este complemento es la capacidad de agregar y configurar fácilmente una caja de luz para su sitio web de WordPress creado con Elementor.

Botón Elementor Lightbox

Una vez que instale la versión paga del complemento Essential Add-Ons for Elementor, habilite el Lighbox y modal característica para ver el elemento en sus elementos Elementor. Luego, puede buscarlo y arrastrarlo a su página fácilmente:

elementor caja de luz modal

Entonces querrá modificar un par de configuraciones para el elemento:

  • Establezca Configuración> Disparador en Clic del botón
  • Establezca Configuración> Tipo en Botón
  • Establecer la configuración> Texto del botón
  • Establezca el Contenido> Tipo en Enlace a página / video / mapa
  • Establecer el contenido> Proporcionar URL de página / video / mapa a la URL de tu video

A continuación, puede personalizar el estilo de la caja de luz y los botones según sea necesario. Es una experiencia perfecta entre este complemento y Elementor.

botón elementor lightbox

Si bien vale la pena pagar por esa característica, el complemento Essential Add-Ons for Elementor tiene un montón de otras características incluidas tanto en una versión gratuita como en una de pago. Nota: La funcionalidad Lightbox está en la versión paga.

Complementos esenciales para Elementor: elementos gratuitos

La versión gratuita tiene algunos elementos básicos que se pueden agregar:

  • Caja de información - Muestra información clave con el tipo de cuadro de información agregando Icon On Top y agrega efectos de animación.
  • Acordeón avanzado - mostrar contenido, habilitar el ícono de alternar, llenar la sección de acordeón con el texto deseado y hacer que parezca interactivo para el público.
  • Cuadrícula de productos Woo - Muestre los productos de WooCommerce en cualquier lugar y muestre productos por categoría, etiquetas o atributos. Agregue fácilmente efectos de desplazamiento en el diseño para que sea sorprendente.
  • Flip Box - Muestre contenido maravillosamente con la animación de voltear hacia la izquierda / derecha al pasar el mouse.
  • Pestañas avanzadas - mostrar información clave de una manera interactiva que admita el diseño de pestañas anidadas a medida para atraer a una audiencia en una instancia.
  • Tabla de Precios - cree una tabla de precios de productos efectiva con un estilo perfecto para obtener más ventas de sus posibles compradores.
  • Acordeón de imagen - Resalte sus imágenes con increíbles efectos de desplazamiento y clic con EA Image Accordion. 
  • Publicar Cuadrícula - mostrar múltiples publicaciones de blog en un diseño de cuadrícula. Puede elegir su diseño preferido desde la configuración de diseño, agregarle animación y hacer que parezca interactivo para los visitantes.
  • Llamada a la acción - Diseñe el contenido de su llamado a la acción, coloree y vincule para dirigir a los visitantes a la acción deseada.
  • cuenta atrás - Construye y diseña un temporizador a partir de una selección de diferentes estilos.
  • Publicar cronología - muestre publicaciones de blog, páginas o publicaciones personalizadas en un diseño vertical impresionante. Puede establecer su número preferido de publicaciones, agregar efectos sorprendentes, superposición de imágenes, botones y más para atraer el interés de la audiencia.
  • Galería filtrable: muestre imágenes con categorías separadas, estilos de cuadrícula y personalice el diseño general para garantizar una apariencia extraordinaria.

Descargue los complementos esenciales para Elementor

Complementos esenciales para Elementor: elementos pagos

Con la versión paga, obtienes una tonelada más de elementos que realmente brindan las máximas capacidades en tu tema basado en Elementor.

  • Lightbox y modal - muestre sus videos, imágenes u otro contenido con una ventana emergente. Puede configurar las acciones de activación deseadas, agregar una animación y configurar el diseño para maximizar la participación.
  • Comparación de imágenes - permita a sus compradores potenciales comparar entre las imágenes de sus dos productos (Viejo versus nuevo) de una manera asombrosa.
  • Logo de carrusel - elija el efecto de carrusel que desee, agregue un logotipo y diseñe la salida para mostrar a todos sus clientes o socios de manera hermosa.
  • Efectos de paralaje - Permita que sus visitantes experimenten su sitio con un efecto de paralaje de varias capas que incluso incorpora una interacción de desplazamiento del mouse.
  • promoción - Agregue un encabezado atractivo, contenido interno, contenido con el mouse sobre el mouse e imágenes hermosas para captar la atención de su visitante.
  • Alternar contenido - Agregue un efecto de desplazamiento a su contenido que resalte las diferencias en las que desea que sus visitantes se concentren.
  • Mapa de Googles: configure un elemento del mapa, agregue iconos de marcadores y hágalo interactivo para los visitantes.
  • Efecto particula - agregue secciones creativas en su sitio web para que se destaque.
  • Tarjetas interactivas - Traiga capacidades avanzadas como desplazamiento interno y efectos de desplazamiento a sus bloques de contenido.
  • Contenido protegido - restringir el contenido con una contraseña o por rol de usuario.
  • Publicar bloque - muestre las publicaciones de su blog con una variedad de estilos únicos utilizando el poder del moderno CSS Flex. Puede elegir un diseño, agregar animación, agregar un ícono y diseñar todo, incluidos los efectos de desplazamiento.
  • Información sobre herramientas avanzada - agregue información sobre herramientas por encima y por debajo del contenido.
  • Navegación de una página - cree un sitio web de una sola página con solo unos pocos clics utilizando Elementor.
  • Control deslizante de testimonios - cree un tablero de testimonios interactivo que muestre varias reseñas de manera hermosa en un área de contenido.
  • Instagram - capte la atención de los visitantes de su sitio y atraiga más seguidores de Instagram mostrando un feed de Instagram en su sitio.
  • Punto de acceso de imagen - agregue puntos de acceso al área de la imagen con información sobre herramientas personalizada, para que el usuario pueda hacer clic en los puntos de acceso para revelar un texto asociado.

Una opción con el complemento que realmente aprecio es la capacidad de habilitar o deshabilitar cada uno de estos elementos dentro del sitio. Esto limita la sobrecarga de la secuencia de comandos de cada función que se agrega a su sitio.

Descargue los complementos esenciales para Elementor

¿Qué piensas?

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.