Thème Astra : LE mode d’emploi complet

Récemment au cœur des actualités WordPress, Astra est un thème qui vaut le détour! En seulement 2 ans, le thème a passé le million d’installations actives et compte plus de 4000 avis ultra positifs:

Astra wpformation note wordpress

Astra est un thème WordPress freemium léger (<50Ko chargée sur l’interface publique), facile à utiliser et conçu pour fonctionner correctement avec les principaux constructeurs de pages ainsi que Gutenberg. Ce thème multi-fonctions s’adapte à tous types de sites internet: portfolios, blogs, professionnels, corporates, boutiques en ligne et bien plus encore.

Astra wpformation design pre

En résumé, voici ce qu’on peut lire depuis le tableau de bord WordPress après avoir installé le thème : ⚡ Thème WordPress rapide comme l’éclair et entièrement personnalisable !

Si vous voulez lire les dernières nouvelles du thème alors je vous invite à lire la première partie “Le petit scandale de Juillet 2020”, sinon rendez-vous directement à la partie 2: “Qui est derrière Astra.”

1. Le petit scandale de Juillet 2020

Astra s’est attiré les foudres de l’équipe de modération de thème WordPress il y a quelques semaines. Voici un petit résumé de ce qui s’est passé récemment avec Astra et les 6 extensions suivantes: Ninja Forms, WP Forms, GiveWP, Social Snap, Hubspot et Google Analytics Dashboard.

Toutes ces extensions sont freemium: elles possèdent une version gratuite ET une version Pro, payante. Ces extensions ont un lien “upgrade to pro” depuis le tableau de bord WordPress ce qui permet en un clic de passer à la version payante et ainsi de débloquer plus de fonctionnalités.

astra wpformation upgrade to Pro

Ce qu’a fait Astra et pourquoi le thème n’était plus disponible sur wordpress.org:  

Si un utilisateur cliquait sur “Upgrade to Pro”, alors Astra prenait une commission. Avec l’aide d’un filtre, Astra avait modifié ce lien pour “tracker” les utilisateurs qui passait de la version gratuite à la version Pro d’une des extensions ci-dessus. Cela a été fait avec la permission de ces 6 auteurs car ils ont officiellement rendu les filtres disponibles pour tout le monde à partir de leur propre code. Astra n’a pas mis le code affilié directement, mais un filtre ce qui revient quasiment au même…

Du coup, les auteurs des extensions savaient combien de ventes arrivaient depuis les clients Astra et reversaient donc une commission à Astra. Ce genre de programme d’affiliation est légal et très répandu sur internet, incluant les blogs les plus connus de WordPress. Par contre, wordpress.org n’authorise pas ce système sur le repo.

Donc le problème ici, n’est pas le système de commission en lui-même, mais le fait qu’Astra ai inséré ce filtre directement dans son thème en utilisant “shareasale” qui est un réseau marketing d’affiliation:

Astra wpformation code affilié

Qu’est-ce qu’un lien affilié? 

Un lien d’affiliation permet à une personne ou à une organisation de profiter de la recommandation d’un produit en obtenant une commission.

 

Quelles sont les règles de WordPress.org sur la question de l’affiliation dans un thème?

Depuis 18 mois, la commission qui évalue les thèmes sur WordPress.org  avait déclaré que les thèmes présent sur wordpress.org ne pouvait pas utiliser des lien ou URL affiliés. Ceci avait été débattu sur Slack et sur le blog WordPress pendant des semaines.

 

Situation au 17 Aout 2020:

Le thème est finalement de retour sur le repo WordPress.

astra wpformation repo

 

Sujay Pawar le fondateur d’Astra a déclaré:

“Nous nous excusons. Ces balises/filtres d’affiliation ont été complètement supprimées dans la dernière mise à jour (le 13 août 2020).”

 

En revanche, je comprends la déception de certains utilisateurs et même la décision de l’équipe officielle de wordpress.org qui examinent les thèmes proposés sur le repo (TRT team). Peut-être qu’Astra aurait du mettre seulement des liens affiliés dans leur version Pro et informer leurs clients de cette pratique afin d’éviter une perte de confiance. Dans certains pays comme les USA, si un auteur utilise des liens affiliés, alors ils doivent être clairement indiqués.

 

2. Qui est derrière Astra? L’entreprise innovante Brainstorm Force

