7 maneiras de criar layouts de site de banda que você vai adorar

Se você está apenas começando com um novo design de site de banda ou atualizando seu site para um novo projeto em andamento, a plataforma do Bandzoogle oferece ótimas ferramentas para expandir as possibilidades de layout do seu site.

Não importa qual modelo de site de banda você escolha, há muitas maneiras de personalizar o layout para criar uma aparência que realmente funcione para suas necessidades e estéticas específicas.

Ao construir um site para sua banda ou outro projeto musical, é importante expor as informações da maneira mais clara possível, além de ser fiel à sua marca e valores como artista.

O recurso “Imagem e Texto” é um dos meus recursos favoritos para usar ao criar layouts exclusivos para páginas do site. É um recurso super versátil e garante uma formatação limpa em todos os dispositivos.

Mostrarei como usar esse recurso, em combinação com as personalizações de seção, para criar layouts de site de 7 bandas para vários propósitos em seu site.

Primeiramente, explicarei todos os elementos do recurso “Imagem e Texto” que podem ser usados ​​ou omitidos conforme necessário:

• Imagem: Claro, você pode adicionar uma imagem ao recurso “Imagem e texto”. Esta imagem pode ser cortada como um quadrado, círculo ou em proporções de 5:4 ou 16:9. Você também pode adicionar um hiperlink a esta imagem na área “Link da imagem”. Certifique-se de otimizar suas imagens para a web antes de carregá-las em seu site.
• Título: Você pode adicionar um título que extraia seu estilo de fonte das configurações “Título 1” na guia Editar tema.
• Subtítulo: Você pode adicionar um subtítulo que extraia seu estilo de fonte das configurações de “Título 2” na guia Editar tema.
• Descrição: A descrição ou 'corpo do texto' aqui pode ser curto ou longo, e há opções para envolver o texto ao redor da imagem se for um texto muito longo (talvez para uma biografia detalhada do artista - mais sobre isso depois ). Hiperlinks podem ser adicionados ao texto na área de descrição.
• Botão: Um botão pode vincular a uma página externa, uma página em seu site, uma faixa, um álbum, um arquivo ou um endereço de e-mail.

Agora, aqui estão 7 maneiras interessantes de aplicar esse recurso e outras personalizações de layout ao seu site - divirta-se!

1. Organize seu catálogo de músicas, portfólio de projetos e muito mais

Se você tem muitos projetos, serviços, álbuns, etc. diferentes que gostaria de destacar em uma página, uma ótima opção é criar uma 'página de destino' usando vários recursos de Imagem e Texto em várias colunas em sua página.

Para ver isso em ação, confira a página “Production and Engineering” de Jojo Worthington, onde ela usa recursos de imagem e texto para listar todos os seus créditos de maneira organizada.

Site do artista: Jojo Worthington

Para obter uma aparência semelhante, primeiro crie uma nova página ou seção. Para criar uma nova página, em Editar conteúdo, clique em "Páginas" > "Adicionar uma página" e nomeie a página conforme necessário. Clique em “Criar minha página”.

Para criar uma nova seção, em Editar conteúdo, passe o mouse entre duas seções em sua página e clique no botão azul “+ Adicionar uma seção”.

Crie um site impressionante com uma aparência personalizada que corresponda à sua música. Crie um site com o Bandzoogle agora!

Eu recomendo dividir a seção de uma página em duas ou três colunas para começar. Em Editar conteúdo, clique em "Nova seção" (a linha horizontal azul no layout da página), passe o mouse sobre a seção que você criou e clique em "Editar colunas" - depois selecione "2 colunas" ou "3 colunas" aqui.

Para adicionar um recurso "Imagem e Texto", clique em "Adicionar recurso" > "Imagem e Texto" e coloque o elemento em uma das colunas desta seção usando as setas de posicionamento cinza. Escolha a opção de exibição “Pilha” para que o botão e qualquer texto fiquem abaixo da imagem.

