Website-Name in farbig

Hallo Günter,

das ist nicht ganz trivial, aber ich meine eine Lösung gefunden zu haben.

Ist das so, wie Du Dir das gedacht hast? Dann würde ich Dir eine Anleitung schreiben. Du müsstest dann aber auf den Webslogan verzichten.

Viele Grüße

Tom

Hallo Günter,

das wäre mein zweiter Vorschlag gewesen, es mit einer Grafik zu lösen. Hierzu noch zwei Hinweise: Es sollte "digitale" heißen, und Du müsstest in den Layout-Einstellungen die Logo-Größe noch auf die neue Grafik anpassen und diese anschließend nochmals einfügen. Im Screenshot sind die Buchstaben unten etwas beschnitten, weil die Höhe für das Logo wohl zu klein bemessen ist.

Ich will Dir aber meinen ursprünglichen Lösungsansatz nicht vorenthalten, falls es doch ohne Slogan geht.

Die folgende Vorgehensweise hat in meinem Test nur mit dem Web-Slogan funktioniert. Der Webseite-Name hingegen generierte einen Fehler in Bezug auf "color". Deshalb nutzen wir den Slogan für den farbigen Namen und lassen das Feld "Name" leer.

Jetzt erstellen wir den farbigen Namen mithilfe eines Text-Widgets. Füge irgendwo auf Deiner Seite ein neues Text-Widget ein. Schreibe jetzt den Namen und ändere die Farben der einzelnen Buchstaben wie gewünscht. Bitte die Schriftgröße und das Schriftgewicht nicht ändern. Jetzt klickst Du rechts oben im Widget auf die Quelltext-Ansicht ("<>"). Markiere den gesamten Text und kopiere ihn.

Der Quelltext sollte etwa so aussehen:

<p><span style="color: RGB(0, 130, 215);">Tr</span><span style="color: #D85C27;">an</span><span style="color: #EBEF10;">sp</span><span style="color: rgb(69, 198, 57);">ar</span><span style="color: #EBEF10;">eo</span><span style="color: rgb(216, 92, 39);">AG</span></p>

Den kopierten Quelltext fügst Du jetzt in das Feld "Slogan" ein und klickst "OK". Jetzt sollte der Name farbig in der Browser-Vorschau angezeigt werden.

Im nächsten Schritt kannst Du nun noch die Schriftgröße und das Schriftgewicht in den Layout-Einstellung unter "Logo > Webslogan" anpassen.

Der Schriftzug wird jetzt aber etwas zu weit unten sitzen. Mit etwas CSS kannst Du ihn aber weiter nach oben bringen. Unter "Einstellungen > CSS" fügst Du folgende Anweisung ein:

<style>
#slogan {
 margin-top: -15px;
}
</style>

Hier musst Du den Wert für "margin-top" sehr wahrscheinlich noch etwas anpassen bis Logo und Schriftzug wirklich auf einer Höhe sind. Das Ergebnis der CSS-Änderungen bitte auch immer direkt in der Browser-Vorschau überprüfen, nicht nur in ZP.

Abschließend noch ein paar Dinge, die mir auf Deiner Seite aufgefallen sind:

Der Seitentitel Deiner neuen Kontaktseite https://www.transpareo.com/kontakt.html lautet "Transparoe AG ..." statt "Transpareo AG ..."

Die Links zum Impressum und zur Kontaktseite im Footer finden sich nur auf der Startseite. Die solltest Du vielleicht noch mit allen übrigen Seiten verknüpfen. Der Link "Contact" ist auch schon auf der Startseite tot.

Last but not least: Ein "Imprint" gibt es nur in Büchern. "Legal Notice" oder "Site Notice" wäre die adäquate Übersetzung für "Impressum".

Herzliche Grüße

Tom