Plugin WordPress: ouvrez une vidéo dans une lightbox avec Elementor

Bouton Elementor Open Video Lightbox

Nous avons adopté un site Web avec un client qui a été construit avec Elementor, un fantastique plugin d'édition par glisser-déposer pour WordPress qui transforme la facilité de création de mises en page complexes et magnifiques qui sont réactives… sans programmation ni besoin de comprendre les codes courts.

Elementor a certaines limitations, dont une que j'ai rencontrée en travaillant sur un site client. Ils voulaient simplement un bouton permettant d'ouvrir une vidéo dans une Lightbox… quelque chose qu'Elementor n'offre pas. Vous pouvez contourner le problème en utilisant une image avec ou sans bouton de lecture ... mais Elementor a un excellent élément de bouton. Je suis surpris qu'ils ne l'aient pas proposé immédiatement.

Heureusement, il existe un plugin pour ça!

Add-ons essentiels pour Elementor

Heureusement, il existe plusieurs excellents modules complémentaires pour Elementor sur le marché. Cependant, vous devez être très prudent lors de la sélection d'un développeur de plugins. Avoir un site WordPress construit sur Elementor crée une dépendance sur Elementor. Ensuite, avoir un module complémentaire créé par un autre fournisseur crée une autre dépendance. Il est essentiel pour le succès de votre site WordPress de s'assurer que le développeur du plugin dispose de nombreuses installations et des revenus associés pour maintenir et améliorer les plugins à mesure que les versions de WordPress et Elementor sont mises à jour.

Un plugin fantastique est le Add-ons essentiels pour Elementor. Avec plus de 800,000 installations, le plugin est peut-être le plugin complémentaire d'élément le plus populaire pour Elementor sur le marché. Une caractéristique clé de ce plugin est la possibilité d'ajouter et de configurer facilement une lightbox pour votre site Web WordPress construit avec Elementor.

Bouton Lightbox Elementor

Une fois que vous avez installé la version payante du plugin Essential Add-Ons for Elementor, activez le Lighbox et Modal fonctionnalité pour afficher l'élément dans vos éléments Elementor. Ensuite, vous pouvez le rechercher et le faire glisser facilement dans votre page:

elementor lightbox modal

Ensuite, vous voudrez modifier quelques paramètres pour l'élément:

  • Réglez Paramètres> Déclencheur sur Clic de bouton
  • Définissez Paramètres> Type sur Bouton
  • Définissez les paramètres> Bouton texte
  • Définissez Contenu> Type sur Lien vers la page / vidéo / carte
  • Définir le contenu> Fournir une URL de page / vidéo / carte à l'URL de votre vidéo

Vous pouvez ensuite personnaliser le style de la lightbox et des boutons selon vos besoins. C'est une expérience transparente entre ce module complémentaire et Elementor.

bouton lightbox elementor

Bien que cette fonctionnalité ait peut-être valu la peine d'être payée, le plugin Essential Add-Ons for Elementor contient une tonne d'autres fonctionnalités incluses à la fois dans une version gratuite et payante. Remarque: la fonctionnalité Lightbox est dans la version payante.

Compléments essentiels pour Elementor: éléments gratuits

