Wie Du gesehen hast, kannst Du mit dem „Customizer“ sehr viel an der Website ganz einfach per Mausklick ändern.
Trotzdem kommt man damit meistens irgendwann an die Grenzen, und muss gewisse Anpassungen direkt per CSS machen.
Das gilt wie schon erwähnt insbesondere für die Umsetzung des „gewissen Etwas“.
Bevor wir aber zum gewissen Etwas gehen, haben wir 4 kleine aber grundlegende Anpassungen zu machen:
4 Basis CSS-Anpassungen für Dein Branding
In unserem Fall sind das die folgenden 4 Elemente, die Du wahrscheinlich anpassen möchtest:
#1: Wie schon erwähnt, die Farbe der Linie bei Text Links:
#2: Die Farbe des linken grauen Rahmen/Balken bei Zitaten/Testimonials:
#3: Die Hintergrund- und Text-Farbe bei den Call To Action Bannern (also dem „Kontakt aufnehmen“ und dem „Newsletter abonnieren“ Call To Action Banner):
#4: Die Farbe des standardmässig dunkelgrauen Hintergrund/Rahmen des Titelbilds bei Blog Artikeln:
Und diese CSS Änderungen können wir unter „Design – Simple CSS“ machen.
Lass Dich nicht vom ersten Blick auf den CSS Code abschrecken. Du musst lediglich den Farb Hex-Code ersetzen.
Ganz oben siehst Du die 4 oben beschriebenen Elemente: „Link-Linienfarbe“, „Call-To-Action“, „Zitat-Rahmen“, „Blog-Bild“. Nach diesen kannst Du einfach im Browser (mit „Ctrl + F5“) suchen, damit Du die richtigen Stellen findest.
Und dann musst Du lediglich den Farb Hex-Code mit Deiner Farbe ersetzen:
Es ist alles eindeutig beschrieben im Code. Hier als Beispiel, wenn Du nach „Link-Linienfarbe“ suchst:
Das machst Du einfach für die 4 Elemente. Hier noch als Beispiel einer der zwei Call To Actions, bei welchen Du sowohl die Hintergrundfarbe, als auch Textfarbe wechseln kannst (am Schluss mit dem Button „Save CSS“ rechts oben das Ganze speichern):
Tipp bzw. Idee für die Call To Action: Du hast ja beim Erstellen der Farbpalette auch eine sehr helle Hintergrundfarbe gewählt. Diese könntest Du jetzt für die Call To Actions benutzen, und den Text Schwarz (#222222 oder #333333) machen:
Und schon hast Du Deine ersten CSS-Anpassungen selbst gemacht! 🙂
Schau mir über die Schultern: Das „gewisse Etwas“ per CSS
Hier zeige ich Dir jetzt aber einmal die praktische Umsetzung von meinen 2 gewählten gewissen Etwas. Das sind 2 perfekte Beispiele, da eines mit etwas CSS, und das andere einfach mit Canva.com gemacht werden kann:
#1: Halb hinterlegte / unterstrichene Titel mit CSS
Ich bin jetzt ganz transparent:
Beim Umsetzen von diesem Effekt habe ich gemerkt, dass die technisch „perfekte“ Lösung nicht ganz einfach ist.
Ich wollte jetzt aber nicht einfach nachträglich einen anderen Effekt auswählen, nur damit das Beispiel jetzt perfekt funktioniert. Das ist nunmal die Realität: Wenn man anstatt „perfekt“ sich auf die kritischen 20% konzentriert, dann muss man manchmal Kompromisse eingehen.
Also, hier meine „Kompromiss“ Lösung:
Es braucht lediglich diese 6 Zeilen CSS-Code, welchen wir unter „Simple CSS“ einfügen müssen. Grundsätzlich bist Du frei, wo genau Du den Code einfügst. Der Ordnung halber würde ich es aber unter dem Titel/Abschnitt „Basic Styling“ einfügen:
Hier der CSS-Code zum Kopieren:
/* Halb hinterlegte/unterstrichene Titel */
.entry-content h2 {
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(50%,#e7fcfb),color-stop(50%,transparent));
background-image: -webkit-linear-gradient(bottom,#e7fcfb 50%,transparent 50%);
background-image: linear-gradient(0deg,#e7fcfb 50%,transparent 50%);
display: inline;
}Und schon werden alle H2 Titel auf der Website mit diesem Effekt dargestellt:
Der Kompromiss bzw. das Problem ist jetzt: Wie Du siehst, läuft der Titel über die ganze Inhaltsbreite, ist also breiter wie der normale Text.
Wenn ich das nicht so machen würde, also der Titel weiterhin nur so breit wie der Text ist, funktioniert eben der Effekt nicht wie gewünscht:
Wie gesagt:
Es wäre natürlich absolut machbar, das richtig bzw. perfekt zu lösen.
Dafür bräuchte es aber eine Änderung an der HTML Grundstruktur, welche nur mit zusätzlichem PHP-Code machbar ist. Das Problem jetzt aber genauer zu erklären und dann die Lösung umzusetzen, würde den Umfang dieses Kurses wirklich sprengen, weswegen ich jetzt darauf verzichte und damit lebe (wobei es wie ich finde sogar ein kreativer Effekt ist, dass der Titel über die Inhaltsbreite hinaus „ausbricht“).
So ist nunmal die Webdesign Realität: Manchmal klappt es einfach nicht genau so einfach wie gewünscht 🙂
Und falls Du doch tatsächlich die richtige Lösung wissen willst, dann frag einfach in den Kommentaren nach 😉
#2: Hero Image mit Wellen-Effekt/Übergang
Als zweites gewisses Etwas möchte ich mein Hero Image unten mit einem Wellen-Effekt/Übergang gestalten.
Du wirst gleich sehen: Das ist auch die perfekte Methode, wenn Du Deine Fotos speziell zuschneiden willst (also das gewisse Etwas #7: Bilder „Effekte“).
Dazu nutzen wir wieder Canva.com.
Dieses Mal erstellen wir ein neues Design mit „Benutzerdefinierten Abmessungen“:
Bezüglich Grösse kommt es jetzt darauf an, was Du machen willst:
- Wenn es wie in meinem Beispiel ein Hero Image ist, dann empfehle ich 1920 Pixel breit und 800 Pixel hoch.
- Ansonsten kannst Du auch einfach direkt die Grösse von dem Bild verwenden, dass Du hochladen und bearbeiten willst. Wenn Du mit der Maus im Explorer über die Datei fährst, kommt nach 1-2 Sekunden der Tooltip mit den „Abmessungen“:
Falls die Grösse dann doch nicht passt, musst Du einfach nochmal ein neues Design erstellen. Bzw. als Hinweis: Mit Canva Pro (10$/Monat) könntest Du die Grösse nachträglich ändern:
Legen wir los:
Die grundlegende Bedienung von Canva hast Du ja in der Lektion „Das Logo“ gesehen. Dieses mal wählen wir „Elemente“ und klicken dann bei „Rahmen“ auf „Alle anzeigen“:
Wähle hier jetzt den gewünschten Rahmen aus und ziehe ihn mit der Maus einfach auf die Arbeitsfläche. Und dann kannst Du den Rahmen einfach in die gewünschte Grösse ziehen:
Jetzt kannst Du einfach das gewünschte Foto oder Bild in den Rahmen hineinziehen, und schon hast Du Dein Foto kreativ „zugeschnitten“ und kannst es für die Nutzung auf Deiner Website herunterladen:
Tipp zum Herunterladen: Während für das Logo das .PNG Format ideal war, solltest Du für Fotos beim „Herunterladen“ immer das .JPG Format auswählen:
Und gleich noch ein Bonus Tipp: Wie Du oben siehst, ist in der Gratis Version von Canva die .JPG Qualität auf 80% beschränkt. Das reicht in den meisten Fällen für die Website wunderbar aus. Es gibt aber Fälle, in denen man die Qualitätseinbussen sieht und eine Qualität von 85-90% sinnvoller wäre (100% ist übrigens praktisch niemals nötig).
Falls Du jetzt also mit der .JPG Qualität von Canva unzufrieden bist (und nicht Canva Pro kaufen möchtest): Lade das Bild einfach als .PNG herunter, und lasse es z.B. auf der Website https://png2jpg.com/ in ein .JPG umwandeln 🙂
Und jetzt noch eine Alternative zu den „Rahmen“ (falls Du nichts passendes gefunden hast bzw. noch flexibler sein möchtest):
Gehe wieder zu „Elemente“ und dieses Mal bei „Formen“ auf „Alle anzeigen“:
Dieses Mal kannst Du zuerst Dein gewünschtes Hero Image bzw. Foto hochladen (in meinem Fall jetzt mein gewähltes Hero Image mit dem abstrakten Polygon Muster).
Und dann ziehst Du einfach die gewünschte Form auf die Arbeitsfläche, wechselst die Farbe auf Weiss und ziehst die Form in die gewünschte Grösse und Position:
Damit kannst Du ganz flexibel auswählen, welchen Bereich von Deinem Bild Du „wegschneiden“ möchtest:
Ich bin selbst immer wieder begeistert, was für ein tolles Tool Canva ist (glaube mir, mit einem Bildbearbeitungsprogramm wie Photoshop oder Gimp geht es bei weitem nicht so einfach 😉 ).
Wie wir das Hero Image dann austauschen können, folgt im nächsten Modul 3 (wo es dann generell um die Bedienung von WordPress geht, und wie Du alle Inhalte auf Deiner Website austauschen und bearbeiten kannst).