Gestalte Banner für deinen Shopify Store mit Canva

1. Kurseinführung: Willkommen in meinem neuen Kurs, Entwerfen von Bannern für deinen Shopify-Shop mit Canva. Bist du bereit, deinen Shopify-Shop auf die nächste Stufe zu heben? In diesem Kurs lernen Sie, wie Sie professionelle, auffällige Banner erstellen denen Sie die Konversionen und den Umsatz in Ihrem Shopify-Shop steigern können. Wir werden uns andere Shopify-Banner ansehen , um uns inspirieren zu lassen und Ideen zu erhalten. Dann gehen wir zu Canva und erstellen unser eigenes benutzerdefiniertes Shopify-Banner. Ich zeige Ihnen auch, wie Sie Ihr Banner exportieren und zu Ihrer Shopify-Website hinzufügen können. Du wirst lernen, wie du Canva verwendest, um Banner zu erstellen, die zu deiner Marke passen und deine Zielgruppe ansprechen. Ich werde Ihnen zeigen , wie Sie Ihren Bannern Textbilder und andere Elemente hinzufügen . Am Ende des Kurses haben Sie ein Banner-Design, das bereit ist, in Ihrem Shopify-Shop implementiert zu werden. Und Sie haben es auf Ihrer Website verwendet, um für ein Produkt, Verkaufsveranstaltungen oder sogar für eine Werbeaktion zu werben . Nehmen Sie noch heute an dem Kurs teil und lassen Sie uns mit der Gestaltung von Bannern beginnen, die dazu beitragen, die Konversionen und den Umsatz in Ihrem Shopify-Shop zu steigern . 2. Schaue dir andere Shopify Store Banner für Inspiration und Ideen: Hallo und willkommen zurück. In diesem Video schauen wir uns einige andere Shopify-Shop-Banner an, um Inspiration und Ideen für unser eigenes Design zu erhalten. Denn bevor wir mit der Gestaltung unseres eigenen Banners beginnen, ist es wichtig, sich inspirieren zu lassen und die Prinzipien und Best Practices für die Erstellung effektiver Banner zu verstehen die Prinzipien und Best Practices . Wie Sie hier sehen können, habe ich Pinterest geöffnet und nach Shopify-Shop-Bannern gesucht. Jetzt können wir hier ein paar Beispiele sehen. Ich möchte sie jedoch gerne Banner nennen. Manche andere Leute nennen sie Slider. Wie Sie hier sehen können, habe ich auch nach Shopify-Store-Slidern gesucht. Sie sind im Grunde genau dasselbe, aber manche Leute benutzen einfach den Wortslider und manche Leute benutzen das Wort Banner. Lassen Sie sich davon jedoch nicht ablenken, denn sie sind im Grunde genau dasselbe. Schauen wir uns also ein paar Beispiele an. Jetzt gleich, ich finde, der hier unten sieht ziemlich gut aus. Also klicke ich hier auf Öffnen und wir können das Banner für diesen Shop sehen. Das ist also ein ziemlich einfaches Banner, es hat nur etwas Text und einen Button und ein Bild ihres Produkts auf der rechten Seite. Wenn ich also hier nach unten scrolle, sehen wir noch ein paar Beispiele. Dieser hier sieht z.B. ganz gut aus. Dies ist eine Küche, in der wir nur Töpfe und Pfannen haben und es ist wirklich einfach, aber auch effektiv. Wenn ich dann zu der anderen Suche auf Pinterest zurückkehre, wie Sie sehen können, habe ich hier Bannern eines Shopify-Shops gesucht. Wir können uns auch hier die Beispiele ansehen . Also wenn ich zum Beispiel damit beginne, hier auf das erste zu klicken, können wir sehen, dass es sich um ein Black Friday-Banner handelt. Dieser erste und der zweite sind auch für ein Mode - oder Bekleidungsunternehmen. Und das dritte ist ein einfaches Modesale-Angebot. Wenn ich dann von hier aus nach unten scrolle, haben wir hier auch ein paar weitere Beispiele . Die ersten beiden sehen also ziemlich gut aus, bei diesem ersten handelt es sich um Black Friday-Banner, und bei diesem zweiten handelt es sich um altmodische Banner. Nur hier. Sie können sehen, dass dies ein völlig anderer Designstil ist, sprudelnder und bunter ist, wohingegen dieser das schwarz-rote Thema für Black Friday hat . Zum Schluss werde ich hier auf dieses klicken , damit wir es uns genauer ansehen können. Weil dies ein fortgeschrittenerer Bannerstil ist, z. B. ist dieser erste eher ein 3D-Banner. Sie können sehen, dass es hier Hautpflegeprodukte gibt. Das zweite ist ein Küchenbanner mit Lebensmitteln und Küchenprodukten. Und dann haben wir mehr Beauty-Produkte und dann ein Sportbanner. Und schließlich auch noch ein Fashion-Burnout. Wir haben also eine Menge verschiedener Beispiele und Ideen, von denen ich hoffe, dass sie Ihnen einige Anregungen für die Erstellung Ihres eigenen Banners geben . Ich denke, wir sind jetzt bereit, Canva zu öffnen und mit den Funktionen von Canva herumzuspielen , um zu sehen, was wir für unseren eigenen Shopify-Shop erstellen können. Jetzt möchten Sie vielleicht etwas völlig anderes erstellen als das , was ich erstelle. Dies wäre jedoch nur ein Beispiel, das Sie durch den Prozess der Erstellung eines Banners in Canva führt. Das ist also alles für dieses Video. Wir sind jetzt bereit, unser eigenes Banner in Canva zu entwerfen. Wir sehen uns im nächsten. Danke fürs Zuschauen und auf Wiedersehen. 3. So entwerfen Sie Banner für Ihren Shopify Store mit Canva: Hallo und willkommen zurück. In diesem Video zeige ich Ihnen, wie Sie Banner für Ihren Shopify-Shop entwerfen, genau wie das, das Sie hier auf meiner Website sehen können Canva Banner für Ihren Shopify-Shop entwerfen, genau wie das, das Sie hier auf meiner Website sehen können. Lassen Sie uns also direkt darauf eingehen. Zunächst öffnen wir Canva und jetzt erstellen wir ein neues Design. Jetzt erstelle ich ein Design in benutzerdefinierter Größe, und das wird 2.400 mal 1.200 Pixel sein. Dies kann also je nach Art des Banners, das Sie erstellen möchten, variieren. Aber genau das werden wir für dieses Video verwenden. Dann klicken Sie einfach auf Erstellen, neues Design. Los geht's. Jetzt sind wir bereit, mit der Erstellung unseres Banners für unseren Shopify-Shop zu beginnen . Auf dem Banner, das Sie vor ein paar Sekunden in meinem Shopify-Shop gesehen haben, wurde es in zwei Abschnitte aufgeteilt. Ich hatte Text auf der linken Seite und ein Bild auf der rechten Seite. Um das zu tun, füge ich zunächst das Bild rechts hier hinzu. Also füge ich ein quadratisches Rahmenelement für das Bild hinzu. Ich gehe zu Elements und suche. Und dann klicken wir auf den Rahmen. Also werden wir einfach einen perfekten quadratischen Rahmen finden. Also dieser hier ist gut. Es hat jedoch einen weißen Rand, sodass einer nicht das ist, was wir wollen. Dieser hier ist perfekt. Also werden wir unser Design bearbeiten. Und dann werden wir es größer machen. Und wir werden es auch 1.100 Pixel hoch und breit machen . Da haben wir's, das ist perfekt. Das ist also 1.100 mal 1.100. Also haben wir den Rahmen bereits hinzugefügt. Jetzt lade ich ein Foto hoch , um es in diesen Rahmen zu ziehen. Und wie ihr seht, habe ich schon ein paar Fotos hochgeladen, also ziehe ich sie einfach in dieses hier rein. Dann doppelklicke ich darauf und vergewissere mich, dass es im Rahmen zentriert ist. Da haben wir es. Jetzt klicke ich erneut auf den Rahmen und vergewissere mich , dass er zentriert ist. Ich denke, im Moment wird es ungefähr richtig sein. Und jetzt sind wir bereit, den Text links hier hinzuzufügen . Was ich also tun werde, ist ein einfaches quadratisches Element hinzuzufügen, auf das wir unseren Text setzen werden. Also gehe ich einfach zu Elements und tippe Quadrat ein. Los geht's. Dieses erste Quadrat ist also absolut perfekt. Also verschiebe ich jetzt einfach das Quadrat in die obere linke Ecke. Und ich werde die Umschalttaste gedrückt halten und klicken und ziehen, um das Quadrat zu vergrößern. Wenn Sie die Umschalttaste gedrückt halten, werden Breite und Höhe festgelegt, sodass sie sich nicht zufällig ändern. Und damit wir es exakt quadratisch halten können. Und denken Sie daran, wir wollen , dass es 1.100 mal 1.100 sind. Da haben wir es. Das ist perfekt. Jetzt werde ich sie einfach beide in Einklang bringen. Und ich werde beide auswählen und gruppieren. Dann werde ich sie auch beide zusammen schicken. Da haben wir es. Das ist also der erste Teil fertig. Jetzt möchte ich die Farbe des Quadrats ändern. Also werde ich darauf klicken und auf den Farbblock hier oben klicken. Und jetzt füge ich meine eigene benutzerdefinierte Farbe hinzu. Sie können jede gewünschte Farbe hinzufügen. Und Sie können das Quadrat in jeder gewünschten Farbe gestalten. Natürlich können Sie Ihre eigenen Markenfarben kaufen. Und genau das werde ich tun. Also füge ich einfach den Farbcode hier oben ein. Und ich klicke auf die Farbe, die ich hinzugefügt habe. Da haben wir es. Es ist nicht ganz weiß. Wie du siehst. Es unterscheidet sich geringfügig vom Hintergrund, der genau weiß ist. Und es ist nicht genau dasselbe wie der Hintergrund des Fotos Ivor. Wir verleihen diesem Design eine schöne Dynamik . Jetzt sind wir bereit, unsere Texte zu unserem Banner-Design hinzuzufügen . Gehen wir also zum Text auf der linken Seite hier. Und wir fügen einfach eine Überschrift hinzu. Jetzt werde ich diesen Text ersetzen und 20% schreiben. Und ich werde den Text viel größer machen. Tatsächlich werde ich hier oben die Schriftgröße einfach auf 270 Pixel einstellen und die Eingabetaste drücken. Da haben wir es. Jetzt können Sie die Schrift so einstellen , wie Sie sie möchten. Ich werde hier jedoch die League Spartan-Schrift verwenden . Jetzt werde ich sicherstellen, dass das in der Box auf der linken Seite genau hier zentriert ist . Um das zu tun, muss ich die Gruppierung dieser beiden Elemente aufheben. Und jetzt kann ich es zentrieren. Da haben wir es, das ist perfekt. Und jetzt können wir diese beiden wieder zusammenfassen. Okay, wir haben also den Hauptteil erledigt. Jetzt haben wir nur noch ein paar Dinge zu tun und dann wird das so gut wie abgeschlossen sein. Also füge ich zunächst ein weiteres quadratisches Element hinzu. Und ich werde es in der gleichen Farbe wie den Hintergrund des linken Felds machen . Also das ist dieser hier. Was ich jetzt damit machen werde, ist es vor den Text zu stellen. Und ich werde die untere Hälfte der Null abdecken . Da haben wir es. Ich denke, ich könnte es ein bisschen niedriger machen. Jetzt denke ich, dass das einen coolen Effekt haben wird. Und was ich tun werde, ist das Wort oben in dieses Feld einzufügen . Also werde ich den Text duplizieren. Und ich werde abschreiben. Und natürlich aktivieren Sie den Großbuchstabenmodus. Und dieser Text muss nur etwa 70 Pixel groß sein. Lassen Sie uns also die 200 entfernen und nur 70 daraus machen. Jetzt verschieben wir den Text hierher, sodass er in der unteren Hälfte der Null liegt. Und da haben wir es. Ich finde das sieht absolut fantastisch aus. Jetzt füge ich die letzten Texte hinzu , die wir zu diesem Design hinzufügen müssen. Also werde ich diesen Text hier duplizieren. Und ich werde es ein bisschen kleiner machen. Ich denke an 15 Pixel. Ich werde auch die Schrift auf Assistant Extra Light ändern . Und ich werde einfach die Textelemente hierher verschieben. Und hier werde ich Use-Code schreiben. Sommer an der Kasse. Jetzt wollen wir nur , dass das in einer Zeile steht. Einfach so. Und ich werde den Gutscheincode fett formatieren. Jetzt werde ich das einfach unter die Nachricht von dort legen . Und da haben wir es. Wir haben unser Banner erstellt. Ich finde, das sieht absolut fantastisch aus. Und natürlich können Sie Ihrem Banner Ihre eigenen einzigartigen Stile hinzufügen . Aber ich finde, dass das ein wirklich cooles Design ist. Jetzt können Sie dies herunterladen und dann in Ihren Shopify-Shop hochladen. Vorher werde ich Ihnen jedoch zeigen, wie Sie einen anderen Stil desselben Banners entwerfen können. Ich werde diese Seite also duplizieren, indem ich hier auf dieses Symbol klicke, damit wir nicht alles noch einmal entwerfen müssen. Und jetzt werde ich die Gruppierung dieser beiden Elemente aufheben. Und ich werde hier nur dieses Foto auswählen. Jetzt werde ich es ein bisschen kleiner machen. Ich denke, da ist es gut. Und ich werde es reinbringen. Und dann werde ich es dreimal duplizieren. Jetzt werde ich eine rechts davon, eine darunter und eine hier unten platzieren . Wir müssen nur sicherstellen, dass alles richtig angeordnet ist. Da haben wir es. Jetzt denke ich, dass diese Lücke in der Mitte etwas zu groß ist. Also muss ich die eigentlich etwas größer machen. Also fange ich hier mit diesem an. Ich denke, 540 könnte gut sein. Mal sehen, wie das funktioniert. Ich werde es noch dreimal duplizieren. Und ich werde alles zusammenstellen. Wir müssen nur sicherstellen, dass alles perfekt aufeinander abgestimmt ist. Dann auch dieser hier. Okay, das ist noch nicht ganz perfekt. Ich wähle einfach die beiden auf der linken Seite aus und werde sie leicht hineinbringen. Da haben wir es. Ich finde, das sieht absolut perfekt aus. Jetzt gehe ich wieder zu Uploads. Und ich werde einfach ein paar andere Bilder hineinziehen. Und natürlich möchten wir sicherstellen, dass alle unsere Fotos in der Mitte der Bildrahmen stehen . Und zu guter Letzt auch dieser hier. Und da haben wir es. Deshalb haben wir gerade zwei verschiedene Shopify-Banner erstellt. sind ähnliche Stile, aber es gibt auch Unterschiede. Also hier steht an der Kasse 20% von US Code Summer mit dem Bild einer Bucket Tax auf der rechten Seite, oder einfach irgendein Bild, du könntest ein beliebiges Produktfoto auf der rechten Seite hinzufügen . So können Sie sich auf ein Produkt konzentrieren. Und dann haben wir dieses Einstellrad hier unten, dem wir uns auf vier verschiedene Produkte konzentrieren können . Was ich jetzt tun werde, hängt also mit unserem Projekt zusammen. Ich werde heute einfach zubinden, es sind Shopify-Banner. Und um einzutreten. Um sie jetzt herunterzuladen, klicke ich auf Teilen und Herunterladen. Wir möchten beide Seiten herunterladen und dann klicke ich auf die Schaltfläche Herunterladen. Jetzt möchten Sie nur noch sicherstellen, dass Sie sie am richtigen Ort auf Ihrem Computer speichern . Und wenn Sie bereit sind, klicken Sie auf Speichern. Jetzt klicke ich auf In Ordner anzeigen. Und weil wir mehrere Designs gleichzeitig heruntergeladen haben , haben wir eine Zip-Datei erhalten. Also klicke ich mit der rechten Maustaste darauf und klicke auf Zu Shopify-Bannern extrahieren. Dadurch erhalten wir dann einen Ordner mit den Designs, die wir erstellt haben. Gehen wir nun zurück zu unserem Shopify-Shop und wir können unsere Banner in unseren Shop hochladen. Also klicke ich einfach auf den Online-Shop auf der linken Seite hier. Und dann klicke ich auf Anpassen. Bevor ich unsere Banner hochlade, werde ich diesen Block in der Mitte entfernen. Also werde ich die Texte in der Überschrift löschen. Und dann lösche ich diese beiden Schaltflächen. Und jetzt, wenn ich zurück auf das Banner klicke und den Container deaktiviere und auch das zweite Bild lösche. Jetzt müssen wir nur noch die Banner hochladen , die wir entworfen haben. Also klicke ich auf dem ersten Bild auf Ändern und wähle Bild aus. Jetzt klicke ich auf Hochladen. Und in dem Ordner, den wir gerade erstellt haben, wähle ich beide aus und klicke auf Öffnen. Jetzt können wir auf unserer Website sehen, wie diese aussehen. Also hier sind die einzelnen Produkte. Also haben sie das ausgegeben, damit wir uns auf das eine Produkt konzentrieren können und dann haben wir das andere hier. Dadurch können wir uns auf vier separate Produkte konzentrieren. Wählen Sie also das Banner aus, das Sie auf Ihren Websites anzeigen möchten . Und dann klicken Sie unten hier unten auf Auswählen und oben rechts hier oben auf Speichern. Jetzt können wir den Seiteneditor verlassen und können uns unseren Shop ansehen, um zu sehen, wie er mit dem Banner aussieht , das wir gerade entworfen haben. Okay, das sieht gut aus, aber es gibt noch eine andere Sache, die wir im Seiteneditor ändern müssen . Also werde ich hier unten erneut auf Homepage bearbeiten klicken. Und ich wähle das Bildbanner aus. Und ich werde hier diese Option aktivieren, die besagt, dass die Abschnittshöhe an die erste Bildgröße angepasst wird. Also klicke ich darauf und dann klicke ich erneut auf die Schaltfläche Speichern. Und jetzt können wir den Editor verlassen und unsere Websites erneut öffnen. Und wie Sie sehen können, sieht das jetzt viel, viel besser aus, da es nicht mehr eingequetscht wird , weil das Banner zuvor so eingerichtet war. Schauen wir uns nun an, wie das andere Banner aussieht , das wir entworfen haben. Wir können die Homepage wieder bearbeiten. Und ich wähle einfach das andere Banner aus. Also klicken wir auf das Banner, klicken auf Ändern und ändern Sie das Bild. Und wir werden hier auf diesen klicken. Dann gehe ich zu Auswählen und speichern und verlasse den Editor und sehe mir Ihren Online-Shop an. Wenn ich nun diese Seite aktualisiere und los geht's, können wir jetzt sehen , wie das erste Banner aussieht , das wir entworfen haben. Das Banner, das sich auf die einzelnen Produkte konzentriert. Da haben wir es also. Wir haben Canva erfolgreich verwendet, um einige absolut fantastisch aussehende Shopify-Website-Banner zu entwerfen einige absolut fantastisch . Das ist alles für dieses Video. Hoffe es hat dir gefallen und ich hoffe, dass du etwas Neues gelernt hast. Wir sehen uns im nächsten Mal wieder, danke und auf Wiedersehen. 4. Kursprojekt: Willkommen zum letzten Video des Kurses. In diesem Video besprechen wir das Unterrichtsprojekt und wie Sie alles , was Sie in diesem Kurs gelernt haben, in die Praxis umsetzen können . Das Klassenprojekt besteht darin, mit Canva ein Banner für Ihren Shopify-Shop zu erstellen . Das Ziel dieses Projekts ist es, ein auffälliges Banner zu entwerfen , mit dem Sie die Konversionen in Ihrem Shopify-Shop steigern können. Um das Projekt abzuschließen, müssen Sie die folgenden Schritte ausführen. Schauen Sie sich zunächst einige andere Shopify-Shops an , um zu sehen, wie ihre Banner aussehen, und um Inspiration und Ideen für Ihre eigenen zu erhalten . Wählen Sie dann eine Vorlage oder beginnen Sie bei Canva von vorne. Anschließend wird ein Bannerdesign erstellt, das zu Ihrer Marke passt und Ihre Zielgruppe anspricht. Fügen Sie Texte, Bilder und Animationen hinzu, wenn Sie möchten. Und schließlich speichern und exportieren Sie Ihr Design. Sobald Sie das Projekt abgeschlossen haben, erhalten Sie ein Banner-Design, das bereit ist, in Ihrem Shopify-Shop implementiert und auf Ihrer Website verwendet zu werden Ihrem Shopify-Shop implementiert und auf Ihrer , um für ein Produkt, einen Verkauf, eine Veranstaltung oder eine andere Werbeaktion zu werben . Ich würde mich freuen, Ihr endgültiges Biodesign zu sehen, also zögern Sie nicht, es im Projektbereich dieses Kurses einzureichen , wenn Sie Hilfe benötigen Senden Sie unbedingt eine Nachricht. Und denken Sie daran, dass Übung den Meister macht. Und je mehr Sie entwerfen, desto besser werden Sie. Also danke, dass du an diesem Kurs teilgenommen hast. Ich hoffe es hat euch gefallen und ihr habt etwas Neues gelernt. Und ich hoffe, wir sehen uns bald in einem anderen. Auf Wiedersehen.