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:

mehr erfahren

<a class=”buttonmobility” href=”https://www.wisamar.de/deine Seite/”>mehr erfahren</a>

Bildung:

mehr erfahren

<a class=”buttonbildung” href=”https://www.wisamar.de/deine Seite/”>mehr erfahren</a>

Projektmanagment:

mehr erfahren

<a class=”buttonprojekt” href=”https://www.wisamar.de/deine Seite/”>mehr erfahren</a>

allgemeiner Link

Mobilität:

Linktext

<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:

Linktext

<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:

Linktext

<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.

 

 

Schlagwörter haben für Google im Index eine Bedeutung und erlauben auf der Seite einen Blick auf alle Artikel die einen Schlagwort zugeordnet sind. Diese werden wir in den nächsten Tagen def.