Comment créer un site WordPress d’une page en moins d’une heure en utilisant le thème Astra
Cette vidéo vous montre comment vous pouvez rapidement mettre en place un site Web d’une page simple mais élégant en moins d’une heure, en utilisant une combinaison du thème Astra et du plug-in Stackable Gutenberg blocks. La vidéo ci-dessous vous guide tout au long du processus, étape par étape, d’une installation WordPress vierge à un site Web fini, et il y a également des instructions écrites sous la vidéo.
Installez WordPress sur votre domaine
Ce tutoriel suppose que vous avez déjà un domaine et un hébergement et que vous avez installé WordPress sur votre domaine.
Nous avons des informations sur la façon d’acheter un domaine et d’organiser l’hébergement dans cet article de blog ici
Installation du thème Astra et des plugins nécessaires
Une fois WordPress installé, l’étape suivante consiste à installer Astra, qui est le thème que nous utilisons dans cette démo. Vous pouvez soit télécharger le thème directement depuis le site Web des développeurs ici, soit l’installer directement via votre backend WordPress.
Pour faire ça:-
Allez dans le menu Apparence sur le côté gauche de votre zone d’administration et sélectionnez Thèmes
Cliquez sur le bouton Ajouter nouveau dans le coin supérieur droit à côté de l’en-tête Thèmes
Recherchez Astra dans la zone des thèmes de recherche
Cliquez sur Installer puis sur Activer
Vous êtes maintenant passé du thème par défaut de WordPress au thème Astra
Nous utilisons deux plugins pour ce projet que vous devez installer au début. Pour faire ça:-
Allez dans le menu Plugins sur le côté gauche de la zone d’administration et sélectionnez Ajouter un nouveau
Le processus de recherche et d’installation de plugins est le même que le processus que vous venez d’utiliser pour installer votre thème.
Recherchez, installez et activez le plugin Stackable – Page Builder Gutenberg Blocks et le plugin myStickyMenu
Vous devriez alors avoir deux plugins installés selon l’image ci-dessous.
Création de votre page
Vous devez maintenant aller dans le menu Pages sur le côté gauche de votre zone d’administration et cliquer sur Toutes les pages . Vous verrez que WordPress a déjà configuré pour vous des pages par défaut que vous pouvez supprimer car vous ne les utiliserez pas pour ce projet.
Cochez la case à côté du nom de chaque page, puis déroulez le menu Actions groupées et sélectionnez Déplacer vers la corbeille.
Ensuite, vous devez créer une nouvelle page. Cliquez sur le bouton Ajouter nouveau en haut à côté de l’en- tête Pages . Une page vierge s’ouvrira avec le curseur clignotant dans la zone Ajouter un titre . Donnez à votre page le titre « Accueil » et cliquez sur le bouton Publier dans le coin supérieur droit.
Utilisez les options de personnalisation du thème pour gérer l’apparence de votre page
Assurez-vous que vous avez publié votre page. Allez maintenant dans le menu Apparence sur le côté gauche de la zone d’administration et sélectionnez Personnaliser.
Supprimer la barre latérale
Cliquez sur l’ option Barre latérale , puis utilisez le menu déroulant pour modifier votre mise en page par défaut sur Aucune barre latérale. Publiez cette modification en cliquant sur le bouton Publier , puis utilisez la flèche < pour revenir aux options générales de personnalisation .
Rendre la page pleine largeur
Allez dans le menu Global puis sélectionnez Conteneur puis utilisez le menu déroulant pour changer la mise en page en Pleine largeur / Étiré . Publiez cette modification, puis utilisez la flèche < pour revenir aux options générales de personnalisation .
Ajoutez votre logo dans l’en-tête
Dans le menu Personnaliser , sélectionnez Générateur d’en- tête , puis Titre et logo du site .
Cliquez sur Sélectionner un logo . Cela ouvrira votre médiathèque. Si votre logo est déjà ici, cliquez simplement dessus, puis cliquez sur Sélectionner . Recadrez l’image si vous en avez besoin ou cliquez simplement sur Ignorer le recadrage si elle est OK telle quelle. Utilisez le curseur Largeur du logo pour ajuster la taille du logo.
Si vous avez besoin de charger votre logo, une fois que vous êtes dans la médiathèque, passez à l’ onglet Télécharger des fichiers , puis cliquez sur Sélectionner des fichiers . Trouvez le logo sur votre ordinateur et chargez-le. C’est également une bonne occasion de charger d’autres images que vous souhaitez utiliser pour ce projet.
Si vous ne possédez pas déjà d’images appropriées, nous recommandons Unsplash comme une bonne source d’images de haute qualité et libres de droits. Il existe également un plugin appelé Instant Images que vous pouvez utiliser pour charger des images d’Unsplash directement sur votre site Web. Nous avons des instructions vidéo sur la façon de l’utiliser ici .
Si vous avez un favicon, vous pouvez le charger en utilisant le même processus via la section Icône du site en bas de la section Logo . Vous pouvez utiliser la bascule Afficher le titre du site pour activer ou désactiver le titre de votre site et l’empêcher de s’afficher dans votre en-tête si vous le souhaitez, et vous pouvez également modifier le libellé du titre du site si vous le souhaitez.
Configuration de votre page d’accueil
Le dernier changement que vous devez apporter dans la zone Personnaliser est de faire savoir à WordPress que la page que vous venez de configurer et appelée Accueil est en fait votre page d’accueil. Pour ce faire, accédez aux options Paramètres de la page d’accueil vers le bas du menu Personnaliser .
Par défaut, votre page d’accueil est configurée pour afficher vos derniers messages. Vous devriez changer cela pour que votre page d’accueil affiche une page statique. Cliquez ensuite sur le menu déroulant sous Page d’ accueil et sélectionnez Accueil.
Cliquez sur Publier , puis cliquez sur la croix dans le coin supérieur gauche pour quitter les options de personnalisation .
Ajouter un en-tête
L’étape suivante consiste à commencer à ajouter du contenu à votre page, en commençant par l’en-tête, comme indiqué dans l’image ci-dessous.
Survolez le bouton + dans le coin supérieur gauche et cliquez pour ajouter un nouveau bloc .
Vous serez présenté avec une liste de blocs possibles que vous pourriez ajouter. Faites défiler cette liste jusqu’à ce que vous arriviez à la section Empilable et sélectionnez Bibliothèque de conception dans les options, puis cliquez sur Ouvrir la bibliothèque de conception.
Ici, vous verrez tous les différents types de blocs préconçus que vous pouvez ajouter à votre page. Cela vaut la peine de jouer avec les options ici pour voir ce que vous aimez. Vous n’êtes certainement pas obligé de vous en tenir aux blocs que nous utilisons pour cette démo.
Le menu de gauche vous montre les différentes catégories de blocs disponibles. Cliquez sur Héros . Vous pouvez voir que certains sont marqués comme premium – vous aurez besoin d’un compte Stackable payant pour pouvoir les utiliser – mais les autres sont tous gratuits.
Pour cette démo, nous allons utiliser Elevate Hero One (faites défiler vers le bas pour le voir) – cliquez simplement dessus et il s’installera automatiquement sur votre page.
Vous pouvez ensuite utiliser les options de bloc sur le côté droit de la page pour personnaliser les aspects de l’apparence de ce bloc.
Dans les paramètres de bloc , cliquez sur la flèche déroulante à côté de l’ élément de menu Arrière -plan et faites défiler jusqu’à l’endroit où vous pouvez voir l’ image ou la vidéo d’arrière -plan . Cliquez sur l’image. Cela ouvrira votre bibliothèque multimédia à partir de laquelle vous pourrez soit sélectionner une image que vous avez déjà, soit en télécharger une nouvelle que vous souhaitez utiliser. Vous pouvez également utiliser une vidéo pour votre arrière-plan si vous le souhaitez.
Utilisez le curseur Intensité de la teinte du support d’arrière-plan pour réduire l’intensité de la teinte en place sur l’image d’arrière-plan si nécessaire.
Pour obtenir l’effet de parallaxe par lequel l’image reste immobile lorsque l’utilisateur fait défiler la page, activez la bascule Arrière-plan fixe .
Pour modifier les mots dans le titre et la description, cliquez simplement sur votre curseur dans la zone que vous souhaitez modifier et apportez les modifications que vous souhaitez apporter au libellé. Une fois que vous avez cliqué avec votre curseur sur le prochain que vous souhaitez modifier, vous verrez également des options de style pour ce titre à la fois au-dessus du bloc et également sur le côté droit de votre page.
En utilisant les options au-dessus de l’en-tête, vous pouvez modifier l’alignement du texte (à gauche, au centre ou à droite) ainsi qu’ajouter un style de base tel que le gras ou l’italique. Vous pouvez modifier le libellé simplement en écrivant dessus ou dans la section Contenu sur le côté droit. Faites défiler les options sur le côté droit et vous trouverez la couleur du texte où vous pouvez changer la couleur de votre en-tête pour mieux l’adapter à votre image. Dans cet exemple, nous avons centré le texte et l’avons mis en blanc.
Sous le titre principal, vous verrez que vous avez un paragraphe de texte. Vous pouvez modifier le contenu ici et le styler comme bon vous semble en utilisant la même méthode que pour l’en-tête ci-dessus, ou vous pouvez le supprimer complètement si vous n’en avez pas besoin. Pour ce faire, cliquez n’importe où sur le texte. Les options de style apparaîtront au-dessus du texte. Cliquez sur les trois points verticaux sur le côté droit, puis sélectionnez Supprimer le texte des options qui s’affichent.
Cliquez sur le texte du bouton et changez le libellé en Contactez-nous ou quelque chose de similaire.
Lorsque les gens cliquent sur le bouton, vous pouvez le configurer pour leur permettre d’envoyer un e-mail, donc plutôt que d’entrer une URL comme lien mis dans un lien mailto selon l’image ci-dessous. Si vous voulez que le bouton dirige les gens vers une autre page, mettez l’URL de la page dans la zone Lien .
Vous pouvez également utiliser les paramètres sur le côté droit ici pour changer la couleur du bouton et la couleur du texte si vous le souhaitez.
Si vous souhaitez centrer le bouton sur votre page, cliquez à droite du bouton afin d’être dans le bloc de groupe de boutons plutôt que dans le bloc de boutons lui-même. Vous pouvez ensuite utiliser les options au-dessus du groupe de boutons ou sur le côté droit pour modifier l’alignement des boutons, comme indiqué dans l’image ci-dessous.
Le dernier changement que vous devez apporter est de dire à WordPress de ne pas afficher le mot Accueil en haut de la page. Pour ce faire, vous devez cliquer sur l’ icône Paramètres Astra dans le coin supérieur droit (voir l’image ci-dessous) pour afficher les paramètres qui s’appliquent à l’ensemble de la page, plutôt qu’au bloc dans lequel vous vous trouvez actuellement, puis faites défiler vers le bas et dans les éléments de la page, activez Désactiver le titre afin qu’il soit activé.
Assurez-vous d’avoir enregistré toutes vos modifications en cliquant sur le bouton Mettre à jour dans le coin supérieur droit. Notez que si vous enregistrez vos modifications pour la première fois, ce bouton s’appellera Publier . Il passe en mise à jour une fois que votre page est déjà publiée. Pour afficher votre page une fois que vous l’avez enregistrée, cliquez sur Aperçu . Cela ouvrira votre page dans un nouvel onglet, vous permettant de basculer facilement entre le backend où vous apportez des modifications et le frontend où vous pouvez voir l’effet de ces modifications.
Ajout de la section « Ce que nous faisons »
Passez votre souris sous votre premier bloc jusqu’à ce que l’icône + ajouter un bloc apparaisse, ou cliquez sur l’icône + ajouter un bloc dans le coin supérieur gauche. L’une ou l’autre option ajoutera un nouveau bloc sous votre nouveau bloc d’en-tête. Une fois de plus, vous devez sélectionner la bibliothèque de conception empilable. Cette fois, vous allez ajouter une grille de fonctionnalités. Cliquez sur Feature et faites défiler vers le bas jusqu’à ce que vous voyiez Feature Grid Block / Heights feature 2 . Cliquez dessus pour le déposer sur votre page.
Ce bloc fonctionne selon les mêmes principes que le bloc Header que vous venez d’installer. Il existe des options de bloc sur le côté droit de la page qui vous permettent de personnaliser les aspects de l’apparence du bloc et vous pouvez également cliquer directement sur certains des éléments du bloc pour les modifier. Si vous voyez toujours les paramètres de la page Astra sur le côté droit de la page, vous devez cliquer sur l’étoile dans le coin supérieur droit pour passer des paramètres Astra aux paramètres de bloc.
Cliquez sur le texte du titre en haut du bloc et remplacez-le par En savoir plus sur ce que nous faisons ou sur la formulation de votre choix.
Modifiez le texte de description sous le titre en utilisant la même méthode. Vous pouvez également supprimer des éléments si vous ne comptez pas les utiliser.
J’ai supprimé tous les boutons dans mon exemple ci-dessous car il s’agit d’un site Web d’une page, il n’y a donc pas d’autres pages vers lesquelles nous pouvons nous connecter. Pour ce faire, j’ai cliqué sur à côté de chaque bouton et sélectionné Supprimer le groupe de boutons dans les options. Il est important de cliquer à côté du bouton plutôt que sur le bouton lui-même si vous voulez le faire.
Pour ajouter l’ombre derrière chacune des sections, cliquez en haut de chaque colonne. Cela vous montre les paramètres des colonnes. Dans les paramètres de style , accédez à Bordures et ombre du conteneur et faites glisser le curseur Ombre / contour sur 5.
Une fois que vous êtes satisfait de vos modifications, assurez-vous de cliquer sur Mettre à jour.
Ajoutez votre bloc Meet the Team
Avant d’ajouter le bloc suivant, nous allons ajouter un bloc Spacer pour mettre de l’espace entre nos blocs. Pour ce faire, cliquez sur le bouton + en bas de la page et entrez Spacer dans le champ de recherche. Sélectionnez la première option. Par défaut, il insérera 100 pixels d’espace, mais vous pouvez le modifier en plus ou en moins selon vos préférences. Ici, j’ai ajouté 50 pixels d’espace.
WordPress vous permet d’intégrer un bloc dans un autre (ce qui est essentiellement ce qu’est le bloc empilable ci-dessus). Pour le bloc rencontre de l’équipe, c’est ce que nous allons faire. Nous allons d’abord déposer un conteneur dans notre page, puis mettre un titre dans ce conteneur, puis ajouter des colonnes avec un membre de l’équipe dans chaque colonne.
Pour commencer, cliquez sur le + pour ajouter un nouveau bloc et recherchez le bloc Colonnes / Conteneurs et sélectionnez une seule colonne de 100 largeur.
Cela ajoute un conteneur vide dans votre page. Vous ajouterez vos prochains blocs dans ce conteneur plutôt qu’en dessous. Regardez la capture d’écran ci-dessous. Vous pouvez voir l’espaceur de 50 pixels que nous avons ajouté. En dessous, la boîte bleue montre le contour du conteneur que nous venons d’ajouter. Le signe plus à l’intérieur de cette boîte bleue ajoutera un autre bloc dans le conteneur. Le signe plus à l’extérieur du bas du bloc sur le côté droit ajoutera un autre bloc à l’extérieur du conteneur.
Avant de passer à l’ajout de contenu dans le conteneur, nous lui donnerons un arrière-plan et définirons cet arrière-plan pour qu’il couvre toute la largeur de l’écran. Regardez les options de bloc sur le côté droit de l’écran et basculez la bascule d’ arrière -plan sur « on ». Vous pouvez ensuite définir une couleur pour votre arrière-plan ou bien choisir une image ou une vidéo si vous le souhaitez. Nous allons utiliser le gris par défaut, mais vous pouvez le changer en ce que vous voulez.
Pour rendre cet arrière-plan plein, utilisez les options de bloc au-dessus du bloc et sélectionnez pleine largeur dans les options d’alignement.
L’étape suivante consiste à ajouter un titre pour votre section Rencontrez l’équipe. Pour ce faire, cliquez sur le + dans votre conteneur pour ajouter un nouveau bloc et recherchez un bloc d’en- tête . Choisissez la première option. Écrivez votre en-tête, puis utilisez les options au-dessus du bloc d’en-tête pour l’aligner au centre.
Ensuite, nous allons ajouter des colonnes dans notre conteneur. Chacune de ces colonnes contiendra un membre de l’équipe, vous devez donc ajouter le même nombre de colonnes que de membres de l’équipe.
Pour ce faire, nous allons ajouter un autre bloc directement sous notre rubrique. Cliquez sur la rubrique « Rencontrez l’équipe ». Parmi les options qui apparaissent ci-dessus, cliquez sur les trois points à droite et sélectionnez Insérer après . Cela vous donnera alors la possibilité d’ajouter un autre bloc dans votre conteneur. Cliquez sur le + pour ajouter un bloc dans votre conteneur et sélectionnez un autre bloc Colonnes / conteneurs . Définissez celui-ci pour qu’il ait trois colonnes (ou le nombre de colonnes dont vous avez besoin).
Cela vous donne alors trois colonnes avec un + pour vous permettre d’ajouter un autre bloc dans chaque colonne. Cliquez sur le + dans la première colonne et recherchez et ajoutez un bloc de membre de l’équipe et cliquez sur default .
Répétez ce processus pour chacune de vos colonnes, afin que chaque colonne contienne un bloc de membre d’équipe.
Chaque bloc de membre d’équipe se compose d’une série d’autres blocs – un bloc d’image, des titres, des paragraphes et des boutons. Chacun d’eux peut être stylé et modifié de la même manière que les blocs que nous avons déjà utilisés. Si vous ne souhaitez pas utiliser un bloc particulier (la position, par exemple), vous pouvez simplement le supprimer. Chacun de ces blocs a des options de style au-dessus et sur le côté droit de la page. Cliquez sur les blocs et explorez les options au fur et à mesure que vous ajoutez les détails des membres de votre équipe.
Ajout d’une section Témoignages
Ajoutez un autre espaceur de 50 pixels sous votre bloc Meet the Team (faites attention à l’ajouter sous le bloc plutôt qu’à l’intérieur). Cliquez sur le + pour ajouter un bloc sous l’espaceur. Ouvrez la bibliothèque de conceptions empilables, faites défiler vers le bas pour afficher les blocs Témoignage et sélectionnez Elevate Testimonial 1 .
En utilisant le même processus qu’avant, copiez le texte factice avec vos témoignages et ajoutez les noms et les postes. Si vous ne souhaitez pas utiliser le champ de nom ou de position, vous pouvez le supprimer.
Ajouter le bloc Contactez-nous
Ajoutez un autre bloc d’espacement sous le bloc de témoignages en mettant 50 pixels d’espace.
Ouvrez la bibliothèque de conception empilable et affichez les blocs de fonctionnalités . Nous utilisons Elevate Feature 1 pour être notre bloc Contactez-nous, installez-le donc sur votre page. En utilisant le même processus que pour les blocs précédents, apportez les modifications suivantes :
Cliquez sur l’image sur le côté gauche et remplacez-la par l’image que vous préférez utiliser
Cliquez sur les éléments de texte et modifiez le libellé comme vous le souhaitez
Cliquez sur le bouton et ajoutez un autre lien mailto afin que les personnes qui cliquent dessus puissent vous envoyer immédiatement un e-mail, comme indiqué dans l’image ci-dessous
Ajoutez un autre bloc d’espacement de 50px sous le bloc Feature
Publiez vos modifications
Modification du texte du pied de page
Actuellement, votre pied de page contient du texte par défaut – un avis de droit d’auteur et des informations sur le thème utilisé par le site. Vous voudrez probablement conserver l’avis de droit d’auteur, mais vous voudrez peut-être supprimer les informations sur le thème.
Pour ce faire, allez dans le menu Apparence sur le côté gauche de votre page et sélectionnez Personnaliser. Une fois que vous êtes dans le menu Personnaliser , faites défiler vers le bas pour cliquer sur Footer Builder , puis sélectionnez Copyright . C’est ici que vous pouvez modifier le texte qui apparaît dans votre pied de page. Vous pouvez simplement supprimer les informations sur le thème de la section 1 et laisser l’avis de droit d’auteur inchangé, puis cliquer sur Publier pour vous assurer que cette modification est enregistrée, puis quitter la zone Personnaliser .
Construire le menu
Lorsque les utilisateurs cliquent sur les éléments du menu, plutôt que d’être redirigés vers une nouvelle page, ils sont déplacés vers la section appropriée. Il y a deux choses que nous devons faire ici. Tout d’abord, nous devons mettre des ancres dans la page, puis nous devons créer un menu qui renvoie à ces menus.
Mettre des ancres dans votre page
Pour ce faire, vous allez ajouter un bloc d’ancrage à chaque point auquel vous souhaitez que les personnes puissent accéder. Vous allez créer quatre blocs d’ancrage, un pour chacune des sections vers lesquelles vous voulez que les gens puissent sauter.
Commencez par remonter jusqu’à En savoir plus sur ce que nous faisons et cliquez sur l’en-tête. Dans les options sur le côté droit, sélectionnez l’ onglet Avancé , puis faites défiler jusqu’au menu déroulant Avancé . Dans la zone d’ancrage HTML , tapez about et update pour enregistrer votre modification.
Répétez ce processus pour ajouter trois autres ancres à chacune des trois sections restantes. Donnez-leur les noms suivants :
équipe
témoignages
prendre contact
Assurez-vous de publier vos modifications au fur et à mesure.
Construire votre menu
La dernière étape consiste ensuite à créer le menu et à créer un lien vers les ancres que vous venez de créer.
Allez dans le menu Apparence et sélectionnez Menus .
Appelez votre menu Menu principal, puis cochez la case à côté de Afficher l’emplacement pour indiquer à WordPress que ce sera votre menu principal. Cliquez sur Créer un menu pour enregistrer votre menu.
Ensuite, vous allez ajouter les liens vers les ancres que vous avez créées sur votre page.
Déroulez les liens personnalisés sur le côté gauche
Dans la zone URL , entrez le nom de votre première ancre avec un dièse devant, par exemple #about – c’est là que vous définissez la chose à lier
Dans la zone de texte Lien , entrez les mots que vous souhaitez voir apparaître dans le menu, donc quelque chose comme À propos de nous
Cliquez sur Ajouter au menu
Répétez ce processus pour les trois liens d’ancrage restants et ajoutez chacun au menu
Assurez-vous d’avoir coché la case sous Paramètres du menu qui définit l’emplacement d’affichage sur le menu principal
Une fois que vous avez terminé, assurez-vous de cliquer sur le menu Enregistrer
Rendre le menu collant
La dernière chose que nous devons faire est d’utiliser les paramètres du plugin myStickyMenu pour que le menu reste en haut de la page lorsque quelqu’un défile. Lorsque vous avez installé ce plugin, il a ajouté un nouvel élément à votre menu d’administration sur le côté gauche de votre écran. Cliquez sur myStickymenu puis sur Paramètres du menu Sticky .
Dans les paramètres, activez le menu collant, puis faites défiler vers le bas et enregistrez cette modification. C’est tout ce que vous devez faire. Vous devrez peut-être actualiser la page avant que le menu ne s’affiche.
Prochaines étapes
Nous espérons vivement que vous avez trouvé ce tutoriel utile. Nous avons d’autres ressources sur notre site Web qui pourraient également vous être utiles.
Dans ce didacticiel gratuit sur le thème Astra WordPress.
Je vais vous montrer comment créer un site Web WordPress professionnel.
Ajout d’un formulaire de contact à notre site Web.
01:00:05
Ajout de Google Maps à notre site Web.
01:03:37
Mise à jour de la zone de pied de page WordPress.
01:06:56
Mise à jour du bouton « Call to Action » (dans le menu)
01:08:47
Un autre tutoriel.
Si vous êtes nouveau sur WordPress, certaines des choses ci-dessus peuvent sembler déroutantes.
Mais ne vous inquiétez pas, tout est plus facile qu’il n’y paraît.
Si vous devez créer un site Web kickass sur WordPress, ne cherchez pas plus loin que le thème Astra.
Astra est un joli thème WordPress qui est parfait pour tout type de site que vous cherchez à créer : blogs, boutiques en ligne, CV, portfolios, etc. Il vient des gens de Brainstorm Force, un pionnier dans la conception de solutions WordPress A1 complètes.
Astra est relativement nouveau sur le marché, offrant des thèmes WordPress pour les constructeurs de sites de toutes sortes. Même ainsi, leur jeu est puissant et leur réputation ne cesse de croître.
De plus, ils ont reçu des prix de popularité parmi les 3 premiers (ou plus) surpassant les concurrents locaux dans un certain nombre de pays où les entreprises en ligne ont pris leur envol, notamment les États-Unis, la Chine et le Brésil.
Astra est connu pour être super léger, personnalisable, complet et très compatible avec les logiciels de création de sites Web populaires comme Elementor (plus à ce sujet plus tard). Toutes ces revues de thème Astra fracassantes ne sont pas seulement pour le spectacle – Astra tient le coup.
Mais quels sont exactement les avantages d’utiliser Astra ? Quelles sont les vraies différences entre Astra Pro et la version gratuite ? Plus important encore, comment Astra peut-il être utilisé pour s’intégrer à n’importe quel site Web pour une optimisation et une efficacité totales ?
Si vous vous êtes retrouvé à réfléchir à ces questions exactes, il n’y a plus de confusion – nous sommes venus remettre les pendules à l’heure !
L’article d’aujourd’hui porte sur le thème Astra WordPress et sur la raison pour laquelle quiconque souhaite sérieusement créer un site Web qui tue devrait l’utiliser !
Découvrez ci-dessous comment créer un site Web avec la vidéo du didacticiel Astra et Elementor; si vous êtes du genre à lire, nous vous soutenons avec notre examen approfondi et notre tutoriel écrit après cela !
Contenu
Thème Astra : principales fonctionnalités que vous adorerez
Les principales caractéristiques de l’examen du thème Astra sont les premières sur la liste. Astra est fourni avec de nombreuses fonctionnalités de support qui facilitent la gestion et la personnalisation de votre site WordPress. Ici, nous avons répertorié notre point de vue sur ces meilleures fonctionnalités et donné quelques détails sur les raisons pour lesquelles elles sont géniales.
Léger et rapide
Léger et rapide signifie essentiellement qu’Astra ne charge pas un tas de code sur votre site, ce qui ralentit essentiellement tout. C’est évidemment un gros avantage, vu que nous détestons tous attendre même 3 secondes pour que les pages se chargent alors que tant de sites Web merdiques nous donnent un accès rapide, fluide et instantané.
Il y a une raison pour laquelle toutes les grandes entreprises font un effort supplémentaire pour garantir un code complètement optimisé pour leurs sites. En fin de compte, un bon site Web doit être rapide et léger sur ses pieds…
Et Astra livre!
Ce qui précède sont les résultats de notre test de vitesse avec notre site de démonstration de tutoriel Astra (justinfowleyfitness.com).
Gardez à l’esprit:
Nous utilisons Elementor et WooCommerce sur ce site qui, même s’il s’agit de plugins solides et relativement légers, ajoute encore plus de temps de code/chargement qu’Astra ordinaire
Il n’y a absolument aucune optimisation des performances de WordPress de notre côté (c’est-à-dire pas de mise en cache ou d’optimisation d’image)
Cela signifie que 85 sur 100 ont obtenu un sacré vote de Pingdom en faveur de la rapidité d’Astra !
Voici ce qui rend le thème Astra si léger :
Pas de jQuery
Il s’agit d’un langage de programmation qui ralentit votre site en faisant des appels supplémentaires au serveur. C’est une fonction qui n’est pas nécessaire la plupart du temps et qui trop souvent ne fait qu’ajouter du poids à un site.
Alors que le plugin gratuit d’Astra n’utilise absolument pas jQuery, le thème Astra Pro dépend de jQuery. Cela étant dit, il surpasse toujours la plupart des autres thèmes premium du marché.
Moins de 50 Ko
En d’autres termes, le code d’Astra est super petit (ce qui est merveilleux). En règle générale, par exemple, vous voudriez que les images d’un site ne pèsent pas plus de 1 Mo. 50 Ko ne représentent que 5 % de cela ! N’oubliez pas qu’en matière de code de site Web, plus il est petit, mieux c’est.
Polices Google auto-hébergées
Les polices Google sont populaires car elles sont gratuites et ont une belle apparence. Il y a donc de fortes chances que vous souhaitiez utiliser une police Google sur votre site à un moment donné.
Avec le thème Astra, les polices Google sont chargées sur le serveur de votre site Web, de sorte que votre site n’aura pas à « parler » avec les serveurs Google avant de charger les polices (cela permet d’économiser des millisecondes de temps de chargement dans un monde où les millisecondes comptent).
[capture d’écran du test de vitesse avec notre site de démonstration de la vidéo]
Bien qu’Astra ne puisse pas vous garantir un site rapide, ils offrent tous les outils nécessaires pour que votre site fonctionne rapidement et en douceur. Néanmoins, veillez à utiliser des images optimisées sur votre site et à minimiser l’utilisation de plugins pour que les choses restent aussi fluides que possible.
De nombreuses options de personnalisation
Des outils de personnalisation flexibles vous donnent un contrôle total sur l’aspect cool (ou pas cool) de votre site. Astra se démarque de la concurrence car les options de personnalisation qu’elle offre aux utilisateurs sont presque innombrables.
Disons simplement que le défi ici est d’avoir trop de contrôle ! Cela étant dit, une tonne de liberté est exactement ce dont tout visionnaire créatif a besoin pour faire d’un concept de site Web tueur une réalité. Voici un avant-goût des excellentes options de personnalisation que vous obtenez avec le thème Astra :
Dispositions
Astra Pro offre une flexibilité de disposition avec le placement des conteneurs primaires et secondaires, l’espacement et le dimensionnement globaux, ainsi que l’intelligence de défilement.
La version non payante d’Astra permet une mise en page de conteneur par défaut magnifiquement conçue avec des paramètres de base de largeur et de type de mise en page.
Toutes les mises en page Astra vous permettent de modifier l’ensemble de votre site en une seule fois ou chaque page individuellement. Quelle que soit la mise en page que vous choisissez en fin de compte, vous ferez un choix judicieux.
Options d’en-tête et de pied de page
Contrairement à tant de thèmes WordPress sur le marché, Astra facilite la personnalisation de votre en-tête et de votre pied de page.
Avec Astra, vous pouvez ajouter plusieurs barres de pied de page et choisir si vous souhaitez, par exemple, du texte ou un widget, ou quoi que ce soit d’autre.
Les en-têtes transparents sont également une fonctionnalité qui, bien sûr, peut être personnalisée davantage avec des images ou des couleurs. Ils ont également des en-têtes collants qui restent en place tout en faisant défiler la page.
Barre latérale dédiée
Avec Astra, vous pouvez configurer les paramètres de votre barre latérale pour qu’ils soient les mêmes sur l’ensemble du site, mais également créer des barres latérales spécifiques à la page au cas où certaines de vos pages offriraient un contenu ou des fonctionnalités uniques.
Taille de police réactive
Ces polices sont suffisamment intelligentes pour changer automatiquement en fonction du site ou de l’appareil via lequel le site est consulté. Cela signifie que les utilisateurs d’appareils mobiles n’auront pas à faire face à des mots coupés ou à des lettres super étroites.
Cela donne aux visiteurs de votre site beaucoup plus de facilité lors de la navigation sur votre site… ce qui signifie également moins de gens fatigués qui quittent votre site après seulement quelques secondes, abaissant votre classement Google !
Google et polices personnalisées
Utilisez l’une des polices de Google à toute vitesse (c’est-à-dire sans ralentir votre site) ou personnalisez votre propre typographie comme bon vous semble.
Options de couleurs et d’arrière-plan
Le thème Astra vous permet de choisir la couleur ou l’image d’arrière-plan que vous souhaitez – cela vaut pour l’ensemble du site Web ou chaque page séparément, comme bon vous semble.
Articles Similaires
Cet avantage facilite l’ajout d’articles recommandés au bas de votre page. C’est une fonctionnalité d’embrayage à utiliser, par exemple, au bas d’un blog ou d’un hub d’informations pour rediriger le trafic vers davantage de votre beau contenu !
Faire cela par vous-même peut être une vraie douleur dans le cul et nécessiter un temps supplémentaire passé (que personne n’a) sur le codage personnalisé.
Widgets Astra
Les widgets fournissent une petite information sur un site Web, comme un article de presse ou la météo. Ils sont également utilisés pour prendre des notes ou remplir un formulaire.
Le thème Astra permet de placer des widgets dans la barre latérale, le pied de page ou le backend de n’importe quelle page. Cela rend l’ajout d’un formulaire de contact d’assistance, par exemple, facile à personnaliser et à publier
Générateur de page prêt
En plus de tous les morceaux appétissants que nous avons déjà mentionnés, il y a un autre avantage astucieux qui fait que le thème Astra se démarque parmi la foule.
L’équipe d’Astra sait ce qu’il faut pour lancer un site Web, et ils savent quels autres logiciels populaires sont couramment utilisés et en jeu ces jours-ci – ils sont branchés sur ce jeu, les amis.
Code léger + contenu pleine largeur
Le code léger signifie qu’Astra se charge rapidement, il est donc facile de l’exécuter avec d’autres plugins (y compris des constructeurs de pages comme Divi et Elementor ) sur votre site.
Avec un contenu pleine largeur, Astra peut couvrir toute la largeur de l’écran tout en travaillant avec des constructeurs de pages afin que vous puissiez personnaliser toute votre page avec eux (vs. ne pouvoir modifier que la colonne de contenu principale)… C’est quelque chose qui vient en pratique pour tout concepteur de sites Web.
Hautement compatible
Le thème Astra et le thème Astra pro sont compatibles avec tous les principaux constructeurs de pages sur le marché aujourd’hui, et cela amène leur jeu à un tout autre niveau !
Non seulement Astra est compatible avec Elementor , Divi , Beaver Builder , Brizy et l’éditeur Gutenberg par défaut de WordPress, mais il s’intègre également de manière transparente avec eux !
Ainsi, vous pouvez entièrement personnaliser vos pages sans limites ni conflits.
Sites de démarrage Astra
En continuant avec le sac de goodies d’Astra, n’oublions pas leurs dizaines de sites de démarrage. Ce sont des sites Web optimisés pour la conversion créés avec les meilleurs constructeurs de pages afin que vous obteniez un démarrage rapide et appétissant de votre site Web en quelques clics seulement.
Ces sites sont des packages complets, déjà conçus avec 10 pages prêtes à l’emploi pour démarrer.
Un site e-commerce époustouflant, parfait pour promouvoir vos produits et accessoires en ligne.
2. Académie LearnDash
Un site Web préfabriqué pour les cours en ligne et le matériel d’apprentissage premium qui fonctionne avec le plugin LearnDash WordPress – À la fois courtois et agréable, tout à la fois.
3. Aventure en plein air
Un site prêt à l’emploi avec le schéma parfait pour tous ceux qui aiment les aventures en plein air.
Plugins gratuits conçus uniquement pour Astra
Astra propose d’excellents plugins gratuits pour rendre la création de sites encore plus cool et plus facile. Nous avons répertorié 3 des plus malades qui valent vraiment la peine d’être téléchargés et ajoutés à votre arsenal :
Astra en vrac Modifier
Avec le plug-in Astra Bulk Edit, la modification des paramètres de métadonnées sur plusieurs pages ou publications est simple comme bonjour. Le plugin permet plusieurs modifications à la fois. De cette façon, vous n’aurez pas le mal de tête d’ouvrir chaque message un par un pour apporter des modifications.
Par exemple, avec le plugin Astra Bulk Edit, vous pouvez activer ou désactiver le titre de la page de plusieurs pages à la fois en un seul clic.
Personnaliser Astra Réinitialiser
Ce plugin permet aux administrateurs du site de réinitialiser tous les paramètres de personnalisation en un seul clic. Utilisez simplement le bouton « Réinitialiser » dans le personnalisateur pour restaurer toutes les options du thème Astra à un paramètre par défaut.
Les paramètres de personnalisation ne sont que des paramètres spécifiques tels que la typographie, les mises en page, les boutons, les couleurs, etc. – vous pouvez donc effectuer ces ajustements précis sans stress pour réinitialiser votre travail dans le pire des cas.
Importer/Exporter les paramètres de personnalisation
Le personnalisateur Astra est livré avec un tas de paramètres, y compris ceux que nous avons mentionnés précédemment, ainsi que des paramètres pour la disposition de l’en-tête/du pied de page, la barre latérale, la conception du blog et la couleur.
Le paramètre Import/Export Customizer vous permet de transporter vos paramètres d’un site Astra à un autre en un seul clic ! Cela vous fera gagner beaucoup de temps en sautant tout le travail répétitif pour réorganiser parfaitement vos paramètres de personnalisation pour chaque site.
Assistance de premier ordre
Enfin et surtout, Astra offre un soutien éprouvé à ceux qui les soutiennent. L’assistance est fournie à 3 niveaux – Prévente, gratuit et pro.
L’assistance avant-vente s’adresse aux clients potentiels (c’est-à-dire vous) qui ont des questions sur Astra avant d’acheter ou de s’engager. L’assistance gratuite et professionnelle est une assistance générale pour les utilisateurs, Astra Pro offrant une assistance plus directe et immédiate.
L’équipe d’assistance d’Astra est l’une des meilleures du secteur et voici pourquoi :
Tutoriels vidéo – Si vous ne savez pas comment procéder avec le thème Astra WordPress, consultez l’un de leurs nombreux didacticiels vidéo qui résolvent les dilemmes courants auxquels les constructeurs de sites sont confrontés lors de l’utilisation de la plate-forme.
Articles détaillés – Outre des vidéos utiles sur la page d’assistance d’Astra, vous trouverez des articles détaillés expliquant étape par étape comment affiner une chose ou l’autre dans le thème Astra. Tapez simplement un mot-clé et choisissez l’article qui répond à votre problème !
Assistance par e-mail – Rien ne vaut une réponse personnelle de quelqu’un qui connaît parfaitement un programme, de fond en comble. Profitez de l’assistance directe par e-mail d’Astra si vous rencontrez un problème que les charges d’informations pré-ajoutées ne peuvent pas résoudre.
La communauté Astra – Il existe une communauté d’utilisateurs super utiles, désireux de répondre aux questions et de partager leurs expériences avec d’autres utilisateurs d’Astra.
Nouvelles fonctionnalités de la version 3.7
Outre ce qui a été couvert ci-dessus, Astra prévoit de lancer de toutes nouvelles fonctionnalités pour sa dernière mise à jour, la version 3.7.
L’une de leurs fonctionnalités est leur nouvelle fonctionnalité de palette globale, qui vous donne plus de contrôle des couleurs sur tous les paramètres. Par exemple, avec cette fonctionnalité, vous pouvez changer la couleur de, par exemple, tous les boutons sur l’ensemble du site Web en un clic ou deux.
En parlant de boutons, un meilleur contrôle de la personnalisation des boutons est l’un des points de cette liste de fonctionnalités mise à jour.
Une autre fonctionnalité permet le même contrôle avec vos paramètres de couleur qu’avec vos paramètres de typographie. Donc, si vous le souhaitez, vous pouvez modifier la police de tous les en-têtes H2 sur l’ensemble de votre site Web.
Enfin, la nouvelle fonctionnalité d’arrière-plan du contenu permettra une couleur d’arrière-plan légèrement blanc cassé afin que vos messages ou articles d’un blanc pur ressortent encore plus !
Pour jeter un coup d’œil à toutes les dernières mises à jour d’Astra, rendez-vous ici .
Qu’est-ce que j’obtiens avec le thème Astra Pro ?
Pour tous ceux qui souhaitent sérieusement concevoir un site Web à succès avec un contrôle total et une sortie maximale, nous vous recommandons vivement d’utiliser le thème Astra Pro plutôt que le thème gratuit Astra. La liste des fonctionnalités supplémentaires est longue (trop longue pour être écrite ici).
Et à part les autres, ces quelques points rendent Astra pro totalement utile lors de la création et de la maintenance d’un site Web – et à mesure que de nouvelles fonctionnalités s’ajoutent au répertoire d’Astra, vous ne manquerez jamais les offres !
Plusieurs mises en page supplémentaires
Avoir plusieurs mises en page pour un meilleur contrôle du site est une évidence. Cette fonctionnalité à elle seule fait qu’Astra pro vaut l’investissement.
Il permet plusieurs en-têtes, pieds de page, barres latérales, widgets, articles recommandés, etc., le tout avec un contrôle de personnalisation complet ! De plus, vous pouvez organiser chaque page comme bon vous semble, donnant à votre site une polyvalence et un sentiment de sensibilité.
Outils de conception complets
Vous vous souvenez quand nous avons mentionné tous ces avantages de personnalisation offerts par Astra ? Eh bien, ce n’était qu’un avant-goût. La version gratuite d’Astra ne propose que quelques outils de conception tels que les couleurs, les arrière-plans, la typographie et l’espacement. Pro vous présente le buffet complet (l’une des rares fois où il est 100% acceptable de se bourrer).
Mais… il y a un BOATLOAD d’autres outils disponibles pour les utilisateurs du thème Astra pro ! De plus, les outils disponibles pour la version gratuite sont toujours là mais maintenant sous stéroïdes !
Astra pro donne aux utilisateurs un ultra sentiment de liberté qui est une vraie perte pour ceux qui n’en profitent pas.
Génération de fichiers CSS pour l’optimisation de la vitesse
Les fichiers CSS peuvent prendre le dessus sur un site Web, le ralentissant juste assez pour se sentir enlisé et obsolète.
Avec Astra pro , tous les fichiers CSS en ligne sont convertis en un fichier séparé où il est minifié (tous les espaces supplémentaires sont supprimés, ce qui le rend aussi petit que possible). En termes simples, ce processus optimise la vitesse d’un site Web.
Tout d’abord, tout le contenu du site Web est chargé, puis le CSS est chargé en haut de la page. Ce processus fera une différence notable dans l’apparence de votre site Web.
Intégration WooCommerce et LearnDash
WooCommerce est une extension WordPress qui vous permet de vendre des produits et de gérer les stocks depuis votre site.
Si vous souhaitez utiliser WooCommerce pour votre entreprise, vous aurez besoin du thème premium d’Astra pour faire avancer les choses.
LearnDash est une plate-forme LMS (système de gestion de l’apprentissage) qui vous permet de télécharger et de stocker d’autres contenus en ligne sur votre site.
Ainsi, par exemple, si vous avez un cours en ligne, vous pouvez offrir un accès spécial à toutes les informations sur vos cours qui seraient situées dans une zone spéciale de votre site Web.
LearnDash fonctionne avec WordPress et Astra pro a une fonctionnalité qui fonctionne avec LearnDash.
Tarification du thème Astra Pro
Le thème Astra Pro propose quelques offres différentes aux clients, flexibles avec le nombre d’accès dont vous avez besoin ou non pour créer votre site Web parfait.
Le thème Astra pro standard (qui se trouve à l’extrême gauche) vous donne tous les composants d’Astra pro dont nous avons discuté.
Les deux autres packs incluent des packages supplémentaires des créateurs d’Astra, Brainstorm Force, où plus d’outils de conception Web qu’Astra trouvent leur place.
Comment créer un site Web avec Astra Theme et Elementor
Donc, si vous êtes maintenant convaincu que l’inscription à Asra Pro est la meilleure décision à prendre pour développer un site Web puissant, la prochaine étape consiste à apprendre à créer un site WordPress.
Si vous souhaitez affiner davantage vos outils autour de WordPress avant de commencer avec Astra, consultez notre vidéo tutoriel WordPress .
Ici, nous décrivons étape par étape comment vous pouvez mettre la main sur le thème Astra et commencer à créer votre site Web.
Nous approfondissons également ce qu’est Elementor, comment il s’intègre comme un gant avec le thème Astra WordPress et pourquoi vous devriez sérieusement envisager de l’essayer si vous êtes nouveau dans le programme.
Pour certaines spécifications en tête-à-tête, consultez notre vidéo sur Divi vs Elementor .
Étape 1 : Obtenez votre nom de domaine et votre hébergement Web
Un nom de domaine n’est que l’adresse de votre site Web. C’est ce que les gens entreront dans la barre de recherche pour trouver votre site – par exemple, quelque chose comme « votresiteweb.com ».
L’ hébergement Web consiste simplement à louer de l’espace sur un serveur quelque part connecté à Internet. De cette façon, vous pouvez stocker tous vos médias et fichiers sur votre site.
Nous recommandons à HostGator d’obtenir ces deux éléments – ils sont rapides, fiables et ne vous ruineront pas !
Étape 2 : Installer WordPress
Pour installer WordPress, rendez-vous sur un site Web comme HostGator (notre recommandation) et jetez un œil à leur panneau de contrôle ou portail. Ensuite, cliquez sur « installer WordPress ».
Vérifiez vos paramètres et assurez-vous que votre installation est connectée au nom de domaine que vous souhaitez, au cas où vous auriez plusieurs noms de domaine.
Enfin, assurez-vous de télécharger la dernière version de WordPress.
Étape 3 : Installer le thème Astra
Comme Astra est un thème WordPress, vous pouvez en fait installer Astra directement à partir de WordPress. Allez dans « thèmes » dans la barre latérale et cliquez sur « ajouter un thème ». À partir de là, recherchez le thème Astra dans la barre de recherche ou installez-le simplement si vous le voyez sur votre page.
Après l’installation, activez simplement le thème et vous êtes prêt à vous occuper !
Étape 4 : Installer les plugins
Le thème Astra est livré avec l’une des plus grandes bibliothèques de modèles de sites Web premium gratuits que vous pouvez utiliser pour accélérer le processus de création de votre site. Ce plugin d’Astra s’appelle « Starter Templates ».
Pour ce faire, accédez à l’onglet « plugins » sur WordPress et choisissez d’ajouter un nouveau plugin. Ensuite, recherchez « modèles de démarrage » dans la barre de recherche. Les « modèles de démarrage » pour Elementor devraient apparaître immédiatement. De là, cliquez simplement sur « installer maintenant », avant d’activer.
Enfin, choisissez le type de constructeur de page que vous utiliserez (dans notre cas, ce serait Elementor ). Suivre cette étape rendra la création d’un site beaucoup plus facile et plus pratique.
Étape 5 : Tutoriel Astra
Maintenant, c’est la partie du tutoriel où nous pouvons nous concentrer complètement sur Astra ! Et nous allons l’utiliser pour personnaliser notre menu de navigation, importer nos logos et icônes de site, et également créer un pied de page.
Le thème Astra demande constamment à ses développeurs de travailler dur pour apporter des ajustements afin de maintenir leurs thèmes à jour et fonctionnels de manière compétitive.
Un bon exemple de cela serait l’une de leurs mises à jour les plus récentes où ils incluent un puissant générateur d’en-tête et de pied de page. Il s’agit d’un ajout fantastique qui vous donne un contrôle complet sur trois niveaux différents d’un en-tête.
Vous pouvez personnaliser l’endroit où vous pouvez ajouter plusieurs widgets à l’aide d’une interface glisser-déposer facile à utiliser. Cela vaut également pour le constructeur de pied de page.
Donc, si vous voulez commencer à créer un site Web, pourquoi ne pas commencer du haut vers le bas ? Ou même de bas en haut ? Continuez à lire et nous allons vous expliquer comment utiliser à la fois le générateur d’en-tête et de pied de page.
Générateur d’en-tête
Pour commencer à créer un en-tête, accédez à l’onglet Apparence sur WordPress et cliquez sur « personnaliser ». Vous pouvez l’ouvrir dans un nouvel onglet pour faciliter les choses. Tout d’abord, nous allons nous concentrer sur le menu de navigation de l’en-tête.
Après avoir cliqué sur l’onglet ‘header builder’, cliquez sur l’onglet ‘primary menu’. À partir de là, nous pouvons modifier un tas de paramètres tels que la largeur, les séparateurs d’éléments et la conception globale, qui comprend des éléments tels que la coloration, le rayon de la bordure et les polices.
Le menu réel peut également être modifié si vous revenez à l’onglet « menus ». Ici, vous pouvez modifier n’importe quel préréglage de bouton dans le menu de navigation.
Ces boutons individuels sont appelés « liens personnalisés ». Ce sont simplement des URL qui sont définies sur un hashtag et qui sont en fait intitulées.
Vous pouvez toujours ajouter des éléments à votre menu de navigation en utilisant le bouton « Ajouter un élément ». Cela vous permet d’ajouter plus de liens personnalisés comme nous venons de le mentionner, ou même différents messages/pages que vous pourriez avoir. Vous pouvez également supprimer les liens de navigation indésirables.
Enfin, nous revenons au « créateur d’en-tête » pour voir ce que nous pouvons faire d’autre sur notre site. Chaque partie du générateur d’en-tête est en fait un widget qui peut être déplacé.
Ici, vous pouvez ajouter plus de composants à votre en-tête, comme des widgets ou des boutons supplémentaires. Utilisez l’onglet de la barre latérale pour personnaliser le texte, la couleur et les paramètres généraux.
Et c’est à peu près tout. Prenez le temps de bien vous familiariser avec toutes les possibilités avec l’en-tête dans le thème Astra.
Créer un logo gratuit
L’ajout de votre propre logo à l’en-tête de la page de destination de votre site Web est idéal pour obtenir cette apparence individuelle. Si vous n’avez pas encore votre propre logo, pas de soucis, nous avons ce qu’il vous faut.
Si vous n’êtes pas intéressé à apprendre à créer un logo gratuit pour votre site, nous ne nous embêterons pas avec les détails ici – ils sont déjà prêts à être consommés dans notre Best Free Logo Maker/How to Make a Logo post !
Ajouter un logo à votre en-tête
Une fois que vous avez votre logo, vous pouvez l’ajouter sans effort au thème Astra WordPress. Pour ce faire, cliquez sur ‘Site Identity & Logo’ dans votre barre latérale ‘Header Builder’. Ensuite, choisissez de supprimer le logo actuel et sélectionnez le vôtre à la place.
Ensuite, chargez simplement votre logo et vous êtes prêt à partir ! Oh, et assurez-vous de sauvegarder votre travail chaque fois que vous apportez une modification brutale à votre site !
Générateur de pied de page
Le générateur de pied de page se trouve dans la barre latérale, quelques onglets sous le générateur d’en-tête. Une fois que vous l’ouvrez, vous verrez qu’il est identique au Header Builder – des widgets divisés par section, trouvés et identifiés au bas de votre écran.
Le pied de page comprend généralement des widgets utiles, une clause de non-responsabilité relative aux droits d’auteur et un code HTML (ressemblant parfois à « propulsé par xyz »).
Tout comme Header Builder, n’importe quel composant du pied de page peut être cliqué et modifié.
Vous pouvez également choisir d' »ajouter des médias » si vous souhaitez également ajouter votre logo dans le pied de page. Après avoir téléchargé et ajouté le pied de page, vous pouvez modifier la taille, la largeur et l’alignement comme vous le souhaitez.
Ajout d’un formulaire personnalisé
Il est tout aussi simple d’ajouter des formulaires supplémentaires, tels que des formulaires de contact ou des formulaires de commentaires des clients, à votre site Web via le thème Astra.
Pour ce faire, commencez par vous rendre dans la barre latérale de WordPress et cliquez sur « WP Forms ». Ensuite, descendez dans ‘formulaire de contact’ et cliquez sur ‘modifier’.
Vous verrez le formulaire de contact par défaut avec une section pour un nom, un e-mail et un message. Tous ces champs peuvent être facilement modifiés ou supprimés. Par exemple, vous n’aurez probablement pas besoin d’un nom si vous créez un formulaire d’inscription à la newsletter.
Pour supprimer une section, cliquez simplement dessus, cliquez sur l’icône de la corbeille dans le coin supérieur droit et supprimez-la.
Après avoir obtenu votre fondation, accédez aux options de champ pour modifier les paramètres généraux et avancés de votre formulaire, comme le nom de l’espace réservé et la taille globale.
Ensuite, pour ajuster davantage le comportement d’un champ, cliquez sur l’onglet « Paramètres » dans la barre latérale à l’extrême gauche. Si vous créez un formulaire d’inscription à la newsletter, par exemple, il sera nécessaire d’activer les notifications par e-mail pour chaque soumission.
Vous pouvez le faire sous les « notifications » dans les paramètres. Le message de confirmation à vos abonnés peut être modifié sous l’onglet ‘confirmation’.
Ajouter un ID de formulaire WP
Il est un peu difficile d’obtenir votre formulaire sur votre page, nous avons donc décomposé cette étape toute seule.
Ainsi, après avoir créé votre formulaire (et l’avoir intitulé, espérons-le), il est répertorié comme l’un de vos formulaires WP. À l’extrême droite de la liste de votre formulaire, vous verrez quelque chose appelé le « shortcode » avec un tas de chiffres, de lettres et de symboles.
Avant de faire quoi que ce soit d’autre, copiez ce shortcode dans le presse-papiers.
Ensuite, retournez dans l’onglet personnaliser, publiez votre travail (n’oubliez pas !), et actualisez la page pour qu’elle reconnaisse le nouveau formulaire que vous venez de créer.
Enfin, ouvrez le générateur de pied de page et cliquez sur le widget où vous souhaitez placer votre formulaire. Ouvrez le widget en cliquant dessus. Cliquez dessus une fois de plus dans la barre latérale. Vous verrez apparaître des informations sur le widget, y compris un espace pour mettre des informations sous le titre du widget.
Allez-y et collez le shortcode de votre nouveau formulaire dans cet espace et le tour est joué ! Votre formulaire devrait avoir été collé avec succès sur votre page !
Paramètres de thème de site global
Les paramètres du thème global englobent 4 points sur votre site : typographie, conteneurs, couleurs, boutons. Ouvrez l’onglet « Global » dans la barre latérale pour commencer à modifier les paramètres du thème global.
Chaque section est assez simple et facile à comprendre. Astra fait un excellent travail d’étiquetage de toutes les pièces mobiles, rendant les modifications aussi simples que possible.
Une chose à noter est de savoir comment définir les paramètres de la page d’accueil de votre site Web. Faites donc défiler jusqu’à l’onglet « Paramètres de la page d’accueil » dans la barre latérale et ouvrez-le.
Par défaut, votre page d’accueil sera définie comme une page statique et définie sur la page d’accueil. Le problème ici est que lorsque vous créez un site Web avec plusieurs pages (ce que vous ferez certainement), WordPress ne sait pas réellement quelle page vous souhaitez qu’il utilise comme page d’accueil.
La façon de dire à WordPress quelle page vous voulez réellement que votre page d’accueil soit est de sélectionner la bonne page sous l’onglet de la page d’accueil. Si vous rencontrez des problèmes de page d’accueil, assurez-vous que cet onglet est bien défini sur « Accueil ».
Avec cela, vous êtes prêt à lancer le bal avec toutes les fonctions de création de sites de base du thème Astra à votre actif (réécriture ?) – mais il reste encore à peaufiner !
Lisez la suite pour en savoir plus sur la façon de modifier d’autres éléments importants de votre site Web avec le puissant et puissant Elementor !
Étape 6 : Édition avec Elementor
Présentation d’Elementor
Elementor est un joli constructeur de pages que nous avons mentionné plus tôt, et il est vraiment compatible avec le thème Astra. Une fois dans Elementor, vous verrez une tonne de widgets sympas que vous pouvez utiliser pour décorer votre site.
Elementor décompose différentes parties de votre site en « sections » qui sont ensuite divisées en « colonnes » qui sont ensuite divisées en « widgets » – donc des sections aux colonnes aux widgets. Chaque pièce complète l’autre afin que vous puissiez faire un montage de précision.
Restez avec nous pendant que nous soulignons comment modifier différentes zones importantes de votre site Web à l’aide d’Elementor dans le thème Astra. Oh, et n’oubliez pas de toujours utiliser le bouton vert « Mettre à jour » dans le coin inférieur gauche d’Elementor pour enregistrer tout votre travail au fur et à mesure !
Modification de votre page d’accueil
La page d’accueil est comme le hall d’un bel hôtel – dans ce cas, l’hôtel est votre site Web. Cette première impression signifie tout et aura un impact durable sur la façon dont votre entreprise est perçue. En d’autres termes, votre page d’accueil doit absolument être géniale pour une qualité de site supérieure.
Pour commencer à modifier votre page d’accueil, accédez à l’onglet « pages » dans la barre latérale de WordPress et ouvrez « toutes les pages sur un nouvel onglet de navigateur ». Ensuite, trouvez votre page d’accueil et choisissez d’éditer avec Elementor.
Paramètres généraux du générateur de pages
Vous pouvez facilement modifier les paramètres globaux pour des éléments tels que les boutons et les couleurs dans Elementor. Pour ce faire, recherchez l’icône hamburger en haut de la barre latérale, cliquez dessus et continuez sur les « paramètres du site ».
À partir de là, vous aurez la possibilité de modifier vos couleurs, polices, typographie, boutons, images et bien plus encore.
Modifier votre section héros
La section héros est fondamentalement la toute première chose que les gens voient lorsqu’ils visitent votre site Web. C’est ce qui apparaît immédiatement sous votre logo et votre menu.
Vous pouvez modifier la section héros en cliquant simplement sur la page et en y tapant, ou en ajoutant du texte dans la barre latérale après avoir cliqué sur la section. La barre latérale ouvre également un tas d’options d’édition pour des choses comme la couleur, les marges, l’ajout/la suppression de sections, etc.
Une image d’arrière-plan fait également partie de la section Héros. Pour modifier votre image, cliquez sur l’image et accédez à l’onglet « style » dans la barre latérale. Vous devriez voir l’image qui s’y trouve. Cliquez simplement dessus et insérez une autre image de votre choix pour faire le travail.
Modification de la section À propos
L’édition de texte dans la section « à propos » est assez simple et reflète le même processus que celui que nous venons de mentionner pour la section héros.
Pour ajouter une image à cette section, faites un clic droit sur le widget prédéfini dans la section et cliquez sur « Modifier l’image ». Si aucun widget n’est présent, n’hésitez pas à en créer un d’abord.
Sous « contenu » dans la barre latérale, vous pourrez insérer votre propre image. Vous pouvez faire exactement la même chose pour charger vos logos.
Modification de la section Tarifs
Par défaut, et peut-être aussi par préférence, la section des tarifs d’Elementor contiendra quelques images avec du texte superposé dans une colonne. Ces 3 sections avec une image et du texte sont en fait appelées « sections internes ».
Les sections internes sont une excellente solution de contournement et sont prêtes à être utilisées comme widget glisser-déposer dans Elementor. Vous le trouverez dans l’onglet widgets en haut à droite de la barre latérale.
Les sections internes facilitent le regroupement des colonnes à l’intérieur d’autres colonnes et fonctionnent parfaitement avec ce type de pages.
Modification de la section Galerie
Dans la section « galerie », faites un clic droit sur n’importe quelle image et choisissez modifier pour lancer le processus d’édition. Dans la barre latérale, vous verrez un tas d’images situées dans une sorte de référentiel d’images. Cliquez simplement dessus pour supprimer et ajouter des images.
Un plugin vraiment dope à utiliser pour votre section galerie est celui appelé « Image Accordion ». Ce widget se trouve dans le plugin gratuit « Essential Addons for Elementor », qui ajoute 40 widgets sympas à Elementor. Recherchez-le simplement dans votre plugin WordPress.
Ce sont donc quelques-unes des principales sections sur lesquelles vous devrez vous concentrer pour rendre votre site sexy et prêt à fonctionner. Vous pouvez plus ou moins suivre les mêmes procédures que nous avons déjà soulignées pour apporter des modifications à d’autres sections de votre site comme les sections « client » et « témoignage ».
Une fois que tout est dit et fait, mettez à jour (enregistrez) votre travail et cliquez sur « prévisualiser les modifications » pour voir à quoi ressemble votre site avec toutes les nouvelles modifications !
Étape 7 : Modifier la page de contact
Avant de modifier la page de contact, nous devons d’abord en créer une. C’est le moment idéal pour faire bon usage des nombreux modèles de démarrage d’Astra. Pour ce faire, accédez à « apparence » dans la barre latérale de WordPress et ouvrez l’onglet « modèles de démarrage ».
Une fois que vous avez trouvé un thème que vous aimez, choisissez d’importer uniquement la « page de contact » afin de ne pas modifier l’intégralité de votre site Web.
Vous trouverez cette nouvelle page de contact sous vos pages (ainsi que la page d’accueil et toutes les autres pages que vous pourriez avoir). Notez que la page sera publiée automatiquement pour que tout le monde puisse la voir, mais elle peut être dépubliée quand vous le souhaitez.
L’édition de la « page de contact » est assez simple pour modifier les images, les textes, les widgets ou les sections. Habituellement, la page de contact aura une carte indiquant l’emplacement de votre entreprise (si vous en avez une), ce qui peut être un peu délicat, alors passons brièvement en revue cela.
Cliquez sur l’icône de modification bleue sur la carte pour commencer. Depuis la barre latérale, vous pourrez modifier l’emplacement de votre carte, le zoom et la hauteur. Vous pouvez également modifier les filtres de votre carte dans l’onglet Style. Et c’est à peu près tout.
Étape 8 : Réactivité mobile
D’accord, la réactivité mobile est donc un facteur crucial pour votre site Web, car environ 50% des visiteurs de votre site visiteront votre site via leur téléphone portable – pensez simplement au nombre de fois par jour que vous accédez à des sites Web à partir de votre téléphone mobile.
Heureusement, Elementor permet de vérifier très facilement la réactivité mobile de votre site Web. Commencez par ouvrir la page d’accueil avec Elementor. Ensuite, en bas à gauche de l’écran, près des boutons « mise à jour » et « prévisualisation », vous verrez un bouton « mode réactif ».
Alors qu’Elementor est vraiment bon pour réduire et compresser votre site Web dans une version mobile prête à l’emploi (surtout si vous utilisez un modèle de démarrage Astra), parfois les choses peuvent devenir bancales lorsque vous personnalisez les marges et les rembourrages.
Si quelque chose semble funky dans la version mobile de votre site Web, n’ayez crainte, nous vous montrerons comment le réparer en un rien de temps.
La première chose à aborder est le rembourrage et les marges de vos textes et photos. Cliquez donc sur l’un ou l’autre en mode réactif mobile, accédez aux paramètres avancés et réinitialisez les deux paramètres.
Soit dit en passant, pratiquement aucune des modifications que vous apportez en mode mobile n’affectera la vue de votre bureau pour votre site Web. Vous pouvez vérifier en voyant une petite icône de téléphone près de chaque paramètre, ce qui signifie que les modifications apportées ne concernent que la vue mobile.
Si le rembourrage et les marges ne résolvent pas le problème, la dernière chose à vérifier est la taille du texte. Jouez avec la taille du texte jusqu’à ce qu’il apparaisse bien sur la page. De plus, si quelque chose s’est décentré, il suffit de le déplacer en arrière.
Examen final du site
Quand tout est dit et fait, prenez un moment pour faire un dernier examen de l’ensemble de votre site Web nouvellement feng shuied pour toute erreur ou anomalie !
Étape 9 : Astra Pro
Pour ceux d’entre vous qui souhaitent découvrir la version pro d’Astra, il s’agit d’une étape supplémentaire dans laquelle nous allons aborder toutes les fonctionnalités supplémentaires fournies par la version pro.
Astro Pro est un outil incroyablement puissant que vous pouvez ajouter à votre arsenal – il a tout ce que la version gratuite a et bien plus encore.
L’une de nos parties préférées d’Astropro est que vous avez maintenant accès à tous les modèles premium dans le plugin de modèles de démarrage. Pour ce faire, cliquez simplement sur l’onglet « Tous » et descendez directement sur le bouton « Premium » et découvrez tous les différents modèles.
Chacune d’entre elles a plus de pages que celles de la version gratuite, ainsi que le fait qu’elles sont bien meilleures.
Avec Astro pro, vous pouvez ajuster toutes les couleurs de vos en-têtes, pieds de page, articles de blog, archives de blog et WooCommerce. Et tout comme pour les couleurs, vous pouvez changer la typographie de tout sur votre site.
Astra pro a également le blog pro premium qui vous permet de changer absolument tout ce qui concerne vos articles de blog. Vous pouvez décider d’afficher ou non la date de la dernière modification du message. Vous pouvez modifier les polices, le titre, les couleurs, les marges et le rembourrage.
Vous avez également maintenant un contrôle total sur la personnalisation de votre générateur d’en-tête et de pied de page, comme nous l’avons mentionné plus tôt dans cet article.
Un ajout que nous n’avons pas mentionné est la possibilité d’ajouter un méga menu à votre menu d’en-tête qui affiche beaucoup plus d’options de menu. De plus, vous pouvez classer les éléments dans différentes colonnes. Vous pouvez même afficher un modèle que vous avez créé dans Elementor comme l’une des options du menu de navigation
Le thème Astra Pro vous offre une multitude d’options pour modifier votre boutique WooCommerce intégrée à votre site Web. Vous pouvez accéder au catalogue de produits et modifier la mise en page du site Web afin que les produits soient disposés horizontalement plutôt que verticalement.
Vous pouvez changer l’ordre du titre, de la catégorie, des notes, du rembourrage, de la pagination, de la couleur et des polices – putain c’est beaucoup !
Enfin, vous avez accès à une assistance premium où vous pouvez soumettre différents tickets et obtenir de l’aide pour votre site Web. Vous avez également accès à l’ensemble de leurs documents pédagogiques et tutoriels. Ils ont des informations sur la façon d’utiliser chaque partie de leur programme.
Faut-il créer son site avec Astra ?
L’essentiel est, oui! Astra est un outil sacrément puissant et est équipé de tout ce dont vous pourriez avoir besoin pour créer un site magnifique en un rien de temps.
Avantages
Léger et rapide
A une version gratuite si vous ne voulez pas payer pour tous les avantages
Large gamme de sites de démarrage et de plugins Astra
Ne retient rien en matière de personnalisation et de contrôle créatif
Équipe de soutien tueur
S’intègre de manière transparente avec des plugins et des constructeurs de pages de classe mondiale
Les inconvénients
Comparé à certaines alternatives comme OceanWP et GeneratePress, le prix d’ Astra Pro peut être un peu cher
Thème Astra Foire aux questions
Le thème Astra est-il gratuit ?
Oui, il existe une version gratuite et une version pro également.
Comment utiliser les modèles de démarrage d’Astra ?
Les modèles de démarrage Astra peuvent être téléchargés gratuitement après avoir téléchargé et installé le thème Astra WordPress.
Puis-je utiliser Astra avec des constructeurs de pages comme Elementor ?
Absolument! Découvrez notre vidéo tutoriel qui détaille comment utiliser Astra en ligne avec Elementor !
Après quelques eaux turbulentes, le thème a finalement retrouvé sa place parmi les thèmes les plus populaires du référentiel WordPress en l’espace de quelques semaines seulement.
Le PDG d’Astra, Sujay Pawar, a publié une lettre d’excuses officielle à tous les utilisateurs de la communauté Astra pour ce dilemme.