Em seguida, adicione uma imagem que represente um projeto/álbum/etc e adicione qualquer texto conforme necessário. Se você não quiser títulos/descrições, remova os prompts dos campos de texto e deixe-os em branco.

Para adicionar um link nesta imagem, clique em “editar” abaixo da miniatura da imagem. Um menu irá aparecer ao lado da imagem. Clique em "Link" e escolha o tipo de link - se estiver criando uma página de discografia, você pode criar um link para "An Album" ou "A Track" para vincular a um álbum ou faixa/single configurado em seu site. Se você estiver fazendo um portfólio como produtor, engenheiro, etc, você pode vincular a uma “página externa” e inserir a URL do projeto no campo fornecido. Clique em Aplicar.
Por último, mas não menos importante, há a opção Botão - para excluir o botão, selecione "Sem link" em "Link do botão". Ou escolha outro tipo de link (provavelmente o mesmo link que você aplicou à sua imagem).

Clique em Salvar para salvar todas essas alterações. Continue adicionando recursos de “Imagem e Texto” para todos os itens em sua discografia, portfólio de projetos, etc. Uma vez que eles estejam construídos, você terá uma grande grade de itens para os visitantes do seu site clicarem.

2. Destaque projetos ou produtos em sua página inicial

Outra ótima maneira de usar o recurso “Imagem e Texto” é destacar alguns itens importantes na página inicial do site da sua banda. Uma página inicial é um ótimo lugar para fornecer uma breve visão geral de seus projetos mais recentes e tudo o que seu site oferece. Talvez você tenha alguns anúncios interessantes a fazer ou queira levar os visitantes do seu site para seu novo álbum, sua loja de produtos online ou sua agenda de turnês.

Você pode usar o recurso “Imagem e Texto” para destacar essas coisas de maneira clara e vincular as pessoas às páginas internas do seu site onde esse conteúdo pode ser encontrado. O uso de uma imagem é sempre útil para capturar a atenção dos visitantes do seu site. Isso mantém sua página inicial limpa e simples e promove mais interação com as páginas internas do seu site.

Wolf & Moon e Lightbound Music fazem um ótimo trabalho em suas páginas iniciais.

Site do artista: Wolf & Moon

Site do artista: Lightbound Music

Observe o uso do estilo de exibição “Colagem” em ambas as páginas. Eles personalizaram seus modelos de site para complementar seus novos produtos/projetos, de modo que a cor de fundo da sobreposição de colagem combine perfeitamente com a arte.

Você pode realmente brincar com várias cores aqui, entre a cor de fundo da seção, a cor da sobreposição da colagem, as cores dos botões e as cores da imagem que você usa.

3. Aumente sua biografia para adicionar personalidade

Com as opções de título, legenda, botão e imagem no recurso “Imagem e texto”, você pode adicionar muita personalidade ao escrever sua biografia de músico. Você pode optar por incluir ou omitir qualquer um desses itens conforme necessário.

Annie Sumi faz um ótimo trabalho em sua página de biografia. Annie colocou uma citação que ressoa com sua prática musical no campo “subtítulo” do recurso “Imagem e Texto”. Isso recebe um estilo diferente e é destacado no topo de sua biografia. Ela usou a opção de exibição “dividida” para que a imagem ficasse ao lado do texto bio.

Ela cortou a imagem de sua foto de artista para ser um círculo - isso não apenas complementa a imagem, mas também flui bem com os temas de sua música. Para cortar uma imagem em seu recurso “imagem e texto”, clique em “editar” na miniatura da imagem. Um menu irá aparecer ao lado da imagem. Clique em “Cortar” aqui e escolha um estilo de corte que funcione para você. Arraste a imagem conforme necessário para posicioná-la e clique em Aplicar.

Ela também alternou “Ligado” na opção “Quebrar texto” em “Opções” para que o texto envolva a imagem. Isso responderá bem a diferentes tamanhos de tela e manterá o layout da página cheio por toda a duração da biografia.

Artista: Annie Sumi

4. Faça um EPK super organizado

