7 modi per creare layout di siti Web di band che amerai

Sia che tu stia appena iniziando con un nuovo design del sito web della band o aggiornando il tuo sito per un nuovo progetto in lavorazione, la piattaforma di Bandzoogle offre ottimi strumenti per espandere le possibilità del layout del tuo sito web.

Indipendentemente dal modello di sito Web della band che scegli, ci sono molti modi per personalizzare il layout per creare un look che funzioni davvero per le tue esigenze estetiche specifiche.

Quando crei un sito web per la tua band o un altro progetto musicale, è importante disporre le informazioni nel modo più chiaro possibile, pur restando fedele al tuo marchio e ai tuoi valori di artista.

La funzione "Immagine e testo" è una delle mie funzioni preferite da utilizzare durante la creazione di layout unici per le pagine del sito Web. È una funzionalità super versatile e garantisce una formattazione pulita su tutti i dispositivi.

Ti mostrerò come utilizzare questa funzione, in combinazione con le personalizzazioni delle sezioni, per creare layout di siti Web a 7 bande per vari scopi sul tuo sito Web.

Prima di tutto, spiegherò tutti gli elementi della funzione "Immagine e testo" che possono essere utilizzati o omessi secondo necessità:

• Immagine: ovviamente, puoi aggiungere un'immagine alla funzione "Immagine e testo". Questa immagine può essere ritagliata come un quadrato, un cerchio o con rapporti 5:4 o 16:9. Puoi anche aggiungere un collegamento ipertestuale a questa immagine nell'area "Collegamento immagine". Assicurati di ottimizzare le tue immagini per il web prima di caricarle sul tuo sito web.
• Intestazione: puoi aggiungere un'intestazione che estrae lo stile del carattere dalle impostazioni "Intestazione 1" nella scheda Modifica tema.
• Sottotitolo: puoi aggiungere un sottotitolo che estragga lo stile del carattere dalle impostazioni "Titolo 2" nella scheda Modifica tema.
• Descrizione: la descrizione o il "corpo del testo" qui può essere breve o lungo e ci sono opzioni per avvolgere il testo attorno all'immagine se è un pezzo di testo piuttosto lungo (forse per una biografia dell'artista approfondita - ne parleremo più avanti ). I collegamenti ipertestuali possono essere aggiunti al testo nell'area della descrizione.
• Pulsante: un pulsante può collegarsi a una pagina esterna, una pagina del tuo sito, una traccia, un album, un file o un indirizzo e-mail.

Ora, ecco 7 modi interessanti per applicare questa funzione e altre personalizzazioni del layout al tuo sito Web: divertiti!

1. Organizza il tuo catalogo musicale, portfolio di progetti e altro ancora

Se hai molti progetti, servizi, album, ecc. diversi che vorresti evidenziare su una pagina, un'ottima opzione è creare una "pagina di destinazione" utilizzando più funzioni Immagine e Testo in più colonne della tua pagina.

Per vedere questo in azione, dai un'occhiata alla pagina "Produzione e ingegneria" di Jojo Worthington, dove usa le caratteristiche di immagini e testo per elencare tutti i suoi crediti in modo organizzato.

Sito dell'artista: Jojo Worthington

Per ottenere un aspetto simile, crea prima una nuova pagina o sezione. Per creare una nuova pagina, in Modifica contenuto, fai clic su "Pagine" > "Aggiungi una pagina" e nomina la pagina in base alle esigenze. Fai clic su "Crea la mia pagina".

Per creare una nuova sezione, in Modifica contenuto, passa con il mouse tra due sezioni della pagina e fai clic sul pulsante blu "+ Aggiungi una sezione".

Progetta un sito Web straordinario con un aspetto personalizzato che si adatta alla tua musica. Crea un sito web con Bandzoogle ora!

