7 Tricks für Twenty Seventeen

Twenty Seventeen

Twenty Seventeen

 

Sehr schick! Das war die kurze Antwort, die ich gerade von einer WordPress-Einsteigerin erhalten habe, auf die Frage, wie ihr der Look ihrer Projektseite gefällt. Nun dürft ihr raten, mit welchem Theme die Seite erstellt war? Richtig, Twenty Seventeen, oder wie ich es nenne: das beste Standard-Theme in zwölf Jahren WordPress. Da stellt sich glatt die Frage, ob es überhaupt noch viel zu konfigurieren gibt. Nun … mit diesen 7 Handgriffen ist Twenty Seventeen perfekt.Onlineshops mit WordPress

Titel und Untertitel eingeben

Seitentitel und Untertitel

Seitentitel und Untertitel

Gehe auf das Pinselsymbol in der oberen Leiste, um das Theme anzupassen. Der Custumizer öffnet sich. Mit einem Klick auf die Stifte kannst du Titel und Untertitel deiner Website ändern. Deaktiviere die Checkbox bei Titel und Untertitel der Website anzeigen, um beides auszublenden. Tipp: Verwende aussagekräftige Keywords, denn die Suchmaschinen werten diese Informationen in jedem Fall aus!

Weitere Tipps für eine erfolgreiche WordPress-Website findest du in meinem Buch: Onlineshops mit WordPress.

Farbschema umstellen

Farbe in Twenty Seventeen umstellen

Farbe in Twenty Seventeen umstellen

Das Farbschema in Twenty Seventeen ist schon absolut edel, aber noch einen Touch eleganter wird es mit der Umstellung von Light auf Dark.

Textfarbe im Header ändern

Textfarbe im Header anpassen

Textfarbe im Header anpassen

Die Textfarbe im Header lässt sich individuell anpassen. Am besten notierst du dir deinen Farbcode, z.B. #040b3f, um ihn einheitlich auch an andere Stelle im Theme (und in der Printwerbung) einzusetzen. Denke dabei an die Corporate Idendity, das optisch einheitliche Erscheinungsbild deiner Seite oder deines Onlineshops.

Startseite anlegen

Startseite anlegen

Startseite anlegen

Falls du Twenty Seventeen als Portfolio-Site verwendest: auf jeden Fall eine separate Startseite anlegen! Die ist nämlich mit einem Gitter hinterlegt, in dem du an einzelnen Stellen unterschiedliche Inhalte platzieren kannst! Die Startseite hebt sich damit von allen anderen Seiten optisch ab.

Statische Seite als Startseite

Statische Startseite

Statische Startseite in Twenty Seventeen

Gehe nun auf Einstellungen > Lesen und wähle Eine statische Seite aus, und im Drop-down-Menü die eben erstellte Seite als Startseite. Danach legst du weitere Seiten an, denn um ein Menü zu erstellen, brauchst du in WordPress zunächst etwas Material.

Hauptmenü anlegen

Das Hauptmenü

Das Hauptmenü

Twenty Seventeen verfügt über zwei Menü-Positionen, ein Topmenü und ein Social Links Menü. Gehe auf Design > Menüs und erstelle ein neues Menü, am besten zuerst das Hauptmenü (Topmenü). Lege die Startseite dann ganz oben an! Die Menüpunkte kannst du ganz einfach per Drag and Drop verschieben.

 

Header-Video einfügen

Header-Video

Header-Video

Das Killer-Feature in WordPress 4.7:  Unkompliziert Header-Videos einzublenden. Zwar ist nicht jedes Theme dafür geeignet – das neue Standardtheme Twenty Seventeen aber schon! Im Bild siehst du, wie es funktioniert, und zwar ganz einfach über den Customizer:

  • Möglichkeit 1: Video im Format MP4 selbst hochladen
  • Möglichkeit 2: Von Youtube verlinken