L’entreprise derrière Astra est Brainstorm Force, une société Indienne créée en 2009 qui comporte à présent plus de 70 employés. Brainstorm Force propose plusieurs produits WordPress innovants qui sont utilisés sur plus de 2 millions de sites en 2020, ce qui constitue tout de même un gage de sérieux.

Savez-vous pourquoi Brainstorm Force a choisit le nom “Astra”? Cela signifie “une arme” en Sanskrit et en hindi. En grec, cela veut dire “étoile”. Donc Brainstorm définissent leur thème comme étant une étoile montante mais aussi une arme ou un outil très utile dans le monde du design.

Avant de se lancer dans la création du thème en 2017, Brainstorm développait des sites internets pour des clients. C’est grâce à leur expérience qu’ils ont pu identifier ce qui “manquait” à l’écosystème WordPress, et c’est de là qu’est né Astra.

 

3. Customization et personnalisation du thème:

Depuis le tableau de bord WordPress, l’interface des options d’Astra est plutôt claire.

Les réglages dans la version gratuite d’Astra: 

Il y a une première partie pour les réglages de l’outil de personnalisation:

  • Changer le logo
  • Customiser les polices et les couleurs
  • Changer la mise en page des pages ou du blog
  • Les options des colonnes latérales (sidebar),
  • Réglage du footer et de l’en tête

Chaque option s’ouvre dans le “customiseur” natif de WordPress, voici un exemple pour les couleurs:

astra wpformation couleur

C’est pratique car cela évite de lancer plusieurs menus différents. Tout est regroupé dans le même menu:

astra wpformation

Ne vous fiez pas aux apparences, même si le menu ci-dessus ressemble au menu de personnalisation natif de WordPress, Astra propose d’aller plus loin dans les options. Voici les meilleures:

  • La typographie de base. Astra wpformation typographie
  • Choisir la largeur du logo et le mettre en mode responsive: choisir si vous le voulez sur mobile ou pas.
  • Un fil d’Ariane peut-être inséré dans l’en-tête, ou juste après le titre de vos publications, ce qui permet au visiteur de votre site de savoir où il est dans la navigation.astra wpformation fil d'ariane
  • La fonction glissez-déposez pour le blog et la structure de l’article: astra wpformation fonction blog avancée
  • Personnalisation complète des boutons (ou call-to-action)
  • Contrôle total sur la mise en page:astra wpformation mise en page

 

4. Les extensions Astra Gratuites

Lorsque vous installerez Astra, vous aurez accès à 9 extensions gratuites. Le principe est le même: vous activez/désactivez ceux de votre choix.

astra wpformation extension gratuite

1.Import / Export Customizer Settings

Comme l’on vient de le voir, le personnalisateur de thème Astra propose plusieurs paramètres pour la disposition des en-têtes / pieds de page, sidebar, options de blog et bien plus encore. Ces paramètres peuvent être déplacés facilement vers d’autres sites Astra avec le plugin Import / Export Customizer Settings. Cela vous permettra d’éviter un travail répétitif et d’importer facilement vos settings.

 

2.Astra customizer reset

Le plugin Astra Customizer Reset réinitialise tous les paramètres de personnalisation en un seul clic. Cela est utile lorsque vous testez diverses options de personnalisation pour explorer le thème et que vous souhaitez ensuite recommencer de zéro ou que vous souhaitez définir un nouveau design pour le site. Le bouton de réinitialisation vous ramènera à l’état initial avec le thème. Cela n’affectera pas votre contenu (texte et images) mais seulement les paramètres de personnalisation tels que les layouts, la typographie, les couleurs ou encore les boutons.

 

3.Customizer search

Le plugin permet d’ajouter la fonction “rechercher” à votre customisateur WordPress accessible depuis “Apparence > Personnaliser”.  Super pratique si vous recherchez une option spéciale:

astra wpformation fonction recherche

4.Astra Bulk Edit

Utile pour modifier les paramètres Meta, d’Astra sur un certain nombre de pages ou d’articles à la fois.

Quelques exemples que j’aime bien:

  • Activer/désactiver le titre de la page à partir de plusieurs pages.
  • Mettre toutes les pages en pleine largeur, d’un coup.

 

5. Astra Widgets

