Themes

Regarder les astuces pour mieux configurer son thème avec Elementor.

Astra Widget : Le tour complet des options pour gérer ses widgets avec le thème gratuit Astra

Troisième partie sur le thème d’Astra, une vidéo consacrée aux widgets.

Les widgets sont de petits blocs que vous pouvez disposer à différents endroits sur votre thème, que ça soit en colonne latérale, ou en haut et en bas de votre site.

On va pouvoir voir ce qu’il est possible de faire avec les widgets de la version gratuite d’Astra.

Dans un premier temps, vous allez devoir activer le sidebar en vous rendant dans Apparence, puis Options d’Astra. Dans les extensions gratuites, vous allez retrouver Astra Widgets qui propose trois nouveaux widgets pour votre espace de widgets de WordPress, et activer également Sidebar Manager.

Astra Widgets.

Vous avez donc la possibilité d’avoir trois nouveaux widgets : Astra Address, Astra Social Profiles et Astra List Icons.

Je vais prendre Astra Social Profils que je vais mettre directement dans ma barre latérale. Je vais l’appeler Réseaux sociaux, car il est fait pour ça.

Prenons l’exemple de Facebook, inscrivez le titre (Facebook), insérez le lien vers votre page Facebook, et vous pouvez décider d’ouvrir le lien sur une nouvelle fenêtre ou non, si vous voulez que les gens quittent votre site ou pas. Pareil, si les moteurs de recherche doivent suivre ce lien ou pas. Et pour finir, ajoutez l’icône du réseau social.

Vous pouvez ensuite le dupliquer pour faire la même chose avec les autres réseaux sociaux de votre choix.

Vous avez également quelques options de mise en page, si vous souhaitez que les icônes soient alignées ou pas, que les icônes soient en format carré ou rond, des positionnements précis, etc.

Sidebar Manager

Le Sidebar Manager va vous permettre d’ajouter une nouvelle colonne latérale.

Imaginons que mon site actuel est un site de voyage et que je dispose d’un blog. Sur celui-ci, je souhaite récolter des adresses emails ciblées, et pour les avoir, je vais offrir une carte à vélo sous forme d’un PDF en échange d’une adresse email. Pour pousser les choses encore plus loin, je vais cibler uniquement les gens qui lisent mes articles vélo pour leur proposer cette carte vélo en échange d’une adresse email, c’est ce qu’on appelle un Lead magnet. C’est quelque chose dont je parle régulièrement dans mes formations, donc n’hésitez pas à les consulter pour avoir plus d’informations.

Je vais donc créer une nouvelle colonne qui va aller remplacer ma colonne principale et je vais l’appeler Ebook. Je vais demander à ce qu’elle remplace la colonne latérale, mais aussi à ce qu’elle s’affiche sur certains articles, c’est-à-dire ceux qui ont comme catégorie « vélo ».

Le grand intérêt de ce widget est de pouvoir le positionner très précisément, et je vais pouvoir aller encore plus loin dans le ciblage et demander à afficher cet ebook que si les personnes sont déconnectées. De ce fait, je ne vais pas embêter avec un ebook les personnes qui ont déjà un compte chez moi et qui sont déjà clients. Ils n’en ont certainement pas besoin puisqu’ils sont déjà clients.

Il faut à présent le mettre en place sur la page, lui dire ce qu’il doit remplacer. Pour cela, il faut aller sur Widget dans Apparence, et vous allez retrouver une nouvelle zone qui s’appelle Ebook. Inscrivez les instructions pour obtenir la carte vélo, ainsi, sur le site Internet, dans la section « voyage à vélo », on retrouvera le formulaire Ebook.

Ce type de fonctionnalités de ciblages sont assez difficiles à trouver avec des plugins gratuits, c’est donc sympa de trouver cette fonctionnalité gratuitement via le Sidebar Manager.

Le léger désavantage, c’est que ça remplace toujours une sidebar existante, ça ne rajoute pas de widget en plus de la la colonne latérale par défaut par exemple, mais ce n’est pas grave, car si vous voulez avoir une harmonie entre vos colonnes, vous n’avez cas remettre les mêmes widgets que ceux qu’il y a dans la colonne latérale par défaut . Ça vous permet au final d’avoir plus de contrôle, car vous n’avez pas forcément besoin de tout avoir et ça vous permet de mieux cibler.

Vous avez vu qu’au final, en version gratuite, il y a quand même pas mal d’options. Astra Widgets est plutôt fait pour les réseaux sociaux, pour pouvoir les mettre à côté de votre menu en header de site. C’est assez pratique, car c’est souvent quelque chose qu’on n’a pas et on ne sait pas trop comment faire. Et bien sûr le Sidebar Manager est très intéressant lui, pour pouvoir gérer sa publicité de façon efficace.

