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.

Freunde, Fans und Follower

Freunde, Fans und Follower: Das neue Buch für den professionellen Social-Media-Auftritt. Alles über Facebook, Twitter, YouTube, Pinterest, Instagram, Snapchat und WhatsApp.

Titel und Untertitel eingeben

Seitentitel und Untertitel

Seitentitel und Untertitel eingeben

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!

WordPress mit Shop

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

Farbschema umstellen

Freunde, Fans und Follower

Freunde, Fans und Follower: Das neue Buch … zu Facebook, Twitter, YouTube, Pinterest, Snapchat … für den professionellen Social-Media-Auftritt.

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 Seiten-Abschnitten hinterlegt, in denen du 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

Du hast einen neue Seite erstellt? Prima, dann klicke 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

Stolz präsentiert von WordPress … entfernen

Und wie geht dieser Copyright-Hinweis ganz unten weg? 😉 Die Antwort findest du hier: Stolz präsentiert von WordPress.

98 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.

        • Hi Thomas,
          ich hab hier nochmal einen Screenshot gemacht.. um sicher zu gehen, dass wir vom selben Problem reden:
          Breite verringen
          Problem: Die Textspalte ist ein wenig klein, und die linke Spalte, wo der Doppelpfeil ist, etwas zu groß. Dieses Verhältnis soll verschoben werden.
          Ich hab deinen Code (auf einer Projektseite) im Customizer in die Box für zusätzliches CSS eingefügt, damit ich in der CSS-Datei selbst nichts zerstöre:
          Zusätzliches CSS
          Allerdings hat sich da nix an der Spaltenbreite geändert. Frage: Du hast ja geschrieben, dass du die CSS-Datei noch an einer anderen Stelle geändert hast. Ohne diese weitere Änderung tritt kein Effekt ein, oder habe ich da einen Denkfehler?
          Grüße,
          Bernd Schmitt

    • Lieber Bernd,

      ich nutze auch das Theme. Wenn ich dieses als statische Seite anzeigen lassen möchte und eine Seite, z.B. ‚Über mich‘ als Startseite auswähle, so zeigt er mir diese doppelt an. 1x ganz oben als Erstes (das ist ja so gewollt) und dann noch mal zum Schluss nach allen anderen Seiten. Das soll so natürlich nicht sein. Wie kann ich das unterbinden?

      Und gleich noch eine Frage:
      Statt ‚Stolz präsentiert von WordPress‘ würde ich das gerne etwas anderes stehen haben + einen Inpressums-Link

      Vielen lieben Dank schon mal…

      • Ich habe – ausgehend von der Hilfe durch diesen Blog – mittlerweile auch eine Theme 2017-Seite angepasst.
        Für diese Änderung gibt es zwei Möglichkeiten:
        Möglichkeit 1:
        Die site-info.php anpassen (im Childtheme: /wp-content/themes/advanced-twenty-seventeen-child/template-parts/footer) – einfach den Text ersetzen.
        Viel Erfolg, lisia
        Möglichkeit 2:
        In der footer.php (/wp-content/themes/advanced-twenty-seventeen-child) einen Teil auskommentieren:
        /* get_template_part( ‚template-parts/footer/site‘, ‚info‘ ); –> */

  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

        • Hallo Dirk,
          suchst du eine Lösung, damit beim Überfahren des Hauptmenü auf dem Desktop (und nicht auf dem Handy) gleich die Unterpunkte angezeigt werden?
          Anbieten wird sich das wohl eher für Seiten mit überschaubaren Menübäumen, sonst wird es unübersichtlich.
          Nun gibts ja für fast alles in WordPress Plugin, aber ich hab so ein Menü noch gar nicht auf einer Website entdeckt.. hast du einen Link zu einer Beispielseite? Ansonsten frage ich mal bei einem Meetup nach einer Lösung 😉
          Grüße,
          Bernd Schmitt

          • Hallo Simone, hallo Bernd,

            danke für die Antwort und sorry für meine späte Reaktion . . .

            Simone, genau so ein Menü suche ich! Wie lässt sich das einbinden? Grüße

            Dirk

          • Hallo noch einmal . . . zum Verständnis. Ich habe das Plugin installiert und aktiviert. Aber wie aktiviere ich es jetzt? Dank im Voraus

            Dirk

          • Hallo und guten Morgen. Hat keiner eine Idee zum Responsive Menü . . . wie bereits geschrieben: ich habe es installiert und aktiviert, aber es ist ohne Funktion. Oder muss ich noch andere Schritte vornehmen, damit das Menü funktioniert?! Ich bin für jeden Tipp dankbar. Grüße und einen schönen Sonntag

            Dirk

        • Hallo Dirk,

          hab ebenfalls nicht bemerkt, dass Du mittlerweile doch noch was geschrieben hast. Sorry,…. :O(

          Ich habe das PlugIn aktiviert und soweit ich mich erinnern kann, hat das auch gleich funktioniert. Einiges mußte ich per „eigenes CSS“ noch anpassen, wann der Menu-Button auftauchen oder verschwinden soll usw.
          Hast Du es mittlerweile hinbekommen?

          Viele Grüße
          Simone

          • Hallo Simone,

            vielen Dank für deine Antwort. Ich habe es installiert und aktiviert. Aber ansonsten habe ich – aus Unwissenheit – nichts weiter gemacht. Leider funktioniert das Menü so leider noch nicht. Was und wo muss ich denn noch etwas anpassen? Viele Grüße

            Dirk

          • Hallo Dirk,
            Wenn man im Dashboard das PlugIn anklickst, öffnet sich eine Seite, auf der ganz oben 9 Reiter zu sehen sind. Gleich unter dem ersten kannst Du die Seitengröße eingeben, unter der der responsive Menu-Button auf dem Display erscheinen soll.
            Schade, dass ich hier kein Screenshot erscheinen lassen kann, das würde einige Erklärungen erleichtern. Auf alle Fälle geh bitte Reiter für Reiter durch und stelle Deine Farben für Menu und Submenu-Punkte und Schriftgrößen ein, mußt ein wenig probieren so kommt man auch bald dahinter.
            Im zusätzlichen CSS habe ich noch folgendes für die Positionierung in das zusätzliche CSS eingefügt:
            button#responsive-menu-button {
            width: 55px;
            height: 55px;
            background: orange;
            position: fixed;
            top: 2px;
            left: 85.6%;
            }
            so brauch ich in den PlugIn-Einstellungen nicht erst alles einzeln zusammenstellen

          • Hi Simone,
            danke für deine Erklärung… 😉 was mir noch aufgefallen ist: dieses Advanced 2017 hat wieder ein Update bekommen.. scheint immer umfangreicher zu werden. Bin gespannt, was damit alles geht. Screenshot des „Advanced Customizers“, das macht Laune: Advanced Seventeen Customizer
            Grüße, Bernd Schmitt
            PS: Du kannst mir auch Screeshots für deine Kommentare schicken, ich bau die dann rein 😉

          • Danke Bernd, mach ich….

            es macht mir sehr großen Spaß mit diesem Theme
            zu experimentieren.
            Und ja, die Erweiterungen sind mir schon aufgefallen und hab sie schon fleißig getestet ;O)

            Bis bald mal wieder,
            Simone

  7. Hallo Bernd,
    danke für den hilfreichen Artikel – hab dich gerade gefunden und gleich „favoritisiert“.
    Eine Frage: Beim neuen Theme ist das Headerbild 1200 px hoch. Wenn ich aber nur die halbe Höhe, also ein eigenes Headerbild mit 2000×600 verwenden möchte, geht das?
    Grüße Enst

    • Hallo Ernst,
      ja, das funktioniert über die Anpassung des Stylesheets, also der CSS-Datei. Erledige das am besten über die CSS-Eingabebox im Customizer, so riskierst du nicht, das Theme zu zerschießen. Außerdem wird der Code dann nicht bei einem Theme-Update wieder überschrieben. 😉
      Die Eingabebox erreichst du über Design > Customizer > Zusätzliches CSS.
      Headerbild verkleinern
      Dort gib diesen Code für Computer Screen, Mobile Screen und Computer screen with logged in user and admin bar showing on front end ein, also die unterschiedlichen Ansichten für Computer und mobile Geräte:

      /*Computer screen */
      @media screen and (min-width: 48em) {
      .twentyseventeen-front-page.has-header-image .custom-header-image, .has-header-image.home.blog .custom-header-image {
      /*height: 1200px;*/
      /*height: 100vh;*/
      height: 50vh;
      /*max-height: 100%;*/
      /*overflow: hidden;*/
      }
      }

      /* Mobile screen*/
      .has-header-image.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header {
      /*display: table;*/
      /*height: 300px;*/
      /*height: 75vh;*/
      height: 50vh;
      /*width: 100%;*/
      }

      /* Computer screen with logged in user and admin bar showing on front end*/
      @media screen and (min-width: 48em) {
      .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image {
      /*height: calc(100vh - 32px);*/
      height: calc(50vh - 32px);
      }
      }

      Quelle
      Statt den im Beispiel angegebenen 50vH kannst du auch mit anderen Werten experimentieren, je nachdem, welche Höhe der Header haben soll. Mit 30vH erhältst du oben nur noch einen relativ Schmalen Streifen.
      Hier siehst du das Ergebnis mit einer Höhe von 50%: wpcomedy.com
      Grüße,
      Bernd Schmitt

    • Hallo Stephanie,
      Twenty Seventeen ist einfach das beste Standardtheme aller WordPress-Zeiten …und das Twenty Sixteen war grausig. 😉
      Schau mal hier ganz unten bei den Kommentaren dieses Beitrags:
      Twenty Seventeen
      Da steht die Lösung für deine Frage nach den zusätzlichen Startseitenabschnitten..
      Viele Grüße,
      Bernd Schmitt

  8. Moinsen, das sind ja super Tips hier schon mal. Danke dafür. Aber ich habe da auch eine Fragen zum Theme.
    Auf der Startseite, bei dem Menü unter dem Bild ist ein Pfeil, rechts, der zum ersten Abschnitt der Startseite blättert. Den hätte ich gern auch jeweils in den anderen Abschnitten, damit ich darüber blättern kann. Ich finds einfach nicht, wo die das verbaut haben. Hat jemand eine Ahnung?
    VG Thom

    • Hi Thom,
      falls es dir was nützt, der Scrollpfeil wird über die Datei functions.php gesteuert, und zwar im Abschnitt 12 (Navigation), ganz unten vor Abschnitt 13:
      Scroll-Pfeil
      Der Code: .site-header .menu-scroll-down {
      display: none;
      }

      Noch ’nTipp: Falls du ein Childtheme anlegen willst, das Plugin Advanced Twenty Seventeen nimmt dir die Arbeit ab und erstellt auch gleich eine functions.php als Child-Datei:
      Advanced Twenty Seventeen
      Grüße,
      Bernd

      • Hi Bernd, Childtheme, nö, wollte ich nicht. Nur versuchen den Scroll-Pfeil in jedem Abschnitt zu bekommen. Aber deine und meine functions.php sind wohl unterschiedlich. Ich habe da keine Abschnitte die nummeriert sind noch den Bereich für scroll arrow… 🙂
        Aber das Advanced Pugin habe ich mir mal installiert, danke.
        Gruß
        Thom

        • Oh, peinlich, habe einen Bock geschossen! Ich hatte die Datei falsch angegeben. Der Scroll-Down-Pfeil wird nicht über die functions.php gesteuert, sondern über das Stylesheet, die style.css
          … sorry 😉
          Stylesheet

          • NAbend, tja, hätte ich aus dem code auch erkennen sollen 😉 Aber war spät…. ja nur CSS geht da nicht ausreichend. Zumindest nicht auf dem einfachen Weg. ich habe mir mit dem plugin Scroll To CK geholfen und dazu dann in jedem unterem Bereich der Startseite von den Abschnitten ein „click to scroll“ per link mit verweis auf die Klasse des plugin eingebaut. das passt super. Incl. der Scroll-weite, die man im Plugin einstellt ist das super.

            Vielen Dank!

  9. Hallo. Funktion für: Dem besuchten Link eine andere Farbe geben als dem „noch nicht besuchten Link“. Einfach in zusätzliches CSS kopieren. Die Bezeichnung für die Farben gibt es im Internet. Hier Schwarz und ein dunkles Grau.

    /* unvisited link */
    a:link {
    color: black;
    }

    /* visited link */
    a:visited {
    color: dimgrey;
    }

  10. CSS m ul und ol anzupassen (Numerierung und Aufzählungspunkte einrücken nach rechts)

    ol {
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1.2em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 28px;
    }

    ul {
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1.2em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 28px;
    }

    • Hallo Carsten, danke für den Tipp.
      Und so verändert sich die Darstellung. Im Original stehen die Punkte der Liste nach links über. Der Text ist bündig mit allen anderen Texten. Vergleiche den Text darunter bei Galerie.
      Original
      Mit veränderter CSS, Code siehe Carstens Posting, rutscht die Liste nach rechts, und die Punkte stehen nicht mehr über.
      Eingerückt
      Nicht sehr drastisch, der Effekt, aber optisch sauber. Aber wer will, kann ja an den Parametern noch ein bisschen schrauben.;)

  11. Die Größe der Überschriften von h1 (h1.entry-title) und von h2 sowie h3 im Text anpassen (und Abstände definerien etc) funktioniert mit diesen CSS Funktionen.
    (Achtung: Google wünscht nur 1xh1 je Seite oder Post).

    /*h1 oben im entry-title definieren*/
    h1.entry-title:not(:first-child) {
    font-size: 30px;
    color: #111
    }

    /* h2 im Text definieren */
    h2 {
    font-size: 26px;
    color: #222;
    font-weight: 300;
    clear: both;
    line-height: 1.4;
    margin: 0 0 0.5em;
    padding: 1.0em 0 0;
    }

    /* h3 im Text definieren */
    h3 {
    font-size: 20px;
    color: #222;
    font-weight: 300;
    clear: both;
    line-height: 1.4;
    margin: 0 0 0.5em;
    padding: 1.0em 0 0;
    }

    • Hallo Carsten,
      vielen Dank für die CSS-Codeschnipsel und den SEO-Tipp:
      Nur einmal h1 einsetzen.
      Hab das Ganze mal probiert, sieht edel aus:
      Formatierte Überschriften
      Grüße,
      Bernd Schmitt

  12. CSS-Code, um die Unterstreichungen unter Links im Header und im Text ein- und auszuschalten.
    Probiert selbst, indem Ihr die Bereich durch die Kommentarfunktion /* und */ ein- und ausschaltet.

    Ich selbst suche noch die Lösung, wie man die Farbe der Unterstreichung eines Links im Textteil einer Seite oder eines Posts (also nicht die Links im Menü) einstellen kann. Bisher ist dies immer nur grau-schwarz. Würde gerne auf Blau oder…Rot
    Für die Webseite http://www.scheidung-in-potsdam.de
    —–
    /*verändere text underline-style in allen links: The WP-guys used border-bottom instead of text decoration.*/

    .entry-content a:link {
    text-decoration: none;
    border-bottom: none;
    webkit-box-shadow: none;
    box-shadow: none;
    }

    a:link {
    text-decoration: none!important;
    text-decoration-color: none!important;
    border-bottom-color: none!important;
    border-bottom: none!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    }

    .entry-content a:visited {
    text-decoration: none;
    border-bottom: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }

  13. CSS Code um page title style colour zu ändern (hier rot) und einen größeren Font mit anderer Laufweite einzustellen. Ich habe die Farbe des Titels der Website http://scheidung-in-potsdam.de übernommen.

    Bereiche, die ihr nicht nutzen wollt, packt Ihr einfach in die Kommentarklammer /* und */. Im Beispiel ist Text-Transform none durch Kommentarklammer ausgeschaltet.

    /* Change page title style colour and to larger font */
    .page .panel-content .entry-title, .page-title, body.page:not(.twentyseventeen-front-page) .entry-title {
    color: #dd1313;
    font-size: 30px;
    font-size: 1.543122575rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    /*text-transform: none;*/
    }

  14. /*Change style of links in content area/*
    /*Styling für Links in der Text-Area, hier Farbe blau*/

    /*–style links–*/
    /* unvisited link */
    .entry-content a,
    .entry-content a:link {
    color: blue;
    text-decoration: none;
    -webkit-box-shadow: ;
    box-shadow: ;
    }
    /* visited link */
    .entry-content a:visited {
    color: #3366ff;
    -webkit-box-shadow: none;
    box-shadow: none;
    }
    /* mouse over link */
    .entry-content a:hover {
    font-weight: bold;
    -webkit-box-shadow: none;
    box-shadow: none;
    }
    /* selected link */
    .entry-content a:active {
    font-weight: bold;
    -webkit-box-shadow: none;
    box-shadow: none;
    }

  15. Hallo ihr Lieben,

    ich habe folgendes responsive Problem(chen):

    Die Vorschau der responisve Darstellung im „customizer“ zeigt meine Website korrekt an. Auch wenn ich die Seite am Desktop Browser einfach skalliere switched die Ansicht korrekt.

    ABER
    Wenn ich meine Seite am Smartphone/Tablet aufrufe wird diese nicht responsibe angezeigt. Was für einen hack gibt es, um dieses Problem zubeheben?

    Das ist die Seite: http://www.alisahin.de

    • Hallo Ben, falls du das Jetpack-Plugin installiert hast, fällt mir diese schnelle Lösung ein.
      Gehe auf Jetpack > Einstellungen > Writing.
      Jetpack
      Dann aktivierst du unten den Schieber bei Optimize your Site for Smartphones:
      Smartphone Optimierung
      Weiß nicht, ob es mit dem Theme Twenty Seventeen klappt, aber beim Theme auf dieser Seite hier (Reddle) funktioniert die mobile Darstellung mit Jetpack wunderbar.
      Grüße,
      Bernd Schmitt

      • Hallo Bernd!
        Danke für die schnelle Hilfe. Leider wird die Seite in der mobilen Version ganz anders angezeigt als die Desktop Version.

        Schau mal. Folgend der CSS Code vlt. ist es nur eine Breite falsch?

        /* Adjust positioning of edit shortcuts, override style in customize-preview.css */

        @media screen and (min-width: 20em) {

        body.customize-partial-edit-shortcuts-shown .site-header .site-title {
        padding-left: 0;
        }
        }

        @media screen and (min-width: 30em) {

        /* Typography */

        body,
        button,
        input,
        select,
        textarea {
        font-size: 18px;
        font-size: 1.125rem;
        }

        h1 {
        font-size: 30px;
        font-size: 1.875rem;
        }

        h2,
        .page .panel-content .recent-posts .entry-title {
        font-size: 26px;
        font-size: 1.625rem;
        }

        h3 {
        font-size: 22px;
        font-size: 1.375rem;
        }

        h4 {
        font-size: 18px;
        font-size: 1.125rem;
        }

        h5 {
        font-size: 13px;
        font-size: 0.8125rem;
        }

        h6 {
        font-size: 16px;
        font-size: 1rem;
        }

        .entry-content blockquote.alignleft,
        .entry-content blockquote.alignright {
        font-size: 14px;
        font-size: 0.875rem;
        }

        /* Fix image alignment */
        img.alignleft {
        float: left;
        margin-right: 1.5em;
        }

        img.alignright {
        float: right;
        margin-left: 1.5em;
        }

        /* Site Branding */

        .site-branding {
        padding: 3em 0;
        }

        /* Front Page */

        .panel-content .wrap {
        padding-bottom: 2em;
        padding-top: 3.5em;
        }

        .page-one-column .panel-content .wrap {
        max-width: 740px;
        }

        .panel-content .entry-header {
        margin-bottom: 4.5em;
        }

        .panel-content .recent-posts .entry-header {
        margin-bottom: 0;
        }

        /* Blog Index, Archive, Search */

        .taxonomy-description {
        font-size: 14px;
        font-size: 0.875rem;
        }

        .page-numbers.current {
        font-size: 16px;
        font-size: 1rem;
        }

        /* Site Footer */

        .site-footer {
        font-size: 16px;
        font-size: 1rem;
        }

        /* Gallery Columns */

        .gallery-item {
        max-width: 25%;
        }

        .gallery-columns-1 .gallery-item {
        max-width: 100%;
        }

        .gallery-columns-2 .gallery-item {
        max-width: 50%;
        }

        .gallery-columns-3 .gallery-item {
        max-width: 33.33%;
        }

        .gallery-columns-4 .gallery-item {
        max-width: 25%;
        }
        }

        @media screen and (min-width: 48em) {

        /* Typography */

        body,
        button,
        input,
        select,
        textarea {
        font-size: 16px;
        font-size: 1rem;
        line-height: 1.5;
        }

        .entry-content blockquote.alignleft,
        .entry-content blockquote.alignright {
        font-size: 13px;
        font-size: 0.8125rem;
        }

        /* Layout */

        .wrap {
        max-width: 1000px;
        padding-left: 3em;
        padding-right: 3em;
        }

        .has-sidebar:not(.error404) #primary {
        float: left;
        width: 58%;
        }

        .has-sidebar #secondary {
        float: right;
        padding-top: 0;
        width: 36%;
        }

        .error404 #primary {
        float: none;
        }

        /* Site Branding */

        .site-branding {
        margin-bottom: 0;
        }

        .has-header-image.twentyseventeen-front-page .site-branding,
        .has-header-video.twentyseventeen-front-page .site-branding,
        .has-header-image.home.blog .site-branding,
        .has-header-video.home.blog .site-branding {
        bottom: 0;
        display: block;
        left: 0;
        height: auto;
        padding-top: 0;
        position: absolute;
        width: 100%;
        }

        .has-header-image.twentyseventeen-front-page .custom-header,
        .has-header-video.twentyseventeen-front-page .custom-header,
        .has-header-image.home.blog .custom-header,
        .has-header-video.home.blog .custom-header {
        display: block;
        height: auto;
        }

        .custom-header-media {
        height: 165px;
        position: relative;
        }

        .twentyseventeen-front-page.has-header-image .custom-header-media,
        .twentyseventeen-front-page.has-header-video .custom-header-media,
        .home.blog.has-header-image .custom-header-media,
        .home.blog.has-header-video .custom-header-media {
        height: 0;
        position: relative;
        }

        .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media,
        .has-header-video:not(.twentyseventeen-front-page):not(.home) .custom-header-media {
        bottom: 0;
        height: auto;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        }

        .custom-logo-link {
        padding-right: 2em;
        }

        .custom-logo-link img,
        body.home.title-tagline-hidden.has-header-image .custom-logo-link img,
        body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
        max-width: 350px;
        }

        .title-tagline-hidden.home.has-header-image .custom-logo-link img,
        .title-tagline-hidden.home.has-header-video .custom-logo-link img {
        max-height: 200px;
        }

        .site-title {
        font-size: 36px;
        font-size: 2.25rem;
        }

        .site-description {
        font-size: 16px;
        font-size: 1rem;
        }

        /* Navigation */

        .navigation-top {
        bottom: 0;
        font-size: 14px;
        font-size: 0.875rem;
        left: 0;
        position: absolute;
        right: 0;
        width: 100%;
        z-index: 3;
        }

        .navigation-top .wrap {
        max-width: 1000px;
        /* The font size is 14px here and we need 50px padding in ems */
        padding: 0.75em 3.4166666666667em;
        }

        .navigation-top nav {
        margin-left: -1.25em;
        }

        .site-navigation-fixed.navigation-top {
        bottom: auto;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        z-index: 7;
        }

        .admin-bar .site-navigation-fixed.navigation-top {
        top: 32px;
        }

        /* Main Navigation */

        .js .menu-toggle,
        .js .dropdown-toggle {
        display: none;
        }

        .main-navigation {
        width: auto;
        }

        .js .main-navigation ul,
        .js .main-navigation ul ul,
        .js .main-navigation > div > ul {
        display: block;
        }

        .main-navigation ul {
        background: transparent;
        padding: 0;
        }

        .main-navigation > div > ul {
        border: 0;
        margin-bottom: 0;
        padding: 0;
        }

        .main-navigation li {
        border: 0;
        display: inline-block;
        }

        .main-navigation li li {
        display: block;
        }

        .main-navigation a {
        padding: 1em 1.25em;
        }

        .main-navigation ul ul {
        background: #fff;
        border: 1px solid #bbb;
        left: -999em;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 99999;
        }

        .main-navigation ul li.menu-item-has-children:before,
        .main-navigation ul li.menu-item-has-children:after,
        .main-navigation ul li.page_item_has_children:before,
        .main-navigation ul li.page_item_has_children:after {
        border-style: solid;
        border-width: 0 6px 6px;
        content: „“;
        display: none;
        height: 0;
        position: absolute;
        right: 1em;
        bottom: -1px;
        width: 0;
        z-index: 100000;
        }

        .main-navigation ul li.menu-item-has-children.focus:before,
        .main-navigation ul li.menu-item-has-children:hover:before,
        .main-navigation ul li.menu-item-has-children.focus:after,
        .main-navigation ul li.menu-item-has-children:hover:after,
        .main-navigation ul li.page_item_has_children.focus:before,
        .main-navigation ul li.page_item_has_children:hover:before,
        .main-navigation ul li.page_item_has_children.focus:after,
        .main-navigation ul li.page_item_has_children:hover:after {
        display: block;
        }

        .main-navigation ul li.menu-item-has-children:before,
        .main-navigation ul li.page_item_has_children:before {
        border-color: transparent transparent #bbb;
        bottom: 0;
        }

        .main-navigation ul li.menu-item-has-children:after,
        .main-navigation ul li.page_item_has_children:after {
        border-color: transparent transparent #fff;
        }

        .main-navigation ul ul li:hover > ul,
        .main-navigation ul ul li.focus > ul {
        left: 100%;
        right: auto;
        }

        .main-navigation ul ul a {
        padding: 0.75em 1.25em;
        width: 16em;
        }

        .main-navigation li li {
        -webkit-transition: background-color 0.2s ease-in-out;
        transition: background-color 0.2s ease-in-out;
        }

        .main-navigation li li:hover,
        .main-navigation li li.focus {
        background: #767676;
        }

        .main-navigation li li a {
        -webkit-transition: color 0.3s ease-in-out;
        transition: color 0.3s ease-in-out;
        }

        .main-navigation li li.focus > a,
        .main-navigation li li:focus > a,
        .main-navigation li li:hover > a,
        .main-navigation li li a:hover,
        .main-navigation li li a:focus,
        .main-navigation li li.current_page_item a:hover,
        .main-navigation li li.current-menu-item a:hover,
        .main-navigation li li.current_page_item a:focus,
        .main-navigation li li.current-menu-item a:focus {
        color: #fff;
        }

        .main-navigation ul li:hover > ul,
        .main-navigation ul li.focus > ul {
        left: 0.5em;
        right: auto;
        }

        .main-navigation .menu-item-has-children > a > .icon,
        .main-navigation .page_item_has_children > a > .icon {
        display: inline;
        left: 5px;
        position: relative;
        top: -1px;
        }

        .main-navigation ul ul .menu-item-has-children > a > .icon,
        .main-navigation ul ul .page_item_has_children > a > .icon {
        margin-top: -9px;
        left: auto;
        position: absolute;
        right: 1em;
        top: 50%;
        -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
        -ms-transform: rotate(-90deg); /* IE 9 */
        transform: rotate(-90deg);
        }

        .main-navigation ul ul ul {
        left: -999em;
        margin-top: -1px;
        top: 0;
        }

        .main-navigation ul ul li.menu-item-has-children.focus:before,
        .main-navigation ul ul li.menu-item-has-children:hover:before,
        .main-navigation ul ul li.menu-item-has-children.focus:after,
        .main-navigation ul ul li.menu-item-has-children:hover:after,
        .main-navigation ul ul li.page_item_has_children.focus:before,
        .main-navigation ul ul li.page_item_has_children:hover:before,
        .main-navigation ul ul li.page_item_has_children.focus:after,
        .main-navigation ul ul li.page_item_has_children:hover:after {
        display: none;
        }

  16. Hallo Bernd,
    als großer Experte für 2017, kannst du mir einmal mitteilen
    wie man die Breite des Sidebar verkleinert.
    Für eine Antwort wäre ich Dir sehr dankbar
    Lupus

    • Hallo Lupus,
      probiere mal Folgende:
      1) Rufe den Customizer auf und gehe auf den Punkt Zusätzliches CSS:
      Zusätzliches CSS
      Zum Glück gibt es ja diese CSS-Box, und man hat keine Angst mehr, die CSS-Datei zu zerschießen und braucht für CSS-Anpassungen auch kein Child-Theme mehr.

      2) Gibt bei Deine Anpassungen für zusätzliches CSS diesen CSS-Code ein:
      Kleine Sidebar
      /*For Content*/
      .has-sidebar:not(.error404) #primary {
      width: 70%
      }

      /*For Sidebar*/
      .has-sidebar #secondary {
      width: 20%
      }

      3) Experimentiere ein bisschen mit den Prozentwerten.
      In meinem Beispiel hab ich die Breite der Sidebar auf 20 % geschrumpft, siehe den roten Doppelpfeil rechts. Wohl zu schmal, aber ich wollte den Effekt mal demonstrieren.
      Kleinere Siedebar

      Hoffe, ich darf den Titel des großen Experten behalten 😉

      Grüße,
      Bernd Schmitt

  17. Stolz präsentiert von WordPress entfernen! Mit dem einfachen Plugin
    „Remove Powered by WordPress“
    lässt sich die Fußzeile entfernen. Das Plugin gibt es kostenlos bei den WordPress-Plugins und ist jetzt auch für „Twenty Seventeen“ geeignet.

  18. Hallo Bernd. Wenn man der Seite (die man im Customizer unter Theme-Optionen in den Abschnitt „Startseiten-1“ einhängt) mit einem Bild versieht, dann wird dieses Bild nahtlos zwischen den verschiedenen Seiten auf der Startseite angezeigt. So weit so gut.
    Mein Problem: A) Ich habe Seiten, die ich sowohl im Startseitenabschnitt anzeige, als auch an anderer Stelle auf der Website (Beispiel: Seite http://scheidung-in-potsdam.de/unterhalt-kindesunterhalt/) Diese Seite ist sowohl auf der Startseite eingehängt als auch über das Menü erreichbar. Grund: SEO-Erwägungen.
    B) Im Scrollen auf der Startseite sieht es toll aus. Aber ich finde es sieht doof aus, wenn das Bild bei Aufruf der Seite „unterhalt-kindesunterhalt“ selbst dann ebenfalls angezeigt wird. Kann man das Bild (Glienicker Brücke in Potsdam) auf dieser speziellen Seite irgendwie ausschalten, während das Bild im Startseitenabschnitt beim laufenden Scrollen trotzdem angezeigt wird?

    Danke Carsten

  19. Hallo Bernd. Man liest, dass die ParallaxFunktion (bzw. Endlos Scrollen) Nachteile beim SEO hat. Grund: Man hat zuviele H1 auf der Seite und Google ist verwirrt durch die unterschiedlichen SEO-Angaben und Begriffe der jeweiligen Seiten, die ja nur „Künstlich“ zu einer Seite zusammengeführt werden. Angeblich ist dies ein Rankingnachteil bei Google. Andererseits lese ich, dass es wohl schon aktuelle Lösungen seitens WordPress gibt. Wie ist das bei Twenty Seventeen? Trotz umfangreicher Optimierungen bei Pagespeed und beim Content komme ich im Ranking nur langsam nach oben. Hast Du hier Alternativen ? (Siehe diesen Artikel https://www.sumago.de/parallax-one-pager-seo-tipps-loesungen/)

    • Hi Carsten, sorry, hat ein wenig gedauert, aber ich war auf dem WordCamp in Berlin und hatte noch ein paar Tage drangehängt..
      Zur SEO-Problematik: Also One-Pager haben da einen echt schweren Stand. Ich persönlich rate von One-Pagern ab. Ausnahme siond Landingpages oder Seiten, die fast nur von Google Adwords angesteuert werden.
      Bei Twenty Seventeen sehe ich das Problem der Häufung von H1-Überschriften als nicht sehr gravierend an. Es sind ja doch eine Menge Dinge, nach denen Google etwas bewertet, und bei mir kommt der meiste Traffic gar nicht direkt auf die Startseite. Wenn da nun einmalig drei oder vier H1-Überschriften stehen, geht die SEO-Welt nicht unter.
      Ob sich das Endlos Sroll lohnt? Hm, schwerer zu sagen, denn da werdn ja doche eine ganze Menge H1-Überschriften auf alle URLs gehievt. Andererseits wirken sich eine verlängerte Verweildauer und weitere Klicks ja wieder positiv auf das Ranking aus. Ich würde sagen, dass sich Endllos Scroll auf SEO eher neutral auswirkt.
      Grüße,
      Bernd Schmitt

  20. Hallöchen! Ich bin am Verzweifeln und hoffe, hier kann mir geholfen werden.
    Habe WordPress 4.7 mit Twenty Seventeen im Einsatz und nutze die Standard-Gallerie. Alles funktioniert gut. Bis auf deisen kleinen Schönheitsfehler: Ich möchte nicht, dass auf der Detailseite der Galerie ein Link auf dem Bild liegt, dass, wenn man es anklickt, es in groß mit Schatten geöffnet wird. Dann kommt nähmlich kein Link oder Button oder so zum Schließen des Bildes. Blöd! Also: Wie bekomme ich diesen Link auf dem Bild getötet? Die Galerie ist schön, der Link in der Galerie zur Detailseite dann auch, aber der letze Link vom Vorschaubild auf das große Bild mit dem dunklen, transparenten Hintergrund ohne „Schließen“-Knopf macht mich irre! 😉

  21. Hallo Bernd

    Super was du machst! Das schätze ich sehr. Das hilft Neulingen wie mir sich mit WordPress besser anzufreunden.
    Du, ich hätte eine Frage zum Thema Responsive Design. Das Header Bild bei mobilen Devices abgeschnitten. Kann man das irgendwie lösen?

    Danke Dir

    Max

  22. Hallo Bernd,

    weißt du als 2017-Experte vielleicht was zu folgendem Problem?
    Ich habe als zweiten Startseitenabschnitt meine Beitragsseite mit Blogposts. Es werden nur 3 (statt 10 wie unter Einstellungen–> Lesen eingestellt) angezeigt, was ganz okay wäre, wenn am Ende des Abschnitts sowas wie „vorherige Posts“ oder sowas ähnliches einzupflegen wäre. Da darf sich gerne darauf die Beitragsseite öffnen.. Weißt Du vielleicht, wie das geht? Ich steh da irgendwie auf dem Schlauch..

    • Hallo Stefan, hast du das Plugin Jetpack installiert? Falls ja, dann gehe mal auf Jetpack-Dashboard > Traffic und aktivierte die Funktion Related Posts:
      Related Posts
      Ich hab auch hier auf onlineshop-diy die Related Posts aktiviert … mit dem Theme 2017 hat das jetzt wenig zu tun, aber vielleicht klappt es ja… 😉

      • Danke für den Tipp! Leider will sich Jetpack bei mir nicht mit wordpress.com verbinden. Jetzt muss ich erstmal auf Fehlersuche gehen… dennoch vielen lieben Dank!

  23. Hallo Bernd, ich möchte gerne die Schrift des Titels der Website verändern. Das habe ich geschafft, auch die Farbe unter Header 1. Aber die Schrift bleibt immer in Großbuchstaben, auch wenn ich bei „Titel der Webseite“ klein- und Großbuchstaben habe. Eine Idee? Viele Grüße Christoph

    • Hi Christoph, kein Problem!

      Gehe in den Customizer > Zusätzliches CSS, und gib diesen Code in die CSS-Box ein:

      h1{
      text-transform: none !important;
      }

      Ab jetzt werden die Buchstaben nicht mehr zwangsläufig groß angezeigt. Die Anweisung !important sorgt dafür, dass das Stylesheet an dieser Stelle überschrieben wird. Du brauchst die originale Datei style.css also nicht anzufassen. Nach einem Update von Twenty Seventeen bleibt alles erhalten, was über den Customizer geändert wurde.

      Grüße,
      Bernd Schmitt

  24. Hallo Bernd,

    danke für tollen Deine Tipps! Haben mir schon sehr weitergeholfen.

    Nachfolgend habe ich drei Fragen und hoffe, Du kannst mit weiterhelfen!

    1.) Nachfolgender Code funktioniert nicht wirklich. Denn wenn ich z.B. die px im Bereich „Mobile screen“ ändere, änderst sich automatisch auch die Ansicht, auf großen Bildschirmen (Computer screen), ohne das ich dort Änderungen vornehme.

    Weisst Du mehr?

    /*Computer screen */
    @media screen and (min-width: 48em) {
    .twentyseventeen-front-page.has-header-image .custom-header-image, .has-header-image.home.blog .custom-header-image {
    /*height: 1200px;*/
    /*height: 100vh;*/
    height: 50vh;
    /*max-height: 100%;*/
    /*overflow: hidden;*/
    }
    }

    /* Mobile screen*/
    .has-header-image.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header {
    /*display: table;*/
    /*height: 300px;*/
    /*height: 75vh;*/
    height: 50vh;
    /*width: 100%;*/
    }

    /* Computer screen with logged in user and admin bar showing on front end*/
    @media screen and (min-width: 48em) {
    .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image {
    /*height: calc(100vh – 32px);*/
    height: calc(50vh – 32px);
    }
    }

    ————————–

    2.) Wie kann ich die Navigation bzw. das Menü auf mobilen Geräten oben fixieren (sticky), so dass nur der eigentliche Seiteninhalt weiterscrollt?

    ————————–

    3.) Ich habe das Theme zum „Onepager“ gemacht. Wenn ich auf einem mobilen Gerät einen Menüpunkt anklicke, wird automatisch dorthin gescrollt. Wie aber wird das Menü nach Betätigung des jeweiligen Menüpunktes, automatisch wieder geschlossen?

    Besten Dank und Gruß! Ich freue mich auf Deien Antworten.

      • Hallo sonnenmann, erstmal auf die Schnelle eine Anwort zu Frage 2: Wie bleibt das Menü in der mobilen Ansicht sticky?
        Gib dazu diesen Code in die CSS-Box:


        @media screen and (max-width: 767px) {
        .navigation-top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99999;
        }
        .admin-bar .navigation-top {
        padding-top: 45px; // Padding to allow space for the admin-bar when present
        }
        }

        Habe es auf einer Testseite ausprobiert, da funktioniert es 😉
        Quelle für den Code: https://core.trac.wordpress.org/ticket/40236

  25. Hallo Bernd,

    herzlichen Dank für die schnelle Lösung! Funktioniert!

    Bin gespannt auf die zwei noch ausstehenden Antworten.

    Sonnige Grüße!

  26. Hallo Bernd,

    sorry wenn ich zusätzlich noch eine Frage habe.

    Jetzt funktioniert zwar das sticky Menü in der mobilen Ansicht, verdeckt aber anfangs einen Teil des Headerbildes und des Logos (auf Unterseiten).

    Wie kann ich Headerbild und Menü etwas weiter nach unten (unter das Menü) setzen, so dass auf mobilen Geräten Headerbild und Logo nicht verdeckt werden?

    Viele Grüße!

  27. Hallo Bernd,

    weiterer Hinweis von mir: Auf mobilen Geräten weden die 3 Striche vom Menü sowie der Pfeil nach unten (sofern Unterseiten bestehen) nicht angezeigt.

    🙁

    LG

  28. Hallo Bernd,

    das Problem was ich am 27. August 2017 um 15:20 schilderte hat sich erledigt!

    War ein Darstellungsproblem auf einem Smartphone mit dem Standartbrowser. Mit dem Firefox war alles zu sehen!

    LG

  29. Twenty Seventeen schneller machen – wichtige Aufgabe

    Twenty Seventeen ist sauber programmiert und eigentlich recht schnell. Für Google ist aber die Schnelligkeit der Webseite ein bedeutendes Kriterium für das Ranking.

    Zur Beschleunigung habe ich folgende Plugins eingesetzt:
    1. Disable Emojis Version 1.7 von Ryan Heller
    2. Disable Feeds Version 1.4.4 von Samir Shah
    Ich brauche weder Emojis noch Feeds. Deren Ausschalten über diese beiden kleinen Plugins brachte einen Performancevorteil.

    3. Disable Comments Version 1.7 von Samir Shah
    Ich benötige die Kommentarfunktion auf keiner Webseite und habe diese generell über dieses Plugin augeschaltet.

    4. Remove Query Strings From Static Resources von SpeedUpmyWebsite – hier bin ich mir unsicher über den Performancevorteil; dieser ist nur relativ klein.

    4. Autoptmize von Frank Goossens in Kombination mit
    einem Cache-Programm. Hier müßt Ihr selber ausprobieren, welche Kombination (und welche Schalter wie zu setzen sind) bei eurer Seite das beste Ergebnis bringt. Mit dieser Kombination könnt ihr den größten Performancegewinn erzielen.

    5. Testseiten
    Als Testseiten für die Geschwindigkeit könnt Ihr https://gtmetrix.com oder http://www.webpagetest.org/ oder http://www.seitenreport.de nehmen. Alle drei Seiten bieten selbsterklärende Analysen mit unterschiedlichen Ausprägungen. Nehmt eure Bemühungen aber nicht zu ernst; mit obigen Änderungen seit Ihr bei eher statischen Webseiten bereits gut augestellt und könnt auch auf preiswerten Paketen und schwächeren Webserverern gute Ergebnisse erzielen.
    Bei Webshops müßt Ihr allerdings auf der Serverseite aufrüsten.

    Viel Erfolg mit dem leistungsstarken „Twenty Seventeen“.
    Besten Dank an Bernd, der immer wieder tolle CSS-Lösungen vorstellt. Toll. Danke

    • Hallo Carsten, danke für den Disable Emojis-Tipp. Hab das Plugin gerade bei einer lahmen Site rein. Im vorher/nachher-Test bei Pingdom war zu sehen, dass es sofort funktioniert.. Wieder ein bisschen Ladezeit weniger, also die Site bei Google besser im Ranking, so soll es sein.
      Emojis verwendet kein Mensch auf WordPress, die Emoticons (Smilies) funktionieren immer noch, und das Plugin arbeitet ab der Aktivierung – keine weiteren Schritte nötig. Klare Empfehlung – muss man haben: https://de.wordpress.org/plugins/disable-emojis/
      Grüße,
      Bernd

  30. Hallo Bernd. Wieder mal eine Frage. Ich möchte das Menü in allen Ansichten beim nach unten scrollen dann bei Erreichen des oberen Randes auch dann „Oben“ fixieren. Zu Beginn soll es aber wie bisher unten (unter dem Bild) stehen. Ich habe die beiliegende Lösung getestet.
    https://wordpress.org/support/topic/how-do-i-make-the-menu-sticky/
    Leider ist das Menü jetzt ständig oben „sticky“; die Scroll-Lösung funktioniert nicht wie erhofft. Die Bilder auf den Unterseiten sind teilweise veredeckt. http://www.scheidung-in-potsdam.de als Beispiel. Hast Du eine tolle Idee, die auf PC und Mobile funktioniert?
    Danke sehr

    • Hi Carsten, habe dazu leider keine Lösung. Aber ich kann dir nur raten, die Optimierung nicht zu übertreiben. Hab deine Site mal mit Laptop und meinem Smartphone (Android 7.1) getestet. Auf dem Laptop alles ok, aber auf dem Smartphone öffnet sich das Menü jetzt oben gar nicht mehr… nach einem KLick auf die 3 Querbalken tut sich nichts!
      Grüße,
      Bernd

  31. Hallo zusammen, ich würde gerne das überflüssige Wort „Beiträge“ auf meiner Blogseite ausblenden. Wie kann ich das? Mit CSS? LG Mainia

  32. Hallo Bernd, ich benötige dringend eine Auskunft:

    1. Wie kann ich den Leerbereich zwischen der Menüleiste zu „Herzlich Willkommen“ (erste Textzeile verkleinern? Möchte den nicht so groß haben. Oder ist das eine Seitenleiste, die ich ausstellen kann?

    2. Wie kann ich das Header Bild verkleinern ober der Menüleiste?

    3. Wie stelle ich den Link vom Logo aus? Den möchte ich nicht.

    Ich bitte dringend um Rückmeldung.

    Danke, lg Daniela

    • Hallo Daniela, zu Frage 1:
      Gehe in den Customizer > ZUsätzliches CSS und füge hinzu

      #content {
      padding-top: 5px;
      }

      Die 5px sind ein Extremwert, um den Effekt zu verdeutlichen 😉 … probiere, ob es funktioniert. Dann setze 20px oder 30px ein.
      Grüße,
      Bernd Schmitt

Kommentar verfassen