Comme son nom l’indique, il vous permet d’ajouter votre propre widget et d’ajouter votre adresse, un widget de réseaux sociaux et des icônes pour créer une liste. Chaque widget peut être ajouter dans votre en-tête, barre latérale, pied de page, etc. sur votre site Web.

6. Custom Fonts et Custom Adobe Fonts

Ces plugins vous aide à importer facilement des fichiers de polices personnalisées (woff2, woff, ttf, svg, eot, otf) dans votre site Web WordPress. Si votre fond vient d’adobe, alors installez “Custom Adobe Fonts”.

7. Sidebar Manager

Idéal pour créer une sidebar (ou barre latérale) sur mesure, et choisir où l’afficher. Ceci peut-être utile pour votre blog, si vous souhaitez ajouter un widget avec votre biographie par exemple.

8. UAG Ultimate Add-ons for Gutenberg (Sans doute un de mes préféré)

Si vous utilisez l’éditeur WordPress (Gutenberg) comme moi alors vous apprécierez Ultimate Addons for Gutenberg, une bibliothèque de blocs qui vous permet par exemple de:

  • Ajouter une price list
  • Ajouter un membre d’une équipe avec les icônes Linkedin
  • Créer un menu pour un site de restaurant
  • (…)

Je vous invite vraiment à voir ces blocs en actions directement sur leur site qui est une source d’inspiration.

 

Pour un thème gratuit, les options de personnalisation sont déjà pas mal, mais vous risquez de vous sentir un peu muselés. Je vous recommande de tester la version premium qui débloquera de nombreux modules et intégrations. Il y a 18 modules Pro supplémentaires pour personnaliser votre site qui sont tout autant modulables: c’est à vous de choisir si vous voulez les activer ou les désactiver. C’est vraiment top pour la performance de votre site vu qu’il chargera moins de ressources par défaut. Du côté d’Astra, cela leur laisse l’opportunité d’ajouter autant de modules (ou d’intégrations) qu’ils le désirent dans le futur.

Passons ces extensions Pro en revue.

 

5. Les extensions Astra Pro:

Avant tout de chose, Astra Pro n’est pas un thème mais une extension au prix de 59 USD par an (Il y a une promo à 47 USD en ce moment).

Astra wpformation version pro

Téléversez votre plugin premium depuis la section “Extensions” de votre tableau de bord WordPress puis renseignez votre licence Astra. Vous aurez ensuite accès aux fonctionnalités Pro.

Voici les modules dans la version Pro que vous pouvez activer ou désactiver: 

  • Couleurs & arrière-plan: pour chaque partie du site
  • Typographie (définir une police différente pour les menus, les modules…)
  • Espacement
  • Blog Pro (encore plus de flexibilité que dans la version free)
  • En-tête mobile
  • Sections d’en-tête
  • Menu de navigation
  • En-tête épinglé
  • En-têtes de page
  • Mises en page personnalisées
  • Mises en page du site
  • Widgets de pied de page
  • Défilement vers le haut
  • WooCommerce (nécessite Woocommerce.)
  • Easy Digital Downloads (nécessite EDD)
  • LearnDash (nécessite LearnDash)
  • Lifter LMS (nécessite LifterLMS)
  • Marque blanche

 

Passons en revue les plus importants et ceux qui pour moi justifient l’upgrade vers Astra Pro.

1. Le contrôle sur la typographie au cas par cas:

Vous aurez la possibilité de modifiez le look-and-feel de chaque partie du site:  navigation, un bouton en particulier, un titre sur la page numéro 4, un lien du footer… Cette flexibilité sur la taille, couleur et type de police est incroyable.

astra wpformation footer

2. Marque Blanche

Si vous êtes un freelance ou une agence, alors vous aimerez sûrement cette option. Le module Marque Blanche permet de renommer le thème et les plugins par votre nom (ou votre marque.)

Astra aura “disparu” pour laisser place à votre propre empreinte, ce qui peut être appréciable:

astra wpformation marque blanche

3. Blog Pro

Avec ce module vous pourrez personnaliser votre page de blog (celle qui liste tout vos articles) qui est une archive WordPress. Vous pourrez allez jusqu’à une grille de 4 colonnes, ajouter de l’espace entre les articles.

