1. Video Tutorial: Überschriften mit Gold-Effekt in Elementor erstellen
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
2. Der CSS-Code für den Gold-Effekt
selector .elementor-heading-title
{
background: url("HIER DEINEN LINK EINFÜGEN") #000000 repeat 30% 70% ;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
Ich wünsch dir viel Freude beim nachmachen und hoffe, dass dir dieser Trick weiterhilft!
Möchtest du weitermachen? Wie wäre es denn mit einer personalisierten 404-Fehlerseite? Hier gibt es ein Mini-Tutorial, wie du deine eigene 404-Fehlerseite mit Elementor erstellst:
Video Transkription
Kleinen Tutorial und ich zeige dir heute wie du bei deinen Überschriften diesen schönen Gold-Effekt erstellen kannst. Denn bei Elementor ist es nicht vorgesehen, dass du deine Schrift mit einer Textur versehen kannst, also was du hier siehst ist eine Gold-Textur, sondern du kannst unterschiedliche Farben auswählen oder unterschiedliche Farbverlauf.
Mit ein klein wenig CSS können wir das aber ändern und das erfährst du heute. Was wir zuallererst brauchen ist diesen Gold-Effekt, also ein Bild, eine Textur von Gold und Dafür empfehle ich dir mal die Seite Creative Market, wo du ganz, ganz viel Grafiken, Illustrationen oder auch Texturen findest. Und wir suchen jetzt mal auf Englisch.
Und dann siehst du hier schon, dass du ganz viele Angebote findest für diesen Gold-Effekt. Bei allem, was du im Internet kaufst, ist es immer wichtig, dass du auf die Lizenzvereinbarungen achtest. Zum Beispiel hier, dass sie für den kommerziellen Gebrauch sind, wenn du deine Webseite auch kommerziell laufen lässt für dein Business.
Und wenn du eine Grafik dir besorgt hast und gekauft hast, dann ist der nächste Schritt, dass du sie bei WordPress hochlädst. Das habe ich hier zum Beispiel getan. Ich habe mal drei unterschiedliche Texturen ausprobiert und die siehst du jetzt hier. Und die fügen wir dann gleich in unsere Schrift ein. Zuallererst legen wir uns mal eine Überschrift an. Dafür wähle ich jetzt mal die Überschrift und ziehe sie mir hier rein. Ich mache jetzt auch mal die Typografie etwas größer, damit man den Effekt dann auch gut erkennen kann und ich will hier auch mal einen Hintergrund, der so ein bisschen auch schwarz ist, damit man es goldschön erkennen kann. So, ein bisschen mal noch.
Ok, die Schrift hat sich jetzt ein bisschen versteckt und jetzt kommt unser CSS-Code ins Spiel. Den CSS-Code findest du unter diesem Video, da habe ich ihn dir eingefügt, den kannst du jetzt einfach, wenn du deine Überschrift angeklickt hast, auf Erweitert, eigenes CSS, dort kannst du diesen Code einfügen. Du brauchst auch keine Angst haben, er greift nur auf dieses Feld zu, wo du den Code auch einfügst. Du siehst ja schon, da ich das Bild schon hinterlegt habe, hat meine Schrift jetzt auch direkt einen Goldschatten. Aber ich zeige dir noch, wie du das genau machst. Und zwar gehst du in deine Mediathek und suchst dir die Goldfolie aus. Ich nehme jetzt mal die hier, die du vorfeld hochgeladen hast. Gehst auf URL, inzwischen Ablage kopieren und wenn du zurück auf deinen Elementor gehst, in das CSS-Feld siehst du hier bei Background die URL, auf die er zugreift.
Und die tausche ich jetzt mal mit meiner aus. Und schon siehst du, hat sich auch die Textur etwas verändert. Und ich habe einen wunderschönen goldenen Hintergrund. Und jetzt wünsche ich dir viel Spaß beim Umsetzen und mit deinen goldenen Überschriften. Bis zum nächsten Mal.
