Comment optimiser votre barre latérale sur mobile à l'aide de Divi Theme Builder

Dans certains cas, garder une barre latérale sur mobile peut être un peu exagéré. Les utilisateurs sont heureux de faire défiler les informations pertinentes sur leurs tablettes et téléphones (jusqu'à un certain point). Mais lorsque vous avez une quantité importante de contenu de la barre latérale après le contenu principal de la page, les utilisateurs peuvent ne jamais atteindre le pied de page, qui se compose généralement d'appels à l'action importants. C'est pourquoi il est important d'optimiser la barre latérale sur mobile.

Dans ce tutoriel, nous allons passer en revue les façons dont vous pouvez utiliser Divi Theme Builder pour optimiser votre barre latérale sur l'affichage mobile. Voici quelques-unes des choses que nous aborderons dans cet article :

• Comment créer un modèle avec une barre latérale
• Création de contenu de barre latérale à l'aide de modules Divi et de widgets WordPress
• Utilisation de plusieurs zones de widgets pour masquer/afficher certains widgets sur mobile
• Contrôle de l'espacement entre le contenu de la barre latérale sur mobile
• Masquer complètement le contenu de la barre latérale sur mobile
• Cacher du contenu de la barre latérale sur mobile
• Cacher des éléments dans les modules pour minimiser le contenu sur mobile
• Rendre le contenu de la barre latérale réactif en ajustant la taille et l'espacement du texte
• Comment modifier l'ordre d'empilement de la barre latérale sur mobile

Commençons.

Aperçu

Voici un aperçu rapide de la disposition de la barre latérale sur le bureau et de la façon dont elle a été optimisée pour l'affichage mobile.

Téléchargez le modèle GRATUIT avec barre latérale optimisée sur mobile

Pour mettre la main sur le modèle de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas abonné et ne recevrez pas d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Abonnez-vous à notre chaîne Youtube

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.

Allons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez installer et activer le thème Divi. Assurez-vous d'avoir la dernière version de Divi.

Vous aurez également besoin de quelques articles/pages créés à des fins de test pour que le contenu de la page affiche réellement les résultats.

Après cela, vous êtes prêt à partir.

Comment optimiser la barre latérale de votre modèle Divi sur mobile

Avant de commencer à optimiser notre barre latérale sur mobile, nous devons d'abord mettre en place un modèle fonctionnel. Nous allons construire notre barre latérale sur un modèle de page à l'aide du Divi Theme Builder. Cela nous aidera à mieux comprendre en quoi cela impliquait de construire une barre latérale dans Divi afin que nous puissions mieux comprendre comment l'optimiser sur mobile.

Création du modèle avec la barre latérale

Importation du pack de création de thème Divi #3

Pour commencer, nous allons utiliser le Divi Theme Builder Pack #3 pour démarrer la conception de notre site. Ensuite, nous allons utiliser l'un des modèles pour ajouter la barre latérale que nous optimiserons pour le mobile.

Une fois le pack téléchargé, décompressez le dossier.

Depuis le tableau de bord WordPress, accédez à Divi > Générateur de thèmes. Cliquez ensuite sur l'icône de portabilité dans le menu en haut à droite de la page. Dans le modal de portabilité, sélectionnez l'onglet importer et choisissez le fichier divi-theme-builder-pack-3-all.json dans le dossier que vous avez téléchargé précédemment. Cliquez ensuite sur le bouton importer.

Important : veuillez utiliser un site de test avec une nouvelle installation de Divi afin de ne pas écraser le contenu en direct de votre site Web ou de casser quelque chose.

Vous verrez que tous les modèles ont été importés dans le générateur de thème.

Création de la disposition de la barre latérale à l'intérieur du modèle de page de catégorie

Recherchez le modèle Toutes les pages de catégorie et cliquez pour modifier la disposition du corps personnalisé.

La mise en page actuelle de la page utilise une ligne d'une colonne pour la zone de contenu principale de la page. Nous devrons changer cela en une structure de mise en page de barre latérale. Pour ce faire, cliquez sur l'icône « Choisir la mise en page » dans le menu de la deuxième ligne et choisissez la structure de mise en page des deux tiers et un tiers des colonnes.

Maintenant, vous aurez une zone sur le côté droit pour votre barre latérale.

AVIS : Je n'utilise pas de section spécialisée pour cette disposition de la barre latérale. Les sections spécialisées ne sont pas requises lors de la création d'une disposition de barre latérale pour votre page, cependant, si vous souhaitez conserver une fonctionnalité de ligne séparée pour la zone de contenu principale, vous souhaiterez utiliser une section spécialisée.

Nous ne nous concentrerons pas trop sur la recréation de la conception exacte des modules dans ce didacticiel. Au lieu de cela, nous allons nous concentrer sur les éléments qui aideront à optimiser la barre latérale sur mobile.

Cela dit, nous devons ajouter une couleur d'arrière-plan et un remplissage à la colonne de la barre latérale.

Paramètres de colonne de la barre latérale

Ouvrez les paramètres de la colonne désignée pour la barre latérale et mettez à jour les éléments suivants :

• Couleur de fond : #f2f5f9
• Remplissage : 25 pixels en haut, 25 pixels en bas, 25 pixels à gauche, 25 pixels à droite

Création du contenu de la barre latérale avec les modules Divi et les widgets WordPress

Le contenu de la barre latérale variera en fonction des besoins d'un site Web. Cependant, si nous parlons d'un site de blog, vous trouverez généralement une combinaison des éléments de contenu de la barre latérale suivants :

• Informations sur l'auteur (nom, photo, bio)
• Boutons de suivi des médias sociaux
• Inscription par e-mail
• Liens vers des produits et/ou services
• Les publicités
• Catégories
• Messages récents/populaires

La création de ces éléments dans Divi peut se faire à l'aide d'une combinaison de modules Divi. Pour cet exemple, nous ajouterons les modules Divi suivants pour créer notre contenu de barre latérale.

1. Module de recherche – Cela servira de formulaire de recherche.
2. Module d'option d'e-mail – Cela servira de formulaire d'option d'e-mail.
3. Module de texte - Ce sera le titre des boutons de suivi des médias sociaux
4. Module de suivi des médias sociaux – Cela présentera les boutons de suivi des médias sociaux.
5. Module de texte (avec image bg) - Cela servira d'exemple d'annonce pour la barre latérale.
6. Module Blurb (avec contenu de l'auteur) - Cela servira de zone d'informations sur l'auteur de la barre latérale.
7. Module de texte - Cela servira de titre pour le module de blog en dessous.
8. Module de blog - Cela servira de contenu de messages récents/en vedette dans la barre latérale.

Extraction de widgets WordPress à l'aide du module de barre latérale

Si vous n'êtes pas déjà familier, Divi dispose d'un module de barre latérale qui vous permet d'extraire le contenu de la zone de widget (ou les widgets) dans votre zone de barre latérale Divi. En fait, ce modèle utilise déjà le widget de la barre latérale dans la rangée juste en dessous de celui sur lequel nous travaillons.

Faites glisser le module de la barre latérale de la ligne et placez-le juste en dessous du module d'option d'e-mail.

Ensuite, ouvrez les paramètres du module de la barre latérale. Vous verrez que le module tire dans la zone de widget de la barre latérale qui devrait ressembler à ce qui suit si vous avez la configuration par défaut dans WordPress.

Utilisation de plusieurs zones de widgets

À l'heure actuelle, la zone de widgets "Sidebar" affiche plusieurs widgets car il existe plusieurs widgets à l'intérieur de la zone de widgets Sidebar. Mais, vous pouvez en fait gagner plus de contrôle sur la conception de la barre latérale de votre Divi en utilisant plusieurs zones de widgets qui contiennent un seul widget. L'utilisation de plusieurs zones de widgets vous donnera plus de contrôle sur la conception de vos widgets ainsi que sur la visibilité des widgets sur mobile.

Pour créer plusieurs widgets, ouvrez un nouvel onglet et accédez au tableau de bord WordPress. Accédez à Apparence > Widgets.

Créez une nouvelle zone de widget en entrant un nom et en cliquant sur le bouton Créer. Puisque cette zone de widget sera l'endroit où nous ajouterons le widget Catégories, nommons la zone "Catégories". Actualisez la page pour voir la zone des widgets. Faites ensuite glisser le widget Catégories vers la zone Widget Catégories.

Répétez le processus pour créer une nouvelle zone de widget nommée « Archives ». Faites ensuite glisser le widget Archives dans la zone du widget Archives.

Revenez au modèle de pages de catégorie avec la disposition de votre barre latérale et mettez à jour le contenu du module de la barre latérale pour afficher la zone du widget Catégories.

Dupliquer le module de la barre latérale (pour conserver le design)

Mettez à jour le module de barre latérale en double pour extraire la zone de widget d'archives.

Prendre le contrôle de l'espacement entre les modules de la barre latérale

Actuellement, la ligne qui contient la barre latérale a une valeur de largeur de gouttière de 2. Cela signifie qu'il y aura une marge/un espacement inférieur par défaut entre chaque module à l'intérieur de la barre latérale. Pour mieux contrôler cet espacement, nous pouvons supprimer la marge inférieure de tous les modules dans la colonne de la barre latérale. Pour ce faire, ouvrez les paramètres du module de recherche et mettez à jour les éléments suivants :

• Marge inférieure : 0px (ordinateur de bureau), 15px (tablette)

Cliquez ensuite sur l'icône Plus de paramètres (ou sur le menu contextuel) dans l'option de marge. Sélectionnez ensuite « Étendre la marge ».

Dans le module Étendre les styles, mettez à jour les options pour étendre la marge à « Tous les modules » dans « Cette colonne ».

Ensuite, nous pouvons ajouter un espacement entre les modules à l'aide de modules diviseurs.

Optimiser la barre latérale sur mobile

Masquer la barre latérale sur mobile

Parfois, vous voudrez peut-être masquer complètement la barre latérale sur mobile. Pour ce faire, vous devrez désactiver la visibilité de la colonne contenant la barre latérale sur tablette et téléphone.

Ouvrez les paramètres de ligne et ouvrez les paramètres de la colonne désignée pour la barre latérale. Mettez ensuite à jour la visibilité comme suit :

• Désactiver activé : tablette, téléphone

Cela masquera toute la barre latérale sur la tablette et l'écran mobile.

Masquer une partie du contenu de la barre latérale sur mobile

Sur le bureau, vous pouvez avoir de la place pour conserver la plupart (ou la totalité) du contenu de la barre latérale sans que cela ne devienne trop une distraction du contenu. Mais sur mobile, l'utilisateur devra faire défiler beaucoup de contenu de la barre latérale qu'il n'a peut-être pas intérêt à voir. Ainsi, lors de la création de votre barre latérale dans Divi Theme Builder, profitez des options de visibilité pour désactiver certains des éléments de la barre latérale sur l'affichage mobile. Et, si vous utilisez des widgets WordPress pour le contenu de la barre latérale, créez plusieurs zones de widgets pour aider à concevoir et masquer certains widgets sur mobile également.

Pour masquer des modules sur mobile, ouvrez le module de vue filaire, puis utilisez la fonction de multisélection de Divi pour sélectionner tous les modules que vous souhaitez masquer/désactiver sur tablette et téléphone. Ouvrez ensuite les paramètres de l'un des modules sélectionnés et mettez à jour les éléments suivants :

• Désactiver sur : téléphone, tablette

Dans cette illustration, nous avons masqué tous les modules (y compris les séparateurs) à l'exception des deux modules de la barre latérale (contenant les widgets de catégories et d'archives) et le module de texte (contenant l'annonce) sur l'écran de la tablette et du téléphone. Pour le dire autrement, seules les catégories, les archives et les annonces s'afficheront sur mobile.

Aperçu des résultats sur une page de blog

Avant de voir les résultats sur la page en direct, affectons-la d'abord à la page de blog du site. Pour ce faire, cliquez sur l'icône d'engrenage au-dessus du modèle, sélectionnez le blog dans la liste et enregistrez-le.

Assurez-vous d'avoir sélectionné une page de publications sous Apparence > Lecture.

Résultats

Voici la différence entre la barre latérale de bureau et la barre latérale mobile. Remarquez comment la barre latérale mobile a un contenu de cours.

Éviter la duplication du contenu de la barre latérale et du pied de page sur mobile

Sur le bureau, vous pouvez ajouter du contenu en double dans votre barre latérale et votre pied de page. En fait, c'est un bon moyen d'augmenter les conversions. Par exemple, sur le bureau, il est logique d'inclure un module d'activation par e-mail en haut de votre barre latérale et à l'intérieur du pied de page afin que les utilisateurs puissent voir l'option d'activation par e-mail tout en lisant le contenu de la publication ainsi qu'à la fin de la publication. Cependant, sur mobile, il n'y a pas de disposition de barre latérale. Tout est affiché dans une colonne (peut-être deux). Les barres latérales droites s'empilent sous le contenu de la publication/de la page et les barres latérales gauches s'empilent au-dessus du contenu de la publication/de la page. Ainsi, si un module d'abonnement aux e-mails de la barre latérale s'empile sous le contenu de la publication/de la page, l'utilisateur peut faire défiler plusieurs modules d'abonnement aux e-mails (un dans la barre latérale et un dans le pied de page). De plus, s'il y a une option d'e-mail en bas de la barre latérale droite et une en haut du pied de page, l'utilisateur fera défiler deux options d'e-mail consécutives sur mobile.

Cacher des éléments dans les modules pour minimiser le contenu sur mobile

Vous pouvez décider qu'il n'est pas nécessaire de masquer un module entier sur mobile. Au lieu de cela, vous pouvez minimiser le contenu du module en masquant certains éléments uniquement sur l'affichage mobile.

Par exemple, vous souhaiterez peut-être afficher l'image en vedette et l'extrait des publications en vedette dans la barre latérale du bureau. Mais, sur mobile, vous pouvez masquer l'image en vedette et l'extrait pour créer une version réduite du contenu.

Rendre le contenu de la barre latérale réactif

Vous pouvez décider de conserver tout le contenu de la barre latérale sur l'affichage mobile. Pourquoi pas? Si vous avez des informations précieuses que vous savez que les utilisateurs apprécieront, par tous les moyens, conservez-les. Cependant, vous voudrez prendre des mesures pour vous assurer que le contenu de la barre latérale est réactif. Cela signifie que vous voudrez ajuster la taille et l'espacement des éléments pour s'adapter à des écrans plus petits. Cela réduira la distance de défilement de la page et rendra le contenu plus facile à lire.

Ajuster la taille du texte sur mobile

Un moyen simple de minimiser l'espacement vertical et d'améliorer la lisibilité sur mobile consiste à ajuster la taille du texte du contenu du module dans la barre latérale. Par exemple, vous pouvez ajuster le texte du titre de 24px sur le bureau à 14px sur mobile.

Ajuster l'espacement/les séparateurs sur mobile

Dans cet exemple, nous avons ajouté des séparateurs entre les modules pour créer de l'espace. Cependant, nous pouvons utiliser les paramètres de diviseur de Divi pour ajuster l'espacement de ces diviseurs sur mobile. Cela réduira l'espace perdu lors du défilement.

Par exemple, vous pouvez modifier les marges supérieure et inférieure du diviseur de 30 pixels à 15 pixels sur tablette et téléphone.

Modification de l'ordre d'empilement de la barre latérale sur mobile

L'ordre d'empilement est un problème courant avec les barres latérales. Cela est particulièrement vrai pour les barres latérales de gauche. Comme je l'ai mentionné précédemment, les barres latérales droites s'empilent sous (ou après) le contenu de la publication/de la page et les barres latérales gauches s'empilent au-dessus (ou avant) du contenu de la publication/de la page. Cela signifie que lorsque vous affichez une page avec une barre latérale gauche sur mobile, la première chose qu'un utilisateur verra est le contenu de la barre latérale, au lieu du contenu principal de la publication/de la page. Ce n'est pas bon pour l'UX. Pour résoudre ce problème, vous pouvez soit masquer complètement la barre latérale, soit modifier l'ordre d'empilement de sorte que la barre latérale gauche tombe en dessous du contenu de la publication/de la page sur mobile.

Pour modifier l'ordre d'empilement d'une barre latérale gauche pour empiler sous (ou après) le contenu de la page sur mobile, ouvrez les paramètres de ligne de la ligne contenant la disposition de la barre latérale. Ajoutez ensuite le CSS personnalisé suivant à l'élément principal :

 display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;

Ensuite, ouvrez les paramètres de colonne de la colonne désignée comme barre latérale et ajoutez le CSS personnalisé suivant à l'affichage de la tablette principale :

order: 2;

Si vous ne l'avez pas deviné, ce petit extrait modifie l'ordre de la valeur par défaut ("1") à la valeur "2", ce qui entraîne l'empilement de la colonne/barre latérale entière sous/après la colonne contenant le contenu principal.

Dernières pensées

Les barres latérales continuent d'être un espace familier pour les utilisateurs qui fournissent un contenu secondaire utile lorsqu'ils interagissent avec le contenu principal d'une page. Cependant, le même contenu de la barre latérale sur mobile peut devenir une distraction. Espérons que cet article vous a inspiré pour donner à vos barres latérales l'attention qu'elles méritent sur les tablettes et les téléphones. Cela peut signifier que vous masquez complètement la barre latérale, affichez uniquement une partie du contenu de la barre latérale ou optimisez simplement le contenu existant spécifiquement pour l'affichage mobile.

La barre latérale qui a été créée pour le modèle dans ce didacticiel a été conçue à l'aide des éléments de conception existants trouvés dans le pack de mise en page du générateur de thème n°3. Si vous aimez le design de ce modèle avec la barre latérale, n'hésitez pas à le télécharger ci-dessus pour le regarder de plus près.

Pour plus d'informations, consultez ce guide d'utilisation des barres latérales avec Divi Theme Builder.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!