Überschriften unterschiedlich anpassen

[m-werk]

Hallo Leute, ich müsste die Überschriften für eine Seite so anpassen. Kann ich das ohne viel Umstände einfach lösen?

Die Hauptüberschrift und Subüberschrift ist immer 2 Zeilig, wobei die 1. Zeile immer kleiner geschrieben ist als die 2. (Siehe Bild)

Ueberschriften.jpg

[dazzle89]

Mit dem normalen Überschriftenfeld sollte das nicht möglich sein, weil du zusätzliches HTML benötigst. Zum Beispiel ein <span> innerhalb der Überschrift, wo jeweils entweder das kleine oder große Wort reinkommt. Also ist das vermutlich nur im Texteditor machbar.

[dazzle89]

Achja, du kannst natürlich auch das Pseudo-Element ::first-line verwenden. Das Problem hierbei ist aber, dass die Texte immer so verfasst werden müssen, dass nur ein Wort in jede Zeile passt.

[tab]

Das müsste man dann halt entsprechend freigeben. Siehe z.B. folgenden Thread:
https://community.contao.org/de/show...mente-erlauben

[derRenner]

Ist das einmalig? Nur für eine Seite? Oder wiederkehrend für Redakteure.
Falls ersteres dann würde ich das über den TinyMCE lösen. Falls doch f Redakteure und wiederkehrend würde ich über ein kleines Modul mit template Anpassung nachdenken.
Da kannst du dir zB zwei oder drei zusätzliche Sublines mit einbauen die du via CSS stylen kannst und bist dann auch Satzlängen unabhängig.

Ist hald dann nur bedingt eine einfache Lösung ;-)

Gesendet von meinem LG-D802 mit Tapatalk

[m-werk]

Ich hab dies nun anders gelöst. Es ist leider nicht einmalig.

Ich hab jetzt mal in einem Artikel 2 Überschriften mit H1 angelegt und zusätzlich zu jeder Überschrift noch eine weitere Klasse dazugegeben wie "klein" und "gross". Das gleiche bei H2.

Im CSS hab ich dann h1.klein und h1.groß dementspreichend angepasst.

[valentin_]

schau dir mal rocksolid custom elements oder dma_elementgenerator an, eignet sich dafuer super

Sent from my SM-G935F using Tapatalk

[Andreas]

Zwei H1 direkt untereinander finde ich semantisch nicht so dolle (ich habe deine Seite gesehen). Hier mal ein Beispiel wie du es in deinem Fall sehr einfach machen kannst.

<h1>
  <strong>Wichtig<strong> Überschrift
</h1>

h1 {
  text-align: center;
  font-size: 3rem;
}
h1 strong {
  display: block;
  font-size: 2rem;
}

Also einfach eine H1 im RTE erstellen und das erste Wort "fett" machen. Allerdings weiß ich nicht, wie das für Suchmaschinen ist, denn "Wichtig Überschrift" ist ja keine aussagekräftige Überschrift.

Wenn's komplizierter wird, würde ich auch custom-elements empfehlen. Und dann evtl. so eine Struktur aufsetzen.

<p class="subheadline"><em>Wichtig</em></p>
<h1>Überschrift</h1>

Obwohl dies auch einfach im RTE geht.

Im RTE kann man sehr leicht CSS-Klassen auf Textelemente aufsetzen, wenn man ihn ein wenig anpasst. Schau dir mal meine tinyCustom an http://public.andreasburg.de/tinyCustom.zip. Eine tinyCustom für Contao 4 habe ich auch bereits, ist aber noch nicht in der ZIP, habe ich aber schon im Ticketsystem von core-bundle vorgestellt.

[m-werk]

Ich hab es jetzt so gemacht. Hab alles im RTE gemacht, also eine H1 dem Text zugewiesen und die 2. Zeile im H1 fett. Dann im CSS das so designt.

Mit den custom-elements bin ich überhaupt nicht klar gekommen, daher hab ich die einfachere Variante gewählt.

Eigentlich wollte ich dies nicht im Texteditor lösen, denn dafür gibts ja das eigene Überschriften-Element, aber es funktioniert.

[Andreas]

Wenn du es mit ce_headline machen möchtest, dann kannst du dir dort ein neues Feld für die sub- bzw. topheadline anlegen und das Template ce_headline entsprechend anpassen.

[rusty]

Spontan wäre mir folgender Ansatz in den Sinn gekommen:
Die beiden Zeilen werden mit dem Inserttag {{br}} getrennt, also z.B.
Wichtige {{br}} Überschrift

Im CSS kann dann einfach die erste Zeile angesprochen werden:

h1:first-line { font-size: 75%; }

[Andreas]

Auch nicht schlecht. <br> macht man übrigens mit Shift-Enter.

Aber beachten, dass nicht alles bis zum <br> first-line ist. Wenn der Browser den Text vor dem <br> umbricht, dann ist nur der Text, den der Browser auch wirklich in einer Zeile anzeigt first-line.