7 façons de créer des mises en page de sites Web de groupe que vous adorerez

Que vous débutiez avec la conception d'un nouveau site Web de groupe ou que vous mettiez à jour votre site pour un nouveau projet en cours, la plate-forme de Bandzoogle fournit d'excellents outils pour étendre les possibilités de mise en page de votre site Web.

Quel que soit le modèle de site Web de groupe que vous choisissez, il existe de nombreuses façons de personnaliser la mise en page pour créer un look qui correspond vraiment à vos besoins et à votre esthétique spécifiques.

Lorsque vous créez un site Web pour votre groupe ou un autre projet musical, il est important de présenter les informations de la manière la plus claire possible, tout en restant fidèle à votre image de marque et à vos valeurs en tant qu'artiste.

La fonctionnalité "Image et texte" est l'une de mes fonctionnalités préférées à utiliser lors de la création de mises en page uniques pour les pages de sites Web. Il s'agit d'une fonctionnalité extrêmement polyvalente qui garantit un formatage propre sur tous les appareils.

Je vais vous montrer comment utiliser cette fonctionnalité, en combinaison avec des personnalisations de section, pour créer des mises en page de sites Web à 7 bandes à diverses fins sur votre site Web.

Tout d'abord, je vais vous expliquer tous les éléments de la fonctionnalité "Image et texte" qui peuvent être utilisés ou omis selon les besoins :

