Maîtrisez le panneau Avada Off Canvas une fois pour toutes ! Créez des pop-ups, des menus de barre latérale et des curseurs en une seule étape !

Thème AvadaL'outil Off Canvas Builder peut vous aider à mettre en œuvre facilement la fonctionfenêtre contextuelleetBarre latérale coulissanteetboîte modaleetmenu déroulantet d'autres effets, et Aucun plug-in tiers n'est nécessaireetFonctionnement en code zéroLa création d'une interface visuelle est une étape importante dans le développement d'un système de gestion de l'information. Ce tutoriel vous montrera à la main comment créer une Barre coulissante pour les abonnements au courrier électroniqueet la configurer pour qu'elle apparaisse automatiquement après qu'un visiteur soit resté pendant 4 secondes, ce qui est parfait pour recueillir les courriels de clients potentiels, faire des promotions lors d'événements, afficher des messages importants, etc.

Panneau en toile Avada Off

Avada Off Canvas Builder est un module avancé qui est fourni avec le thème Avada et qui vous permet de créer facilement diverses zones de contenu "hors page" telles quePopupVoici quelques-unes des caractéristiques les plus populaires de ce produit : Barre coulissante, Menu déroulant, Modal, etc.Il n'est pas nécessaire d'installer des plug-ins supplémentaireset fortement intégrées au comportement de l'utilisateur afin de réaliser un marketing de précision, une interaction avec l'utilisateur, une amélioration fonctionnelle et d'autres objectifs.

L'outil Off Canvas Builder d'Avada prend en charge les formulaires courants suivants :

procédure

I. Saisir Off Canvas Builder (Constructeur de toile)

• Connectez-vous au backend de WordPress.
• Accéder à la barre de menu de gauche Avada > Hors toile.
• Cliquez sur le coin supérieur droit de la page "Ajouter un nouveau hors toile"(Ajouter une nouvelle toile).
• Donnez un nom à cet élément, par exemple :Barre latérale d'abonnement.
• Cliquez sur "Create New Off Canvas".

II. choisir un modèle ou partir de zéro

• gratterLes utilisateurs avancés peuvent ajouter des conteneurs et mettre en page manuellement le contenu.
• Utilisation des modèles d'Avada Studio(Recommandé pour les débutants) :
  • frappe (sur le clavier) "Avada Studio Bouton.
  • Dans la galerie de modèles qui s'affiche, filtrez "Abonnement"Classification.
  • Choisissez un modèle de curseur qui vous plaît (ex :Abonnement Barre coulissante).
  • Cliquez sur "Importer" et cochez "Utiliser les couleurs et les polices locales", puis importez le modèle.

Contenu personnalisé hors toile

Une fois le modèle importé, vous verrez la structure prédéfinie, qui comprend généralement les éléments suivants :

• photographie
• Titre et texte explicatif
• Formulaire (généralement Avada Form)

Vous pouvez apporter les modifications suivantes en fonction du style de votre marque :

• Remplacez l'image (cliquez sur Image > Remplacer le support).
• Modifier le contenu du texte (cliquer directement sur l'éditeur de texte).
• Ajustez la copie du bouton, par exemple "S'abonner maintenant" en "S'abonner maintenant".
• Si vous souhaitez modifier le contenu du formulaire, veuillez vous rendre sur la page distincte de la page d'accueil. Avada > Formulaires Mise en page.

Configuration de l'apparence et du comportement hors toile

Sur le côté droit de l'éditeur, vous verrez plusieurs onglets, que nous expliquerons tour à tour :

1) Généralités

• TypeSélectionnez "Sliding Bar" (barre coulissante).
• État initial: Réglé sur "Fermé".
• Position: Régler à "droite".
• Transition: Sélectionnez "Pousser".

2. la conception

• mettre en placecouleur de fondOu des photos.
• Ajoutez des bordures et des ombres pour une vision plus tridimensionnelle.
• Définir la largeur, l'espacement et l'alignement.

3. superposition

• Activer le masque d'arrière-planSi cette option est cochée, la page est assombrie lorsque la fenêtre contextuelle s'affiche, ce qui attire davantage l'attention.

4. fermer

• Un clic sur la zone de masque peut être défini pour la fermer.
• frappe (sur le clavier) CES Fermer.
• Définit si le bouton Fermer est affiché, ainsi que la position du bouton.

5. l'animation

• Des animations d'entrée et de sortie peuvent être définies, telles que l'entrée par glissement, l'entrée par fondu, etc.

V. Définition des conditions de déclenchement

Cette étape permet de déterminer l'Off Canvas Quand et comment ?.

1. les conditions (sur quelles pages)

• La valeur par défaut est "Site entier".
• Elle peut être affichée uniquement sur la page d'accueil, la page de l'article ou la page d'une catégorie spécifique.

2. les déclencheurs

Vous pouvez choisir plus d'un déclencheur, et nous en présentons deux ici :

• Intention de sortie: détecte que l'utilisateur est prêt à quitter la page (souvent utilisé enalerte par fenêtre pop-up).
• Temps passé sur la page: Définir le délai d'apparition, par exemple :
  • Activer le "temps passé sur la page"
  • fixé à 4 secondes.

3. les règles (indiquant les fréquences et les conditions)

• Définir si l'affichage doit se faire une seule fois ou tous les quelques jours.
• Affiché en fonction du statut de connexion ou de l'appareil (téléphone portable/ordinateur).
• Par exemple, elle ne s'affichera sur les téléphones portables que pour les utilisateurs non connectés.

Sixièmement, sauvegarder et tester l'effet

1. Cliquez sur le bouton "Enregistrer" dans le coin supérieur droit.
2. Retournez à la page d'accueil du site et actualisez la page.
3. Attendez 4 secondes pour que le curseur s'insère dans la page par la droite et affiche ce que vous avez mis en place.

Conseils avancés

• Vous pouvez créer plusieurs Off Canvas, par exemple un pour les pop-ups d'annonce et un pour les menus de navigation.
• La fonction "Import/Export" permet de copier rapidement les configurations d'Off Canvas sur d'autres sites.
• Combiner Avada Forms + Mail Services (e.g. Mailchimp) qui permet d'automatiser le marketing par courrier électronique.

résumés

L'outil Avada Off Canvas Builder vous permet deCréez facilement des pop-ups et des panneaux coulissants esthétiques et efficacesqui sont utilisés pour capter l'attention des utilisateurs et augmenter les conversions. Grâce à l'interface intuitive, l'autobibliothèque de modèleset de riches configurations comportementales pour des interactions complexes, même sans expérience en programmation. Pour en savoir plus sur le thème Avada en action, consultez cet article, l'article sur le thème Avada en action et l'article sur le thème Avada en action.Tutoriel de gardiennage du thème Avada"qui contient l'importation de modèles de thèmes Avada, la configuration des pages, la mise en page, les paramètres d'intégration de Woocommerce et d'autres connaissances sur le fonctionnement du thème Avada.