Comment créer du contenu hors toile dans Elementor: un guide

Présenter beaucoup de contenu dans un petit espace Web sans confondre les utilisateurs est un défi pour les concepteurs de sites Web. Le contenu hors toile est une solution tendance, nouvelle et intelligente qui peut vous aider dans ce contexte.

Avec le plugin Elementor Page Builder, vous pouvez facilement créer des menus hors canneaux, des bannières promotionnelles, des barres latérales et plus encore sur votre site Web. Cela peut non seulement vous aider dans la présentation du contenu, mais aussi simplifier la navigation, améliorer la lisibilité et convertir les utilisateurs.

Si votre site est construit avec Elementor, il ne vous faudra que quelques minutes pour créer du contenu sur toile pour votre site. Dans cet article de blog, nous vous guiderons sur la façon d'ajouter du contenu Canvas dans Elementor avec un guide étape par étape. Commençons!

Qu'est-ce que le contenu de toile hors toile?

Le contenu OFF Canvas est un widget Elementor qui maintient le contenu caché hors écran jusqu'à ce qu'il soit déclenché par l'interaction utilisateur. Habituellement, ce widget est connecté à un bouton à l'écran. Chaque fois que les utilisateurs cliquez sur le bouton, le contenu hors canaux glisse instantanément et présente les informations supplémentaires.

Comme indiqué ci-dessus, le widget de contenu hors cannets couvre le contenu comme les menus, les bannières promotionnelles, les barres latérales, les panneaux de connexion et d'inscription, les paniers d'achat, les filtres de contenu et les options de vue rapide. Il aide à maintenir une disposition propre et organisée qui est facile d'accès en cas de besoin.

Comment créer du contenu sur toile dans Elementor

Maintenant, dans cette section, nous discuterons de la façon de créer du contenu de canevas dans Elementor avec un guide étape par étape. Mais avant de sauter dans le tutoriel, assurez-vous que les plugins suivants ont installé et activé sur votre site.

• Élémentor
• Happyaddons
• Happyaddons pro

Lorsqu'ils sont prêts sur votre site, commencez à suivre le tutoriel expliqué ci-dessous.

Étape 01: Ajoutez le widget de contenu Off Canvas au canevas Elementor

Ouvrez un message ou une page avec le canevas Elementor. Trouvez le widget en tapant son nom dans la zone de recherche du panneau Elementor. Une fois que vous voyez le widget, faites-le glisser et déposez-le dans la toile.

Vous verrez un bouton ou une icône ajouté à la toile. En cliquant dessus, vous pouvez ouvrir la section Off Canvas. Vous pouvez jeter un œil dans le clip vidéo ci-dessous.

Étape 02: Ajoutez le widget Off Canvas à votre page Web

Ci-dessus, nous avons placé le widget sur une toile vierge. Mais vous pouvez l'ajouter à n'importe quelle partie spécifique de votre page Web. Pour l'expliquer, nous avons ouvert une page Web décorée. Ensuite, a placé le widget sur la section des héros

Vous pouvez voir que le widget a été ajouté à la section d'en-tête de la page Web.

Vérifiez comment améliorer le référencement local dans WordPress avec Elementor.

Étape 03: Sélectionnez le type de contenu personnalisé pour le widget Off Canvas

Accédez au contenu> Contenu OffCanvas . Cliquez sur la liste déroulante à côté de l'option Type de contenu.

Vous devez sélectionner un type de contenu approprié dans la liste déroulante pour le widget en fonction du type de contenu que vous souhaitez afficher.

Pour ce tutoriel, nous avons sélectionné le type de contenu personnalisé.

Explorez ce guide sur la façon de concevoir une base de connaissances dans WordPress.

Étape 04: Ajouter des informations au widget

Ajoutez votre contenu souhaité au widget en utilisant ces cases. En cliquant sur les cases, les étendre et créera des espaces pour vous permettre d'ajouter des informations.

Vous pouvez voir que nous avons ajouté du contenu à une boîte en l'élargissant. Vous pouvez ajouter du texte et des fichiers multimédias en cliquant sur les options respectives.

Apprenez à créer de superbes pages Web infographiques dans Elementor.

Étape 05: Sélectionnez une source à bascule

Dans la section à bascule, vous pouvez modifier le type de source de bascule, la position, l'animation et l'étiquette .

Ouvrez la liste déroulante à côté de l'option Toggle Source. Sélectionnez le type de bascule souhaité. Nous avons sélectionné le bouton comme type à bascule pour ce tutoriel.

Ensuite, modifiez la copie du bouton de l'option de texte du bouton . Vous pouvez même ajouter une icône de bouton . Vérifiez toutes les modifications du bouton sur la toile.

Étape 06: Personnalisez l'icône de la barre de fermeture

La section Off Canvas est livrée avec une icône croisée (x) dans le coin supérieur droit. Pour le personnaliser, développez la section de barre de fermeture sur le panneau Elementor.

En utilisant les options respectives à partir de là, vous pouvez désactiver l'icône, modifier l'alignement, modifier le type d'icône, le titre de l'icône, etc. J'espère que vous pouvez les faire vous-même.

Voici un tutoriel sur la façon de créer un calendrier d'événements dans WordPress.

Étape 07: Modifier les paramètres du widget

Développez la section Paramètres . À partir de l' option de direction , vous pouvez modifier la position du widget Off Canvas. Vous pouvez le positionner à gauche, à droite, en haut ou en bas.

