Sélectionner une page


introduction

Divi Bars est l’outil complet, complet et facile à utiliser pour créer des barres promotionnelles sur votre site Divi. Divi Bars vous donne un contrôle complet sur vos barres promotionnelles en quelques clics.
Il est important de mentionner que Divi Bars a besoin de Thème Divi ou thème supplémentaire basé sur des thèmes Elegent pour fonctionner correctement sur votre site Web.

Dans ce tutoriel, nous allons vous montrer comment utiliser Divi Bars, l’interface utilisateur, et déclencher la barre avec un déclencheur automatique ainsi qu’un déclencheur de clic manuel.

Le guide de démarrage rapide en 8 étapes:

Pour plus d’informations pour l’utilisateur expérimenté, consultez le guide de démarrage rapide de Divi Bars ci-dessous.

  1. Téléchargez Divi Bars à partir du Historique d’achat Page (ou le Tous les téléchargements d’Access Pass Page pour les membres)
  2. Installez le fichier zip comme n’importe quel autre plugin: WP Admin> Plugins> Add New> Upload> Activate
  3. Ensuite, allez dans Divi Bars> Paramètres, collez votre clé de licence et cliquez sur Enregistrer. (Vous pouvez trouver votre clé de licence dans votre reçu e-mail ou sur le Licences Page)
  4. Accédez à Divi Bars> Ajouter nouveau, activez Divi Builder et donnez un nom à votre Divi Bar.
    Commencez à créer et passez à l’étape 6 ou continuez avec les étapes facultatives ci-dessous pour utiliser un modèle
  5. Utilisez un modèle de mise en page Divi Bar: téléchargez depuis le Modèles de mise en page de plugins Page du portail client. Téléchargez directement sur l’écran d’édition de Divi Bars en cliquant sur l’icône de portabilité (flèches haut et bas) sur le côté droit du Divi Builder.
  6. Ajustez au besoin et ajustez les paramètres en conséquence.
  7. Pour un déclencheur de clic, copiez l’ID CSS sous «Déclencheurs manuels» et collez-le dans le champ de classe CSS d’une section, ligne ou module Divi pour déclencher la barre Divi lorsque vous cliquez dessus. Pour un déclenchement de retard contrôlé par le temps, activez le retard contrôlé par le temps sous «Déclenchements automatiques» et définissez le nombre de secondes souhaité.
  8. Cliquez sur Publier!

Passons maintenant au didacticiel plus détaillé!

Étape 1: Télécharger et installer

Une fois que vous avez acheté Barres Divivous recevrez un e-mail avec votre clé de licence et un lien de téléchargement.

Vous pouvez également télécharger à partir du Portail client Divi Life> Acheter des téléchargements
Si vous en êtes un Membre All Access Passvous pouvez télécharger le plugin (avec tous les autres produits) à partir du site Web Tous les téléchargements d’Access Pass Page.

1. Accédez au tableau de bord WordPress> Plugins> Ajouter un nouveau
2. Télécharger le plugin
3. Choisissez Fichier> Choisir divi-bars.zip
4e Activer le plugin

étape 2: Activation

Une fois Divi Bars installé, vous devez activer la clé de licence.

1. Vous pouvez trouver la licence dans votre portail client Divi Life> Clés de licence et mises à niveau.

1. Aller aux Divi Bars
2. Paramètres de Divi Bars
3. Insérez votre licence
4e Sauvegarder les modifications

étape 3: Ajout d’une nouvelle contribution Divi Bars

Divi Bars fonctionne également sous un CPT (Custom Post Type) pour créer vos propres designs avec Divi puis les déclencher.

1. Aller aux Divi Bars
2. Ajouter un nouveau
3. Définir un titre pour le nouveau message
4e Activer Divi Builder

Cela chargera le thème Divi. Il est maintenant temps d’importer vos mises en page prédéfinies 😉
1. Accédez à votre portail client> Modèles de mise en page de plugins

Une fois téléchargé, décompressez le fichier pour extraire un fichier JSON. Ce fichier doit être importé dans un nouveau post de Divi Bars en utilisant les options de portabilité qui font partie de Divi Builder.

