🖱️ Klick für Klick

1. Schritt 1: Lege vor dem Klicken drei Farben fest: Hauptfarbe, Akzentfarbe und neutrale Farbe. Notiere die Hex-Codes, zum Beispiel #173A5E.
   💡 Warum? Hex-Codes sind eindeutige Farbnamen für Computer. Die Begrenzung auf drei Farben hält das Design ruhig.
   👀 Das solltest du sehen: Drei verschiedene Codes stehen auf eurem Plan.
2. Schritt 2: Gehe zu Design → Customizer → Allgemeine Optionen → Farben.
   💡 Warum? Globale Farben wirken an vielen Stellen gleichzeitig und sorgen für Einheitlichkeit.
   👀 Das solltest du sehen: Der Customizer zeigt die Farbpalette des Themes.
3. Schritt 3: Ersetze die globalen Farben gezielt. Prüfe nach jeder Änderung Vorschau, Texte und Buttons.
   💡 Warum? Wir ändern Farben einzeln, damit wir sofort erkennen, welche Seitenelemente davon betroffen sind.
   👀 Das solltest du sehen: Buttons, Links oder Hintergründe ändern sich in der Vorschau.
4. Schritt 4: Öffne Allgemeine Optionen → Typografie. Verwende höchstens zwei gut lesbare Schriften: eine für Überschriften und eine für Fließtext.
   💡 Warum? Zu viele Schriftarten wirken chaotisch. Zwei reichen für klare Unterschiede zwischen Überschrift und Text.
   👀 Das solltest du sehen: Die gewählten Schriften sind in der Vorschau gut lesbar.
5. Schritt 5: Erstelle ein einfaches Logo im PNG-Format mit transparentem Hintergrund. Der Shopname muss auch klein lesbar bleiben.
   💡 Warum? Ein Logo ist das Erkennungszeichen des Shops. Transparenter Hintergrund verhindert einen störenden weißen Kasten.
   👀 Das solltest du sehen: Die PNG-Datei ist gespeichert und bleibt auch klein lesbar.
6. Schritt 6: Öffne im Customizer Header → Logo, wähle Logo ändern, lade die Datei hoch und trage einen beschreibenden Alternativtext ein.
   💡 Warum? Der Alternativtext beschreibt das Logo, falls jemand das Bild nicht sehen kann oder einen Screenreader benutzt.
   👀 Das solltest du sehen: Das Logo erscheint im Header und das Feld Alternativtext ist ausgefüllt.
7. Schritt 7: Stelle die Logobreite so ein, dass das Menü genug Platz behält.
   💡 Warum? Ein zu großes Logo verdrängt Menü und Symbole.
   👀 Das solltest du sehen: Logo und Menü passen nebeneinander, ohne sich zu überdecken.
8. Schritt 8: Öffne Website-Identität und setze ein quadratisches Website-Icon. Dieses kleine Bild erscheint im Browser-Tab.
   💡 Warum? Das Website-Icon hilft, den Shop zwischen mehreren Browser-Tabs wiederzufinden.
   👀 Das solltest du sehen: Im Browser-Tab erscheint das kleine quadratische Symbol.
9. Schritt 9: Öffne die mit Elementor bearbeitete Startseite. Verwende bei Widgets möglichst die globalen Farben, damit sich das Design einheitlich ändert.
   💡 Warum? Globale Farben verhindern, dass jede Schaltfläche einzeln anders eingestellt wird.
   👀 Das solltest du sehen: Elementor zeigt bei den Widgets die gemeinsamen Farbwerte.
10. Schritt 10: Prüfe Kontrast: Dunkle Schrift auf hellem Hintergrund oder helle Schrift auf dunklem Hintergrund.
    💡 Warum? Kontrast bedeutet einen gut sichtbaren Unterschied zwischen Text und Hintergrund.
    👀 Das solltest du sehen: Alle Texte lassen sich ohne Anstrengung lesen.
11. Schritt 11: Prüfe Desktop, Tablet und Smartphone und veröffentliche die Customizer-Änderungen.
    💡 Warum? Die Vorschau zeigt früh, ob Logo, Text oder Buttons auf kleinen Geräten verrutschen.
    👀 Das solltest du sehen: Desktop, Tablet und Smartphone sehen ordentlich aus; danach erscheint die Veröffentlichungsbestätigung.

🔎 Selbstkontrolle

• ☐ Drei Farbwerte notiert.
• ☐ Maximal zwei Schriften verwendet.
• ☐ Logo eingefügt.
• ☐ Website-Icon gesetzt.
• ☐ Text bleibt mobil lesbar.