La version gratuite a quelques éléments de base qui peuvent être ajoutés:

  • Boîte d'informations - Affichez les informations clés avec le type de boîte d'informations en ajoutant l'icône en haut et en ajoutant des effets d'animation.
  • Accordéon avancé - affichez le contenu, activez l'icône de bascule, remplissez la section accordéon avec le texte souhaité et donnez-lui un aspect interactif pour le public.
  • Grille de produits Woo - Présentez les produits WooCommerce n'importe où et affichez les produits par catégorie, balises ou attributs. Ajoutez facilement des effets de survol à la mise en page pour la rendre époustouflante.
  • Flip Box - Présentez magnifiquement le contenu avec une animation de retournement gauche / droite lors du survol de la souris.
  • Onglets avancés - afficher les informations clés d'une manière interactive qui prend en charge la conception d'onglets imbriqués personnalisés pour attirer un public dans une instance.
  • Tableau des prix - créez un tableau de prix des produits efficace avec un style parfait pour obtenir plus de ventes de vos acheteurs potentiels.
  • Accordéon d'image - Mettez en évidence vos images avec des effets de survol et de clic incroyables à l'aide d'EA Image Accordion. 
  • Poster Grille - afficher plusieurs articles de blog dans une disposition en grille. Vous pouvez choisir votre mise en page préférée dans les paramètres de mise en page, y ajouter une animation et la rendre interactive pour les visiteurs.
  • Appel à l'action - Donnez du style à votre contenu, colorez-le et associez-le pour diriger les visiteurs vers l'action souhaitée.
  • Compte à rebours - Construisez et concevez une minuterie à partir d'une sélection de styles différents.
  • Chronologie de l'article - affichez des articles de blog, des pages ou des articles personnalisés dans une superbe mise en page verticale. Vous pouvez définir votre nombre préféré de publications, ajouter des effets étonnants, une superposition d'images, un bouton, etc. pour attirer l'attention du public.
  • Galerie filtrable - Affichez des images avec des catégories et des styles de grille séparés et personnalisez la conception globale pour assurer un look extraordinaire.

Téléchargez les modules complémentaires essentiels pour Elementor

Add-ons essentiels pour Elementor: éléments payants

Avec la version payante, vous obtenez une tonne d'éléments supplémentaires qui offrent vraiment des capacités maximales dans votre thème basé sur Elementor.

  • Lightbox et Modal - présentez vos vidéos, images ou autres contenus avec une fenêtre contextuelle. Vous pouvez définir les actions de déclenchement souhaitées, ajouter une animation et définir la disposition pour maximiser l'engagement.
  • Comparaison d'images - permettez à vos acheteurs potentiels de comparer vos deux images de produits (Ancien contre nouveau) d'une manière incroyable.
  • Logo carrousel - choisissez l'effet de carrousel de votre choix, ajoutez un logo et stylisez la sortie pour afficher magnifiquement tous vos clients ou partenaires.
  • Effets de parallaxe - Permettez à vos visiteurs de découvrir votre site avec un effet de parallaxe multicouche qui intègre même une interaction de survol de la souris.
  • Promo - Ajoutez un en-tête attrayant, un contenu interne, un contenu de survol de la souris et de belles images pour capter l'attention de votre visiteur.
  • Bascule de contenu - Ajoutez un effet de survol à votre contenu qui met en évidence les différences sur lesquelles vous souhaitez que vos visiteurs se concentrent.
  • Google Maps - Configurez un élément de la carte, ajoutez des icônes de marqueur et rendez-le interactif pour les visiteurs.
  • Effet de particules - ajoutez des sections créatives sur votre site Web pour le faire ressortir.
  • Cartes interactives - apportez des fonctionnalités avancées telles que le défilement interne et les effets de survol à vos blocs de contenu.
  • contenu protégé - restreindre le contenu avec un mot de passe ou par rôle d'utilisateur.
  • Bloc de publication - affichez vos articles de blog avec une variété de styles uniques en utilisant la puissance du CSS Flex moderne. Vous pouvez choisir une mise en page, ajouter une animation, ajouter une icône et tout styliser, y compris les effets de survol.
  • Info-bulle avancée - ajoutez des info-bulles au-dessus et au-dessous du contenu.
  • Navigation d'une page - créez un site Web d'une seule page en quelques clics à l'aide d'Elementor.
  • Témoignage Slider - créez un tableau de témoignages interactif qui présente magnifiquement plusieurs critiques dans une zone de contenu.
  • Instagram - attirez l'attention des visiteurs de votre site et attirez plus d'abonnés Instagram en affichant un flux Instagram sur votre site.
  • Point d'accès d'image - ajoutez des points chauds de zone d'image avec des info-bulles personnalisées, afin que l'utilisateur puisse cliquer sur les points chauds pour révéler un texte associé.

Une option avec le plugin que j'apprécie vraiment est la possibilité d'activer ou de désactiver chacun de ces éléments dans le site. Cela limite la surcharge du script de chaque fonctionnalité ajoutée à votre site.

Téléchargez les modules complémentaires essentiels pour Elementor

Que pensez-vous?

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..