Comparatif entre Astra gratuit et Astra premium

Dans la vidéo d’aujourd’hui, qui est la suite de la semaine précédente sur la philosophie d’Astra, on va comparer Astra en version gratuite et en version payante.

J’ai donc fait deux sites, l’un avec Astra version payante, l’autre sans. L’idée, c’est de pouvoir tester en profondeur Astra Thème et savoir si cela vaut le coup d’investir dans Astra avec la version pro.

Pour faire une bonne comparaison, j’ai tout d’abord activé tous les plug-ins du thème Astra de la version payante, mais je vous recommande de n’activer que ce dont vous avez besoin.

Ce qui ne change pas entre les deux versions.

Tous les plug-ins en bas : File d’Ariane, CSS additionnel, Réglages de la page d’accueil, Widgets, Menus, ne changent pas, vous aurez les mêmes menus et les mêmes options en version gratuite ou payante.

C’est un bon point pour Astra de proposer le CSS additionnel en version gratuite, car sur Elementor, par exemple, c’est quelque chose de payant.

Les options supplémentaires avec la version payante.

Mise en page.

Ce que vous ne retrouverez pas en version gratuite, c’est « Retour en haut ». Cette option permet à l’utilisateur d’avoir un petit bouton qui apparaît lorsqu’il fait défiler sa page vers le bas et qui lui permet de remonter vers le haut de la page. Il est personnalisable en changeant sa couleur, sa taille, sa position, mais on ne peut pas changer l’icône par lui-même. C’est une fonction pratique quand votre page devient longue.

Certains panneaux sont très différent avec l’option premium et propose plus d’options….

En-tête.

Ici, vous allez pouvoir ajouter des options supplémentaires, notamment une nouvelle zone en haut et en bas de votre propre menu. En cliquant sur l’option Au-dessus de l’en-tête et En dessous de l’en-tête, vous allez par exemple pouvoir ajouter un espace pour un sous-menu ou un espace pour ajouter des réseaux sociaux.

Blog.

Vous avez beaucoup plus de choix de mise en page, surtout sur les blogs/archives. Vous pouvez décider d’afficher votre image en haut, à droite ou à gauche, vous avez la possibilité d’avoir jusqu’à quatre colonnes pour présenter vos articles. Et surtout, vous avez des options pour paramétrer le padding, les marges, etc.

Pour ceux qui ne veulent pas utiliser Elementor pour mettre en forme leurs articles et qui veulent quelque chose de simple, ce thème Astra fait très bien le job, vous avez beaucoup d’options de personnalisation.

Publication seule.

Pas de grandes différences, mais vous avez cependant un peu plus de paramètres de mise en page pour les espacements et quelques options supplémentaires pour par exemple supprimer la navigation par poste, inclure les informations de l’auteur.

Conteneur.

Pareil, pas de grandes différences, mis à part plus de contrôle sur les espacements.

Couleurs et arrière-plan.

Vous allez pouvoir définir les couleurs et arrière-plans sur un peu plus de choses, notamment sur le blog, la colonne latérale et sur la zone de footer (le pied de page de votre site).

Typographie.

Même principe, un peu plus d’options, notamment en pouvant personnaliser la typographie sur des choses supplémentaires comme la barre latérale et les boutons.

Pour résumer, vous pouvez passer à Astra pro lorsque vous souhaitez personnaliser davantage votre header et footer, ou alors, pourquoi pas, utiliser Astra Layout.

Si vous souhaitez d’autres comparatifs avec d’autres thèmes, dites-le-moi dans l’espace commentaire.


Fonction Astra layout de Astra thème

Dans cette vidéo, je vous montre l’une des fonctions les plus puissantes (et les plus intéressantes) du thème premium Astra.

On compare souvent Astra et Generate Press, deux thèmes légers et performants conçus pour s’intégrer avec des page builders tels que Beaver Builder ou Elementor (avec des outils qui vous proposent de créer des templates en glisser-déposer).

Certes, ces thèmes sont tous deux très optimisés pour un affichage rapide et possèdent plus ou moins les mêmes fonctions, mais Astra Layout, propre à Astra, est une fonction qui vaut à elle seule que l’on s’y intéresse de près.

Que permet de faire Astra Layout ?

Il permet (un peu comme Elementor Pro) d’ajouter des sections à un endroit très précis de son thème.

Par exemple, sur une catégorie d’article précis, on pourra ajouter un formulaire de téléchargement d’ebook.

Une question se pose alors.

Si je peux déjà le faire avec Elementor Pro, quel est l’intérêt de le faire avec le thème payant Astra ?

