Vorlagen

Richtig groß - aber sparsam

Unsere größte Überschrift ist die H6. Diese verwendet Ihr bitte äußerst sparsam - vielleicht für die erste Überschrift überhaupt auf der home-Seite Eures Bereichs.

Natürlich könnte ihr auch das Header-Bild und den Hintergrund eurer Seite ändern. Beides funktioniert nach demselben Prinzip, weil beide Elemente als "Bilder" eingefügt wird:

  • Für ein Header Bild ladet Ihr zunächst das passende Bild in die Dateiliste. Diese findet ihr im linken Menü. Hier gibt es für jede Website einen Ordner mit einigen Unterordnen. Hier könnt Ihr unter "Header" euer neues Bild ablegen. Am besten hat das Bild eine Größe von nicht mehr als 1MB und ist bereits der Header-Größe entsprechend zugeschnitten. Bei nicht zugeschnittenen Bildern sucht sich Typo 3 selbst seinen Ausschnitt.
    Wieder auf der Seite, auf der der Header eingefügt werden soll wählt Ihr unter "Typ" die Option "Bilder" aus und unter "Spalte" die Option "Querbild". Anschließend könnt Ihr unter Bild das entsprechende Foto in das Inhaltselement laden. Achtung: Bitte tragt bei "Überschrift" keinen Titel ein, sonst wird das eingestellte Bild nicht richtig dargestellt.
    Ist bereits ein Header vorhanden, öffnet Ihr einfach das Inhaltselement mit einem Klick und gelangt unter dem Reiter "Bilder" zum aktuellen Header-Foto. Mit einem Klick auf die Glühbirne wird es deaktiviert und ist könnt mit dem Symbol links oben ein neues Bild aus der Dateiliste hochladen.

  • Für einen neuen Hintergrund legt ihr das Bild wie oben beschrieben ebenfalls im entsprechenden Ordner in der Dateiliste ab. Anschließend erstellt Ihr euch auf der betreffenden Seite ein Inhaltselement vom Typ "Bilder" und wählt unter "Spalte" die Option "Hintergrund". Dann ladet Ihr das gewünschte Bild unter "Bilder" hoch.

Vorlage für Fließtexte

Fließtexte sind mit der Überschrift H1 zu versehen. H1 ist die Überschriftengröße, die von Google am höchsten bewertet wird, aus diesem Grund sollten Eure Überschriften auch Schlüsselwörter wie "Beratung", "Fachkräftesicherung", "Organisationsentwicklung" etc. enthalten - so werden wir bei Google besser gefunden.

Bitte achtete darauf, dass keine überflüssigen Leerzeichen am Ende eines Textfeldes stehen, sonst werden unschöne Abstände dargestellt.

Wichtig

  1. Versucht, wenn möglich, Tabellen für die Darstellung wichtiger Inhalte zu vermeiden. Diese sind zum einen schlecht nachzubearbeiten, zum anderen werden sie von vielen Browsern nicht richtig ausgeselen und es kommt zu Darstellungsfehlern.

  2. Das Einbauen von Bildern in den Fließtext sollte bitte auch vermieden werden. Wenn Ihr ein Bild einbauen wollt, wählt bitte unter "Typ" die Option "Text und Bilder".

  3. Texte in Word oder einem anderen Programm vorzuschreiben macht Sinn, schon allein weil Typo 3 keine Rechtschreibkorrektur hat. Bitte kopiert den Text, bevor Ihr ihn hier online stellt, in den Texteditor, damit alle fremden Formatierungen gelöscht werden. Andernfalls wird die Schrift eventuell falsch dargestellt, was in Typo 3 nicht korrigiert werden kann.

Vorlage für Texte mit Zwischenüberschrift

Für Zwischenüberschriften, die genutzt werden um den Text eine weitere Struktur zu geben nach der ersten Überschrift einer Seite folgen ist der Überschriftentyp "H2" auszuwählen. In dieser Größe werden auch unsere weiteren Elemente wie z.B. die Ziehharmonika oder das Karussell betitelt.

Für eine Gliederung im Fließtext eignet sich die Überschriftengröße 4. Mit diese könnt Ihr auch

im Textfeld

eine Zwischenüberschrift platzieren. Dazu markiert Ihr den betreffenden Abschnitt und wählt im Menü oberhalb dieses Textfelds die Formatierung "Überschrift 4" aus. Wundert euch dabei nicht über die Darstellung hier im Textfeld: Die Schrift wird nur fett und weder blau noch größer dargestellt. Online auf der Website ist die Darstellung dann korrekt.

Fließtext in grauem Kasten 2/3 links

Inhalte in grauen Kästen sind mit der Überschrift in Größe H3 zu versehen.

Die Darstellung eines Textes in auf den linken beiden Dritteln einer Seite wird unter dem Reiter "Erscheinungsbild" und dann unter "Layout" eingestellt. Hier könnt Ihr wählen zwischen

  • Standard (volle Inhaltsbreite)
  • links 1/3 breit
  • links 2/3 breit
  • links 1/2 breit (soweit es geht vermeiden)
  • rechts 1/3 breit
  • rechts 2/3 breit
  • rechts 1/2 breit (soweit es geht vermeiden)
  • mittig 1/3 breit

