Comment créer un site E-commerce réussi – En utilisant le thème Astra
Voici un tutoriel qui vous aidera à créer votre site e-commerce avec le meilleur thème actuel ASTRA THEME. Avant toutes choses, posons-nous la question de savoir pourquoi devons nous choisir ce thème.
Voici les avantages :
- Réduit le temps de développement
- Plus léger (améliorer la vitesse et les performances du site Web)
- Compatible avec le constructeur de pages populaire (par exemple: Elementor)
- SEO friendly (contenu construit en fonction du format du moteur de recherche)
- Facile à installer, téléchargez via le tableau de bord ou ftp
- Facile pour les non-programmeurs de créer un site Web
- Pour les web designer
- documentation facile à trouver, tutoriels
- compatible avectous les plugins
- compatible avec WooCommerce
- Peut afficher un aperçu en direct en temps réel
Suivez étape par étape l’installation de votre thème Astra
Si vous possédez déjà une configuration prêt à l'emploi
1.0 Connectez-vous au tableau wordPress.
1- Ajoutez /wp-admin à la fin de l'url de votre site web
(ex : https://www.votredomaine.com/wp-admin )
2-Entrez votre nom d'utilisateur et votre mot de passe
Une fois connecté, vous serez redirigé vers le tableau de bord WordPress
2.0 Installer le thème Astra
1- Connectez-vous au tableau de bord WordPress
2- Allez dans Apparence> Thème> Ajouter un nouveau
3- Recherchez Astra, installez-le et activez-le
Une fois connecté, vous serez redirigé vers le tableau de bord WordPress
3.0 Installer le modèle de démarrage
Après avoir installer un template Astra prêt à l'emploi, l'étape suivante sera maintenant de construire le site à votre image en remplacant les textes et images. Voici les méthodes de préparation et les règles à suivre.
1- Allez dans Plugin> Ajouter un nouveau depuis le tableau de bord
2- Rechercher des modèles de démarrage
3- Recherchez Starter Templates — Elementor, WordPress & Beaver Builder Templates, installez-le et activez-le
4- Après cela, allez dans Apparence> Modèles de démarrage (Starter template) Parcourez la bibliothèque et sélectionnez le template Plusieurs modèles seront disponible si vous posséder Astra premium. Suivez le processus d'installation
4.0 Préparer le matériel pour votre site Web
Les modèles de démarrage vous fournissent un modèle de site complet. Tout ce que vous avez à faire est d'ajouter votre contenu et votre image. Vous pouvez également opter pour l'achat du thème Astra pro possédant plus de fonctionnalité. Toutesfois avant d'aller plus loin, pensez a remplacer la charte graphique tu templates installer. Voici ce qu'il faudra prépaarer
- Créer une bannière de page de destination taille : 1920x1100px
- Créer une bannière de la page d'accueil 1920x1080px
- Créer votre identité visuelle : Logo , Typographie, couleur
- Créer une banniere :À propos de nous et contactez-n 1980x1100pxous
-
Dimension des Logos : Miniature : 180x60px
Grand : 360x120
Vertical : 500x500px
5.0 Caractéristiques et fonctionnalités du thème 'Astra Pro
Pour bénéficier de plus d'options, Astra fourni un plugin nommé ASTRA Addon qui est un plugin premium. Pour en bénéficier il suffit simplement de passer à l'offre premium
Voici les fonctionnalités :
Voici les fonctionnalités :
- Menu de navigation
- Mises en page de blogs
- Dispositions du site
- En-tête collant
- En-tête de page
- Gestion des couleurs
- Plus de typographie (adobe font et custom fonts)
- Dispositions personnalisées
- Widget de pied de page
- Faites défiler vers les liens supérieurs
- Rubriques d'en-tête
- Plus de conceptions d'en-tête
- Contrôle de l'espacement
- Sauvegarde de configuration Astra
6.0 Installer Astra Pro
1 - Après avoir installé le thème astra
Téléchargez le plugin disponible dans votre espace astra pro
2 - Importer le plugin dans votre back-office WordPress
3 - Allez dans Plugins> Ajouter un nouveau
4 - Cliquez sur Télécharger le plugin
5 - Choisissez votre fichier de plugin au format zip
5 - Cliquez sur installer
Vous êtes prêt à utiliser la version PRO de Astra theme.
Nous allons ensemble utiliser Astra Pro
Commençons à utiliser Astra Pro
1 - Dans votre tableau de bord cliquer sur ASTRA
2 -Activez les fonctionnalités ci-dessous Modules Astra Pro disponibles selon vos besoins
7.0 En-tête
1 - Allez dans > Personnaliser depuis le tableau de bord
Identité visuelle
L'identité du site vous permet de personnaliser le logo, l'icône, le titre et le slogan de votre site. L'icône du site est le favicon de votre site Web. Le titre du site est généralement le nom de votre site et le slogan du site est une courte expression/phrase qui décrit votre site. Les moteurs de recherche examineront normalement le titre et le slogan de votre site, il est donc important pour l'optimisation des moteurs de recherche (SEO).
2- Accédez au constructeur d'entête >titre du site & logo->logo
3 - Vous pouvez télécharger le logo de votre site en cliquant sur Sélectionner un logo
4 - Cochez la case Logo différent pour les appareils Retina et Télécharger le logo. En effet, certains appareils (appareils Apple) ont des pixels plus élevés que les appareils normaux et le logo du site normal peut sembler trop petit pour eux. Vérifiez le logo différent pour les appareils mobiles si vous avez un logo différent pour l'appareil mobile
5 - Vous pouvez également ajuster la largeur du logo du site pour différents appareils en sélectionnant l'appareil à côté de Masquer les commandes
6 - Téléchargez l'icône de votre site et l'icône apparaîtra dans l'onglet
7 - Ajoutez le titre de votre site et cochez la case pour afficher le titre du site dans l'en-tête. Cochez la case si vous souhaitez intégrer le logo et le titre du site. Vous pouvez également ajuster la taille de la police du titre du site.
7 - Ajoutez le titre de votre site et cochez la case pour afficher le titre du site dans l'en-tête. Cochez la case si vous souhaitez intégrer le logo et le titre du site. Vous pouvez également ajuster la taille de la police du titre du site.
8.0 Entête principale
L'en-tête principal vous permet de personnaliser la disposition de l'en-tête, la largeur, la taille du bas de la bordure, la couleur du bas de la bordure, la disposition de l'en-tête mobile, la couleur d'arrière-plan de l'en-tête, la couleur de l'élément de menu extérieur et l'espace de l'en-tête.
1 - Allez dans En-tête > En-tête principal
2 - Vous pouvez choisir une disposition d'en-tête où 3 dispositions sont fournies, la largeur de l'en-tête soit la largeur du contenu ou la pleine largeur, personnaliser la taille et la couleur du bas de la bordure. Vous pouvez également choisir la disposition de l'en-tête mobile, la couleur d'arrière-plan de l'en-tête, la couleur de l'élément de menu extérieur et personnaliser l'espace d'en-tête.
Menu primaire
Le menu principal vous permet de personnaliser le menu, le sous-menu, le menu mobile, la couleur, la typographie et l'espacement du menu, du sous-menu, de l'en-tête du méga menu.
1 - Allez dans l'en-tête > Menu principal
2 - La case à cocher de Désactiver le menu désactivera le menu principal dans l'en-tête
3 - Vous pouvez également sélectionner le dernier élément du menu dans la liste déroulante (soit aucun, recherche, bouton, texte/html, widget ou woocommerce)
Vous pouvez cocher la case pour masquer le dernier élément uniquement pour le menu sur mobile, vous pouvez également prendre le dernier élément en dehors du menu si vous voulez que le dernier élément ait une disposition différente du menu principal.
4 - Vous pouvez sélectionner l'animation du conteneur de sous-menu (par défaut, glisser vers le bas, glisser vers le haut ou fondu), ajuster la bordure du conteneur, la couleur de la bordure
5 - Cochez la case du diviseur de sous-menu si vous en avez besoin qui vous permet de sélectionner la couleur du diviseur
6 - Vous pouvez ajuster le point d'arrêt du menu où, lorsqu'il atteint la largeur que vous avez définie, il devient automatiquement un menu mobile.
7 - Vous pouvez ajouter une étiquette à côté du menu mobile. Vous pouvez choisir le style de menu mobile (déroulant, volant, plein écran ou pas de bascule)
Il s'agit d'un bouton bascule.
8 - Vous pouvez choisir la cible de la liste déroulante (icône ou lien), ajuster la bordure des éléments de menu
9 - Vous pouvez choisir la couleur de la bordure du menu mobile
10 - Vous pouvez choisir la couleur du lien/texte et la couleur d'arrière-plan pour les menus et sous-menus normaux, en survol et actifs. Vous pouvez également sélectionner l'image d'arrière-plan pour le menu normal. Pour l'en-tête de colonne du méga menu, vous pouvez sélectionner la couleur pour la normale et le survol. Vous pouvez personnaliser la typographie et l'espacement des en-têtes de colonne de menu, de sous-menu et de méga menu.
Au-dessus de l'en-tête / Au-dessous de l'en-tête
Ceci est la fonctionnalité Astra Pro Addon
1 - Allez dans Apparence> Personnaliser> En-tête> Au-dessus de l'en-tête / Sous l'en-tête
2 - Vous pouvez choisir de fusionner le menu ci-dessus / ci-dessous avec le menu principal sur mobile. Si vous choisissez de fusionner, le menu ci-dessus / ci-dessous apparaîtra à l'intérieur du bouton bascule de l'en-tête principal. Si vous ne fusionnez pas, une bascule séparée pour le menu ci-dessus / ci-dessous apparaît sur le mobile
Permuter les sections sur les appareils mobiles
3- Vous pouvez permuter la section de 1 et 2 sur mobile
4 -
Mise en page - vous pouvez afficher au-dessus / en dessous de la section d'en-tête en ligne ou empilée sur mobile
En-tête collant
Ceci est la fonctionnalité Astra Pro Addon
1 - Allez dans Apparence> Personnaliser> En-tête> En-tête collant
2 - Cochez la case de Stick Primary Header si besoin d'en-tête lors du défilement de la page
3 -
Cochez la case Logo différent pour l'en-tête collant si vous souhaitez modifier le logo de l'en-tête collant et télécharger le logo ci-dessous Logo collant
4 - Cochez la case Logo différent pour les appareils Retina si vous en avez
5 - Vous pouvez ajuster la largeur du logo collant
6 - Cochez la case Activer l'effet de rétrécissement si vous voulez que l'en-tête collant soit rétréci pendant le défilement
7 - Cochez la case Masquer lors du défilement vers le bas si vous souhaitez que l'en-tête collant soit invisible lors du défilement
8 - Vous pouvez sélectionner une animation pour l'en-tête collant (aucune, diapositive ou fondu)
9 - Vous pouvez sélectionner activer l'en-tête collant sur où dans la liste déroulante (bureau, mobile, bureau + mobile)
10 - Vous pouvez personnaliser la couleur des éléments (en-tête, menu, sous-menu, méga en-tête de menu, contenu) au-dessus de l'en-tête, les éléments (en-tête, menu, sous-menu, méga en-tête de menu, élément extérieur) de la couleur de l'en-tête principal ainsi que des éléments (en-tête, menu, sous-menu , méga en-tête de menu) couleur sous l'en-tête.
En-tête transparent
Ceci est la fonctionnalité Astra Pro Addon
1 - Allez dans En-tête > En-tête transparent
2 - Cochez cette case si vous souhaitez activer l'en-tête transparent sur l'ensemble du site Web. Après avoir coché cette case, d'autres options apparaissent.
3 - Cochez la case si vous souhaitez désactiver l'en-tête collant dessus
4 - Choisissez d'activer sur ordinateur, mobile ou ordinateur et mobile
5 - Cochez la case si vous souhaitez activer un logo différent et téléchargez-le sous Logo
6 - Cochez la case si le logo est différent pour les appareils Retina et téléchargez le logo sous le logo Retina
7 - Vous pouvez également ajuster la largeur du logo
8 - Vous pouvez également ajuster la taille et la couleur de la bordure inférieure
9 - Vous pouvez choisir la couleur de superposition d'arrière-plan, la couleur du titre du site normal et survolé, le menu normal, la couleur du lien/texte du sous-menu et la couleur d'arrière-plan ; menu de survol, couleur du lien de sous-menu, texte normal du contenu et couleur du lien, couleur du lien de survol du contenu
9.0 Pied de Page
1 - Allez dans Apparence > Personnaliser > Pied de page à partir du tableau de bord.
2-Sélectionnez les widgets de pied de page
Widget de Pieds de Page
1. Vous pouvez choisir parmi les 7 mises en page fournies ou vous ne voulez pas de widget.
2. Vous pouvez choisir la largeur, soit la largeur du contenu, soit la pleine largeur.
3. Vous pouvez ajuster la taille du rembourrage et de la bordure supérieure.
4 - Vous pouvez ajuster la couleur de la bordure supérieure, sélectionner la couleur d'arrière-plan ou l'image d'arrière-plan, sélectionner le titre normal du contenu, la couleur du texte et du lien, la couleur du lien de survol du contenu, personnaliser la typographie du titre du widget et du contenu du widget.
La Barre de Pieds de Page 1. Allez dans Pied de page > Barre de pied de page 2. Choisissez parmi les deux mises en page proposées. 3. Dans la section 1, vous pouvez choisir d'inclure un texte, un widget ou un menu de pied de page. Normalement, le texte personnalisé de la section 1 comprend le copyright, mais vous pouvez le modifier à votre guise. La liste déroulante de la section 2 est identique à celle de la section 1.
4. Vous pouvez personnaliser le texte de la section 2, ajuster la largeur de la barre de pied de page (soit la largeur du contenu, soit la pleine largeur), ajuster la taille de la bordure, sélectionner la couleur de la bordure, sélectionner la couleur ou l'image d'arrière-plan, la couleur normale du texte du contenu et du lien, la couleur du lien au survol, personnaliser la typographie du contenu, ajuster l'espace du pied de page.
10.0 Typographie, Couleurs, Contenants
Typographie
1. Allez dans Apparence > Personnaliser > Global > Typographie
2. Personnalisez la Police d'ecriture de base et les titres
Couleur
1.Allez dans Apparence > Personnaliser > Global > Couleurs
2. Personnalisez les couleurs de base et la couleur du contenu
Conteneur
1. Sélectionnez Apparence > Personnaliser > Général > Conteneur.
11.0 Personnaliser le bouton de défilement vers le haut
Faites défiler vers le haut du module sur l'aide d'Astra Pro Addon pour ajouter une action de défilement vers le haut sur la page Web.
1 - Allez dans Apparence > Personnaliser
2 - Sélectionnez Global
3 - Vous pouvez choisir d'afficher sur le bureau, le mobile ou le bureau + mobile
4 - Vous pouvez choisir de faire défiler vers le haut pour aligner à gauche ou à droite de la page
5 - Vous pouvez ajuster la taille de l'icône (taille de la police de l'icône) et
le rayon de la bordure (appliquer une bordure arrondie pour l'arrière-plan de l'icône)
6 - Vous pouvez également modifier la couleur de l'icône normale et survolée et la couleur d'arrière-plan
12.0 Personnaliser le blog
Ajouter un article de blog
1 - Allez dans Messages > Ajouter un nouveau
2 - Saisissez le titre de votre publication
3 - Saisir le corps du message
4 - Définissez une image en vedette dans la barre latérale droite (généralement affichée en haut de la publication et est également l'image miniature de la publication)
5 - Ajoutez des balises et des catégories pour la publication dans la barre latérale droite. Des catégories plus larges tandis que des balises plus spécifiques. Cliquez sur Publier si vous avez terminé.
Widget de Pieds de Page
1. Vous pouvez choisir parmi les 7 mises en page fournies ou vous ne voulez pas de widget.
2. Vous pouvez choisir la largeur, soit la largeur du contenu, soit la pleine largeur.
3. Vous pouvez ajuster la taille du rembourrage et de la bordure supérieure.
4 - Vous pouvez ajuster la couleur de la bordure supérieure, sélectionner la couleur d'arrière-plan ou l'image d'arrière-plan, sélectionner le titre normal du contenu, la couleur du texte et du lien, la couleur du lien de survol du contenu, personnaliser la typographie du titre du widget et du contenu du widget.
La Barre de Pieds de Page 1. Allez dans Pied de page > Barre de pied de page 2. Choisissez parmi les deux mises en page proposées. 3. Dans la section 1, vous pouvez choisir d'inclure un texte, un widget ou un menu de pied de page. Normalement, le texte personnalisé de la section 1 comprend le copyright, mais vous pouvez le modifier à votre guise. La liste déroulante de la section 2 est identique à celle de la section 1.
4. Vous pouvez personnaliser le texte de la section 2, ajuster la largeur de la barre de pied de page (soit la largeur du contenu, soit la pleine largeur), ajuster la taille de la bordure, sélectionner la couleur de la bordure, sélectionner la couleur ou l'image d'arrière-plan, la couleur normale du texte du contenu et du lien, la couleur du lien au survol, personnaliser la typographie du contenu, ajuster l'espace du pied de page.
