Es wird Zeit, das Aussehen Deiner Website gemäss Deinem erarbeiteten Branding anzupassen.
Also:
Schnapp Dir Deine Farbpalette, Schriften und allfälliges Titelbild aus dem Branding Modul 1, und wir legen los:
Als erstes wechseln wir unter „Design“ zum „Customizer“:
Im Customizer kannst Du die Grundeinstellungen für das GeneratePress Theme vornehmen. Auf der linken Seite siehst Du die verschiedenen Kategorien der Einstellungen. Wir werden in diesen 4 Kategorien unterwegs sein:
Hinweis: Auch hier gehe ich nicht jede einzelne Option im Detail durch, sondern zeige Dir einfach die meiner Meinung nach wichtigsten Einstellungen, damit Du effektiv zum Ziel kommst bzw. die häufigsten Wünsche und Anpassungen erklärt sind. Alles andere würde nur Deine Zeit verschwenden.
Du kannst natürlich die nicht erwähnten Optionen auch selber einfach einmal ausprobieren. Du siehst rechts ja jederzeit die Live-Vorschau und kannst es einfach wieder rückgängig machen.
Bzw. wie immer auch gerne in den Kommentaren nachfragen.
Legen wir los:
Kategorie „Website-Informationen“
Unter „Website-Informationen“ fügen wir als erstes unser Logo ein. Dafür die 2 Checkboxen aktivieren, damit der Titel unter Untertitel nicht mehr als Text eingefügt wird. Dann auf „Logo auswählen“ klicken:
Du kannst jetzt die Logo-Datei einfach mit der Maus in das Fenster hier ziehen, um sie hochzuladen (oder links oben einfach auf „Dateien hochladen“ klicken). Dann rechts unten mit „Auswählen“ bestätigen:
Erinnerst Du Dich noch, dass unser erstelltes Logo von Canva quadratisch war? Jetzt kannst Du von Deinem Logo ganz einfach den gewünschten Ausschnitt auswählen und dann das „Bild zuschneiden“ (das hat übrigens keinen Einfluss auf das hochgeladene Originalbild):
Wahrscheinlich ist Dein Logo jetzt noch etwas zu gross (das Logo von Canva ist 500 Pixel breit). Du kannst hier jetzt aber ganz einfach die gewünschte Logo-Breite einstellen. Du musst einfach etwas ausprobieren, was für Dein Logo am besten passt (ein Wert zwischen 3-400 Pixel sollte meistens passen).
Ausserdem kannst Du noch ein „Website-Icon auswählen“:
Beim Website-Icon kannst Du wieder Dein Logo verwenden. Dieses mal musst Du es aber nicht zuschneiden, da es quadratisch gebraucht wird:
Das Website-Icon wird z.B. im Browser als „Favicon“ links vom Titel angezeigt.
Zugegeben: Das Logo ist als Favicon meistens kaum zu erkennen. Darum haben viele Firmen heutzutage eine vereinfachte Version ihres Logos, welches eben auch in sehr kleiner Grösse erkennbar ist. Hier als Vergleich mein Logo als Favicon, und das Favicon von Google:
Das heisst, Du kannst dann bei Bedarf in Canva.com einfach noch ein 2. „vereinfachtes“ Logo machen.
Dafür eignet sich das folgende simple Konzept: Die Initialen Deines Firmen- bzw. Brand-Namens mit Deiner Branding Farbe als Hintergrund:
Wichtig: Das aber einfach als Hinweis, ein separates Favicon hat jetzt definitiv nicht höchste Priorität. Ich würde mich also nicht davon abhalten lassen, mit der Umsetzung der Website weiter zu machen 🙂
Dann kannst Du jetzt nämlich die Änderungen einmal „Veröffentlichen“ und dann mit dem kleinen Pfeil-Button zurück zur Übersicht wechseln:
Als nächstes wechseln wir in den Bereich „Layout“:
Kategorie „Layout“
Unter „Layout“ kannst Du einiges an der grundlegenden Struktur/Layout der Website anpassen. Also z.B. die Grössen/Breiten und Abstände von verschiedenen Elementen auf der Website (Inhalt, Menü, Header, Footer, etc.).
In meinem WordPress Paket habe ich hier schon einige Einstellungen und Anpassungen gemacht, damit das Layout harmonisch wirkt. Wenn Du noch nicht so viel Erfahrung hast, würde ich hier nicht zu viel an den konkreten Pixel oder %-Zahlen ändern.
Hier aber einige der Optionen und Funktionen, welche gut zu wissen sind und auch relativ einfach aktiviert werden können:
#1: Header (Logo & Menü) über die ganze Bildschirm-Breite:
Das ist eine nützliche Option, falls Du sehr viele Einträge im Menü hast, also das Menü nicht genug Platz hat und unter das Logo verschoben wird.
Oder es kann natürlich einfach auch gemacht werden, wenn es Dir besser gefällt.
Wechsle in den Bereich „Header“:
Hier findest Du die Einstellung „Innere Breite des Headers“, bei der standardmässig „Breite wie Inhalt“ ausgewählt ist:
Das kannst Du jetzt einfach auf „Gesamte Breite“ ändern, damit das Logo und Menü über die ganze Bildschirm-Breite verteilt werden:
Übrigens: Das geht bei Bedarf auch für die Top Bar (unter „Top-Leiste“ anstatt „Header“) und den Footer (unter „Footer“ anstatt „Header“).
#2: Menü Position/Höhe anpassen:
Wechsle nun von „Header“ nach „Primäre Navigation“:
Je nach Grösse/Höhe des Logos musst Du allenfalls das Menü noch etwas verschieben (also wie viel Abstand das Menü zur Top Bar oben hat).
Das kannst Du ganz einfach hier unter „Menüpunkt Höhe“ einstellen (am einfachsten mit dem Slider nach dem Logo ausrichten):
#3: Menü unter dem Logo (und beides zentriert):
Diese etwas kreativere und ebenfalls beliebte Darstellung von Logo und Menü kannst Du ebenfalls gleich hier unter „Primäre Navigation“ machen.
Dazu einfach die „Ausrichtung der Navigation“ auf „zentriert“ stellen, und die „Position der Navigation“ auf „Unter dem Header“:
Jetzt musst Du nur noch das Logo ebenfalls zentrieren, wozu Du von „Primäre Navigation“ wieder zum Bereich „Header“ wechseln musst. Dort findest Du die Option „Header Ausrichtung“, welche Du ebenfalls auf „zentriert“ stellst:
#4: Menü auch beim Scrollen sichtbar:
Das habe ich standardmässig deaktiviert, um es wirklich einfach zu halten. Du kannst diese Funktion aber ganz einfach unter „Navigation angehefted“ aktivieren:
Du kannst entscheiden, ob das Menü beim Scrollen nur auf dem Desktop, oder auch Smartphone sichtbar bleiben soll. Und Du kannst sogar einstellen, dass das Menü erst erscheint, wenn der Besucher wieder beginnt noch oben zu scrollen.
Falls Du bereits ein 2. einfacheres „Favicon“ Logo hast, kannst Du das hier ebenfalls auswählen (ansonsten das Logo einfach weglassen). Und schliesslich noch „Menüpunkt Höhe“ einstellen (60 Pixel sind ein sehr guter Wert):
#5: Off-Canvas / Hamburger Menü umsetzen:
Über diese Art Menü bist Du sicher schon gestossen: Das Menü wird erst angezeigt, sobald Du auf das sogenannte Hamburger Icon klickst (das Icon mit den 3 horizontalen Linien) und nimmt dann den ganzen Bildschirm ein.
Obwohl ich kein Fan bin (da sie schlicht nicht so intuitiv und benutzerfreundlich sind), kannst Du unter „Off-Canvas Panel“ so ein Menü ganz einfach aktivieren:
Hier ebenfalls auswählen ob es auf dem Desktop und/oder Smartphone aktiv sein soll, und den Stil auswählen (am besten einfach einmal ausprobieren, wie es aussieht):
Hinweis: Hier wird jetzt standardmässig nur eine weisse Fläche angezeigt. Du musst dann noch ein Menü zuweisen, dass im Off-Canvas Bereich angezeigt werden soll.
Das kannst Du unter „Design – Menüs“, und dann beim gewünschten Menü ganz unten bei der „Position im Theme“ die „Off-Canvas Menü“ Checkbox aktivieren:
#6: Aussehen der „Blog“-Seite verändern:
Unter „Blog“ kannst Du das Aussehen der (Überraschung) „Blog“ Seite verändern:
Tipp: Du kannst in der Vorschau auf der rechten Seite problemlos auf andere Seiten wie z.B. „Blog“ wechseln. So siehst Du dann sofort live, wenn Du eine Änderung machst:
Auch hier: Es wäre nicht wirklich sinnvoll einfach jede mögliche Einstellung im Detail zu erklären. Probiere es einfach einmal aus, oder frage in den Kommentaren, wenn Du ein bestimmtes Aussehen auf der Blog-Seite erreichen möchtest, aber nicht weiter kommst 🙂
#7: Anzahl Spalten/Widgets im Footer & Copyright Hinweis:
Wechseln wir noch zum letzten interessanten Bereich der Kategorie „Layout“: Dem „Footer“:
Hier gibt es eigentlich nur 2 interessante bzw. wichtige Einstellungen:
- Ganz unten unter „Copyright“ musst Du noch Deinen Firmennamen ergänzen (wie Du siehst, wird immer automatisch das aktuelle Jahr angezeigt, Du musst also nie daran denken, das zu ändern 🙂 ).
- Du kannst hier die Anzahl „Footer Widgets“ anpassen. Wenn Du z.B. keinen Blog hast und das „Neuste Beiträge“ Widget im Footer nicht brauchst, kannst Du hier z.B. die Anzahl auf 3 reduzieren. Hinweis: Es verschwindet dann zwar das „Kontakt“ Widget ganz rechts, aber wir werden die Footer Fidgets später dann noch bearbeiten, das kannst Du also vorerst ignorieren.
Kategorie „Farben“
Jetzt wechseln wir zur Kategorie „Farben“:
Du erinnerst Dich an Deine Farbpalette aus dem Branding Modul, die so aussehen sollte:
- Hauptfarbe: #296253
- Schattierung 1: #25584b
- Schattierung 2: #214e42
- Tönung 1: #3e7264
- Tönung 2: #548175
- Kontrastfarbe (optional): #F7D6DD
- Schattierung 1: #dec1c7
- Schattierung 2: #c6abb1
- Tönung 1: #f9dee4
- Tönung 2: #fae6eb
- Hintergrund von Hauptfarbe: #eaefee
- Hintergrund von Kontrastfarbe: #fefbfc
- Schwarz: #222222 oder #333333
- Weiss: #FFFFFF
Hier ist jetzt einfach etwas Fleissarbeit angesagt: Am besten gehst Du einfach alle Einstellungsmöglichkeiten unter „Farben“ durch, und fügst die Hex-Farb-Codes gemäss Deiner Farbpalette ein.
Hinweis: Immer wenn ich von der „Hauptfarbe“ spreche, kannst Du natürlich immer auch Deine allenfalls vorhandenen „Kontrastfarbe“ wählen. Wo und wie oft Du die Haupt- oder Kontrastfarbe nutzen willst, ist ganz Dir überlassen 🙂
Ich zeige Dir hier wie immer einfach die wichtigsten Bereiche, welche Du sicher anpassen musst, sowie ein paar Tipps dazu:
Wir starten mit „Body“:
Hier wählst Du die Standard „Linkfarbe“, sowie die „Linkfarbe bei Mouseover“.
Tipp: Falls Du eine eher helle Hauptfarbe hast (so wie ich), nutze einfach eine der dünkleren Schattierung der Farbe, und dann die hellere Hauptfarbe als „Mouseover“ Farbe (damit die Links besser lesbar sind).
Und noch ein Hinweis: Die Links sind ja unterstrichen und ändern die Farbe hier noch nicht. Das machen wir dann gleich in der nächsten Lektion (das muss eben per CSS gemacht werden).
Unter „Primäre Navigation“ kannst Du die Farben im Menü anpassen (zusätzlich zur Textfarbe auch die Hintergrundfarbe).
Hier kannst Du ausserdem auch die Farben vom Untermenü ändern:
Die Farbe der „Buttons“ kannst Du ebenfalls anpassen:
Unter „Formulare“ würde ich zumindest die Farbe für „Formular-Rand Fokus“ ändern (das ist ein netter Effekt, dass das Feld das aktuell ausgefüllt wird hervorgehoben wird):
Schliesslich kommen wir noch zum Bereich „Fussbereich“. Hier kannst Du die 2 Bereiche im Footer (Widgets und Fusszeile ganz unten) separat gestalten.
Am einfachsten ist es natürlich, wenn Du die Hintergrund- und Textfarbe einfach im neutralen Dunkelgrau/Schwarz und Weiss belässt, und einfach die Linkfarbe anpasst (auch diese Linienfarbe machen wir in der nächsten Lektion). Aber Du bist da natürlich ganz frei:
Dann fehlt jetzt (hier im Customizer) nur noch die Schrift:
Kategorie „Typographie“
Und schliesslich wechseln wir noch in die letzte wichtige Kategorie „Typographie“:
Zuerst hinterlegen wir alle von uns ausgewählten Schriften (und die welche Du nicht brauchst, kannst Du einfach mit dem Papierkorb-Icon löschen):
Die so hinterlegten Schriften können wir jetzt unten ganz einfach den verschiedenen Bereichen der Website zuweisen:
- Body = der normale Text
- Site Title = für den Website-Titel, der aber nur angezeigt bzw. gebraucht wird, wenn Du kein Logo hast
- Primary Menu Items = das Menü
- Primary Sub-Menu Items = das Untermenü (das beim Maus-Hover aufklappt)
- Buttons ist klar
- Heading 1 bis 6 = die Überschriften
- Top Bar ganz oben auf der Website
- Widget Title = die Titel im Fussbereich der Website
- Footer Bar = der Copyright Text ganz unten auf der Website
Zusätzlich zur Schrift, kannst Du auch die Grösse und Dicke einfach anpassen (und mit den kleinen Icons kannst Du bei Bedarf auch ganz einfach verschiedene Schriftgrössen für PC, Tablet und Smartphone auswählen):
Am besten gehst Du einfach einmal alle Elemente durch:
Tipp: Wechsle am besten auf der rechten Vorschauseite in den Blog und zum Demo Artikel. Achte darauf, wie sich die Grösse des Texts ändert. Jede Schrift hat eine andere „Basisgrösse“. Passe darum allenfalls einfach unter „Font Size“ die Grösse in Pixel an, damit Du wieder eine ähnliche Text-Grösse hast (ich musste z.B. von Standard 20 Pixel auf 24 Pixel erhöhen):
Und damit haben wir im Customizer soweit alles erledigt.
Vergiss nicht Deine Änderungen zu „Veröffentlichen“, und dann kannst Du den Customizer mit dem X-Button ganz links oben verlassen.