Wichtig:

  1. Für die Darstellung auf der Website ist die richtige Reihenfolge der Inhalte in TYPO3 ausschlaggebend! Dazu findet ihr mehr im Websitehandbuch in der Cloud oder ihr fragt einen Kollegen Eures Vertrauens :-)

  2. Die Einstellung "rechte Spalte" unter "Allgemein" --> "Spalte" hat nichts mit der oben beschriebenen Darstellungsweise zu tun. Bitte nutzt diese Option nicht!

Fließtext in Kasten 1/3 rechts

Für Elemente die nur in der rechten Spalte angelegt sind verwenden wir Überschriften in der Größe H4.

Trennlinien werden unter "Erscheinungsbild" bei "Einrückung und Rahmen" als "seitliche Linie" eingestellt.

Ihre Ansprechpartnerin

Nicole Maier

Tel.: +49 6302 923922
E-Mail: nicole.maier@entra.de


Inhalt zum Ausklappen - Ziehharmonika

Dieses Element hat eine voreingestelle Überschrift - wie Ihr oben seht, sind die Eigenschaften "Überschrift" und "Inhalt zum Ausklappen" nämlich im selben Menü angelegt.

Bei Verwendung dieses Elements solltet Ihr genügend Inhalt parat haben, da die Darstellung sonst schnell etwas mager wirkt.

Wie bei jedem anderen Element auch, ist es möglich Trennlinien einzufügen. Das könnt Ihr im Reiter "Erscheinungsbild" unter "Linie?" im Menü einstellen. Für dieses Element wurde "Linie davor und danach" gewählt.

Es ist auch möglich hier Bilder oder Downloads zu verlinken. Wie das geht, steht in der nächsten Ziehharmonika!


Ziehharmonika mit Bild und Download

Indem Ihr unter Typ die Option "Text und Bilder" im Menü auswählt und im Block "Überschrift" unter "Typ" die Option "Inhalt zum Ausklappen" kann die Ziehharmonika mit einem Bild oder einem Download verbunden werden.

Dazu fügt ihr im Reiter "Bilder" nun die gewünschte Datei ein (die Ihr vorher an den entsprechenden Platz in der Dateiliste hochgeladen habt). Das kann entweder ein PDF sein oder ein Foto genauso wie eine Grafik. Unter der Option "Link" könnt ihr nun rechts auf Symbol "Link" klicken. Es öffnet sich ein neues Fenster, durch das Ihr entweder eine Unterseite unserer Website oder eine andere Website oder eine Datei verlinken könnt. Im vorliegenden Element habe ich das PDF verlinkt, das auch in Miniaturausgabe als Bild erscheint.

Die Größe des Bildes und die PLatzierung von Text und Bild könnt Ihr im Reiter "Erscheinungsbild" einstellen. Unter "Bildeinstellungen" könnt Ihr die Pixelzahl angeben und "Bildausrichtung" die Position. Schaut einfach, was passt (ein guter Wert zur Darstellung von Bilder neben dem Text sind 200 Pixel Breite, das Feld bei "Höhe" kann frei gelassen werden).

 

 

Das Karussell-Element

Noch kurz zu diesem Kasten: Genauso wie der hellgraue Kasten bekommt dieser die Überschriftengröße H3 zugeteilt.

Nun zum Karussell-Element (s.u.)

Dieses Element hat einen schönen Effekt ist aber auch etwas aufwändiger zu basteln. Wenn Ihr euch nicht sicher seid, dann bittet lieber jemanden der schon mal ein Karussell gebaut hat um Hilfe :-) Es eignet sich, um zu weiteren Inhalten z.B. Leistungen zu verlinken, für Bildershows oder um Statements mit einem Foto zu verbinden. Es kann natürlich auch nur Text ohne Bild eingefügt werden.

Für das Karussell muss in Typo 3 zunächst ein Inhaltselement des Typs "Datensatz einfügen" angelegt werden. Das ist quasi das Grundgerüst für die Inhalte des Karusells. Die Inhalte des Karussells werden wiederum alle einzeln als Inhaltselemente angelegt, entweder mit Foto oder ohne Foto oder nur ein Foto - alles ist möglich. Anschließend werden diese einzelnen Inhalte in das Element "Datensatz einfügen" zusammengefügt. Im "Datensatz einfügen" Element könnt Ihr dann auch im Reiter "Erscheinungsbild" unter "Einrückung und Rahmen" die Option "Inhaltsleiste, auto" wählen.

P.S.: Wie Ihr seht sollte der dunkelgraue Kasten nur für ganz kurze Inhalte und am besten nur in der 1/3 Version verwendet werden, sonst erschlägt er alles.

Gestaltungstipps

 
entra GmbH, Falkensteiner Weg 3, Villa Scheurer, 67722 Winnweiler
Telefon 06302-9239-0, Fax 06302-9239-19, info@entra.de, www.entra.de