WordPress Website Tutorial 2017

WordPress

Ein neues Website Tutorial zum Jahresende 2017 –

In diesem Video lernst du Schritt für Schritt wie du eine Website mit WordPress aufbaust. Dieses mal am Beispiel an einer echten, existierenden Website: Mein Blog www.jonasschindler.de

Die Version der Website die ich in diesem Video erstelle findet ihr unter: tutorial.jonasschindler.de

Inhalt des Videos:
1. Neue Subdomain anlegen 3:11
2. WordPress Installieren 4:45
3. Impreza Theme Installieren 9:20
4. Impreza Theme aktivieren 15:24
5. Wartungsmodus Aktivieren 21:45
6. WordPress Grundeinstellungen 23:55
7. Impreza Theme Optionen 26:25
8. Website Header gestalten 28:37
9. Website Footer gestalten 49:50
10. Kontakt Formular hinzufügen 56:09
11. Startseite aufbauen 1:10:30

Der HTML und CSS Code für das CF7 Footer Formular

Formular Code – Diesen Code unter Formulare (Contact Form 7) einfügen:

<div class=”row”>
<div class=”col-md-6″>
[text* your-name placeholder “Name”]
</div>
<div class=”col-md-6″>
[email* your-email placeholder “E-Mail Adresse”]
</div>
</div>
[textarea your-message minlength:10 maxlength:300 placeholder “Nachricht”]
[count your-message down]
<p>[submit “Senden”]</p>

Diesen Code unter Impreza Theme Optionen => Individueller Code einfügen:

(ist nicht vollständig notwendig, aber der Vollständigkeit halber…)

/* Bootstrap */

@media (min-width: 992px) {
.col, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-6 input[name=’your-name’]{
width: 98%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
}

Vorheriger Beitrag
7 SEO Fehler die deinem Online Shop ein Vermögen kosten
Nächster Beitrag
Screenshot einer ganzen Website machen [Deutsch/German]

Ähnliche Beiträge

No results found

5 Kommentare. Hinterlasse eine Antwort

  • Hi Jonas,

    kannst Du uns helfen? 🙂

    Viele Grüße, Lasse

    Antworten
  • Hallo Jonas,
    erstmal danke für Dein Tutorial. Das hilft mir sehr weiter.
    Zum Kontaktformular hätte ich eine Frage. Wenn ich Deine Codes so übertrage, wie sie oben stehen, verschwinden die Eingabefelder und es steht dort eine 0. Zum einen verwendest Du den Begriff placeholder, der bei mir eine Fehlermeldung erzeugt. Ich muss eingeben. Und kann es sein, dass die class=row nirgends aufgelöst wird und deshalb die 0 erscheint? Hab alles in meinen Möglickeiten liegende versucht, um meine Zeilenbreite anzupassen und mich später an den textarea options von contact form 7 orientiert. Nichts klappt. Vielleicht hast Du noch eine Idee? Ich fände es toll, aus zwei Reihen eine zu machen. Herzlichen Dank vorab und viele Grüße, Simone

    Antworten
    • Hallo Simone,
      mit class=”row” hat das nichts zu tun, das ist quasi nur eine Art Container für die col-md-6. Diese ist ja mit 50% Breite angegeben! Bei placeholder stelle mal sicher, dass du es richtig geschrieben hast: placeholder “dein placeholder”. Wichtig ist aber, dass du davor auch eine ID also your-email oder so stehen hast.

      Antworten
    • Hi Simone,

      ich habe das gleiche Problem wie Du. Wie hast Du es lösen können? 🙂

      @ Jonas: Deine oben genannten Tipps haben mir bisher nicht geholfen. Die Texte hatte ich ja auch direkt von Deiner Seite kopiert.

      Herzliche Grüße
      Lasse

      Antworten
      • Hallo zusammen,
        bei mir ist das gleiche Problem! Es wird lediglich eine 0 angezeigt!
        Habt Ihr da schon einen Lösungsansatz für gefunden?

        Grüße Björn

        Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Bitte füllen Sie dieses Feld aus
Bitte füllen Sie dieses Feld aus
Bitte gib eine gültige E-Mail-Adresse ein.

Menü
shares

Sofort kostenlos runterladen!

Möchtest du sofort
MEHR UMSATZ generieren?

Hol dir jetzt meine 30 Geheim-Tipps für mehr Umsatz in deinem Online-Shop direkt als E-Book. 

E-Commerce Tipps