Ensuite, vous pouvez sélectionner un effet de transition de contenu . Il ajoutera un effet d'animation à la page Web et l'affichera lorsque le bouton est cliqué.

Par exemple, nous avons sélectionné Reveal comme type de transition de contenu. Maintenant, consultez le clip vidéo ci-dessous. Une fois le bouton cliqué, la page se déplace également avec la section Off Canvas.

De la même manière, configurez les autres options.

Étape 08: styliser le widget Off Canvas

Venez à l' onglet Style et développez le contenu OffCanvas .

De là, vous pouvez modifier la taille hors toile , ajouter un type de bordure , augmenter la largeur de la bordure , changer une couleur de bordure et régler un rayon de bordure . J'espère que vous pouvez les faire vous-même comme nous l'avons fait.

Développez la section de contenu . Vous obtiendrez des options pour personnaliser l' alignement du contenu, la couleur d'arrière-plan, le type de bordure, la largeur de bordure, la couleur de la bordure et le rayon de bordure pour le contenu avec le widget Off Canvas.

De la même manière, vous pouvez modifier la typographie, la taille de la police et la couleur du texte.

Voici un guide simple sur la façon d'afficher la photographie de produit rotative 360 ​​dans WordPress.

Étape 09: styliser le bouton à bascule

De la même manière, développez la section de bascule . Cela vous permettra de personnaliser l' alignement du bouton, la typographie, la couleur du texte, le rayon de bordure, l'arrière-plan du bouton, etc.

Étape 10: Personnalisez l'icône de la barre fermée

En élargissant la section de barre fermée , vous pouvez personnaliser la couleur, la taille et plus de choses de l'icône de clôture.

Étape 11: Rendez le widget de toile Off le mobile réactif

Chacun de vos éléments Web doit être optimisé pour les appareils mobiles afin qu'ils soient bien affichés sur tous les types d'appareils. Sinon, vous pouvez manquer un énorme potentiel de trafic, car environ 50% de tous les trafics dans la plupart des sites Web proviennent des utilisateurs mobiles.

Pour l'optimisation mobile, cliquez sur l' icône du mode réactif en bas du panneau Elementor. Une barre supérieure apparaîtra avec des options pour vous permettre de basculer entre différentes tailles d'écran.

Maintenant, basculez entre différentes tailles d'écran et vérifiez si les conceptions sont correctes pour les appareils respectifs. S'il y a un problème, vous pouvez modifier la taille de la police, la taille du bouton, la largeur de la toile, la hauteur et d'autres options au besoin.

Les modifications ne seront enregistrées que pour cette taille d'écran particulière, sans affecter les autres. Ainsi, vous pouvez rendre le widget de toile Off le mobile réactif.

Étape 12: Aperçu du widget de contenu hors toile OFF

Maintenant, accédez à l'option Aperçu de la page Web et vérifiez si le widget fonctionne bien ou non. Vous pouvez voir, cela fonctionne bien de notre côté.

Choses à considérer lors de l'utilisation du widget de contenu OFF TOLIVAS

Pour tirer le meilleur parti du widget, il y a plusieurs points que vous devez considérer avec soin lorsque vous utilisez le widget de contenu Off Canvas. Jetez un œil à-les ci-dessous.

• Expérience utilisateur en douceur

Le contenu hors canaux devrait aider les utilisateurs à naviguer dans le site au lieu de perturber leur expérience. Assurez-vous que le widget fonctionne en douceur avec des animations bien coordonnées. Cependant, minimisez les effets de mouvement lourds qui pourraient dégrader les performances, en particulier sur les téléphones mobiles.

• Optimiser pour le téléphone mobile

Comme déjà dit ci-dessus, un nombre important de visiteurs Web proviennent généralement des utilisateurs d'appareils mobiles, vous devez bien optimiser vos sites Web pour tous les types d'appareils. Sinon, les utilisateurs centrés sur le mobile auront une expérience très négative.

• Fermeture facile

Le widget de contenu OFF Canvas doit incorporer une option de clôture simple. S'il est difficile à trouver, les utilisateurs se sentiront sûrement frustrés. Donc, n'oubliez pas l'icône de clôture d'une manière qui devient facile à naviguer.

• Pertinence de contenu

Le contenu hors-canne doit rester bref et concentré pour remplir des fonctions spécifiques telles que les outils de navigation ou les bannières promotionnelles. L'inclusion d'informations excessives ou d'éléments non pertinents sape son objectif de fournir une expérience utilisateur ciblée et transparente.

Mots finaux!

Le widget de contenu OFF Canvas pourrait être un moyen puissant pour engager les utilisateurs et augmenter les conversions une fois que vous savez comment bien tirer parti. Nous avons essayé de couvrir un tutoriel de base sur le widget. Parce qu'il est vraiment difficile de discuter de toutes les fonctionnalités du widget et comment les utiliser.

Donc, au-delà de ce tutoriel, si vous voulez avoir plus d'idées sur les autres choses que vous pouvez faire avec le widget, vous pouvez visiter notre page Elementor Off Canvas Content Demo. Vous obtiendrez une bonne collection de designs hors canneaux que vous pouvez copier directement et coller sur votre site.

Si vous avez d'autres requêtes sans réponse, faites-le nous savoir via la zone de commentaire ci-dessous. Nous vous répondrons très bientôt avec des réponses utiles.