ci
CI für die Webseite und Code für responsives Design
Hauptüberschrift
<h1>Hauptüberschrift</h1>
Themenüberschift
<h3>Themenüberschift</h3>
Aussage
<h6>Aussage</h6>
Normaler Text- wird ohne extra Code so erzeugt
Farbwerte
Projektmanagement | #076e8f
Das sind wir | #fed36a
ohne Zuordnung | #b3b3b5
Bildung | #98c2d0
Mobilität | #fdc51a
Box
Box mit nur Text
Text
<div id=”container”>
<h3>Box mit nur Text</h3>
Endlos Text
</div>
Box mit Text und Bild
Box mit Bild und Text<div id=”container”><img class=”size-full wp-image-726 alignleft” src=”https://www.wisamar.de/wp-content/uploads/jahr/monat/dein bild” alt=”” width=”300″ height=”300″ />
Box mit Bild und Text</div>
Akkordeon -Menü
An die Stelle kommt der Text der dargestellt werden soll.
<div class=”tab”><input id=”tab-code” name=”tabs” type=”checkbox” />
<label for=”tab-code“> <img class=”wp-image-1132 size-full alignleft” src=”https://www.wisamar.de/wp-content/uploads/2018/09/wisamar_more_mobilitaet.png” alt=”” width=”15″ height=”15″ /> Akkordeon mit nur Text</label>
<div class=”tab-content”>
An die Stelle kommt der Text der dargestellt werden soll.
</div>
</div>
Für ein weiteres Akkordeon -Menü muss der Name id=”tab-code“ und for=”tab-code eindeutig sein. Dabei wird nur das Wort “code” durch ein anderes Wort ersetzt.
An die Stelle kommt der Text der dargestellt werden soll.
<div class=”tab”><input id=”tab-bild” name=”tabs” type=”checkbox” />
<label for=”tab-bild“> <img class=”wp-image-1132 size-full alignleft” src=”https://www.wisamar.de/wp-content/uploads/2018/09/dein bild” alt=”” width=”15″ height=”15″ /> Akkordeon mit Text und Bild</label>
<div class=”tab-content”>
<img class=”size-full wp-image-726 alignleft” src=”https://www.wisamar.de/wp-content/uploads/2018/08/dein bild” alt=”” width=”300″ height=”300″ />
An die Stelle kommt der Text der dargestellt werden soll.
</div>
</div>
Für ein weiteres Akkordeon -Menü muss der Name id=”tab-bild” und for=”tab-bild eindeutig sein. Dabei wird nur das Wort “bild” durch ein anderes Wort ersetzt.
Plussymbol für Mobilität: |
<img class=”wp-image-1132 size-full alignleft” src=”https://www.wisamar.de/wp-content/uploads/2018/09/wisamar_more_mobilitaet.png” alt=”” width=”15″ height=”15″ />
Plussymbol für Projektmanagment und Veranstaltungen: |
<img class=”wp-image-1132 size-full alignleft” src=”https://www.wisamar.de/wp-content/uploads/2018/09/wisamar_more.png” alt=”” width=”15″ height=”15″ />
Plussymbol Bildung: |
<img class=”wp-image-1132 size-full alignleft” src=”https://www.wisamar.de/wp-content/uploads/2018/09/wisamar_more_education.png” alt=”” width=”15″ height=”15″ />
Linkbutton
Mobilität:
<a class=”buttonmobility” href=”https://www.wisamar.de/deine Seite/”>mehr erfahren</a>
Bildung:
<a class=”buttonbildung” href=”https://www.wisamar.de/deine Seite/”>mehr erfahren</a>
Projektmanagment:
<a class=”buttonprojekt” href=”https://www.wisamar.de/deine Seite/”>mehr erfahren</a>
allgemeiner Link
Mobilität:
<img class=”size-full wp-image-120 alignleft” src=”https://www.wisamar.de/wp-content/uploads/2018/08/wisamar_project-e1534321658269.jpg” alt=”” width=”15″ height=”15″ /><a href=”Pfad zur Seite /”>Linktext</a>
Bildung:
<img class=”size-full wp-image-120 alignleft” src=”https://www.wisamar.de/wp-content/uploads/2018/08/wisamar_bildung-e1534321675641.jpg” alt=”” width=”15″ height=”15″ /><a href=”Pfad zur Seite /”>Linktext</a>
Projektmanagment:
<img class=”size-full wp-image-120 alignleft” src=”https://www.wisamar.de/wp-content/uploads/2018/08/wisamar_willkommen-e1534321710206.jpg” alt=”” width=”15″ height=”15″ /><a href=”Pfad zur Seite /”>Linktext</a>
Responsive Tabellen
head_1 | head_2 | head_3 | head_4 | |
---|---|---|---|---|
thema_1 | text | text | text | text |
<table class=”ResTable”>
<thead>
<tr>
<th></th>
<th>head_1</th>
<th>head_2</th>
<th>head_3</th>
<th>head_4</th>
</tr>
</thead>
<tbody>
<tr>
<td class=”oddCol” data-label=”thema“><strong>thema_1</strong></td>
<td class=”textRight” data-label=”zelle_1“>text</td>
<td class=”textRight oddCol” data-label=”zelle_2“>text</td>
<td class=”textRight” data-label=”zelle_3“>text</td>
<td class=”textRight oddCol” data-label=”zelle_4“>text</td>
</tr>
</tbody>
</table>
Bildformate
Für Slider auf der Startseite ( News)
Bildgröße : 1420 px / 540 px
Möglichst nicht über 800 kb
Bildaussage rechts da die linke Seite durch die Text-Box, wenn auch leicht transparent, überdeckt wird.
Für Beitrag und Seiten
Bildgröße : 1200 px / 400 px
Möglichst nicht über 700 kb
In Box und umfließend im Text
Bildgröße : 300px / 300 px
Möglichst nicht über 200 kb
Sidebar
Breite 300 px
Höhe spielt hierbei keine Rolle
Möglichst nicht über 200 kb
Durch die Verkleinerung der Bilder beim Smartphone ist auf eine Textaussage im Bild zu verzichten. Das Bild muss alleine sprechen.
Suchmaschinenoptimierung
Nachdem ein Beitrag oder eine Seite erstellt ist bitte ans Ende scrollen. Dort befinden sich die Felder für die Suchmaschinenoptimierung. (SEO)
Titel
Bei Titel bitte einen kurzen Seitentitel eintragen. Dafür stehen 23 Zeichen zur Verfügung. 37 sind schon durch Wisamar Bildungsgesellschaft gGmbH belegt. Wenn die 23 Zeichen nicht reichen schneidet Google einfach am Ende ab. Nicht optimal, da dann der Firmenname gekürzt wird. Es sollte jedoch immer Wisamar Bildungsgesellschaft gGmbH dastehen
Beschreibung:
Dafür stehen 160 Zeichen zur Verfügung und diese stehen unter dem Suchergebnis bei Google und sollen eine eindeutige Aussage zum Inhalt geben.
Ganz nebenbei ist darauf zu achten, das Google zur Erstellung des Index (Platzierung) die Überschrift und die ersten Zeilen von der Seite beachtet. Also heißt, die Wörter die darin vorkommen in der Beschreibung zu verwenden.
Schlagwörter und Kategorien
Zukünftig wird unsere Webseite durchaus auf mehr als 100 Seiten anwachsen. Das resultiert einmal aus den Seiten die wir für die Projekte erstellen und aus der Archiv-Funktion von WordPress.
Zur besseren Übersicht bietet WordPress bei der Ansicht der Seiten eine Filterfunktion nach Kategorien. Daher müssen Seiten / Beiträge immer der entsprechenden Kategorie zugewiesen werden. Dafür gibt es auf der rechten Seite beim Bearbeiten ein kleines Plugin.