Point culminant du plugin Divi : des slide-ins faciles

Easy Slide-Ins est un plugin tiers pour Divi et Extra qui vous permet de créer des slide-ins (et des popups) à l'aide du constructeur Divi. Les slide-ins peuvent afficher tout ce qui peut être construit avec le Divi Builder. Déclenchez les diapositives avec un pourcentage de défilement, une intention de sortie, un bouton avec plusieurs emplacements et une classe CSS. Il comprend des mises à jour et des démos à vie.

Dans cet article, nous examinerons Easy Slide-Ins et verrons ce qu'il peut faire et sa facilité d'utilisation. Nous examinerons également quelques-unes des démos incluses avec le plugin. Le plugin est disponible sur le site Web du développeur.

Installation de diapositives faciles

Tout d'abord, décompressez le fichier. Dans le dossier, vous trouverez des démos, un fichier avec un lien vers la documentation et le plugin Easy Slide-Ins.

Téléchargez et activez le plugin comme d'habitude.

Un nouveau menu est ajouté au tableau de bord appelé Easy Slide-Ins. Cliquez sur ce menu et entrez votre clé de licence.

L'activation de la licence ajoute deux éléments de menu (Tous les éléments et Ajouter un nouveau) où vous pouvez voir vos diapositives et créer de nouvelles diapositives.

Création d'un nouveau slide-in

Cliquer pour ajouter une nouvelle diapositive ouvre un éditeur dans lequel vous pouvez utiliser le Divi Builder pour créer la diapositive.

Il comprend également de nombreux paramètres. Ils sont placés sous le Divi Builder. Choisissez la position à gauche, à droite, en haut à gauche, en haut à droite, en bas à gauche, en bas à droite, la barre supérieure, la barre inférieure, la barre latérale gauche ou la barre latérale droite. Réglez-le sur un déclenchement automatique lors du défilement et choisissez la quantité de défilement. Vous pouvez également le configurer pour qu'il s'ouvre sur l'intention de sortie. Définissez la couleur d'arrière-plan, l'ombre de la boîte et la largeur de la diapositive.

Affichez le titre et saisissez le texte à afficher. Choisissez les couleurs d'arrière-plan et de texte du titre, ainsi que la famille de polices, la taille et l'épaisseur. Définissez l'arrondi des coins, la hauteur et la largeur de l'étiquette. Affichez l'icône de fermeture et choisissez les couleurs d'arrière-plan et d'icône et la taille de l'icône.

Les commandes sont intuitives à utiliser et à comprendre. Il y a suffisamment d'ajustements pour styliser l'étiquette en fonction de votre site Web et contrôler le fonctionnement des diapositives.

D'autres fonctionnalités sont ajoutées ou supprimées selon les options que vous choisissez. J'ai sélectionné Box Shadow et il fournit maintenant des options pour la position horizontale et verticale, la force de flou et de propagation et la couleur.

L'onglet Avancé vous permet de choisir les pages sur lesquelles la diapositive peut être affichée. Vous pouvez sélectionner toutes les pages, les pages individuelles et tous les articles. Vous pouvez masquer le slide-in sur certains appareils.

L'onglet Champs personnalisés vous permet d'ajouter des champs personnalisés comme n'importe quelle page ou publication.

Exemples de diapositives faciles

Il s'agit de la page de contact de la mise en page Gestion des risques. J'utilise ceci pour construire le slide-in afin que le design s'adapte à la mise en page. J'ai configuré pour ne pas afficher la barre latérale ou la navigation par points. Vous pouvez prévisualiser comme une page standard. Une fois que vous avez conçu la diapositive, publiez-la normalement.

J'ai activé l'étiquette dans les paramètres et défini l'arrière-plan en noir et le texte en blanc. J'ai conservé le texte par défaut (Nous contacter). Je l'ai configuré pour qu'il s'affiche dans le coin supérieur droit. Cela utilise la hauteur par défaut, mais elle peut être modifiée facilement.

Cliquer sur l'étiquette ouvre la diapositive qui s'affiche sur l'écran montrant le formulaire de contact du pack de mise en page Gestion des risques. Cliquez à nouveau sur le bouton Contactez-nous pour fermer le slide-in. J'ai la largeur de la diapositive définie sur 500 pixels, la hauteur de l'étiquette sur 150 et la largeur de l'étiquette sur 60.

L'exemple montre l'ombre de la boîte. J'ai changé l'emplacement de la barre latérale droite, qui affiche le bouton de fermeture. J'ai changé les couleurs de l'étiquette et du bouton de fermeture et j'ai arrondi les coins de l'étiquette. J'ai également défini la largeur des diapositives sur 600 pixels.

Pour celui-ci, j'ai déplacé l'étiquette vers la position de la barre supérieure. J'ai utilisé les couleurs de la mise en page et changé la largeur à 122 pixels et la hauteur à 40 pixels. Comme vous pouvez le voir sur cette image, l'étiquette reste en place lors du défilement.

Il s'ouvre en plein écran et comprend le bouton de fermeture.

Pour celui-ci, j'ai ajouté un nouveau slide-in dans la barre latérale gauche. Je l'ai stylisé pour qu'il corresponde au site et j'ai laissé les coins de l'étiquette au carré. J'utilise la marge supérieure de l'étiquette à 50 %, ce qui place le haut de l'étiquette au centre de la hauteur de mon écran.

