Ouvrir une vidéo dans une lightbox avec Elementor »Martech Zone

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éer des mises en page complexes et belles qui sont réactives… sans la programmation ou la nécessité 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 n’aient pas proposé cette solution prête à l’emploi.

Heureusement, il existe un plugin pour ça!

Compléments essentiels pour Elementor

Heureusement, il existe plusieurs excellents add-ons pour Elementor sur le marché. Vous devez cependant ê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 à 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 Essential Modules complémentaires pour Elementor . Avec plus de 800000 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 WordPress construit avec Elementor.

Elementor Lightbox Button

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

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

• Réglez Paramètres> Déclencheur sur Bouton Cliquez
• Définissez Paramètres> Type sur Bouton
• Définissez les paramètres> Texte du bouton
• Définissez Contenu> Type sur Lien vers la page / vidéo / carte [19659013] Définissez le contenu> Fournissez l'URL de la page / vidéo / carte à l'URL de votre vidéo

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

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

Add-ons essentiels pour Elementor: Free Elements

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

• Info Box – Affichez les informations clés avec le type de boîte d'informations en ajoutant l'icône en haut et ajoutez 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.
• Woo Product Grid – Présentez les produits WooCommerce n'importe où et affichez les produits par catégorie, tags 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 – affiche les informations clés de 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 augmenter les ventes de vos acheteurs potentiels.
• Image Accordion – Mettez en surbrillance vos images avec d'incroyables effets de survol et de clic à l'aide d'EA Image Accordion.
• Post Grid – affiche plusieurs articles de blog dans une grille. Vous pouvez choisir votre mise en page préférée à partir des 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, coloriez et associez-le pour diriger les visiteurs vers le action souhaitée.
• Compte à rebours – Construisez et concevez un minuteur à partir d'une sélection de styles différents.
• Chronologie des articles – affichez des articles de blog, des pages ou des articles personnalisés dans une superbe mise en page verticale. Vous pouvez définir le nombre de publications que vous préférez, ajouter des effets étonnants, une superposition d'images, un bouton et bien plus encore pour attirer l'attention du public.
• Galerie filtrable – Affichez des images avec des catégories et des styles de grille distincts et personnalisez la conception générale pour assurer un look extraordinaire .

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

Modules complémentaires 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 Elementor- thème basé sur le thème.

• Lightbox & Modal – présentez vos vidéos, images ou autre contenu avec une fenêtre contextuelle. Vous pouvez définir les actions de déclenchement souhaitées, ajouter une animation et définir la mise en page pour maximiser l'engagement.
• Comparaison d'images – donnez à vos acheteurs potentiels la possibilité de comparer les images de vos deux produits ( Anciennes et nouvelles ) d'une manière étonnante.
• Logo Carousel – choisissez l'effet de carrousel de votre choix, ajoutez un logo et stylisez la sortie pour afficher magnifiquement tous vos clients ou partenaires.
• Parallax Effects – permettez à vos visiteurs de découvrez 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 que vous souhaitez pour que vos visiteurs puissent se concentrer sur.
• Google Map s – Configurez un élément de carte, ajoutez des icônes de repère et rendez-le interactif pour les visiteurs.
• Effet de particules – ajoutez des sections créatives sur votre site Web pour créer il se démarque.
• 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é – restreignez le contenu avec un mot de passe ou par rôle d'utilisateur.
• Message Block – 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 – ajouter des info-bulles au-dessus et au-dessous du contenu.
• Navigation sur une page – créer une seule page Web avec seulement quelques clics en utilisant Elementor.
• Testimonial Slider – créez un tableau de témoignages interactif qui présente plusieurs critiques magnifiquement dans une seule zone de contenu.
• Instagram – attirez l'attention des visiteurs de votre site et attirez plus d'Instagram abonnés en affichant un flux Instagram sur votre site.
• Image Hotspot – ajoutez des hotspots de zone d'image avec des info-bulles personnalisées, de sorte que l'utilisateur puisse cliquer sur les hotspots pour révéler un texte associé.

Une option avec le plugin qui J'apprécie vraiment 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