Drucken

Designmöglichkeiten für Artikel

Geschrieben von Alexander Josev am . Veröffentlicht in Computerecke

tmplmanagerUm unsere Artikel in Zukunft ein bisschen ansprechender zu gestalten haben wir uns für die neue Seite die Mühe gemacht vorgefertigte Elemente für jeden "greifbar" zu machen. Mittlerweile sind wir soweit, daß man nicht mehr "HTML-Profi" sein muß, um einen Artikel zu verschönern. Dazu haben wir sogenannte "Templates" vorgefertigt, die in dem bereits bekannten Editor über den Button Templatemanager erreichbar sind.

 

tmplmanager1Nachdem dieser Button angeklickt wurde öffnet sich ein neues Fenster und Du kannst bequem auswählen, welches Template Du auswählen möchtest.

Die Programmierarbeit haben wir somit umgangen, daher auch jeweils die Endung .html, da hierzu Html-Stücke eingefügt werden.

Dazu einfach das entsprechende html Stück in der Mitte des Fensters auswählen und in der Ecke unten rechts dann auf Einfügen klicken.

 

Nach Einfügen der Elemente sehen diese alle erstmal wie einfacher Text aus. Erst nach Speichern des jeweiligen Artikels siehst Du das Ergebnis erst, wenn Du Dir den Artikel auf der eigentlichen Internetseite ansieht.

 

Wenn man dieses Prozedere 2 mal gemacht hat, sollte es eigentlich jeder hinbekommen.

 

Erste Beispiele:

(wir werden die Liste noch erweitern !)

 

Teile des Artikels hervorheben:

Initial Buchstaben in Texten heben einen Textabschnitt besonders hervor, da der erste Buchstabe des Textes automatisch mehr als doppelt so groß geschrieben ist. Hierfür einfach das Template initial.html einfügen !

Mit dieser Box kannst Du einen größeren Absatz hervorheben, dazu einfach das Template boxcontent.html einfügen. Ein etwas größerer Außenabstand vom Text zur Box hebt diesen Textabschnitt dann noch besonders hervor.
Diese Box ist wie zuvor, jedoch wird hier nicht noch ein Außenabstand um den Text gelegt. Dazu einfach das template boxnote.html einfügen.
Diese Box hebt eine einfache Info hervor, wie man sieht im blauen Kasten und mit entsprechendem Icon. Dazu einfach das Template boxinfo.html einfügen
Diese Box hebt eine wichtige Warnung hervor, diese in rot und mit entsprechendem Icon. Dazu einfach das Template boxwarnung.html einfügen.
Diese Box hebt Hinweise hervor, in gelb und mit Glühbirnchen als Icon. Dazu einfach das Template boxhinweis.html einfügen.
Noch eine Box, in der z.B. ein Download angeboten werden kann. Dazu einfach das Template boxdownload.html einfügen.

Gepunktete Linien

Um eine gepunktete Linie einzufügen einfach das Template liniegepunktet.html einfügen.


Wenn man nun Text zwischen zwei Linien einfügt, hebt sich dieser auch nochmal vom restlichen Artikel ab. Dazu einfach nach dem Text eine weitere gepunktete Line einfügen.


 

Button / Tooltip

Um einen Button einzfügen, einfach das Template button.html einfügen Anschließend kann der Text des Button geändert und der Link entsprechend angepasst werden. Eine einfache Anleitung siehst Du nachdem Du den Button eingefügt hast.

 Button 

Einen Tooltip kannst Du über das Template tooltip.html einfügen. Anschließend kann der Text (Titel und Info durch 2 Doppelpunkte-> :: getrennt) geändert werden. Eine kurze Anleitung siehst Du, nachdem Du den Tooltip eingefügt hast.

Beispiel Tooltip

 

Tabelle

Um eine Tabelle einzufügen, in der zum Einen die Überschrift hervorgehoben ist und zum Anderen die Zeilen in Kontrastfarben sind, musst Du einfach nur das Template tabelle_zebrastil.html einfügen.

Tabellenbeschreibung (einfach löschen, wenn nicht gewünscht)
Tabelle ÜberschriftTabelle ÜberschriftTabelle Überschrift
Tabellen Fuss Tabellen Fuss Tabellen Fuss
Daten Daten Daten
Daten Daten Daten
Daten Daten Daten

 tabelleninfo

 

Um die Tabelle zu bearbeiten klicke einfach in die jeweilige Zelle. Du kannst Du die Button des Editors benutzen (Zeile oder Spalte einfügen, zufügen und auch wieder löschen).

Wenn Du mit der Maus darüber fährst, siehst Du die entsprechende Aktion als Info.

Im Beispiel rechts eine Zeile löschen !

 

 

Es gibt noch weitaus mehr Möglichkeiten einen Artikel zu gestalten, aber die wichtigsten haben wir wohl oben aufgeführt. Für weitere Verschönerungen, Tipps und Tricks heben wir uns noch die Schulungen auf !

Und bei Fragen einfach melden -> Kontakt