7 Möglichkeiten, Band-Website-Layouts zu erstellen, die Sie lieben werden
Veröffentlicht: 2022-06-03 Egal, ob Sie gerade mit dem Design einer neuen Band-Website beginnen oder Ihre Website für ein neues Projekt in Arbeit aktualisieren, die Plattform von Bandzoogle bietet großartige Tools, um die Möglichkeiten Ihres Website-Layouts zu erweitern.
Egal für welche Band-Website-Vorlage Sie sich entscheiden, es gibt viele Möglichkeiten, das Layout anzupassen, um einen Look zu schaffen, der wirklich zu Ihren spezifischen Bedürfnissen und Ihrer Ästhetik passt.
Wenn Sie eine Website für Ihre Band oder ein anderes Musikprojekt erstellen, ist es wichtig, Informationen so klar wie möglich darzustellen und gleichzeitig Ihrem Branding und Ihren Werten als Künstler treu zu bleiben.
Die Funktion „Bild und Text“ ist eine meiner Lieblingsfunktionen, die ich beim Erstellen einzigartiger Layouts für Website-Seiten verwende. Es ist eine super vielseitige Funktion und sorgt für eine saubere Formatierung auf allen Geräten.
Ich zeige Ihnen, wie Sie diese Funktion in Kombination mit Abschnittsanpassungen verwenden, um 7-Band-Website-Layouts für verschiedene Zwecke auf Ihrer Website zu erstellen.
Zunächst erkläre ich alle Elemente der Funktion „Bild und Text“, die je nach Bedarf verwendet oder weggelassen werden können:
- Bild: Natürlich können Sie der Funktion „Bild und Text“ ein Bild hinzufügen. Dieses Bild kann als Quadrat, Kreis oder im Verhältnis 5:4 oder 16:9 zugeschnitten werden. Zu diesem Bild können Sie im Bereich „Bildlink“ auch einen Hyperlink hinzufügen. Achten Sie darauf, Ihre Bilder für das Internet zu optimieren, bevor Sie sie auf Ihre Website hochladen.
- Überschrift: Sie können eine Überschrift hinzufügen, die ihren Schriftstil aus den „Überschrift 1“-Einstellungen auf der Registerkarte „Design bearbeiten“ bezieht.
- Unterüberschrift: Sie können eine Unterüberschrift hinzufügen, die ihren Schriftstil aus den „Überschrift 2“-Einstellungen auf der Registerkarte „Design bearbeiten“ bezieht.
- Beschreibung: Die Beschreibung oder der 'Haupttext' hier kann kurz oder lang sein, und es gibt Optionen, den Text um das Bild zu fließen, wenn es sich um einen ziemlich langen Text handelt (vielleicht für eine ausführliche Künstlerbiographie - dazu später mehr ). Dem Text im Beschreibungsbereich können Hyperlinks hinzugefügt werden.
- Schaltfläche: Eine Schaltfläche kann auf eine externe Seite, eine Seite auf Ihrer Website, einen Titel, ein Album, eine Datei oder eine E-Mail-Adresse verlinken.
Hier kommen nun 7 interessante Möglichkeiten, diese Funktion und andere Layout-Anpassungen auf Ihrer Website anzuwenden – viel Spaß!
1. Organisieren Sie Ihren Musikkatalog, Ihr Projektportfolio und mehr
Wenn Sie viele verschiedene Projekte, Dienste, Alben usw. haben, die Sie auf einer Seite hervorheben möchten, ist es eine großartige Option, eine „Landingpage“ mit mehreren Bild- und Textfunktionen in mehreren Spalten auf Ihrer Seite zu erstellen.
Um dies in Aktion zu sehen, besuchen Sie die Seite „Produktion und Technik“ von Jojo Worthington, auf der sie Bild- und Textfunktionen verwendet, um alle ihre Credits in organisierter Weise aufzulisten.
Künstler-Website: Jojo Worthington
Um ein ähnliches Aussehen zu erhalten, erstellen Sie zuerst eine neue Seite oder einen neuen Abschnitt. Um eine neue Seite zu erstellen, klicken Sie unter Inhalt bearbeiten auf „Seiten“ > „Seite hinzufügen“ und benennen Sie die Seite nach Bedarf. Klicken Sie auf „Meine Seite erstellen“.
Um einen neuen Abschnitt zu erstellen, bewegen Sie den Mauszeiger unter Inhalt bearbeiten zwischen zwei Abschnitte auf Ihrer Seite und klicken Sie auf die blaue Schaltfläche „+ Abschnitt hinzufügen“.
Entwerfen Sie eine atemberaubende Website mit einem benutzerdefinierten Erscheinungsbild, das zu Ihrer Musik passt. Erstellen Sie jetzt eine Website mit Bandzoogle!
Ich würde empfehlen, den Abschnitt einer Seite zunächst in zwei oder drei Spalten aufzuteilen. Klicken Sie unter Inhalt bearbeiten auf „Neuer Abschnitt“ (die blaue horizontale Linie innerhalb des Seitenlayouts) und bewegen Sie den Mauszeiger über den Abschnitt, den Sie erstellt haben, und klicken Sie auf „Spalten bearbeiten“ – wählen Sie dann hier „2 Spalten“ oder „3 Spalten“ aus.
Um ein „Bild und Text“-Feature hinzuzufügen, klicken Sie auf „Feature hinzufügen“ > „Bild und Text“ und platzieren Sie das Feature mithilfe der grauen Platzierungspfeile in einer der Spalten in diesem Abschnitt. Wählen Sie die Anzeigeoption „Stapeln“ , damit die Schaltfläche und der Text unter dem Bild platziert werden.
Fügen Sie dann ein Bild hinzu, das ein Projekt/Album/usw. darstellt, und fügen Sie nach Bedarf beliebigen Text hinzu. Wenn Sie keine Titel/Beschreibungen wünschen, entfernen Sie einfach die Eingabeaufforderungen aus den Textfeldern und lassen Sie sie leer.
Um einen Link zu diesem Bild hinzuzufügen, klicken Sie unter der Miniaturansicht des Bildes auf „Bearbeiten“. Neben dem Bild erscheint ein Menü. Klicken Sie auf „Link“ und wählen Sie dann Ihren Linktyp aus – wenn Sie eine Diskografieseite erstellen, können Sie auf „Ein Album“ oder „Ein Titel“ verlinken, um auf ein Album oder einen Titel/eine Single zu verlinken, die auf Ihrer Website eingerichtet sind. Wenn Sie als Produzent, Ingenieur usw. ein Portfolio erstellen, können Sie auf eine „externe Seite“ verlinken und die URL zum Projekt in das dafür vorgesehene Feld eingeben. Klicken Sie auf Übernehmen.
Zu guter Letzt gibt es noch die Schaltflächenoption – um die Schaltfläche auszuschließen, wählen Sie unter „Schaltflächenverknüpfung“ „Keine Verknüpfung“ aus. Oder wählen Sie einen anderen Linktyp (wahrscheinlich derselbe Link, den Sie auf Ihr Bild angewendet haben).
Klicken Sie auf Speichern, um alle diese Änderungen zu speichern. Fahren Sie fort, „Bild- und Text“-Funktionen für alle Elemente in Ihrer Diskografie, Ihrem Projektportfolio usw. hinzuzufügen. Sobald sie aufgebaut sind, haben Sie ein großartiges Raster von Elementen, durch die sich Ihre Website-Besucher klicken können.
2. Heben Sie Projekte oder Produkte auf Ihrer Homepage hervor
Eine weitere großartige Möglichkeit, die Funktion „Bild und Text“ zu verwenden, besteht darin, einige wichtige Elemente auf der Homepage Ihrer Band-Website hervorzuheben. Eine Homepage ist ein großartiger Ort, um einen kurzen Überblick über Ihre neuesten Projekte und alles, was Ihre Website zu bieten hat, zu geben. Vielleicht haben Sie ein paar aufregende Ankündigungen zu machen oder möchten Ihre Website-Besucher zu Ihrem neuen Album, Ihrem Online-Merch-Shop oder Ihrem Tourplan führen.
Sie können die Funktion „Bild und Text“ verwenden, um diese Dinge sauber hervorzuheben und die Leute auf die Innenseiten Ihrer Website zu verlinken, auf denen diese Inhalte zu finden sind. Die Verwendung eines Bildes ist immer praktisch, um die Aufmerksamkeit Ihrer Website-Besucher zu gewinnen. Dadurch sieht Ihre Homepage sauber und einfach aus und fördert die Interaktion mit den Innenseiten Ihrer Website.
Wolf & Moon und Lightbound Music leisten beide auf ihren Homepages hervorragende Arbeit.
Künstler-Website: Wolf & Moon