J’y vois trois avantages :

Le premier avantage (le plus évident) : vous pourriez tout à fait ne pas disposer d’Elementor Pro et ainsi profiter de cette fonctionnalité (sans le module menu, l’intérêt de faire un en-tête de site et un pied de page reste toutefois limité).

Mais le plus intéressant reste à venir.

Ce qu’Astra fait DE MIEUX qu’Elementor Pro concerne les sections :

Les hooks :

Comme l’indique le schéma, vous pouvez, par l’intermédiaire des hooks, programmer des emplacements plus précis qu’avec Elementor, tant les possibilités sont nombreuses ! Notamment, comme évoqué dans mon exemple : des emplacements au sein d’un article ou même des emplacements complémentaires au footer et au header.

A noter : certains hooks ne sont pas utilisé tout dépend de votre contenu par exemple ici : masthead_toggle_buttons_before et masthead_toggle_buttons_after

Je vous parle un peu chinois avec footer et header ? Je vous recommande de lire mon tuto sur Elementor Pro et les sections, pour y voir plus clair.

Un autre avantage (et non des moindres) est la possibilité d’avoir des conditions d’affichage plus précises que sur Elementor, avec notamment des conditions de connexion de l’utilisateur.

On peut décider de n’afficher un contenu que si notre utilisateur est connecté (ou non), par exemple.

En l’utilisant convenablement et en complément d’Elementor, vous pourriez ainsi répartir les sections ainsi :

– tout ce qui touche au thème est géré avec Elementor ;

– tout ce qui touche au marketing (formulaires, bandeaux publicitaires) est géré depuis la bibliothèque Astra.

Ainsi, vous pouvez mieux répartir et classer vos contenus pour vous y retrouver. Par exemple, si Astra devient votre librairie de bannières et de formulaires, vous pouvez ainsi voir d’un seul coup d’œil toutes les « publicités » en cours de diffusion et celles qui sont en brouillon.

C’est la méthode que j’ai adoptée sur ce site, mais bien sûr, vous pourriez aussi bien décider de faire l’exact opposé (surtout depuis l’arrivée des pop-up avec la librairie Elementor).

En bref, Astra Layout vous offre une possibilité supplémentaire (et valable avec tous les page builders compatibles) d’agencer votre thème WordPress comme bon vous semble.

Alors, prêt à le tester ?

Mobile first avec Elementor : Comment optimiser son en-tête de site ?

Comment appliquer les conseils du mobile first a Elementor ?

Dans la vidéo, je vous présente quelques conseils et outils
pour répondre à ce défi essentiel, tant la consultation sur mobile ou tablette
explose.

C’est également important, car (hélas !) Elementor nous
réserve parfois quelques surprises, qui sont fort heureusement facilement contournables.

Avant de commencer, si vous n’êtes pas au fait de l’interface d’Elementor ou du header (en-tête en anglais), je vous recommande la lecture de mon guide pour débuter avec Elementor. Ainsi, vous ne serez pas perdu(e).

Prêt ? Commençons !

Le mobile first : une règle simple, mais efficace

Le mobile first, kézako ?

Cela veut simplement dire « penser d’abord au mobile ».
Hum… d’accord, mais dans les faits ?

Cela revient à tenir compte des contraintes de consultation sur des petits écrans afin d’améliorer le confort de lecture. Je précise que ce n’est pas vraiment une définition académique, mais plutôt la mienne ^^. Pour la définition officielle, c’est ici.

En d’autres termes, c’est commencer par se demander quelles
sont les contraintes d’un petit écran.

  1. Contrainte : Moins d’espace pour
    afficher des informations.

Solution : Éviter les informations ou éléments inutiles.

  • Contrainte : Vitesse de
    communication réduite.
    Solution : Éviter les
    informations inutiles ET veiller à la bonne compression des images ou des
    vidéos ET optimiser la vitesse de chargement de son site.
  • Contrainte : Le pouce.

Avant de parler de solution, oui, je vois
déjà certains me dire : « Quoi, le pouce est une contrainte ? Ça
va bien, Vincent ? » Je vais très bien, merci… Eh oui, le pouce est
une contrainte, car c’est un pointeur moins efficace qu’une souris lorsqu’il s’agit
de sélectionner un élément, tout simplement car il est moins précis. On a
tendance à l’oublier, mais c’est important d’y penser.

Solution :
Designer des boutons ou des zones cliquables plus grandes, faire attention
aux menus trop longs ou trop profonds (avec trop de sous-menus par exemple).

Pour résumer : faites
simple !

