Modifier la page d'accueil

Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Wordpress et WooCommerce - Développer sa première boutique e-commerce
Revoir le teaser Je m'abonne
5,0
Transcription

Cette leçon fait partie de la formation
49,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
5,0
Cette leçon fait partie de la formation
49,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Être capable d'installer WordPress et Woocommerce. Être capable de configurer sa boutique en ligne Être capable de personnaliser son site.

Vous allez aprendre à utiliser WordPress couplé à Woocommerce afin de créer votre première boutique en ligne. Si vous êtes débutant, porteur de projet ou curieux, cette formation centrée sur la pratique et l'autonomisation vous conviendra parfaitement.

Nous verrons comment choisir son nom de domaine, son thème, et son hébergeur, avant d'installer WordPress et Woocommerce.

En quelques vidéos, vous configurerez votre boutique pour ensuite la personnaliser, et l'alimenter en contenus. Le workbook communiqué contient le lien vers la présentation pour retrouver certains élements, mais aussi un répertoire de sites sur lesquels vous pourrez vous référez dans le cadre de votre mise en autonomie.

Voir plus
Dans cette vidéo, nous allons apprendre à personnaliser notre page d'accueil de notre boutique en ligne. C'est-à-dire que nous allons l'améliorer, modifier cette bannière par exemple qui n'est pas très jolie. On va modifier les liens, parce que pour l'instant quand on clique dessus, ça ne nous fait pas grand-chose, ou pas forcément ce qu'on cherche. Ensuite, on va modifier quelques liens et quelques images. On va changer comment ça fonctionne aussi au niveau des menus, parce qu'on voit que c'est le même menu ici partout, et c'est le même menu tout en haut, donc ça on va le personnaliser. Et on va faire tout ça dans l'éditeur de pages, donc en modifiant la page. Donc en cliquant dessus, ça va vous rediriger vers l'éditeur qui est tout à fait classique, et c'est celui que nous allons tous utiliser sur WordPress. Donc si on regarde, pour modifier c'est très facile, il suffit de cliquer sur les éléments, et on a sur le menu latéral à droite, tout un ensemble de réglages. On peut modifier les dimensions, on peut modifier les encres HTML, etc. Donc ça c'est plutôt avancé, c'est pour ça qu'on ne s'en sert pas beaucoup. Si on regarde, on peut modifier tous les textes, les largeurs, grande largeur par exemple si on veut, plus grand, ou pleine largeur, c'est ce que je préfère. On peut modifier, si on clique à l'extérieur, les mises en page, si on clique totalement à l'extérieur, les images. De même, il y a ce qu'on appelle un sélecteur de points de focalisation qui nous permet de montrer quelque chose en particulier. On peut le mettre ici, si on regarde ici, on peut décider de bouger comment est jue l'image, mais comme elle est en plein écran, ça fiche un petit peu. Donc commençons. On a noté que la page là ici, cette bannière, n'est pas très jolie, et donc ce qu'on va faire, c'est qu'on va en ajouter une autre. Pour ce faire, on se met tout en bas, et on va cliquer sur le plus tout en haut à gauche. Ici, vous avez la possibilité d'ajouter des blocs, individuellement, donc vos boutons, vos colonnes, vos groupes, les emplacements, et ainsi de suite. Mais si on ajoute un par un, ça peut être un peu long, et peut-être qu'on n'a pas l'inspiration ou les connaissances requises pour faire une belle bannière, bien qu'on puisse toujours essayer, et parfois on est surpris du résultat, mais agréablement surpris. Nous allons aller dans Composition, et puis nous allons pouvoir voir que nous avons toute une série de modèles qui sont déjà proposés. Par exemple, le modèle de mis en avant. Ça peut être des choses comme des textes, si j'en ajoute un, ça peut être intéressant. On pourrait ajouter aussi des appels à l'action, tout simple. Moi, je vais enlever les deux. Je vais me remettre tout en bas, et on va regarder ce que nous propose Wunder, donc ça c'est notre thème. Par exemple, il propose des bannières, qu'est-ce qu'il propose ? Il propose la bannière qu'on a actuellement. Il propose les groupes de catégories qu'on a ici. Il propose d'autres catégories qu'on a aussi ici. Et moi, je veux quelque chose plus d'action. Donc soit on peut décider d'en ajouter une, donc une bannière avec trois boutons, par exemple, ou alors on va ajouter un bouton nous-mêmes. Donc c'est ce que nous allons faire. On va aller dans le plus, bloc, on va descendre pour trouver les boutons, et on va tout simplement glisser. Ou juste cliquer, ça dépend le thème, ça dépend si on est à l'aise avec ça. Et en glissant, on va voir qu'il y a une ligne bleue qui se fait, c'est pour définir où est-ce qu'on veut le mettre. Si on le met là, ici il ne le veut pas parce que c'est un séparateur, mais si on le met, par exemple, on peut le mettre ici. Même pas. On peut le mettre là. Non plus. Donc là, pour faire plus simple, si on n'arrive pas à les glisser, ça dépend de l'imitation individuelle de chaque thème, on va se mettre ici, on fait un retour à la ligne, ça suffit. On met slash, on va taper bouton, et ça nous ajoute un bouton. Ici on peut supprimer. On peut supprimer ce bouton aussi, par exemple, découvrir. J'ai tapé juste découvrir. Ici on a notre bouton, ça y est. On va cliquer tout en haut à droite pour voir les réglages du bouton. Si on veut une largeur, plus ou moins grande, on peut le mettre sur toute la largeur. Moi j'aime bien le 50%, c'est joli. Mais on peut aussi laisser comme tel, donc là ça prend juste l'espace qu'il y a entre les deux. On peut décider de l'aligner, de justifier à gauche, au centre. On peut le mettre à droite aussi si on préfère. Ou les répartir, c'est à dire que ça va, si on a plusieurs, les mettre de façon uniforme. On peut aussi mettre plus en haut, plus en bas. On peut l'étirer pour remplir, c'est à dire si c'est plus haut, plus large, ça le fait, moi je l'aligne au milieu. Et à gauche. Et je vais mettre découvrir. Je vais sélectionner le texte et je vais avoir ici un petit lien. Et je vais mettre le lien de notre collection. Il suffit de marquer la collection qu'on veut. Par exemple, je peux taper Bac de fiançailles si je le souhaite. Et si j'ai créé une catégorie de produits Bac de fiançailles, il va me la trouver. Si je mets, là c'est la catégorie que je connais, donc c'est une qui s'appelle Uncategorized pour dire qu'il n'y a pas de catégorie. Je vais pouvoir aller ici, Uncategorized, je vais vérifier que ce soit une catégorie de produits. Et ça y est. Et donc là, j'ai ajouté, j'ai amélioré le lien. Si jamais on n'aime pas trop non plus les couleurs, on peut cliquer ici et on peut changer le style. Si on veut juste un contour, si on veut un style différent, on peut changer les couleurs des textes, les tailles aussi. Medium, petit. Donc moi je mets par défaut, donc c'est petit. On peut modifier les bordures si on veut plus ou moins de bordures. Ou alors si on veut l'arrondir plus ou moins, ça va plutôt faire quelque chose en forme de pilule, de badge, ou alors un carré classique. Moi j'aime bien un tout petit peu arrondir, ça fait moins agressif visuellement. Une fois qu'on a fait ça, on voit qu'on a un peu amélioré. Je préfère le mettre à droite, donc j'essaye. Est-ce que c'est mieux à droite ? Non, ce n'est pas très accessible. Si je le mets au milieu, ça va bien. Donc on va laisser comme ça, tout ça. Ici il y a un espacement si on veut plus ou moins réduire, plus ou moins grandir. Moi je veux réduire un petit peu les meilleures ventes, donc ça c'est très bien. Ici on veut changer les catégories, par exemple d'ici. Pareil, on clique sur la colonne, tout le carré est sélectionné, et on a possiblement un petit lien. Ici, modifier le lien. Et de la même façon, il suffit de remplir le lien que l'on souhaite. Donc on fait ça, on peut modifier les textes. On voit qu'ici on a les garanties qui sont intéressantes, qui donnent un peu plus de confiance. Mais la page n'est pas complètement faite. Donc moi je vais vouloir ajouter des sections de pages. Donc je vais dans les compositions, pages à sections. Donc on voit qu'il y en a trois, on voit que c'est ce qu'on a déjà rajouté. Je vais vouloir rajouter peut-être des avis de clients. Bon, moi ça ne me plaît pas trop. Je vais voir les bannières, si ça me propose autre chose d'intéressant. Non. Donc je vais voir ce que me propose WooCommerce cette fois-ci, donc ce ne sont pas les bannières du thème. Et moi j'aime bien ça, ces thèmes qui proposent des grosses promos, ou alors des textes. On peut regarder les appels à l'action. Donc moi je vais mettre « Non appelé », ou alors dans les textes, qu'est-ce qu'on peut mettre ? Moi j'aime bien ces textes en gros. Je trouve que ça donne un certain cachet, donc ce que je vais faire, c'est que je vais le mettre ici, ça ne va pas. Est-ce que si je le mets là, ça va ? Oui, ça peut aller, mais je vais le mettre encore en dessous. Et donc là on peut mettre un texte pour présenter un peu l'entreprise. Pour mettre quelque chose pour tous nos produits. « Notre atelier situé en France nous propose des pièces de qualité avec la garantie de la qualité de l'accueil ». Ça veut pas dire grand-chose, mais une fois qu'on a fait ça, on va pouvoir mettre à jour la page et on a mis à jour notre page d'accueil. Maintenant c'est pas tout, parce que si vous vous souvenez, si on retourne sur notre page d'accueil, nous avions un menu tout en haut qui n'était pas très joli, et des menus tout en bas qui n'étaient pas très jolis. Nous allons donc utiliser un éditeur de blocs. Modifier le site, il suffit de cliquer dessus. Et nous allons voir une nouvelle fonctionnalité de WordPress qui nous permet de modifier notre site d'internet directement, visuellement. Donc c'est prévalable sur tous les modèles, tous les thèmes que nous pouvons utiliser. Certains thèmes ne le proposent pas, d'autres le proposent. Donc là on peut voir que j'ai pris un peu d'avance, j'ai supprimé des colonnes. C'est ce que nous allons faire avec la dernière ensemble. Il suffit de cliquer dessus, modifier le modèle. Là on voit qu'on peut modifier le modèle qui s'appelle no title, c'est celui qu'on avait choisi qui nous permet de ne pas avoir la page de titre tout en haut. Donc là on reclique pour modifier le bas de page, et on peut supprimer toute cette colonne. Moi je vais cliquer dessus, trois petits points, supprimer, ainsi de suite. Parfois il faut descendre, supprimer, donc là il ne reste plus qu'une colonne qu'on peut supprimer. Donc là si on regarde bien, le menu tout en haut, accueil, boutique, mon compte, c'est le même que tout en bas. Donc ce que nous allons faire, ça va prendre deux temps. Le premier c'est que nous allons modifier le menu tout en haut, et ensuite nous allons en créer un nouveau menu pour en bas. Parce que pour l'instant c'est exactement le même. Donc ce qu'on va faire c'est qu'on va cliquer dans l'entête, le menu. Et si on voit sur le menu à droite, qu'on ouvre avec le petit bouton ici, réglage, on a la liste des pages. Donc qu'est-ce qu'une liste des pages ? Une liste des pages ça affiche toutes les pages qui sont publiées sur le site. Quand je dis toutes les pages, c'est toutes les pages. Si vous rajoutez une page contact, c'est ce que nous allons faire dans la prochaine vidéo, elle va automatiquement s'ajouter ici. Donc ce que nous allons faire, c'est que nous allons supprimer cette liste de pages, pour ajouter des liens de pages plutôt, ici, liens de pages. Donc on va ajouter une page d'accueil, bah tiens il nous propose, et on va ajouter une page boutique. Donc là par exemple, j'ai cherché boutique tout de suite. Pourquoi il ne trouve pas une boutique ? Parce que là il cherche des composants, des éléments. Donc il faut d'abord que je clique sur lien des pages, et ensuite il va me permettre de chercher une URL, une page, boutique. Donc là il trouve, ça y est, on a nos deux liens. Pas besoin de mettre mon compte ou panier, parce qu'on voit que c'est où. Si vous avez remarqué, ça s'est modifié aussi tout en bas. Le menu, il a été modifié ici. Donc ce que nous allons faire maintenant, nous allons cliquer en bas, on va renommer en lien utile. Donc ça c'est moi qui ai choisi ça, mais vous choisissez ce que vous voulez. Mais là on va y mettre nos liens des politiques de confidentialité. Donc moi je vais cliquer tout en haut, ici, pour ouvrir la navigation. On va aller ici, il y a un menu pas très clair, c'est marqué navigation. Donc la navigation, on va le dupliquer, pour en avoir un nouveau. On va le renommer aussi, toujours en cliquant sur les trois petits points, en renommer. Et je vais l'appeler lien utile, ça nous permettra de le retrouver plus facilement. Lien utile enregistré, donc là c'est parfait. On peut passer en revue, enregistré. On va revenir en arrière, on va revenir tout en bas. On va refaire la même manipulation, pour cliquer, modifier le modèle. On va recliquer dessus, et on va cliquer ici. Là ça nous a ouvert les réglages du lien de page, donc on va recliquer en arrière. On va voir les réglages de la navigation, donc c'est un module, un bloc qui permet de voir les menus. Ici si on modifie, on a compris que ça va modifier tout en haut aussi. Ce qu'on va vouloir faire c'est sélectionner un autre menu. Donc on va aller dans les réglages. Donc ici c'est pas le bon endroit apparemment. Regardez comment ça s'affiche. On peut regarder aussi ici. Mais ici sur menu, on peut faire les trois petits points, et choisir quel menu c'est. Il suffit de cliquer sur lien utile, et ça nous change le menu. On va l'enregistrer, comme ça on l'a. On vérifie, on peut cliquer sur les trois petits points pour voir lequel c'est. Et là on peut ajouter nos liens. Lien de page, on va ajouter notre politique de retour et de remboursement. On va ajouter notre politique de confidentialité. Je vais supprimer l'accueil. Et là on voit que ça a modifié en bas, mais que ça n'a pas modifié tout en haut. C'est le moment pour nous aussi de modifier le bas de page, on peut enlever les icônes de réseaux sociaux. Ou alors en cliquant tout simplement dessus, on peut mettre le lien vers nos pages de réseaux sociaux, les pages de notre boutique, ou notre page personnelle. Pour supprimer, il suffit de cliquer sur les trois petits points, et de cliquer supprimer. Facebook, j'ai pas. TikTok, j'ai pas, je supprime aussi. X, je l'ai pas non plus. Et donc ensuite il ne nous reste plus que 4, il suffit de faire ça. Ça nous permet de modifier aussi le texte tout en bas, pour mettre le nom de votre boutique par exemple. Ma première boutique, elle a été créée en 2023. Donc je peux mettre 2023, avec un espace c'est mieux. Et puis je pourrais même mettre tout droit réservé, ou ne rien mettre, juste ma première boutique 2023. C'est le bas de page. Ici si on passe la souris, on peut à chaque fois voir les éléments. Là on peut voir qu'il y a un espaceur, moi je vais carrément enlever, parce que je ne veux pas qu'il y ait trop d'espace. Pareil tout en bas. Ici c'est bien, là c'est intéressant qu'il y en ait un, mais je peux le réduire, carrément le supprimer. Donc là j'ai fait une petite modification, je vais modifier l'entête, modifier pour la rendre un peu plus jolie. Par exemple, enlever l'arrière-plan, le changer, changer la couleur du texte, mettre un arrière-plan vert. Donc là on voit que j'ai modifié que le texte, c'est pas ce que je voulais faire, moi je veux sélectionner tout le carré. Donc ça y est, on peut mettre un arrière-plan blanc, ou alors on peut mettre carrément un dégradé linéaire. Donc là par exemple, il y en a plusieurs qui sont proposées. Moi je vais mettre du blanc. J'enregistre, et je retourne en arrière en cliquant sur le logo de mon site. Là il n'y en a pas, enfin j'ai mis que ça, mais ça sera le logo que vous avez mis. Et on retourne en arrière, on va enlever les compositions, et voilà. Donc là on voit que le menu il est blanc, ce qui est vachement plus joli qu'un menu gris. On peut voir aussi que ici le lien il a modifié, que tout a été changé et que l'espace a été changé en bas. On peut le rajouter si on préfère. Donc une fois qu'on a fait ça, il faut savoir que nous n'avons modifié qu'un modèle, le modèle qui s'appelait Notitle. On va cliquer sur Modèles. Si on met Index, c'est le classique, on voit que ça a été modifié aussi. Donc ça peut nous permettre de vérifier que ça le soit partout. On vérifiait pour Sidebar Left, est-ce que c'était modifié ? Parfait. Une fois qu'on a vérifié tout ça, on peut recliquer en arrière, aller au tableau de bord, et nous avons terminé pour cette vidéo.

Programme détaillé

Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
Je commande Je m'abonne
1 commentaire
5,0
1 vote
5
4
3
2
1
diegodemassy1
Il y a 1 month
Commentaire
Très bon cours
Nos dernières formations WordPress

éditeur de vidéos pédagogiques

Des supports pédagogiques en vidéo, produits avec les meilleurs experts. Dans nos studios à Paris, Lyon ou Montpellier. Vous souhaitez travailler avec nous ?
image-micro