Künstler-Website: Lightbound Music
Beachten Sie die Verwendung des Anzeigestils „Collage“ auf diesen beiden Seiten. Sie haben ihre Website-Vorlagen angepasst, um ihre neuen Produkte/Projekte zu ergänzen, sodass die Hintergrundfarbe der Collagen-Überlagerung perfekt mit dem Kunstwerk übereinstimmt.
Sie können hier wirklich mit mehreren Farben spielen, zwischen der Hintergrundfarbe Ihres Abschnitts, der Überlagerungsfarbe der Collage, den Schaltflächenfarben und den Farben in dem von Ihnen verwendeten Bild.
3. Erweitern Sie Ihre Biografie, um Persönlichkeit hinzuzufügen
Mit den Titel-, Untertitel-, Schaltflächen- und Bildoptionen in der Funktion „Bild und Text“ können Sie beim Schreiben Ihrer Musikerbiografie viel Persönlichkeit hinzufügen. Sie können diese Elemente je nach Bedarf einbeziehen oder weglassen.
Annie Sumi macht das auf ihrer Bio-Seite großartig. Annie hat im Feld „Untertitel“ der Funktion „Bild und Text“ ein Zitat platziert, das ihre musikalische Praxis widerspiegelt. Dies wird anders gestaltet und oben in ihrer Biografie hervorgehoben. Sie hat die Anzeigeoption „Teilen“ verwendet, damit das Bild neben dem Bio-Text angezeigt wird.
Sie hat das Kopfbild ihres Künstlers so beschnitten, dass es einen Kreis bildet – dies ergänzt nicht nur das Bild, sondern fügt sich auch gut in die Themen ihrer Musik ein. Um ein Bild in Ihrer Funktion „Bild und Text“ zuzuschneiden, klicken Sie unter der Miniaturansicht des Bildes auf „Bearbeiten“. Neben dem Bild erscheint ein Menü. Klicken Sie hier auf „Zuschneiden“ und wählen Sie einen Zuschneidestil, der für Sie funktioniert. Ziehen Sie das Bild nach Bedarf, um es zu positionieren, und klicken Sie auf Anwenden.
Sie hat auch den Schalter „Text umbrechen“ unter „Optionen“ auf „Ein“ gestellt, damit der Text das Bild umfließt. Dies reagiert gut auf unterschiedliche Bildschirmgrößen und sorgt dafür, dass das Seitenlayout über die gesamte Länge der Biografie voll aussieht.
Künstler: Annie Sumi
4. Erstellen Sie ein super organisiertes EPK
Eine weitere Anzeigeoption für die Funktion „Bild und Text“ ist „Text auf Bild“. Dies eröffnet so viele Möglichkeiten, einige schöne Layouts zu erstellen, die sehr bildorientiert sind. Diese Option funktioniert hervorragend, um einen EPK auf Ihrer Website zu erstellen, den Bucher und andere Branchenkenner zu schätzen wissen, da sie mit einem Klick schnell finden können, wonach sie suchen. Ich ziehe dieses Beispiel aus dem EPK meiner eigenen Band, wo die Elemente mit der Option „Text auf Bild“ klar umrissen sind.
Hier habe ich ein ähnliches Layout aus dem obigen „Landing Page“-Vorschlag (Nr. 1) eingerichtet. Ich habe einige strukturierte Bilder aus einem Fotoshooting für unser neues Album verwendet und alle als Kreise zugeschnitten. Dann fügte ich jedem Bild und jeder Textfunktion eine einfache „Überschrift“ hinzu, um die verschiedenen Elemente zu kennzeichnen, die im EPK unserer Band enthalten sind.
Jedes Bild ist mit einer separaten Nicht-im-Menü-Seite verknüpft, die den Inhalt für jede Kategorie enthält. Zum Beispiel habe ich eine spezielle „EPK - Fotos“-Seite mit all unseren Pressefotos darin.
Fühlen Sie sich frei, dies für eine sehr visuelle EPK-Seite auszuprobieren!
Künstler-Website: The Lifers
5. Erstellen Sie eine Infoseite für Abonnements, Dienste usw.
Viele unserer Mitglieder bieten ihren Website-Besuchern erstaunliche Dienstleistungen an – ob dies der Verkauf von Fan-Abonnements oder andere kundenspezifische Dienstleistungen (Musikunterricht, Aufnahmesitzungen, Therapie usw.) sind, wir sind immer wieder erstaunt, was unsere Mitglieder der Welt bringen.
Jackie Gage hat eine wunderbare Infoseite für ihre Abonnementangebote erstellt. Jackie verwendet die Anzeigeoption „Geteilt“ für die Funktion „Bild und Text“, um die Art der angebotenen Dienste zu skizzieren. Jackie macht großen Gebrauch von den Überschriften-, Unterüberschriften- und Schaltflächenkomponenten der Bild- und Textfunktion, damit die wichtigsten Informationen für ihre Website-Besucher klar umrissen sind. Wunderbare Arbeit hier!
Künstler-Website: Jackie Gage
6 . Verwenden Sie Abschnittshintergründe für eine große Wirkung in Ihren Layouts
In großartigen Bildern steckt so viel Kraft. Indem Sie einem Abschnitt ein Hintergrundbild hinzufügen, gliedern Sie die Seite optisch auf. Diese Pause wird von unseren scrollenden menschlichen Augen begrüßt, und dieser Inhalt wird sofort als wichtig und aufregend herausspringen. Dies ist eine weitere großartige Möglichkeit, einen Call-to-Action irgendwo auf einer Seite zu integrieren.
Die Intune-Erfahrung tut dies wunderbar auf ihrer Homepage. Sie haben ein hübsches, strukturiertes Bild als „Abschnittshintergrundbild“ in einem Abschnitt auf halber Strecke ihrer Homepage festgelegt. Sie haben ein Zitat von sich selbst in die „Text“-Funktion eingefügt, gefolgt von einer verlinkten Schaltfläche, die Besucher aufruft, eine Sitzung zu buchen.
Dieses Layout ist perfekt, da es eine persönliche Note verleiht, visuell interessant ist und eine klare Botschaft zum Mitmachen vermittelt. Einfachheit ist hier wirklich der Schlüssel.
Künstler-Website: Becki Fleischer
7. Viel Spaß damit!
Es gibt so viele Möglichkeiten, mit Layouts spielerisch umzugehen, wenn Sie bereit sind, ein wenig zu experimentieren. Hier ist ein großartiges Beispiel für eine Website, die mit den Möglichkeiten von Layouts spielt, indem sie geformtes Zuschneiden, lustige Farben, Abschnittshintergründe, verschiedene Spaltenlayouts und mehr verwendet.
Piper Hayes hat auf ihrer Vocal Coaching-Website mit der Verwendung von kreisförmigem Zuschneiden und der Anzeigeoption „Collage“ für die Bild- und Textfunktion eine großartige Ästhetik herausgearbeitet. Diese Website kombiniert eine großartige Farbpalette, schöne strukturelle Bilder und furchtlose persönliche Berührungen, um einen sehr einladenden Online-Bereich zu schaffen.
Künstler-Website: Piper Hayes
Ich hoffe, dass dieser Beitrag dazu beigetragen hat, Inspiration dafür zu liefern, wie Sie Ihrer eigenen Website persönliche und ästhetisch ansprechende Akzente verleihen können, indem Sie verschiedene Layouts auf Ihren Seiten erstellen. Natürlich können Sie sich gerne an unser preisgekröntes Support-Team wenden, wenn Sie möchten, dass wir einen Blick auf Ihre Erstellung werfen und Feedback geben. Wir bieten allen unseren Mitgliedern kostenlose Band-Website-Rezensionen an!