Bannières pour votre boutique Shopify avec Canva

1. Introduction du cours: Bienvenue dans mon nouveau cours, consacré la conception de bannières pour votre boutique Shopify à l'aide de Canva. Êtes-vous prêt à faire passer votre boutique Shopify au niveau supérieur ? Dans ce cours, vous apprendrez à créer des bannières professionnelles accrocheuses qui vous aideront à augmenter les conversions et les ventes sur votre boutique Shopify. Nous examinerons d' autres bannières Shopify pour trouver de l'inspiration et des idées. Ensuite, nous irons sur Canva et créerons notre propre bannière Shopify personnalisée. Je vais également vous montrer comment exporter votre bannière et l' ajouter à votre site Web Shopify. Vous apprendrez à utiliser Canva pour créer des bannières qui correspondent à votre marque et qui attirent votre public cible. Je vais vous montrer comment ajouter du texte, des images et d'autres éléments à vos bannières. À la fin du cours, vous aurez un design de bannière prêt à être intégré à votre boutique Shopify. Et vous l'avez utilisé sur votre site Web pour promouvoir un produit, des événements de vente ou même une promotion. Rejoignez le cours dès aujourd'hui et commençons à concevoir des bannières qui vous aideront à augmenter les conversions et les ventes sur votre boutique Shopify. 2. Regardez d'autres bannières de Shopify Store pour Inspiration et idées: Bonjour et bon retour. Dans cette vidéo, nous allons jeter un œil à autres bannières de boutiques Shopify pour trouver de l'inspiration et des idées pour notre propre design. Parce qu'avant de commencer à concevoir notre propre bannière, il est important de trouver l' inspiration et de comprendre les principes et les meilleures pratiques pour créer des bannières efficaces. Comme vous pouvez le voir ici, j'ai ouvert Pinterest et j'ai fait une recherche sur les bannières de la boutique Shopify. Nous sommes maintenant en mesure de voir quelques exemples ici. Cependant, je pourrais les appeler bannières. D'autres les appellent des sliders. Comme vous pouvez le voir ici, j'ai également effectué une recherche sur les sliders de la boutique Shopify. C'est fondamentalement la même chose, mais certaines personnes utilisent simplement le mot slider et d'autres le mot bannière. Cependant, ne vous laissez pas distraire, car il s'agit essentiellement de la même chose. Jetons donc un coup d' œil à quelques exemples. Maintenant, tout de suite, je pense que celui-ci a l'air plutôt bien. Je vais donc cliquer sur Ouvrir ici et nous pouvons voir la bannière de cette boutique. Il s'agit donc d'une bannière assez simple, contenant juste du texte, un bouton et une image de leur produit sur la droite. Donc, si je fais défiler la page vers le bas, nous verrons d'autres exemples. Celui-ci, par exemple, a l'air plutôt bien. C'est une cuisine où nous n'avons que des casseroles et des poêles. C'est vraiment simple mais efficace. Ensuite, si je reviens à l' autre recherche sur Pinterest, comme vous pouvez le voir, c' est là que j'ai recherché les bannières d'une boutique Shopify. Nous pouvons également jeter un coup d' aux exemples présentés ici. Donc, par exemple, si je commence par cliquer sur cette première bannière ici, nous pouvons voir qu'il s'agit d'une bannière Black Friday. Ce premier et le second sont également destinés à une entreprise de mode ou de vêtements. Et la troisième est une simple offre de vente de mode. Ensuite, si je fais défiler la page vers le bas à partir d'ici, nous avons également quelques exemples supplémentaires. Ces deux premières sont donc très belles, la première étant des bannières du Black Friday, et la seconde des bannières à l'ancienne . Juste ici. Vous pouvez voir qu'il s'agit d'un style de design complètement différent, plus pétillant et coloré, alors que celui-ci a le thème noir et rouge du Black Friday. Enfin, je vais cliquer sur celui-ci ici pour que nous puissions mieux le voir. Parce qu'il s'agit d'un style de bannière plus avancé, par exemple, ce premier est plutôt une bannière 3D. Vous pouvez voir qu'il contient des produits de soin de la peau. La seconde est une bannière de cuisine avec de la nourriture et des produits de cuisine. Et puis nous avons d'autres produits à base de beauté , puis une bannière sportive. Et enfin, un autre épuisement de la mode. Nous avons donc une multitude d'exemples et idées qui, je l'espère, vous inspireront pour créer votre propre bannière. Je pense que nous sommes maintenant prêts à ouvrir Canva et à essayer les fonctionnalités de Canva pour voir ce que nous pouvons créer pour notre propre boutique Shopify. Maintenant, vous voudrez peut-être créer quelque chose complètement différent de ce que je crée. Cependant, il ne s'agit que d'un exemple qui vous guidera tout au long du processus de création d'une bannière dans Canva. Voilà, c'est tout pour cette vidéo. Nous sommes maintenant prêts à créer notre propre bannière dans Canva. Je te verrai dans le prochain. Merci d'avoir regardé et au revoir. 3. Comment concevoir des bannières pour votre boutique Shopify avec Canva: Bonjour et bon retour. Dans cette vidéo, je vais vous montrer comment créer bannières pour votre boutique Shopify, comme celle que vous pouvez voir sur mon site Web ici, en utilisant Canva. Alors allons-y directement. Tout d'abord, nous allons ouvrir Canva, et maintenant nous allons créer un nouveau design. Maintenant, je vais créer un design de taille personnalisée, qui sera de 2 400 x 1 200 pixels. Cela peut donc varier en fonction du type de bannière que vous souhaitez créer. Mais c'est ce que nous allons utiliser pour cette vidéo. Il vous suffit donc de cliquer sur Créer, nouveau design. Nous y voilà. Nous sommes donc prêts à commencer à créer notre bannière pour notre boutique Shopify. Sur la bannière que vous avez vue sur ma boutique Shopify il y a quelques secondes, elle était divisée en deux sections. J'avais du texte sur la gauche et une image sur la droite. Donc, pour ce faire, tout d'abord, je vais ajouter l'image à droite ici. Je vais donc ajouter un élément de cadre carré pour l'image. Je vais accéder aux éléments et effectuer une recherche. Ensuite, nous allons cliquer sur le cadre. Nous allons donc simplement trouver un cadre carré parfait. Donc celui-ci est bon. Cependant, il a une bordure blanche, sorte que ce n'est pas ce que nous voulons. Celui-ci est parfait. Nous allons donc modifier notre design. Ensuite, nous allons l'agrandir. Et nous allons également l'étendre à 1 100 pixels de haut et de large. Et voilà, c'est parfait. Cela fait donc 1 100 sur 1 100. Nous avons donc déjà ajouté le cadre. Maintenant, je vais télécharger une photo à faire glisser dans ce cadre. Et comme vous pouvez le voir, j'ai déjà téléchargé quelques photos, donc je vais simplement les faire glisser dans celle-ci ici. Ensuite, je vais double-cliquer dessus et m'assurer qu'il est centré dans le cadre. Nous y voilà. Maintenant, je vais cliquer à nouveau sur le cadre et m'assurer qu'il est bien centré. Je pense que pour l'instant, ce sera à peu près juste. Et maintenant, nous sommes prêts à ajouter le texte sur la gauche. Donc, ce que je vais faire, c'est ajouter simples éléments carrés sur lesquels nous allons ajouter notre texte. Je vais donc simplement passer aux éléments et taper en carré. Nous y voilà. Ce premier carré est donc absolument parfait. Alors maintenant, je vais juste déplacer le carré vers le coin supérieur gauche. Et je vais maintenir la touche Shift enfoncée et cliquer et faire glisser pour agrandir le carré. Et en maintenant la touche Shift enfoncée, la largeur et la hauteur se bloquent afin qu'elles ne changent pas au hasard. Et pour que nous puissions le garder exactement carré. Et n'oubliez pas que nous voulons que ce soit 1 100 sur 1 100. Nous y voilà. C'est parfait. Maintenant, je vais juste les aligner tous les deux. Et je vais sélectionner les deux et les regrouper. Ensuite, je vais leur envoyer à tous les deux en même temps. Nous y voilà. C'est donc la première partie terminée. Maintenant, je veux changer la couleur du carré. Je vais donc cliquer dessus et cliquer sur le bloc de couleur en haut. Et maintenant, je vais ajouter ma propre couleur personnalisée. Vous pouvez ajouter la couleur de votre choix. Et vous pouvez créer le carré de la couleur de votre choix. Bien sûr, vous pouvez acheter les couleurs de votre propre marque. Et c'est exactement ce que je vais faire. Je vais donc simplement coller le code couleur ici. Et je vais cliquer sur la couleur que j'ai ajoutée. Nous y voilà. Ce n'est pas tout à fait blanc. Comme tu peux le voir. Il est légèrement différent de l'arrière-plan, qui est exactement blanc. Et ce n'est pas exactement le même que l'arrière-plan de la photo Ivor. Nous ajoutons une belle dynamique à ce design. Nous sommes maintenant prêts à ajouter nos textes à la conception de notre bannière. Passons donc au texte sur la gauche. Et nous allons simplement ajouter un titre. Maintenant, je vais remplacer ce texte et je vais en écrire 20 %. Et je vais agrandir le texte. En fait, en gros, je vais simplement faire en sorte que la taille de police 270 pixels et appuyer sur Entrée. Nous y voilà. Vous pouvez maintenant définir la police comme vous le souhaitez. Cependant, je vais utiliser la police League Spartan juste ici. Maintenant, je vais m' assurer que cela est centré dans la case de gauche, juste ici. Pour ce faire, je vais en fait devoir dissocier ces deux éléments. Maintenant, je vais pouvoir le centrer. Et voilà, c'est parfait. Et maintenant, nous pouvons à nouveau les regrouper. OK, nous avons donc terminé la partie principale. Maintenant, il ne nous reste plus que quelques choses à faire et ce sera pratiquement terminé. Donc, tout d'abord, je vais ajouter un autre élément carré. Et je vais lui donner la même couleur que le fond de la case de gauche. C'est donc celui-ci. Maintenant, ce que je vais faire avec cela, c'est le placer devant le texte. Et je vais couvrir la moitié inférieure du zéro. Nous y voilà. Je pense que je pourrais le baisser un peu. Maintenant, je pense que cela va ajouter un effet cool. Et ce que je vais faire, c'est ajouter le mot en haut de cette boîte. Je vais donc dupliquer le texte. Et je vais annuler. Et bien sûr, activez le mode majuscules. Et ce texte n'a besoin que d'environ 70 pixels. Supprimons donc les 200 et n'en faisons plus que 70. Nous allons maintenant déplacer le texte ici afin qu'il se trouve dans la moitié inférieure du zéro. Et nous y voilà. Je pense que cela a l'air absolument fantastique. Maintenant, à l'huile, je vais ajouter le dernier petit texte que nous devons ajouter à ce design. Je vais donc dupliquer ce texte ici. Et je vais le réduire un peu. Je pense à 15 pixels. Je vais également changer la police pour qu'elle soit plus légère. Et je vais simplement déplacer les éléments du texte ici. Et ici, je vais écrire du code d'utilisation. L'été au moment du paiement. Maintenant, nous voulons juste que cela soit sur une seule ligne. Juste comme ça. Et je vais mettre le code du coupon en gras. Maintenant, je vais juste mettre cela en dessous du mot à ce sujet. Et nous y voilà. Nous avons créé notre bannière. Je pense que cela a l'air absolument fantastique. Et bien sûr, vous pouvez ajouter vos propres styles uniques à votre bannière. Mais je pense que c'est un design vraiment cool. Vous pouvez maintenant le télécharger , puis le télécharger sur votre boutique Shopify. Cependant, avant cela, je vais vous montrer comment créer un autre style pour cette même bannière. Je vais donc dupliquer cette page en cliquant sur cette icône ici afin de ne pas avoir à tout redessiner. Et maintenant, je vais dissocier ces deux éléments. Et je ne vais sélectionner que cette photo ici. Maintenant, je vais le rendre un peu plus petit. Je pense qu'il y a du bon. Et je vais l'apporter. Ensuite, je vais le dupliquer trois fois. Maintenant, je vais en mettre un à sa droite, un en dessous et un en bas également. Nous devons simplement nous assurer que tout est correctement aligné. Nous y voilà. Maintenant, je pense que cet écart au milieu est un peu trop grand. donc falloir que je les agrandisse un peu. Je vais donc commencer par celui-ci. Je pense que 540 pourrait être une bonne chose. Voyons comment cela fonctionne. Je vais le dupliquer encore trois fois. Et je vais tout aligner. Nous devons juste nous assurer que tout est parfaitement aligné. Alors celui-ci est là aussi. D'accord, ce n'est pas encore tout à fait parfait. Je vais juste sélectionner ces deux options sur la gauche et les intégrer légèrement. Nous y voilà. Je pense que cela semble absolument parfait. Maintenant, je vais à nouveau passer aux téléchargements. Et je vais juste ajouter d'autres images. Et bien sûr, nous voulons nous assurer que toutes nos photos sont centrées dans les cadres d'image. Et enfin, celui-ci est là aussi. Et nous y voilà. Nous venons donc de créer deux bannières Shopify différentes. Ce sont des styles similaires, mais ils sont également différents. Donc, celui-ci indique 20  % du code américain en été à caisse avec l'image d' un bucket tax sur la droite, ou n'importe quelle image sur laquelle vous pouvez ajouter n'importe quelle photo de produit sur la droite. Cela vous permettra donc de vous concentrer sur un seul produit. Et puis nous avons ce cadran en bas, qui nous permet de nous concentrer sur quatre produits différents. Maintenant, ce que je vais faire est lié à notre projet. Aujourd'hui, je vais simplement ajouter les bannières Shopify. Et pour entrer. Maintenant, pour les télécharger, je vais cliquer sur Partager et télécharger. Nous voulons télécharger les deux pages , puis je cliquerai sur le bouton Télécharger. Maintenant, vous voulez simplement vous assurer de les enregistrer au bon endroit sur votre ordinateur. Une fois que vous êtes prêt, cliquez sur Enregistrer. Maintenant, je vais cliquer sur Afficher dans le dossier. Et comme nous avons téléchargé plusieurs designs à la fois, cela nous a donné un fichier zip. Je vais donc cliquer dessus avec le bouton droit de la souris et cliquer sur Extraire vers les bannières Shopify. Cela nous donnera ensuite un dossier avec les designs que nous avons créés. Revenons maintenant à notre boutique Shopify et nous pouvons télécharger nos bannières sur notre boutique. Je vais donc simplement cliquer sur la boutique en ligne sur la gauche. Ensuite, je cliquerai sur Personnaliser. Avant de télécharger nos bannières, je vais supprimer ce bloc au milieu. Je vais donc supprimer les textes du titre. Ensuite, je vais supprimer ces deux boutons. Et maintenant, si je reclique sur la bannière et que je désactive le conteneur, je supprime également la deuxième image. ne nous reste plus qu'à télécharger les bannières que nous avons conçues. Donc, sur la première image, je vais cliquer sur Modifier et sélectionner Image. Maintenant, je vais cliquer sur Télécharger. Et dans le dossier que nous venons de créer, je vais sélectionner les deux et cliquer sur Ouvrir. Nous allons maintenant pouvoir voir à quoi ils ressemblent sur notre site Web. Voici donc les différents produits. Ils ont donc dépensé ce qui nous permet de nous concentrer sur un produit, puis nous avons l'autre. Cela nous permet de nous concentrer sur quatre produits distincts. Choisissez donc la bannière que vous souhaitez afficher sur vos sites Web. Ensuite, cliquez sur Sélectionner en bas ici, et sur Enregistrer en haut à droite. Nous pouvons maintenant quitter l' éditeur de pages et nous sommes maintenant prêts à consulter notre boutique pour voir à quoi elle ressemble avec la bannière que nous venons de concevoir. OK, ça a l'air bien, mais il y a encore une autre chose que nous allons devoir changer dans l'éditeur de page. Je vais donc cliquer à nouveau sur Modifier la page d'accueil ici. Et je vais sélectionner la bannière d'image. Et je vais activer cette option ici qui dit adapter la hauteur de la section à la taille de la première image. Je vais donc cliquer dessus, puis cliquer à nouveau sur le bouton Enregistrer. Nous pouvons maintenant quitter l'éditeur et ouvrir à nouveau nos sites Web. Et comme vous pouvez le constater, cela semble désormais bien meilleur, car il n'est plus trop difficile de intégrer à cause de la configuration précédente de la bannière. Voyons maintenant à quoi ressemble l'autre bannière que nous avons conçue. Nous pouvons à nouveau modifier la page d'accueil. Et je vais simplement sélectionner l'autre bannière. Nous allons donc cliquer sur la bannière, cliquer sur Modifier et changer d'image. Et nous allons cliquer sur celui-ci ici. Ensuite, je vais sélectionner et enregistrer quitter l'éditeur et consulter votre boutique en ligne. Maintenant, si je rafraîchis cette page, et c'est parti, nous pouvons maintenant voir à quoi ressemble la première bannière que nous avons conçue. La bannière qui met l'accent sur un produit individuel. Alors on y va. Nous avons utilisé Canva avec succès pour concevoir des bannières de site Web Shopify absolument fantastiques . C'est tout pour cette vidéo. J'espère que cela vous a plu et j' espère que vous avez appris quelque chose de nouveau. Je te verrai encore une fois dans le prochain , merci et au revoir. 4. Projet du cours: Bienvenue sur la vidéo finale du cours. Dans cette vidéo, nous allons discuter du projet de classe et de la manière dont vous pouvez mettre en pratique tout ce que vous avez appris dans ce cours. Le projet de classe consiste à créer une bannière pour votre boutique Shopify à l'aide de Canva. L'objectif de ce projet est de concevoir une bannière accrocheuse qui aidera à augmenter les conversions sur votre boutique Shopify. Pour terminer le projet, vous devrez suivre ces étapes. abord, jetez un œil à d' autres boutiques Shopify pour voir à quoi ressemblent leurs bannières et pour trouver de l'inspiration et des idées pour les vôtres. Choisissez ensuite un modèle ou partez de zéro sur Canva. Ensuite, créez un design de bannière qui correspond à votre marque et attire votre public cible. Ajoutez des textes, des images et des animations, si vous le souhaitez. Enfin, enregistrez et exportez votre design. Une fois le projet terminé, vous aurez un design de bannière prêt à être intégré à votre boutique Shopify et utilisé sur votre site Web pour promouvoir un produit, une vente, un événement ou une autre promotion. J'adorerais voir votre Biodesign final, alors n'hésitez pas à le soumettre dans la section projet de ce cours. Si vous avez besoin d'aide, assurez-vous d'envoyer un message. Et n'oubliez pas que c'est en s'entraînant qu'on devient parfait. Et plus vous concevez, plus vous vous améliorez. Merci donc de m'avoir rejoint dans ce cours. J'espère que vous l'avez apprécié et que vous avez appris quelque chose de nouveau. Et j'espère vous revoir bientôt dans un autre. Au revoir.