Consiglierei di dividere la sezione di una pagina in due o tre colonne per iniziare. In Modifica contenuto, fai clic su "Nuova sezione" (la linea orizzontale blu all'interno del layout di pagina), quindi passa il mouse sulla sezione che hai creato e fai clic su "Modifica colonne" - quindi seleziona "2 colonne" o "3 colonne" qui.

Per aggiungere una funzione "Immagine e testo", fai clic su "Aggiungi funzione" > "Immagine e testo" e posiziona la funzione in una delle colonne di questa sezione utilizzando le frecce di posizionamento grigie. Scegli l'opzione di visualizzazione "Impila" per fare in modo che il pulsante e qualsiasi testo si trovino sotto l'immagine.

Quindi, aggiungi un'immagine che rappresenti un progetto/album/ecc. e aggiungi il testo secondo necessità. Se non vuoi titoli/descrizioni, rimuovi i prompt dai campi di testo e lasciali vuoti.

Per aggiungere un collegamento a questa immagine, fai clic su "modifica" sotto la miniatura dell'immagine. Apparirà un menu accanto all'immagine. Fai clic su "Collegamento" e quindi scegli il tipo di collegamento: se stai creando una pagina discografica, puoi collegarti a "Un album" o "Una traccia" per collegare un album o un brano/singolo impostato sul tuo sito. Se stai realizzando un portfolio come produttore, ingegnere, ecc, puoi collegarti a una "pagina esterna" e inserire l'URL del progetto nel campo fornito. Fare clic su Applica.
Ultimo ma non meno importante, c'è l'opzione Pulsante: per escludere il pulsante, seleziona "Nessun collegamento" in "Collegamento pulsante". Oppure scegli un altro tipo di link (probabilmente lo stesso link che hai applicato all'immagine).

Fare clic su Salva per salvare tutte queste modifiche. Continua ad aggiungere le funzionalità "Immagine e testo" per tutti gli elementi nella tua discografia, portfolio di progetti, ecc. Una volta creati, avrai una grande griglia di elementi su cui i visitatori del tuo sito possono fare clic.

2. Evidenzia progetti o prodotti sulla tua home page

Un altro ottimo modo per utilizzare la funzione "Immagine e testo" è evidenziare alcuni elementi chiave sulla home page del sito Web della tua band. Una home page è un ottimo posto per fornire una breve panoramica dei tuoi ultimi progetti e di tutto ciò che offre il tuo sito. Forse hai alcuni annunci interessanti da fare o vuoi portare i visitatori del tuo sito al tuo nuovo album, al tuo negozio di merchandising online o al programma del tuo tour.

Puoi utilizzare la funzione "Immagine e testo" per evidenziare in modo pulito queste cose e collegare le persone alle pagine interne del tuo sito dove è possibile trovare questo contenuto. L'uso di un'immagine è sempre utile per catturare l'attenzione dei visitatori del tuo sito. Ciò mantiene la tua home page pulita e semplice e promuove una maggiore interazione con le pagine interne del tuo sito.

Wolf & Moon e Lightbound Music fanno entrambi un ottimo lavoro nelle loro home page.

Sito dell'artista: Wolf & Moon

Sito dell'artista: Lightbound Music

Nota l'uso dello stile di visualizzazione "Collage" su entrambe queste pagine. Hanno personalizzato i modelli dei loro siti Web per completare i loro nuovi prodotti/progetti in modo che il colore di sfondo della sovrapposizione del collage corrisponda perfettamente alla grafica.

Puoi davvero giocare con più colori qui, tra il colore di sfondo della sezione, il colore di sovrapposizione del collage, i colori dei pulsanti e i colori nell'immagine che usi.

3. Aumenta la tua biografia per aggiungere personalità

Con le opzioni di titolo, sottotitolo, pulsante e immagine nella funzione "Immagine e testo", puoi aggiungere molta personalità quando scrivi la tua biografia del musicista. Puoi scegliere di includere o omettere uno qualsiasi di questi elementi secondo necessità.

Annie Sumi fa un ottimo lavoro su questo nella sua pagina Bio. Annie ha inserito una citazione che risuona con la sua pratica musicale nel campo "sottotitolo" della funzione "Immagine e testo". Questo ha uno stile diverso ed è evidenziato nella parte superiore della sua biografia. Ha usato l'opzione di visualizzazione "divisa" per far sedere l'immagine accanto al testo bio.

Ha ritagliato l'immagine del suo primo piano dell'artista in modo che sia un cerchio: non solo questo completa l'immagine, ma scorre bene con i temi della sua musica. Per ritagliare un'immagine nella funzione "immagine e testo", fai clic su "modifica" sotto la miniatura dell'immagine. Apparirà un menu accanto all'immagine. Fai clic su "Ritaglia" qui e scegli uno stile di ritaglio che funzioni per te. Trascina l'immagine secondo necessità per posizionarla e fai clic su Applica.

Ha anche attivato "Attivo" l'interruttore "Avvolgi testo" in "Opzioni" in modo che il testo si avvolga attorno all'immagine. Questo risponderà bene alle diverse dimensioni dello schermo e manterrà il layout della pagina completo per l'intera lunghezza della biografia.

Artista: Annie Sumi

4. Crea un EPK super organizzato

Un'altra opzione di visualizzazione per la funzione "Immagine e testo" è "Testo sull'immagine". Questo libera così tante possibilità per creare dei bei layout che sono molto incentrati sull'immagine. Questa opzione funziona magnificamente per creare un EPK sul tuo sito web che i booker e altre persone del settore apprezzeranno poiché possono trovare rapidamente ciò che stanno cercando con un clic. Sto prendendo questo esempio dall'EPK della mia band, in cui gli elementi sono chiaramente delineati usando l'opzione "Testo sull'immagine".

Qui, ho impostato un layout simile dal suggerimento "Pagina di destinazione" sopra (#1). Ho usato alcune immagini materiche di un servizio fotografico che abbiamo fatto per il nostro nuovo album e le ho ritagliate tutte come cerchi. Poi ho aggiunto un semplice "Titolo" per ogni immagine e caratteristica del testo per etichettare i vari elementi inclusi nell'EPK della nostra band.

Ogni immagine è collegata a una pagina separata non nel menu che contiene il contenuto per ciascuna categoria. Ad esempio, ho una pagina speciale "EPK - Photos" con tutte le nostre foto per la stampa.

Sentiti libero di provarlo per una pagina EPK molto visiva!

Sito dell'artista: The Lifers

5. Crea una pagina Info per Abbonamenti, Servizi, ecc.

Molti dei nostri membri offrono servizi straordinari ai visitatori del loro sito: che si tratti di vendere abbonamenti di fan o altri servizi personalizzati (lezioni di musica, sessioni di registrazione, terapia, ecc.), siamo sempre sorpresi da ciò che i nostri membri portano nel mondo.

Jackie Gage ha creato una meravigliosa pagina informativa per le loro offerte di abbonamento. Jackie utilizza l'opzione di visualizzazione "Dividi" per la funzione "Immagine e testo" per delineare i tipi di servizi offerti. Jackie fa un ottimo uso dei componenti Intestazione, sottotitoli e pulsanti della funzione Immagine e testo in modo che le informazioni chiave siano chiaramente delineate per i visitatori del sito. Meraviglioso lavoro qui!

Sito dell'artista: Jackie Gage

6. Usa gli sfondi delle sezioni per un grande impatto nei tuoi layout

C'è così tanto potere in grandi immagini. Aggiungendo un'immagine di sfondo a una sezione, spezzerai visivamente la pagina. Questa pausa è accolta con favore dai nostri occhi umani che scorrono e quel contenuto apparirà immediatamente come importante ed eccitante. Questo è un altro ottimo modo per incorporare un invito all'azione da qualche parte in una pagina.

L'esperienza di Intune lo fa magnificamente sulla loro home page. Hanno impostato una bella immagine materica come "immagine di sfondo della sezione" su una sezione a metà della loro Home page. Hanno aggiunto una loro citazione nella funzione "Testo", seguita da un pulsante collegato, che invita i visitatori a prenotare una sessione.

Questo layout è perfetto, poiché dà un tocco personale, è visivamente interessante e fornisce un messaggio chiaro per coinvolgere. La semplicità è davvero la chiave qui.

Sito dell'artista: Becki Fleischer

7. Divertiti!

Ci sono tanti modi per essere giocosi con i layout se sei disposto a sperimentare un po'. Ecco un ottimo esempio di un sito che gioca con le possibilità di layout utilizzando ritagli sagomati, colori divertenti, sfondi di sezioni, diversi layout di colonne e altro ancora.

Piper Hayes ha scolpito una grande estetica sul suo sito di Vocal Coaching con l'uso del ritaglio circolare e l'opzione di visualizzazione "collage" per la funzione Immagine e Testo. Questo sito combina una fantastica tavolozza di colori, deliziose immagini materiche e tocchi personali senza paura per creare uno spazio online molto accogliente.

Sito dell'artista: Piper Hayes

Spero che questo post abbia contribuito a fornire qualche ispirazione su come portare tocchi personali ed esteticamente piacevoli al tuo sito web creando layout diversi sulle tue pagine. Naturalmente, sentiti libero di metterti in contatto con il nostro pluripremiato team di supporto se desideri che diamo un'occhiata a ciò che hai creato e fornisci un feedback. Offriamo recensioni gratuite del sito web della band a tutti i nostri membri!