1. Choisissez les options de portabilité
2. Cliquez sur le bouton Importer
3. Sélectionnez la mise en page Divi Bars que vous souhaitez importer (assurez-vous qu’elle a été extraite du fichier zip. Elle doit être au format JSON).
4e Importer la mise en page Divi Builder
5. Publier le message

REMARQUE: vous devez importer la mise en page directement dans l’écran d’édition de Divi Bars comme indiqué ci-dessous. Si vous essayez d’importer dans la bibliothèque Divi, cela ne fonctionnera pas à cause du fonctionnement du système de mise en page Divi.

Dans cet exemple, nous avons importé divi-3-divibar.json

Vous pouvez désormais personnaliser le contenu et le design de la barre Divi avec Divi, comme sur une page normale!

Astuce de pro: étant donné que la barre utilise une zone plus petite qu’une page normale, il peut parfois être difficile de choisir le bon module / ligne / section en mode Visual Builder. Vous devrez peut-être passer en mode filaire pour voir la structure complète et ouvrir l’élément approprié.

Étape 3a: Déclenchement des Divi Bars avec un déclencheur automatique

Maintenant que nous avons importé le modèle et ajusté le contenu, le style, etc., nous devons définir un déclencheur pour que la barre apparaisse réellement sur le devant du site!

Les Divi Bars peuvent être déclenchés manuellement ou avec un déclencheur automatique.

Divi Bars contient plusieurs déclencheurs automatiques:
Retard chronométré: La barre est déclenchée après un certain temps (en secondes).
Pourcentage de défilement: Ces options déclenchent la barre après que l’utilisateur a fait défiler une certaine partie de la page (en pixels ou en pourcentage).
Fin intention: Ces options déclenchent la barre lorsque le curseur quitte la fenêtre (par exemple lorsque vous vous déplacez vers le bouton de retour ou la barre de recherche).

Dans ce didacticiel, nous utiliserons l’option Délai chronométré qui est la plus courante pour une barre promotionnelle typique.

1. Faites défiler jusqu’à Déclencheurs automatiques
2. Sélectionnez un délai chronométré
3. Régler l’heure. Le champ est donné en secondes. Ajoutez donc n’importe quel nombre (0 déclenche la barre immédiatement lorsque la page se charge. 1 charge la barre Divi après un délai de 1 seconde, etc.)

Cliquez sur Enregistrer les modifications

Après l’enregistrement, actualisez votre page plutôt que le front-end du site et voyez le Divi Bar en action!

Étape 3b: Déclencher une barre Divi avec des déclencheurs manuels

En plus des déclencheurs automatiques, vous pouvez également déclencher manuellement la Divi Bar en cliquant sur quelque chose sur la page. Pour ce faire, ajoutez l’identifiant unique de Divi Bars à chaque élément de la page pour lequel vous voulez être le déclencheur de clic.

Dans les bars Divi,

1. Aller aux déclencheurs manuels
2. Copiez l’identifiant unique des Divi Bars
3. Si la barre Divi du module n’est pas déclenchée, veuillez activer le déclencheur URL dans des paramètres supplémentaires:

Sur le module que vous souhaitez déclencher

1. Ouvrez les paramètres du module
2. Dans le champ URL, collez ce qui suit:
#ouvrir

VEUILLEZ NOTER: Divi suppose que le champ URL n’est pas laissé vide. Nous utilisons donc un soi-disant «lien d’ancrage» pour garantir cela. Il peut s’agir de n’importe quel texte qui suit le symbole # (par exemple #open, #bar, #promo, etc.).

3. Allez dans l’onglet Avancé> ID CSS et classe> ID CSS
4e Insérez l’identifiant unique des barres Divi

VEUILLEZ NOTER: assurez-vous d’inclure l’ID unique des barres Divi dans le champ ID CSS Field et PAS le champ de classe CSS. Assurez-vous également qu’il n’y a rien devant, par ex. B. un point (.) Ou un signe dièse (#) ou un espace.

Sauvegarder les modifications

C’est ça! Vos Divi Bars ne se déclenchent pas automatiquement lorsque vous cliquez!



Source link

Recent Posts