• Image : Bien sûr, vous pouvez ajouter une image à la fonctionnalité "Image et texte". Cette image peut être recadrée sous forme de carré, de cercle ou au format 5:4 ou 16:9. Vous pouvez également ajouter un lien hypertexte vers cette image dans la zone « Lien image ». Assurez-vous d'optimiser vos images pour le Web avant de les télécharger sur votre site Web.
• Titre : vous pouvez ajouter un titre qui tire son style de police des paramètres "Titre 1" dans l'onglet Modifier le thème.
• Sous-titre : vous pouvez ajouter un sous-titre qui tire son style de police des paramètres "Titre 2" dans l'onglet Modifier le thème.
• Description : la description ou le "corps du texte" ici peut être court ou long, et il existe des options pour envelopper le texte autour de l'image s'il s'agit d'un texte assez long (peut-être pour une biographie détaillée de l'artiste - nous en reparlerons plus tard ). Des hyperliens peuvent être ajoutés au texte dans la zone de description.
• Bouton : un bouton peut renvoyer vers une page externe, une page de votre site, une piste, un album, un fichier ou une adresse e-mail.

Maintenant, voici 7 façons intéressantes d'appliquer cette fonctionnalité et d'autres personnalisations de mise en page à votre site Web - profitez-en !

1. Organisez votre catalogue musical, votre portefeuille de projets, etc.

Si vous souhaitez mettre en évidence de nombreux projets, services, albums, etc. différents sur une page, une excellente option consiste à créer une "page de destination" en utilisant plusieurs fonctionnalités d'image et de texte dans plusieurs colonnes de votre page.

Pour voir cela en action, consultez la page "Production et ingénierie" de Jojo Worthington, où elle utilise des fonctionnalités d'image et de texte pour répertorier tous ses crédits de manière organisée.

Site de l'artiste : Jojo Worthington

Pour obtenir un aspect similaire, créez d'abord une nouvelle page ou section. Pour créer une nouvelle page, sous Modifier le contenu, cliquez sur "Pages" > "Ajouter une page" et nommez la page selon vos besoins. Cliquez sur "Créer ma page".

Pour créer une nouvelle section, sous Modifier le contenu, passez la souris entre deux sections sur votre page et cliquez sur le bouton bleu "+ Ajouter une section".

Concevez un site Web époustouflant avec une apparence personnalisée qui correspond à votre musique. Créez un site web avec Bandzoogle maintenant !

Je vous recommande de diviser la section d'une page en deux ou trois colonnes pour commencer. Sous Modifier le contenu, cliquez sur "Nouvelle section" (la ligne horizontale bleue dans la mise en page), puis survolez la section que vous avez créée, puis cliquez sur "Modifier les colonnes" - puis sélectionnez "2 colonnes" ou "3 colonnes" ici.

Pour ajouter une fonctionnalité "Image et texte", cliquez sur "Ajouter une fonctionnalité" > "Image et texte" et placez la fonctionnalité dans l'une des colonnes de cette section à l'aide des flèches de placement grises. Choisissez l'option d'affichage "Empiler" pour que le bouton et tout texte soient placés sous l'image.

Ensuite, ajoutez une image qui représente un projet/album/etc, et ajoutez du texte si nécessaire. Si vous ne voulez pas de titres/descriptions, supprimez simplement les invites des champs de texte et laissez-les vides.

Pour ajouter un lien sur cette image, cliquez sur "modifier" sous la vignette de l'image. Un menu apparaîtra à côté de l'image. Cliquez sur « Lien », puis choisissez votre type de lien - si vous créez une page de discographie, vous pouvez créer un lien vers « Un album » ou « Une piste » pour créer un lien vers un album ou une piste/single configuré sur votre site. Si vous créez un portfolio en tant que producteur, ingénieur, etc., vous pouvez créer un lien vers une "page externe" et saisir l'URL du projet dans le champ prévu à cet effet. Cliquez sur Appliquer.
Enfin et surtout, il y a l'option Bouton - pour exclure le bouton, sélectionnez "Aucun lien" sous "Lien bouton". Ou, choisissez un autre type de lien (probablement le même lien que vous avez appliqué sur votre image).

Cliquez sur Enregistrer pour enregistrer toutes ces modifications. Continuez à ajouter des fonctionnalités "Image et Texte" pour tous les éléments de votre discographie, portefeuille de projets, etc. Une fois qu'ils sont construits, vous aurez une excellente grille d'éléments sur laquelle les visiteurs de votre site pourront cliquer.

2. Mettez en avant des projets ou des produits sur votre page d'accueil

Une autre excellente façon d'utiliser la fonctionnalité "Image et texte" consiste à mettre en évidence quelques éléments clés sur la page d'accueil du site Web de votre groupe. Une page d'accueil est un endroit idéal pour donner un bref aperçu de vos derniers projets et de tout ce que votre site propose. Peut-être avez-vous quelques annonces passionnantes à faire ou souhaitez-vous diriger les visiteurs de votre site vers votre nouvel album, votre boutique en ligne ou votre programme de tournée.

Vous pouvez utiliser la fonctionnalité "Image et texte" pour mettre clairement en évidence ces éléments et lier les gens aux pages intérieures de votre site où ce contenu peut être trouvé. L'utilisation d'une image est toujours pratique pour capter l'attention des visiteurs de votre site. Cela permet à votre page d'accueil de rester propre et simple et favorise une plus grande interaction avec les pages intérieures de votre site.

Wolf & Moon et Lightbound Music font tous deux un excellent travail sur leurs pages d'accueil.

Site de l'artiste : Wolf & Moon

Site de l'artiste : Lightbound Music

Notez l'utilisation du style d'affichage "Collage" sur ces deux pages. Ils ont personnalisé leurs modèles de site Web pour compléter leurs nouveaux produits/projets afin que la couleur d'arrière-plan de la superposition de collage corresponde parfaitement à l'œuvre d'art.

Vous pouvez vraiment jouer avec plusieurs couleurs ici, entre la couleur d'arrière-plan de votre section, la couleur de superposition de collage, les couleurs des boutons et les couleurs de l'image que vous utilisez.

3. Améliorez votre bio pour ajouter de la personnalité

Avec les options de titre, de sous-titre, de bouton et d'image dans la fonction "Image et texte", vous pouvez ajouter beaucoup de personnalité lorsque vous écrivez votre biographie de musicien. Vous pouvez choisir d'inclure ou d'omettre l'un de ces éléments selon vos besoins.

Annie Sumi fait un excellent travail sur sa page Bio. Annie a placé une citation qui résonne avec sa pratique musicale dans le champ « sous-titre » de la fonctionnalité « Image et texte ». Cela est stylisé différemment et est mis en évidence en haut de sa biographie. Elle a utilisé l'option d'affichage "divisé" pour que l'image soit placée à côté du texte bio.

Elle a recadré son image de tête d'artiste pour en faire un cercle - non seulement cela complète l'image, mais cela s'harmonise bien avec les thèmes de sa musique. Pour recadrer une image dans votre fonction "image et texte", cliquez sur "modifier" sous la vignette de l'image. Un menu apparaîtra à côté de l'image. Cliquez sur "Rogner" ici et choisissez un style de recadrage qui vous convient. Faites glisser l'image selon vos besoins pour la positionner et cliquez sur Appliquer.

Elle a également activé le commutateur "Envelopper le texte" sous "Options" afin que le texte s'enroule autour de l'image. Cela répondra bien aux différentes tailles d'écran et gardera la mise en page complète sur toute la longueur de la biographie.

Artiste : Annie Sumi

4. Créez un EPK super organisé

Une autre option d'affichage pour la fonction "Image et texte" est "Texte sur l'image". Cela libère de nombreuses possibilités pour créer de jolies mises en page très axées sur l'image. Cette option fonctionne à merveille pour créer un EPK sur votre site Web que les bookers et les autres professionnels de l'industrie apprécieront car ils peuvent trouver rapidement ce qu'ils recherchent en un seul clic. Je tire cet exemple de l'EPK de mon propre groupe, où les éléments sont clairement définis à l'aide de l'option "Texte sur l'image".

Ici, j'ai mis en place une mise en page similaire à partir de la suggestion "Page de destination" ci-dessus (#1). J'ai utilisé des images texturales d'une séance photo que nous avons faite pour notre nouvel album, et j'ai recadré toutes ces images sous forme de cercles. Ensuite, j'ai ajouté un simple "Titre" pour chaque fonctionnalité d'image et de texte pour étiqueter les différents éléments inclus dans l'EPK de notre groupe.

Chaque image est liée à une page distincte hors menu qui contient le contenu de chaque catégorie. Par exemple, j'ai une page spéciale "EPK - Photos" avec toutes nos photos de presse.

N'hésitez pas à essayer ceci pour une page EPK très visuelle !

Site de l'artiste : The Lifers

5. Créez une page d'informations pour les abonnements, les services, etc.

Beaucoup de nos membres offrent des services incroyables aux visiteurs de leur site - qu'il s'agisse de vendre des abonnements de fans ou d'autres services personnalisés (cours de musique, sessions d'enregistrement, thérapie, etc.), nous sommes toujours étonnés de ce que nos membres apportent au monde.

