musicWebTemplate Télécharger - musicWebTemplate Téléchargement du code source

musicWebTemplate

Autres catégories

2.0.0

Télécharger

Modèle de site Web gratuit conçu pour les musiciens/artistes afin de promouvoir leur musique et de se connecter avec leur public.

Caractéristiques

Images de héros personnalisables et modal d'image réactif
Lecteur de musique basé sur Javascript et générateur de vignettes YouTube optimisés pour le chargement des pages
Liste de diffusion et formulaire de contact avec validation et intégration back-end
Sections supplémentaires comprenant une section à propos, des produits dérivés, de la presse et des émissions
Le code du projet est conforme à la conformité de validation HTML et CSS W3C (à l'exclusion de l'habillage CSS noir et blanc)

Commencer

Remarque : Il est recommandé d'utiliser un serveur Web local configuré avec PHP et un serveur de messagerie pour bénéficier de fonctionnalités de test complètes.

Pour modifier l'en-tête et la navigation :

Remplacez par le nom de votre artiste/groupe dans l'identifiant "logo"
Mettez à jour les liens de navigation avec les vôtres

Pour modifier la section d'accueil :

Remplacez le nom de votre image dans la classe "hero" dans style.css
Modifiez votre slogan, votre appel à l'action (CTA) et votre lien CTA dans la classe « accueil » dans index.html

Pour modifier la liste de diffusion :

Créez votre propre liste de diffusion Google Sheets en suivant le tutoriel de David McCoy : https://medium.com/@dmccoy/how-to-submit-an-html-form-to-google-sheets-without-google-forms- b833952cc175
Remplacez le lien de vos feuilles Google nouvellement créé via "url" dans mailingList.js
Remplacez votre appel à l'action et votre slogan dans le fichier index.html

Pour modifier la section À propos :

Remplacez les liens des réseaux sociaux par les vôtres
Modifier la classe "À propos" dans index.html

Pour modifier la section de produits dérivés :

Compressez vos images et réduisez les pixels pour optimiser le temps de chargement
Copiez vos photos dans dir /pictures/merch
Remplacez le nom de votre image dans les classes ".a, .b, .c", ect... dans style.css
Remplacez le nom de votre image dans la classe "grid" dans index.html

Pour modifier la section musique :

Modifier la classe "Musique" dans index.html
Remplacez les liens musicaux par les vôtres
Remplacez le nom de votre image dans la classe "music-hero" dans style.css

Pour ajouter des chansons en vedette :

Modifiez votre chanson à l'aide d'un DAW dans un aperçu de clip de 30 secondes pour optimiser le temps de chargement et de diffusion.
Placez les chansons dans le répertoire /music
Modifier le tableau var "fichiers" dans musPlayer.js
Pour ajouter une chanson dans le tableau, utilisez le format suivant : « Votre titre de chanson.mp3 »

Pour modifier la section actualités :

Compressez vos images et réduisez les pixels pour optimiser le temps de chargement
Copiez vos photos dans le répertoire /images/blog
Remplacez le nom de votre image dans les classes ".a, .b, .c", ect... dans style.css
Remplacez le nom de votre image et le titre de votre blog dans la classe "grille" dans index.html
Écrivez votre article de blog dans les pages html blog_(page).

Pour modifier la section presse :

Modifiez la classe "Presse" dans index.html.

Pour modifier la section vidéo :

Accédez à la vidéo YouTube que vous souhaitez présenter
Copiez le texte après "v=" dans le lien youtube
Collez le texte de l'identifiant de données dans la classe "youtube-player" dans la classe "Vidéo" dans index.html

Pour modifier la section des émissions :

Modifiez la classe "Shows" dans index.html.

Pour modifier la section des images :

Compressez vos images pour optimiser le temps de chargement
Copiez vos photos dans le répertoire /pictures/gallery
Remplacez le nom de votre image dans les classes ".a, .b, .c", ect... dans style.css
Remplacez le nom de votre image dans la classe "grid" dans index.html

Pour modifier le formulaire de contact :

Entrez votre adresse email dans form.php
Personnalisez vos messages de réponse dans form.php

Pour modifier le pied de page :

Mettez à jour les liens de pied de page avec les vôtres
Remplacez par le nom de votre artiste/groupe dansterms.html

Personnalisez avec des skins !

Nouveau thème noir et blanc disponible dès maintenant.

Renommez css/style_black_white.css en css/style_black_white

OU

Remplacez le lien href dans l'en-tête par css/style_black_white.css pour tous les documents HTML

Construit avec

HTML5
CSS3
jQuery/JavaScript/AJAX
PHP5

Contribuer

Lorsque vous contribuez à ce référentiel, vous pouvez créer et soumettre une pull request. Ajoutez une description de ce que vous faites et je l'examinerai.