Überschriften gestalten in Elementor

span-Tag

Für ein Webprojekt musste ich mir Gedanken machen, wie man in Elementor eine Überschrift mit zwei Farben und zwei verschiedenen Fonts erstellt. Zudem sollte der ganze Inhalt in einer einzigen H1-Überschrift stehen.

Es gibt ja allerhand verschiedene Widgets, die sowas bestimmt können. Ich habe es mit dem Standart Überschriften-Widget von Elementor erstellt.

So sieht der Titel “unformatiert” aus:

Titel unformatiert
<h1>businessview - Panoramafotografie</h1>

Mit etwas HTML und CSS sieht der Titel dann so aus:

Titel formatiert

HTML

business<span class="farbe">view</span><br><span class="alt-font">Panoramafotrografie</span>
  • business erbt die Formatierung vom Überschriften-Tag. In unserem Fall das Elementor Überschriften-Widget mit dem Tag H1.
  • view wird zudem die CSS-Klasse farbe (Farbe blau) zugewiesen.
  • Panoramafotografie wird die Klasse alt-font (neue Schriftart und Formatierung) zugewiesen.

CSS

.farbe{
    color:#336699;
}
.alt-font{
    font-family:"Open Sans Condensed", Sans-Serif;
    font-size: .4em;
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: .75em;
}

Um in einem Fliesstext etwas hervorzuheben braucht es allenfalls eine weitere CSS-Klasse (z.B. brand).

.brand{
    font-family:"Lobster";
    font-size: 1.1em;
}

Keine Beiträge verpassen?


War dieser Artikel hilfreich?
Please wait...
Fragen oder Anregungen?
Zu den Kommentaren ( 0 )
Passende Themen
Kommentare (0)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.