Jackie Gage a créé une merveilleuse page d'informations pour ses offres d'abonnement. Jackie utilise l'option d'affichage "Split" pour la fonction "Image et texte" pour décrire les types de services qu'ils offrent. Jackie fait un grand usage des composants Titre, sous-titre et bouton de la fonction Image et Texte afin que les informations clés soient clairement décrites pour les visiteurs de leur site. Merveilleux travail ici!

Site de l'artiste : Jackie Gage

6 . Utilisez des arrière-plans de section pour un impact important dans vos mises en page

Il y a tellement de pouvoir dans les grandes images. En ajoutant une image d'arrière-plan à une section, vous décomposerez visuellement la page. Cette pause est bien accueillie par nos yeux humains qui défilent, et ce contenu apparaîtra immédiatement comme important et excitant. C'est un autre excellent moyen d'incorporer un appel à l'action quelque part sur une page.

L'expérience Intune le fait magnifiquement sur leur page d'accueil. Ils ont défini une belle image de texture comme "image d'arrière-plan de section" sur une section à mi-chemin de leur page d'accueil. Ils ont ajouté une citation d'eux-mêmes dans la fonction "Texte", suivie d'un bouton lié, appelant les visiteurs à réserver une session.

Cette mise en page est parfaite, car elle donne une touche personnelle, elle est visuellement intéressante et fournit un message clair à engager. La simplicité est vraiment la clé ici.

Site de l'artiste : Becki Fleischer

7. Amusez-vous avec !

Il y a tellement de façons d'être ludique avec les mises en page si vous êtes prêt à expérimenter un peu. Voici un excellent exemple de site qui joue avec les possibilités de mises en page en utilisant le recadrage en forme, des couleurs amusantes, des arrière-plans de section, différentes dispositions de colonnes, etc.

Piper Hayes a créé une superbe esthétique sur son site de coaching vocal avec l'utilisation du recadrage circulaire et l'option d'affichage « collage » pour la fonction Image et Texte. Ce site combine une superbe palette de couleurs, de belles images texturales et des touches personnelles intrépides pour créer un espace en ligne très accueillant.

Site de l'artiste : Piper Hayes

J'espère que cet article vous a aidé à vous inspirer de la manière dont vous pouvez apporter des touches personnelles et esthétiques à votre propre site Web en créant différentes mises en page sur vos pages. Bien sûr, n'hésitez pas à contacter notre équipe d'assistance primée si vous souhaitez que nous examinions ce que vous avez créé et que nous vous fassions part de vos commentaires. Nous offrons des critiques gratuites du site Web du groupe à tous nos membres!