Überschriften und Textformatierungen
Überschriften
Überschrift 1
Überschrift 2
Überschrift 3
Überschrift 4
Überschrift 5
Überschrift 6
Textfarben
Muted: Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Primary: Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Success: Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Info: Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Warning: Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Danger: Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Texte mit verschiedener Ausrichtung
Ausrichtung: Links (Standard)
Die Überschriften und Fließtexte der Elemente sind standardmäßig meist links ausgerichtet. Der links ausgerichtete Text auf der Webseite sorgt für eine gut strukturierte und leicht zu lesende Benutzeroberfläche.
Ausrichtung: Mitte
Der mittig ausgerichtete Text verleiht der Seite eine ästhetische Symmetrie und lenkt die Aufmerksamkeit des Lesers auf den Inhalt. Diese Ausrichtung kann besonders in gestalterischen Elementen wie Überschriften oder Zitaten eine ansprechende visuelle Wirkung erzeugen.
Ausrichtung: Rechts
Rechts ausgerichteter Text kann dazu beitragen, einen gewissen visuellen Kontrast zu schaffen und das Layout einer Seite interessanter zu gestalten. Diese Ausrichtung wird oft verwendet, um Aufmerksamkeit zu erregen oder wichtige Informationen hervorzuheben.
Fließtext in unterschiedlichen Größen
Groß formatierter Text hat die Fähigkeit, sofort die Aufmerksamkeit des Lesers zu erregen und wichtige Informationen hervorzuheben. Durch die Verwendung von größeren Schriftgrößen kann die Lesbarkeit verbessert und die visuelle Hierarchie einer Seite gestärkt werden. Dieser Stil wird oft eingesetzt, um Überschriften, Schlagzeilen oder wichtige Botschaften deutlich hervorzuheben und somit die Leserführung zu unterstützen.
Normal groß formatierter Text bildet das Grundgerüst jeder Seite und sorgt für eine angenehme Lesbarkeit. Er dient dazu, den Hauptteil des Inhalts klar und verständlich zu präsentieren, ohne dabei von anderen Elementen abzulenken. Durch eine ausgewogene Schriftgröße kann eine harmonische visuelle Darstellung erreicht werden, die das Lesen erleichtert und die Informationen zugänglich macht.
Klein formatierter Text wird oft für Nebeninformationen oder Fußnoten verwendet und ermöglicht eine kompakte Darstellung von zusätzlichen Details. Trotz seiner geringeren Größe kann klein formatierter Text dennoch klar und gut lesbar sein, insbesondere wenn er in angemessener Kontrastfarbe präsentiert wird. Die Verwendung von kleinerem Text kann dazu beitragen, Platz zu sparen und das Design einer Seite übersichtlich zu halten.
Bereiche
Großer Abstand – Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Normaler Abstand – Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Kleiner Abstand – Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Highlight Boxen
Achtung! - eine Danger Highlight Box
Erfolg! - eine Success Highlight Box
Warning! - eine Warning Highlight Box
Info! - eine Info Highlight Box
Buttons
Labels und Badges
Default Label
Success Label
Warning Label
Danger Label
Info Label
Badge
Zitat
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Tabellen
Standard
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
Condensed-Modus inklusive Streifen und Hover-Modus
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
Text mit Bildern
Folgende Darstellungsmöglichkeiten für Bilder (mit Text) zeigen nur die Optionen des Inhaltselementes ‘Text & Medien’. Kombiniert mit Rastern, Mask-Elementen und Plug-Ins ergeben sich viele weitere Möglichkeiten Bilder und Text ansprechend zu gestalten. Beispiele dafür finden Sie überall auf der Demo-Seite verteilt.
Bild im Text einbinden (oben mittig)
Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden.
Bild im Text einbinden (oben rechts)
Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.
Bild im Text einbinden (oben links)
So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren.
Bild im Text einbinden (unten mittig)
Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder die Darstellung auf einem Handy geeignet ist. Wohlgemerkt: Eine Seite für alle Formate. Was für eine Erleichterung. Standards sparen Zeit bei den Entwicklungskosten und sorgen dafür, dass sich Webseiten später leichter pflegen lassen. Natürlich nur dann, wenn sich alle an diese Standards halten. Das gilt für Browser wie Firefox, Opera, Safari und den Internet Explorer ebenso wie für die Darstellung in Handys. Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen.
Bild im Text einbinden (unten rechts)
Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden.
Bild im Text einbinden (unten links)
Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.
Bild fließend im Text einbinden (rechts)
Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden.
Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.
So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren.
Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder die Darstellung auf einem Handy geeignet ist. Wohlgemerkt: Eine Seite für alle Formate. Was für eine Erleichterung. Standards sparen Zeit bei den Entwicklungskosten und sorgen dafür, dass sich Webseiten später leichter pflegen lassen. Natürlich nur dann, wenn sich alle an diese Standards halten. Das gilt für Browser wie Firefox, Opera, Safari und den Internet Explorer ebenso wie für die Darstellung in Handys. Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen.
Bild fließend im Text einbinden (links)
Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden.
Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.
So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren.
Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder die Darstellung auf einem Handy geeignet ist. Wohlgemerkt: Eine Seite für alle Formate. Was für eine Erleichterung. Standards sparen Zeit bei den Entwicklungskosten und sorgen dafür, dass sich Webseiten später leichter pflegen lassen. Natürlich nur dann, wenn sich alle an diese Standards halten. Das gilt für Browser wie Firefox, Opera, Safari und den Internet Explorer ebenso wie für die Darstellung in Handys. Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen.
Videos
Sofern ein Video in der Dateiliste hochgeladen wurde, kann es über das Inhaltselement 'Text & Medien' auf einer Seite eingebunden werden.
Außerdem können Sie mit unseren Video-Plugins für YouTube und Vimeo Videos im Handumdrehen auf Ihrer TYPO3-Seite einbinden, ohne diese in der Dateiliste hochladen zu müssen. Praktisch, schnell und individuell gestaltbar!