====== Anleitung Texte einfplegen auf Homepage ======
<WRAP center round info 60%>
Damit die Texte auf der Homepage sowohl optisch als auch seo-technische gut dastehen, fasse ich hier ein paar Grundregeln und Tipps zusammen. \\ \\
**Voraussetzungen:**
Wechsel in das Admin-Menü: https://www.saljol.de/admin/kunden/ \\
Falls das nicht geht, entweder einloggen, ansonsten [[admin#anmelden|s. Admin Bereich -> Anmelden]]
</WRAP>
===== Grundregeln d. Textens =====
  - Jeder Blog-Beitrag und jeder Kategorie-Text sollte **mindestens 750 Worte** haben. Alles über 1.000 Worte ist ideal
  - **Kurze, prägnante Sätze** ohne viel Verschachtelung oder komplizierte Nebensätze.
  - Nach **2-4 Sätzen ein Absatz**
  - **Überschriften Schema** einhalten ([[texten#ueberschriften_schema|s. Überschriften Schema]])
  - **Text formatieren**: Schlagworte fett machen, auch externe Links einbauen und verlinken, CSS Eigenschaften einhalten ([[texten#wichtige_css-tipps|s. CSS Tipps]])
  - **Listen, Aufzählungen und Videos verwenden**
  - Erste Element ist idealerweise ein **Text-Banner Element**
Beispiel: \\
{{::texten:texten-beispiele.jpg?direct|}}

===== Grundregeln Bilder & Dateien =====
  - **Bilder nur so groß machen, wie sie auch angezeigt werden**. \\ Wenn ein Bild nur mit 200px angezeigt wird, braucht es nicht 1200px groß sein
  - **Datei- und Bildernamen**: Alles kleinschreiben, Umlaute mit ae ue oe und ss ersetzen, Leerzeichen mit Bindestrich ersetzen, Sonderzeichen löschen oder mit Bindestrich ersetzen \\ Beispiel: Bildname: ''Carbon Rollator mit Jürgen.jpg'' \\ sollte bevor es hochgeladen wird, umbenannt werden in ''carbon-rollator-mit-juergen.jpg''
  - **ALT-Tag immer vergeben**! \\ Das ALT-Tag (im Backend heißt es auch Image description) sollte in 2-3 Worten sagen, was auf dem Bild zu sehen ist

===== Überschriften Schema =====
Die Überschriften sind hierarchisch aufgebaut. Es gibt genau eine H1 Überschrift pro Seite. Hier steht das Keyword drin für das die Seite ranken soll. Auf eine H1 folgen mehrere H2 Überschriften. Eine H2 Überschrift kann, muss aber nicht, zwei oder mehrere H3-Überschriften haben. Beispiel:
  * H1
    * H2
      * H3
      * H3
      * H3
    * H2
    * H2
      * H3
      * H3



===== Wichtige CSS-Tipps =====
Um die Seiten generell schön zu gestalten, gibt es ein paar CSS-Eigenschaften, die wir verwenden können. Die CSS-Eigenschaft wir folgendermaßen eingestellt:
  - Wähle den Container (der blaue Balken) und klicke auf das Editieren Feld: \\ {{::texten:css-1.png?direct|}}
  - Es erscheint rechts ein Fenster. Dort gibt es die Felder CSS Container und CSS Element. Dort werden die CSS-Klassen eingetragen: \\ {{::texten:css-2.png?direct|}}

Falls nicht der Container sondern nur ein einziges Element die Eigenschaft habe sollte, wird das direkt im Quelltext angegeben über ''class="//die-css-klasse//"'': \\ {{::texten:texten-css-klasse.jpg?direct|}}


==== CSS Klassen ====
Hier ist eine Liste der CSS-Klassen. Fett gedruckt steht die Klasse, die einfach in CSS Container oder CSS Element eingefügt werden kann. Kursiv steht ob es in CSS Container oder CSS Element sollte. Und danach steht ein kurzer Erklärungstext: Die Groß-Kleinschreibung ist wichtig und wird beachtet!
  * **maxWidth** //CSS Container// Diese Klasse hat fast jeder Container automatisch. Hier wird die maximale Breite auf 1040px beschränkt.
  * **aiCenter** //CSS Container// Bei Verwendung, werden bei einem 2 spaltigen Layout beide Seiten mittig zueinander angezeigt: \\ {{:texten:texten-aicenter.jpg?direct|}}
  * **marginTR** //CSS im Quellcode// Meist wird diese Klasse für Bilder verwendet. Hierbei wird oben und rechts eine Margin (also ein Abstand) eingefügt. Das T und R steht für Top und Right...
  * **marginTL** //CSS im Quellcode// ...analog dazu wird hier oben und links eine Margin eingefügt. Das T und L steht für Top und Left.

==== Tabellen verschönern ====
  - Damit die Tabellen etwas ansprechender ausschauen, muss man sie manuell bearbeiten. So schauen sie ohne Bearbeitung aus: \\ {{:texten:tabelle-4.png?direct|}}
  - auf Quelltext klicken ("<>") und dort nach "<table ...> suchen. Daraus '<table class="fktbl wp100 responsive">' machen:  \\ {{:texten:tabelle1.png?direct|}}
  - Damit dann die Kopfzeile "besser" ausschaut, folgendes tun. So schaut es bisher aus: \\ {{:texten:tabelle-2.png?direct|}}
  - Dort werden die Zeilen, die den Kopfbereich bilden vom <thead>-Tag umgeben. Außerdem können die ganzen breiten (width="") rausgelöscht werden: \\ {{:texten:tabelle-3.png?direct|}}
  - Um jetzt noch die erste Reihe fettzumachen, einfach das td mit einem th austauschen. Wie auf dem Bild bei "Max. Nutzergewicht"
  - Jetzt schaut die Tabelle so aus: \\ {{:texten:tabelle-5.png?direct|}}

===== Downloads =====
Um auf fremden Seiten die Downloads zu einem Produkt anzeigen zu können, gehst du folgendermaßen vor:
  - Ziehe das Modul "Includes" in den Content Bereich
  - Klicke darauf und wähle bei Template "downloads.php"
  - Unter GET-Parameter schreibst du "productsID=X", wobei X für die ProduktID steht.
  - Die ProduktID ist die Zahl in der Klammer auf der Produktseite. Beim Spa Edelstahl ist das z.B. die 13
  - Speichern und fertig: \\ {{:texten:downloads-1.png?direct|}}