Outra opção de exibição para o recurso “Imagem e texto” é “Texto na imagem”. Isso libera muitas possibilidades para criar alguns layouts encantadores que são muito focados na imagem. Essa opção funciona muito bem para criar um EPK em seu site que os bookers e outras pessoas do setor apreciarão, pois podem encontrar rapidamente o que estão procurando com um clique. Estou tirando este exemplo do EPK da minha própria banda, onde os elementos são claramente delineados usando a opção “Texto na imagem”.

Aqui, configurei um layout semelhante da sugestão de “Página de destino” acima (nº 1). Usei algumas imagens texturais de uma sessão de fotos que fizemos para o nosso novo álbum e cortei todas elas como círculos. Então eu adicionei um simples “Heading” para cada recurso de imagem e texto para rotular os vários elementos incluídos no EPK da nossa banda.

Cada imagem está vinculada a uma página separada fora do menu que contém o conteúdo de cada categoria. Por exemplo, tenho uma página especial “EPK - Fotos” com todas as nossas fotos de imprensa.

Sinta-se à vontade para experimentar isso para uma página EPK muito visual!

Site do artista: The Lifers

5. Crie uma página de informações para assinaturas, serviços etc.

Muitos de nossos membros oferecem serviços incríveis aos visitantes de seus sites - seja vendendo assinaturas de fãs ou outros serviços personalizados (aulas de música, sessões de gravação, terapia etc.), sempre ficamos surpresos com o que nossos membros trazem para o mundo.

Jackie Gage criou uma maravilhosa página de informações para suas ofertas de assinatura. Jackie usa a opção de exibição “Split” para o recurso “Image and Text” para descrever os tipos de serviços que eles oferecem. Jackie faz ótimo uso dos componentes Título, subtítulo e botão do recurso Imagem e Texto para que as principais informações sejam claramente descritas para os visitantes do site. Trabalho maravilhoso aqui!

Site do artista: Jackie Gage

6 . Use fundos de seção para grande impacto em seus layouts

Há muito poder em grandes imagens. Ao adicionar uma imagem de fundo a uma seção, você dividirá a página visualmente. Essa pausa é bem-vinda por nossos olhos humanos rolantes, e esse conteúdo aparecerá imediatamente como importante e empolgante. Essa é outra ótima maneira de incorporar uma chamada à ação em algum lugar de uma página.

A experiência do Intune faz isso lindamente em sua página inicial. Eles definiram uma linda imagem de textura como a “imagem de fundo da seção” em uma seção no meio da página inicial. Eles adicionaram uma citação deles mesmos no recurso “Texto”, seguido por um botão vinculado, chamando os visitantes para agendar uma sessão.

Esse layout é perfeito, pois dá um toque pessoal, é visualmente interessante e fornece uma mensagem clara para engajar. Simplicidade é realmente a chave aqui.

Site do artista: Becki Fleischer

7. Divirta-se com isso!

Existem muitas maneiras de brincar com os layouts, se você estiver disposto a experimentar um pouco. Aqui está um ótimo exemplo de um site que brinca com as possibilidades de layouts usando cortes em forma, cores divertidas, fundos de seção, layouts de colunas diferentes e muito mais.

Piper Hayes esculpiu uma grande estética em seu site Vocal Coaching com o uso de corte circular e a opção de exibição de 'colagem' para o recurso Imagem e Texto. Este site combina uma ótima paleta de cores, imagens texturais encantadoras e toques pessoais destemidos para criar um espaço online muito acolhedor.

Site do artista: Piper Hayes

Espero que este post tenha ajudado a fornecer alguma inspiração sobre como você pode trazer toques pessoais e esteticamente agradáveis ​​​​ao seu próprio site, criando diferentes layouts em suas páginas. Claro, sinta-se à vontade para entrar em contato com nossa equipe de suporte premiada se quiser que dêmos uma olhada no que você criou e forneçamos algum feedback. Oferecemos avaliações gratuitas do site da banda para todos os nossos membros!