Dans la vidéo, je montre qu’un header (en-tête) avec
seulement deux colonnes ne pose pas de problème en mobile, parce qu’il y a peu
d’éléments et que cette configuration ne nécessite dans la plupart des cas aucun
ajustement en mobile ou tablette. Les choses deviennent différentes plus on
ajoute d’éléments à son header. Dans l’exemple de la vidéo, j’ai simplement
ajouté le slogan de mon site, et le résultat en mobile requiert une
optimisation. Alors justement, parlons-en ! Quels outils nous offre
Elementor pour optimiser son header, si l’on ne peut pas le simplifier
davantage ?

Modifier la largeur des colonnes

C’est souvent ce qui marche le mieux ! Une fois votre
périphérique cible sélectionné (mobile ou tablette dans notre cas), vous pouvez
modifier la largeur de la colonne spécifiquement pour cette taille d’écran.
C’est très pratique et bien souvent indispensable. Voici comment faire :

Avec le bouton colonne vous pouvez modifier la largeur de celles-ci et les faire variées selon la taille d'écran. De quoi privilégié une consultation sur mobile dans votre stratégie mobile first.

Choisir de ne pas afficher certaines parties sur tablette et/ou mobile

Une solution un peu extrême, mais dans la continuité du
mobile first, est tout simplement de ne pas afficher certains éléments en
mobile. Je dis « en mobile » plus volontiers, car c’est ce dernier
support qui, généralement, vous donnera du fil à retordre.

Bien que cette option soit très facile à mettre en œuvre
avec l’éditeur d’Elementor, deux mises en garde s’imposent.

  1. Le contenu est quand même chargé sur mobile ou
    tablette. Il est juste caché.

C’est le piège de cette fonction :
elle ne devrait pas être utilisée trop souvent ou comme prétexte pour ne pas
faire le tri dans vos informations à afficher sur mobile.

Souvenez-vous de la règle la plus
importante : faites simple et
supprimez de votre site tout élément qui n’est pas indispensable et qui
pourrait ralentir ou gêner la consultation sur mobile.

Concrètement : ce n’est pas parce que
vous demandez à Elementor de cacher une vidéo sur mobile qu’elle ne se chargera
pas sur la version mobile. Elle sera juste cachée.

  • Pour tester, activez le mode « prévisualisation »
    d’Elementor, car pour permettre une meilleure ergonomie, Elementor ne cache pas
    les éléments de son éditeur !

Comment faire ?

Comme ceci, tout simplement !

Il existe des requêtes pour demander a masquer une section sur elementor en mobile tablette ou desktop. un bon contournement si vous ne pouvez appliquer strictement les règle du moible first.

Soyez à la marge : pensez aux ajustements

Pour peaufiner son design, il peut être utile d’ajuster les
marges pour déplacer des éléments de votre page quelques pixels plus haut ou
plus bas.

Plusieurs astuces, ici, pour vous simplifier la vie.

  1. Décocher
    la chaîne.

Nous voulons être précis en ajustant
uniquement le haut ou le bas. En cliquant sur la chaîne, vous ne mettrez pas la
même valeur partout.

  • Vous avez le droit de mettre des valeurs
    négatives !

C’est parfois indispensable pour remonter
un élément, par exemple.

  • Veillez à bien sélectionner votre appareil avant
    de faire des ajustements.

Cela vous permettra de ne pas faire d’erreur
en confondant la tablette et le mobile. Au pire, si vous vous êtes trompé(e),
le bon vieux Ctrl + Z fonctionne toujours J

Conclusion

Il y aurait encore beaucoup à dire, car chaque cas est unique, mais avec ces outils et la philosophie du mobile first, je pense que vous êtes déjà bien armé(e) pour optimiser votre site sur mobile et tablette. Alors, n’ayez plus peur de tester votre site en mobile, et montrez à votre site « c’est qui le patron » !

Pour les plus téméraires d’entre vous je vous recommande chaudement de regarder ma série sur l’intégration d’une landing page en responsive a partir d’un psd. La série de 3 vidéos (certes) dure près de 3 heures (aie aie aie) mais vous apprendrez beaucoup d’astuces pour parfaire votre mise en page en tablette et mobile !

Les vendredis #CREATIFS

Prenez une longueur d'avance avec mes conseils et tutos pour créer VOTRE business avec WordPress. Chaque vendredi.

En renseignant votre adresse email, vous acceptez de recevoir chaque semaine nos derniers articles de blog par courrier electronique et vous prenez connaissance de notre politique de confidentialité.

Vous pouvez vous désinscrire à tout moment à l'aide des liens de désinscriptions ou en nous contactant à l'adresse [email protected] Notre newsletter est envoyée par Active Campaign société américaine membre du privacy shield.

Retour haut de page