astra wpformation blog

  • L’option “Author Info”, qui permet d’ajouter votre bio en quelque ligne.
  • La possibilité de changer la largeur d’affichage du contenu du blog:
  • Changer la date avec un cercle ou carré pour qu’elle soit bien visible. Il en est de même pour la pagination.
  • Changer facilement la taille de la “featured image” (image à la une)
  • L’option Infinite scroll (défilement infini) qui permet d’avoir un effet “sans fin” comme sur Pinterest:

4. Le menu de la navigation: le mega menu

Si vous possédez un gros site e-commerce ou encore un site internet avec beaucoup d’information à hiérarchiser et organiser, alors un mega menu va vous être utile. Je vous invite aussi à lire les best-practices pour créer un menu WordPress efficace.

astra wpformation megamenu

Avec ce module Pro, vous allez pouvoir créer des colonnes, ajouter du texte, des liens, des images et même changer l’arrière plan du menu. Ceci est utile si vous souhaitez par exemple mettre l’icône d’un hotel au lieu du mot “hôtel”.

5. En-tête épinglée, mobile et transparent

Créer un en-tête mobile en ajoutant 4 styles différents pour votre menu :

  • Le style “dropdown” (le menu apparaît au clic sous l’icône de menu)
  • “fullscreen” (le plein-écran)
  • “flyout” (le menu apparaît au clic en plein écran situé sous l’icône du menu),
  • “no toggle” (pas d’icône hamburger).

Vous avez toujours le choix d’afficher votre en-tête sur le mobile ou pas:

astra wpformation responsive

6. Le prix

Par an, voici le prix d’Astra Pro, Mini Agency Bundle et Agency Bundle. Tout dépend si vous utilisez un page builder (Elementor ou Beaver Builder) alors je vous conseille le mini-agency bundle car vous aurez accès à l’un des add-on.

astra wpformation pricing

Voici le prix pour les licences à vie:

astra wpformation license annuelle

7. Astra avec WooCommerce: le combo gagnant pour votre boutique

Si vous n’êtes pas familier avec WooCommerce ou si vous désirez vous perfectionner, pensez aux formations de WPFormation.

Voici les fonctionnalités Astra spécifiques à WooCommerce qui me paraissent le plus important:

  • Le thème est rapide, votre site ne sera pas lent ce qui encouragera les clients à rester sur votre site
  • Le thème est customisable, donc vous pouvez faire rayonner votre marque
  • Le scroll infini pour vos catalogues produits par exemple
  • Grille Layout: disposez vos produits par catégories et sous forme de grille de votre choix
  • Off-canvas sidebar: une barre latérale pour insérer des filtres et autres outils qui amélioreront l’experience utilisateur
  • La fonction “Quick View” (Vue rapide) pour ouvrir un produit sans charger une nouvelle page
  • Dropdown cart (Le panier qui s’ouvre depuis n’importe où sans recharger la page)
  • Ajouter une étiquette “Sale” ou “Promo” sur le produit de votre choix et personnaliser cette étiquette
  • Checkout options: personnaliser votre processus d’achat avec deux ou trois étapes par exemple.

 

8. Les starter-templates: demos prêtes à l’emploi et une belle adaptation aux constructeurs de pages

1.Téleversez l’extension “Starter Templates” depuis wordpress.org

2.Depuis le site officiel d’Astra, cliquez sur “Starter Templates”:

astra wpformation starter themes

Vous avez ainsi le choix de rechercher un template en fonction de votre constructeur de page préféré: Elementor, Beaver Builder, Brizy et Gutenberg.

astra wpformation

Vous pouvez rechercher par mots clés tels que “restaurant”:

wp formation astra mot clé

 

3. Ensuite, je peux sélectionner 3 templates. Notons que les deux premiers seront seulement accessibles si vous avez optez pour le plan “agency”. En effet, en fonction du plan que vous choisirez, Astra Free, Astra Pro ou le bundle Agency, vous aurez accès aux démos suivantes:

 

Nombre de démos disponibles
Astra gratuit 20+
Astra pro 20+ (les mêmes qu’en version gratuite)
Astra Agency ou mini Agency 55+

 

4.Pour visualiser la démo cliquez sur le bouton “visit full site”:

astra wpformation

5.Pour activer la démo, allez dans votre tableau de bord WordPress > Extensions > Starter Templates puis cliquez sur “See Library”:

astra wpformation library