Achtung: Es empfieht sich hier nur ein Video von ein paar Sekunden länge, alles andere würde die Ladezeit der Startseite zu sehr verlängern! Für die anderen Seiten spielt das Video keine Rolle, es wird ausschließlich auf der Startseite präsentiert!

Eigenes CSS-einfügen

Die CSS-Box

Die CSS-Box

Mit der neu entwickelten CSS-Box kannst du gefahrlos Schriftarten und Schriftgrößen ändern, und das ohne Risiko. Wenn etwas nicht funktioniert, löschst du den Code einfach wieder aus der Box.  Erreichbar ist die CSS-Box über den Theme-Customizer, also via Design > Themes > Anpassen

Ähnliche Beiträge auf onlineshop-DIY:

16 Gedanken zu „7 Tricks für Twenty Seventeen

  1. Danke dir Bernd für den hilfreichen Bericht:-)

    Und: finde deine Seite und Message geil!

    Schau mal bei meiner Seite vorbei, wenn du Lust und Zeit hast. Sie ist mit twenty seventeen erstellt worden (gestern u heute).

    Schreibe mir ruhig, wenn du etwas Verbesserungswürdiges findest.

    Frage1: gibt es eine einfache Möglichkeit, den auf einem grossen Bildschirm doch ziemlich schmalen Seiten-Textbereich etwas breiter zu machen? Aber nur den, nicht den Fuss- und Kopf-Bereich damit.

    Frage2: Das Bild im Header wird auf einem Handy nicht gut angezeigt (nur die Mitte), auch kann ich die Anzeige seitwärts verschieben und habe dann rechts einen unschönen Rand?! Das genau gleich grosse Hintergrundbild der Startseite, wird immer perfekt angezeigt…wo liegt denn hier der Fehler?

    Ja, ich habe ein paarmal im Netz gesucht und html codes in die custom css kopiert, jedoch ohne wirkliche Verbesserung!

    Danke für dein Feedback und Gruess aus der Schweiz

    Markus

    PS: Ich habe keine Ahnung von html…

    • Hi Markus,
      danke für deine Nachricht, hab gerade ein Plugin mit dem Namen Advanced Twenty Seventeen entdeckt, installiert und bin es ausgiebig am testen. https://de.wordpress.org/plugins/advanced-twenty-seventeen/ .Falls du es ausprobieren möchtest:

      Nach der Aktivierung von Advanced Twenty Seventeen kannst du mit 1 Klick ein Childtheme anlegen, und da dann nach Herzenslust ausprobieren, was ich gerade mache … mal sehen, ob sich die Textspalte damit vergrößeren lässt 😉
      Bin gerade hier am werkeln, so präsentiert sich das Childtheme dann im Backend: Advanced Twenty Seventeen
      Grüße,
      Bernd

      PS: Wenn du das 1-Spalten-Layout im Customizer einstellst, verschieben sich Überschrift und Haupttext. Der Haupttext umfasst dann die gesamte Breite, die Überschrift rutscht drüber. Also ganz klassische Anordnung, wie du im Bild siehst:
      Twenty Seventeen einspaltig

      OK, Das war zwar nicht die Antwort auf deine Frage, aber vielleicht hilft es dir trotzdem weiter, ich wühl mich jetzt erstmal durch dieses Advanced Twenty Seventeen durch 😉

      2.PS: Gefällt mir sehr gut, deine Seite, sehr schöne Bilder, klares Thema.. und du hast ja schon das 1-Spalten Layout. Willst aber lieber 2-spaltig mit kleiner linker Spalte?

      • Ich habe die 740px Breite auf 1000 px erhöht – sieht ganz ordentlich aus.

        Beispielhaft in diesem Block der style.css

        /* Single Post */

        .single-post:not(.has-sidebar) #primary,
        .page.page-one-column:not(.twentyseventeen-front-page) #primary,
        .archive.page-one-column:not(.has-sidebar) .page-header,
        .archive.page-one-column:not(.has-sidebar) #primary {
        margin-left: auto;
        margin-right: auto;
        /* max-width: 740px; */
        max-width: 1000px;
        }

        Es gibt noch eine weitere Stelle.

  2. Hallo Bernd,

    ich habe mich auch für dieses Theme entschieden und gestalte es nach meinen Wünschen um.
    Ich breche mir aber die Finger bei den Links, ich kann
    ‚textdecoration: none‘ einfügen wo immer ich will und a:link ansprechen aber die Link-Unterstreichung läßt sich nicht entfernen.
    Hast Du einen Tipp wo ich zBsp:

    a {text-decoration: none;}

    einfügen könnte oder eine andere Hilfestellung für mich?

  3. Hallo Simone,
    sieht super aus, dein Bild mit der Theke, die sich im Zapfhahn spiegelt. Zur Frage mit den Links: Vor WordPress 4.7 musstest du entweder die CSS-Datei direkt anpassen oder ein Plugin wie Super Simple Custom CSS verwenden. Doch die Zeiten sind vorbei, jetzt gehst du in den Customizer, da wo du auch die Farben des Themes ändern kannst, und klickst auf den Punkt „Zusätzliches CSS“.

    CSS im Customizer bearbeiten

    Um die Unterstreichungen der Links zu entfernen, gibst du in das Feld ein:
    a,a:link,a:visited,a:hover {
    text-decoration:none!important
    }
    Viele Grüße,
    Bernd Schmitt
    PS: Wenn du weitere Fragen hast, her damit! Was du dringend entfernen solltest: den Screenshot von Google Maps. Du darfst Google Maps nur integrieren! Die Zoom- und Navigationsfunktionen dürfen nicht verändert oder eingeschränkt werden!

    • Hallo Bernd
      Vielen Dank für Deine Hilfe, das mit dem Screenshot hab ich nun noch mal nachgelesen und es wirklich falsch interpretiert – wird sofort korrigiert.
      Die Linkunterstreichungen im Widget des Footer 1 und der Seitenleiste ließen sich auch nicht mit Hilfe Deiner CSS-Anweisung entfernen.
      Und hey – Du bist der Erste in unserem Gästebuch! Solltest Du wirklich bei uns feiern, geb ich Dir persönlich das erste Bier aus ;O)
      Schönes Wochenende !

      • Hallo Simone,
        das mit dem Bier gilt, ich nehm dich beim Wort!
        Dann gib mal diesen Code in die CSS-Box ein, um die Unterstreichungen zu entfernen (und nur in die Customizer-Box, nicht direkt in die CSS-Datei. Ich habs nur wo rauskopiert, aber bei einer Testseite von mir funktioniert es):

        .entry-content a,
        .entry-summary a,
        .taxonomy-description a,
        .comment-content a,
        .pingback .comment-body > a {
        box-shadow: none;
        border-bottom: 0px solid #007acc !important;
        }

        Viele Grüße,
        Bernd Schmitt
        PS: Das neue Anfahrtsbild hast du selbst anfertigen lassen? Hier muss man wirklich höllisch aufpassen…

        • ….für das neue Anfahrtsbild habe ich mir höchstpersönlich mit Inkscape die Finger gebrochen XD
          Aber…
          Die Linien sind wie eingemeißelt! schnüff…

          Aber Danke für Deine Mühe Bernd, ich mach jetzt einfach mal den Deckel drauf – mal sehen, ob mir in ein paar Tagen was Neues einfällt.

          Liebe Grüße
          Simone

          • Finde deine Inkscape-Fleißarbeit gar nicht so schlecht… aber will lieber nicht wissen, wie lange du dran gesessen warst 😉

  4. …nachdem ich alle Funktionen auf den Kopf gestellt habe, nicht mehr lange. für die nächste Anfahrtsskizze brauchte ich nur noch wenige Minuten – learning by doing – wird irgendwie alltäglich ;O)

  5. Wie lösche ich einen Startseitenabschnitt?
    Ich habe mich bei der Erstellung der Startseite verlaufen und möchte nun Startseitenabschnitte löschen. Finde aber keinen Ort, wo das ginge. Was kann ich tun, um die Startseitenabschnitte zu reduzieren?
    Vielen Dank im Voraus für die Mühe

    • Hallo Marion, so löschst du einen Startseitenabschnitt wieder:
      1. Gehe in den Customizer
      Customizer aufrufen
      2. Rufe dann im Customizer den Punkt Theme-Optionen auf
      3. Gehe auf „Inhalt im Startseiten-Abschnitt“, und zwar zu dem Abschnitt, den du löschen willst.
      Customizer drowdown
      4. Klicke im Dropdown-Menü auf „Auswählen“, den obersten Punkt, und lass es bei „Auswählen“, gib also nichts Konkretes ein.
      Customizer auswaehlen
      5. Jetzt müsste der zuvor gewählte Abschnitt von der Startseite verschwunden sein. Ist dies der Fall, dann gehe oben im Customizer auf den blauen Button „Speichern und Publizieren“.
      Speichern und Publizieren

      Viele Grüße,
      Bernd Schmitt

  6. Hallo Bernd,

    erst einmal 👍🏻 für deinen hilfreichen und vor allem verständlichen Beitrag. Ich bin ein absoluter Newbie, was Webseitengestaltung angeht und habe mich auch für das Theme Twenty Seventeen entschieden. Was ich dort allerdings sehr vermisse, ist ein Drop-Down-/Pull-Down-Menü. Hast du für mich einen Tipp, wie ich ein integrieren kann? Dank & Gruß Dirk

    • Hallo Dirk,
      freut mich, dass dir meine Beiträge gefallen. Zur Frage:
      In WordPress beginnst du erst dann mit dem Anlegen eines Menüs, wenn die zu verlinkenden „Sachen“ schon vorhanden sind. Normalerweise verlinken Menüpunkte zu Seiten. Also los gehts! Gehe oben auf +Neu, und dann auf Seite.
      Seite anlegen
      In die neue Seite schreibst du erstmal nur blabla, das kannst du später immer noch ändern. Es geht ja jetzt darum, ein Drop-Down-Menü zu erstellen
      Neue Seite
      Am besten legst du dann auch noch gleich 2 Unterseiten an, wenn es ein Drop-Down-Menü werden soll.
      Hast du drei Seiten fix angelegt, oder noch ein paar ältere auf Lager, die noch nicht über ein Menü verlinkt sind? Dann rufe jetzt die Menüverwaltung auf, das geht über Design > Menüs
      Menüverwaltung
      Du bist in der Menüverwaltung? Dann kannst du die Menüpunkte und Unterpunkte zuordnen
      Drop-Down-Menü
      1. Markiere in der linken Spalte die neue Seite
      2. Klicke unten auf Zum Menü hinzufügen, und mach das mit allen Seiten die in das Menü aufgenommen werden sollen
      3. Rücke die Unterpunkte per Drag-and-Drop ein bisschen nach rechts. In meinem Beispiel heißen die Unterpunkte „Portfolio“ und „Seminarinhalte“
      Dann klicke in der Menüverwaltung auf Speichern und schau dir das Drop-Down-Menü auf deine Startseite an. So müsste das ungefähr aussehen:
      Menü erstellt
      Ergebnis: Die beiden in der Menüverwaltung eingerückten Punkte erscheinen als Unterpunkte des Drop-Down-Menüs.

      Falls du noch Fragen hast: her damit 😉
      Grüße,
      Bernd Schmitt

      • Hallo Bernd,

        vielen Dank für die schnelle Antwort. Aber ich denke, ich habe mich etwas missverständlich ausgedrückt. Also ich habe bereits eine im Aufbau befindliche Seite mit diversen Menüpunkten und teilweise mit einigen Unterpunkten. Wenn ich üblicherweise mit der Maus auf den Oberbegriff gehe, öffnet sich ein Menübalken mit den Unterpunkten. Beim mobilen Endgerät funktioniert das natürlich nicht. Daher suche ich nach einem responsive Menü. Grüße Dirk

Schreibe einen Kommentar

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