Il s'ouvre par la gauche. Je lui ai donné une largeur de 1000 pixels, il couvre donc une grande partie de mon écran. Le slide-in Contact s'affiche toujours en haut même si le menu est couvert par le slide-in de la newsletter.

Les diapositives vous offrent une classe de déclencheur de bouton. Vous pouvez l'utiliser avec des boutons pour ouvrir le slide-in.

Copiez la classe et collez-la dans le champ Classe CSS du bouton.

Maintenant, en cliquant sur le bouton, le slide-in s'ouvre. Il n'est pas nécessaire qu'il y ait des étiquettes nulle part, mais elles glisseront dans la direction où vous avez placé la diapositive. Celui-ci a été placé à gauche, il vient donc de gauche. J'ai mis la largeur à 1000 pixels.

Démonstrations de diapositives faciles

Le fichier de téléchargement comprend 12 démos. Ce sont des mises en page prédéfinies (fichiers JSON) que vous pouvez télécharger dans la bibliothèque Divi. Importez-les dans la bibliothèque Divi comme des mises en page normales. Ils incluent des modules stylisés, mais vous devrez configurer les paramètres de conception. Voici un aperçu de quelques-uns d'entre eux.

Il s'agit d'un e-mail de collecte avec intention de sortie. Il comprend plusieurs modules de texte, un formulaire de contact et un module d'image.

Voici à quoi cela ressemble à l'écran. J'ai tout laissé par défaut ici, donc le bouton affiche toujours le texte, l'emplacement et le style d'origine.

Celui-ci est un e-mail de collecte avec intention de défilement. Il comprend une image d'arrière-plan, deux modules de texte et un module de courrier électronique.

Voici à quoi cela ressemble sur la page en utilisant les paramètres prédéfinis. Cela montre à quel point le slide-in est réactif (ce qui est exactement ce à quoi nous nous attendions, car il affiche une mise en page Divi). Si vous souhaitez afficher une plus grande partie de l'image, agrandissez simplement le slide-in.

Celui-ci est Guidez vos visiteurs. Il comprend un module de code (pour Google Maps), plusieurs textes de présentation, du texte et un formulaire de contact.

Voici à quoi cela ressemble sur la page en utilisant les paramètres par défaut.

Celui-ci est Promotion avec une étiquette. Il comprend un module de texte, plusieurs tableaux de prix et un bouton.

Voici à quoi cela ressemble à l'écran. Je l'ai défini sur 800 pixels afin qu'il affiche toute la largeur si la diapositive est insérée. J'ai supprimé l'étiquette et l'ai définie pour qu'elle s'affiche lorsque le défilement de la page atteint 60%.

Voici la même mise en page lorsqu'elle est vue avec Extra. Je suis content de voir que cela fonctionne très bien avec Divi et Extra.

Prix ​​et documentation Easy Slide-Ins

Easy Slide-Ins est disponible sur le site Web du développeur. Il a deux options d'achat :

• Site unique – 27 $
• Sites illimités – 97 $

Les deux licences incluent les démos et les mises à jour à vie.

La documentation est fournie sur la page de documentation et d'assistance du développeur. La page comprend une présentation de chacun des points avec des images pour les démontrer. La page comprend également un lien vers l'assistance par e-mail.

Mettre fin aux pensées

Easy Slide-Ins permet de créer facilement des slide-ins et des popups pour Divi et Extra. Je l'ai trouvé facile à utiliser. Je n'ai jamais eu besoin de la documentation, mais elle est là si besoin. C'est un moyen intéressant d'apporter des éléments de page cachés. Comme tout peut être utilisé dans le slide-in, vous pouvez afficher des formulaires de contact, des inscriptions à la newsletter, des appels à l'action, des vidéos, des modules de boutique, etc. Il peut s'agir d'un module unique ou d'une mise en page complète.

J'aime qu'il ait plusieurs options de déclenchement. L'intention de sortie et le déclenchement automatique en font un bon choix pour créer des fenêtres contextuelles d'e-mail et de CTA. L'ouverture en cliquant sur l'étiquette est un bon moyen de les ajouter à plusieurs emplacements sur vos pages. J'aime que vous puissiez ajouter plusieurs diapositives sur une seule page et que vous puissiez déterminer sur quelles pages ils s'affichent. L'ajout de la classe CSS aux boutons est un excellent moyen de révéler des informations lorsque le visiteur choisit de les voir.

Vous pouvez créer le slide-in à partir du front-end mais je n'ai pas vu comment accéder aux paramètres. Sans les paramètres, je ne pouvais pas déplacer les étiquettes et voir leur emplacement en temps réel. J'ai dû charger une page pour les voir. Ce n'était toujours pas difficile à utiliser, mais il y avait un peu de conjectures impliquées. C'est si mineur que je ne m'empêcherais pas de l'utiliser ou de le recommander.

Si vous cherchez un moyen simple et intuitif de créer des diapositives à l'aide de Divi Builder, Easy Slide-Ins vaut le détour.

Nous voulons de vos nouvelles. Avez-vous essayé Easy Slide-Ins pour Divi ? Dites-nous ce que vous en pensez dans les commentaires.

Image en vedette via ByEmo / shutterstock.com