6.D’ici vous pouvez parcourir la librairie et rechercher votre template idéal:

astra wpformation librairie de modele astra

7.Cliquez sur “Import Complete Site” ou choisissez seulement une page de votre choix.

astra wpformation

En une minute, votre nouveau site est installé et il est prêt à être entièrement customisé avec Elementor (free ou pro) ou un autre constructeur de page de votre choix présent dans la liste.

Conclusion

En conclusion, la version gratuite d’Astra est déjà très intéressante surtout si vous avez Elementor Pro ou un autre constructeur de page premium. En revanche si vous avez un constructeur de page assez limité, dans ce cas, je vous conseille la version mini Agency d’Astra pour accéder à plus d’options, de personnalisations et de démos.

Et pour ceux intéressés, voici un showcase utilisant, Elementor (free) et Astra (en free) pour un traiteur. Le template utilisé était à la base pour un restaurant mais il a été retravaillé pour un traiteur Niçois. Posez nous toute vos questions en commentaires et si vous avez des question pour Sujay, le fondateur d’Astra que je connais bien, je serai ravie de les lui transmettre.

wpformation
NE MANQUEZ PLUS RIEN !
Inscrivez-vous pour recevoir le meilleur de WordPress dans votre boîte de réception, chaque mois.

Nous ne spammons pas ! Consultez notre politique de confidentialité pour plus d’informations.

A propos de l'auteur...

Avatar de Marine Larmier

Marine Larmier

Déjà 10 ans que je baigne dans l'univers WordPress. Riche de plusieurs expériences web, j'ai travaillé chez Nok Airlines en Thailande, chez Amadeus, puis 4 ans en remote chez WPML tout en parcourant le monde. Basée entre la France et la Nouvelle-Zélande, j’aime les voyages, le yoga, les couchers de soleil et les cuisines du monde.

7 commentaires pertinents à ce jour ;)

  • Merci pour cette présentation, ça fait envie ! En revanche le site du traiteur présenté en fin d’article est noté F sur GMetrix… ce n’est vraiment pas une bonne performance ! Pourtant Astra est présenté comme très léger. Comment expliquer ce problème ?
    merci.

  • Bonjour Hélène, ici le pb se situe au niveau du serveur.
    Ce n’est en rien lié au thème mais à la mauvais utilisation, qui en est faite.
    Reduce initial server response time
    Root document took 1,160 ms => Keep the server response time for the main document short because all other requests depend on it.

  • Merci de votre réponse. Effectivement, le serveur joue mais il n’y a pas que ça. Elementor semble bien ralentir le site. Peut-être vaut-il mieux utiliser Astra seul sans Elementor, puisqu’il semble déjà bien complet comme ça…

  • Bonjour,
    Astra est léger …mais si je compare à d’autres thèmes, je le trouve peu intuitif outre l’absence de traduction.
    J’ai acheté la version pro et je trouve que le plus apporté à ce prix est minime. Les aides en ligne sont toutes en anglais. Pas toujours simple…il faut tout de même pas mal manipuler pour un résultat pas forcément épatant..
    Cordialement

  • Du coup au final c’est du gratuit qui au final avec un abonnement annuel qui coute plus cher que des thèmes comme Avada avec un paiement unique ! Trop fort…

  • Bonjour,
    question bête pour le thème Astra. Sauriez-vous comment on enlève l’option zoom sur les fiches produits ? Merci de votre aide

  • Bonjour Vincent,
    Il n’y a jamais de “mauvaise” question :-). Si vous utilisez la version gratuite d’Astra, alors vous ne pouvez pas enlever le zoom via les settings; il n’y a pas d’option dans le thème ou dans WooCommerce. Il va falloir ajouter un peu de PHP pour désactivé le zoom. Dans ce forum vous trouverez le code snippet à ajouter dans votre fichier php pour désactiver le zoom: https://generatepress.com/forums/topic/remove-zoom-effect-on-woocommerce-product-image/ Les devs font la distinction entre une seule image ou si vous avez une gallerie pour chaque produit. Est-ce que cela vous aide?

    Si vous utilisez l’add-on payant d’Astra “Single Product WooCommerce” alors il y a simplement une case à décocher comme expliqué ici: https://wpastra.com/docs/single-product-woocommerce/ (descendez à la section Enable/Disable Image Zoom Effect)