musicWebTemplate herunterladen - download musicWebTemplate Quellcodes

musicWebTemplate

Andere Kategorien

2.0.0

Herunterladen

Kostenlose Website-Vorlage für Musiker/Künstler, um ihre Musik zu bewerben und mit ihrem Publikum in Kontakt zu treten.

Merkmale

Anpassbare Heldenbilder und reaktionsfähiges Bildmodal
Javascript-basierter Musikplayer und YouTube-Thumbnail-Generator, optimiert für das Laden von Seiten
Mailingliste und Kontaktformular mit Validierung und Backend-Integration
Zusätzliche Abschnitte, darunter ein Abschnitt über Informationen, Merchandise, Nachrichten, Presse und Shows
Der Projektcode erfüllt die HTML- und CSS-Konformität mit der W3C-Validierung (mit Ausnahme des schwarz-weißen CSS-Skins).

Erste Schritte

Hinweis: Für die vollständige Testfunktionalität wird empfohlen, einen lokalen Webserver mit PHP-Einrichtung und einen Mailserver zu verwenden.

So bearbeiten Sie die Kopfzeile und die Navigation:

Ersetzen Sie ihn durch Ihren Künstler-/Bandnamen in der ID „Logo“.
Aktualisieren Sie die Navigationslinks auf Ihre eigenen

So bearbeiten Sie den Home-Bereich:

Ersetzen Sie Ihren Bildnamen in der Klasse „hero“ in style.css
Bearbeiten Sie Ihren Slogan, Call-to-Action (CTA) und CTA-Link in der Klasse „home“ in index.html

So bearbeiten Sie die Mailingliste:

Erstellen Sie Ihre eigene Google Sheets-Mailingliste, indem Sie dem Tutorial von David McCoy folgen: https://medium.com/@dmccoy/how-to-submit-an-html-form-to-google-sheets-without-google-forms- b833952cc175
Ersetzen Sie Ihren neu erstellten Google Sheets-Link über „url“ in mailingList.js
Ersetzen Sie Ihren Call-to-Action und Ihren Slogan in der index.html

So bearbeiten Sie den Abschnitt „Info“:

Ändern Sie die Social-Media-Links in Ihre eigenen
Bearbeiten Sie die Klasse „About“ in index.html

So bearbeiten Sie den Merch-Bereich:

Komprimieren Sie Ihre Bilder und reduzieren Sie die Pixel, um die Ladezeit zu optimieren
Kopieren Sie Ihre Bilder in das Verzeichnis /pictures/merch
Ersetzen Sie Ihren Bildnamen in den Klassen „.a, .b, .c“ usw. in style.css
Ersetzen Sie Ihren Bildnamen in der Klasse „grid“ in index.html

So bearbeiten Sie den Musikbereich:

Bearbeiten Sie die Klasse „Musik“ in index.html
Ändern Sie die Musiklinks in Ihre eigenen
Ersetzen Sie Ihren Bildnamen in der Klasse „music-hero“ in style.css

So fügen Sie ausgewählte Songs hinzu:

Bearbeiten Sie Ihren Song mit einer DAW in eine 30-sekündige Clip-Vorschau, um die Lade- und Streaming-Zeit zu optimieren
Platzieren Sie die Songs im Verzeichnis /music
Bearbeiten Sie die Array-Variable „files“ in musPlayer.js
Um einen Song zum Array hinzuzufügen, verwenden Sie das folgende Format: „Ihr Songtitel.mp3“

So bearbeiten Sie den News-Bereich:

Komprimieren Sie Ihre Bilder und reduzieren Sie die Pixel, um die Ladezeit zu optimieren
Kopieren Sie Ihre Bilder in das Verzeichnis /pictures/blog
Ersetzen Sie Ihren Bildnamen in den Klassen „.a, .b, .c“ usw. in style.css
Ersetzen Sie Ihren Bildnamen und Ihren Blogtitel in der Klasse „grid“ in index.html
Schreiben Sie Ihren Blog-Beitrag auf den HTML-Seiten blog_(page).

So bearbeiten Sie den Pressebereich:

Bearbeiten Sie die Klasse „Press“ in index.html.

So bearbeiten Sie den Videobereich:

Navigieren Sie zu dem YouTube-Video, das Sie präsentieren möchten
Kopieren Sie den Text nach „v=" im YouTube-Link
Fügen Sie den Daten-ID-Text in der Klasse „youtube-player“ in der Klasse „Video“ in index.html ein

So bearbeiten Sie den Abschnitt „Shows“:

Bearbeiten Sie die Klasse „Shows“ in index.html.

So bearbeiten Sie den Bildbereich:

Komprimieren Sie Ihre Bilder, um die Ladezeit zu optimieren
Kopieren Sie Ihre Bilder in das Verzeichnis /pictures/gallery
Ersetzen Sie Ihren Bildnamen in den Klassen „.a, .b, .c“ usw. in style.css
Ersetzen Sie Ihren Bildnamen in der Klasse „grid“ in index.html

So bearbeiten Sie das Kontaktformular:

Geben Sie Ihre E-Mail-Adresse in form.php ein
Passen Sie Ihre Antwortnachrichten in form.php an

So bearbeiten Sie die Fußzeile:

Aktualisieren Sie die Fußzeilen-Links mit Ihren eigenen
Ersetzen Sie ihn durch Ihren Künstler-/Bandnamen in terms.html

Personalisieren Sie es mit Skins!

Neues Schwarz-Weiß-Thema jetzt verfügbar.

Benennen Sie css/style_black_white.css in css/style_black_white um

ODER

Ändern Sie den href-Link im Header für alle HTML-Dokumente in css/style_black_white.css

Gebaut mit

HTML5
CSS3
jQuery/JavaScript/AJAX
PHP5

Mitwirken

Wenn Sie zu diesem Repository beitragen, können Sie einen Pull-Request abzweigen und einreichen. Fügen Sie eine Beschreibung dessen hinzu, was Sie tun, und ich werde es überprüfen.