Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Ändern der Farbe der Adressleiste im mobilen Browser passend zu Ihrer WordPress-Website

Die Anpassung der Farbe der Adressleiste in mobilen Browsern an Ihre WordPress-Website kann die visuelle Identität Ihrer Marke verbessern und ein kohärenteres Nutzererlebnis schaffen.

Viele beliebte Websites wie BBC und Facebook verwenden ihre eigenen Markenfarben für die Adressleiste in mobilen Browsern. Dies hat ihnen geholfen, das Engagement zu steigern, indem sie die Nutzer zu erneuten Besuchen ermutigt haben.

Im Laufe der Jahre haben wir beobachtet, dass viele unserer Partnermarken die Farbe der Adressleiste ihrer Website auf mobilen Geräten angepasst haben. Diese subtile Änderung hilft ihren Websites, sich von anderen geöffneten Tabs in mobilen Browsern abzuheben, sodass sie für die Nutzer besser erkennbar sind.

In diesem Artikel zeigen wir Ihnen, wie Sie die Farbe der Adressleiste in einem mobilen Browser ganz einfach ändern können, um sie an Ihre WordPress-Website anzupassen.

Address bar color in mobile browser for WordPress site

Warum die Farbe der Adressleiste im mobilen Browser anpassen?

Die meisten beliebten WordPress-Themes sind für Mobilgeräte geeignet. Dadurch sieht Ihre Website auf mobilen Geräten großartig aus. Sie sieht aber immer noch wie eine Website aus und fühlt sich auch so an.

Indem Sie die Farbe der Adressleiste an Ihre WordPress-Website anpassen, können Sie ein natives App-ähnliches Gefühl vermitteln. Dies verbessert die Nutzererfahrung, was letztlich den Umsatz und die Konversionen steigert.

Color address bars in mobile browser on Android

Eine gut gewählte Farbe der Adressleiste kann Ihre Website sogar professioneller und optisch ansprechender erscheinen lassen.

Sehen wir uns nun an, wie Sie die Adressleiste des mobilen Browsers an Ihr WordPress-Theme anpassen können.

Hinweis: Bitte beachten Sie, dass diese Methode derzeit nur für den Google Chrome-Webbrowser auf Android-Geräten mit Lollipop oder neueren Versionen funktioniert.

Ändern der Farbe der Adressleiste im mobilen Browser passend zu Ihrer WordPress-Website

Sie können die Farbe der Adressleiste im mobilen Browser ganz einfach ändern, indem Sie einen benutzerdefinierten Code in die Datei header.php Ihres Themes oder Child-Themes kurz vor dem abschließenden </head>-Tag einfügen.

Allerdings kann der kleinste Fehler dazu führen, dass Ihre Website nicht mehr funktioniert und nicht mehr zugänglich ist.

Aus diesem Grund empfehlen wir die Verwendung von WPCode. Es ist das beste WordPress Code Snippets Plugin auf dem Markt und der sicherste Weg, um benutzerdefinierten Code zu Ihrer Website hinzuzufügen.

Zunächst müssen Sie das WPCode-Plugin installieren und aktivieren. Eine detaillierte Anleitung finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Hinweis: Das WPCode-Plugin hat auch eine kostenlose Version, die Sie für dieses Tutorial verwenden können. Wenn Sie jedoch auf die kostenpflichtige Version upgraden, erhalten Sie Zugriff auf Funktionen wie die Code-Snippet-Bibliothek, bedingte Logik und mehr.

Besuchen Sie nach der Aktivierung die Seite Code Snippets “ + Add Snippet in der WordPress-Admin-Seitenleiste.

Klicken Sie hier auf die Schaltfläche „Snippet verwenden“ unter der Option „Eigenen Code hinzufügen (neues Snippet)“.

Add

Dies führt Sie zur Seite „Benutzerdefiniertes Snippet erstellen“, wo Sie zunächst einen Namen für das Code-Snippet eingeben können. Dieser Name wird im Frontend nicht angezeigt und dient nur zu Ihrer Identifikation.

Wählen Sie dann aus dem Dropdown-Menü auf der rechten Seite „HTML Snippet“ als Code-Typ aus.

Choose HTML Snippet option to change the address bar color in mobile browsers

Jetzt müssen Sie nur noch den folgenden Codeschnipsel kopieren und in das Feld „Codevorschau“ einfügen:

<meta name="theme-color" content="#ff6600" />

Danach können Sie den Hex-Code für die Farbe Ihrer Wahl neben der content=-Zeile in den Code einfügen.

Diese Farbe wird dann für Ihre Adressleiste im mobilen Browser verwendet.

Tipp: Sie können den HEX-Wert einer Farbe mit jeder Bildbearbeitungssoftware wie Adobe Photoshop, Gimp, Paint usw. ermitteln.

Add Hex code

Danach blättern Sie zum Abschnitt „Einfügen“ und wählen den Modus „Automatisch einfügen“.

Auf diese Weise wird der Code bei der Aktivierung automatisch auf Ihrer Website ausgeführt.

Choose the Auto Insert mode

Blättern Sie schließlich zurück nach oben und schalten Sie den Schalter „Inaktiv“ auf „Aktiv“ um.

Klicken Sie anschließend auf die Schaltfläche „Snippet speichern“, um Ihre Einstellungen zu speichern und den Code auszuführen.

Save the code snippet for changing the address bar color in the mobile browser

Bonus-Tipps zur Erstellung einer mobilfreundlichen WordPress-Website

Neben der Änderung der Farbe der Adressleiste können Sie auch einige andere Tipps anwenden, um eine mobilfreundliche Website zu erstellen. Der Grund dafür ist, dass Suchmaschinen wie Google die Indizierung für mobile Endgeräte bevorzugen.

Außerdem erhalten mobile Suchanfragen 85,8 % mehr Impressionen als ihre Desktop-Pendants, wodurch Sie mehr Leads generieren können.

Um eine mobilfreundliche Website zu erstellen, empfehlen wir die Verwendung eines responsiven WordPress-Themes oder eines Page Builders wie SeedProd.

Weitere Informationen finden Sie in unserem Tutorial zur Erstellung eines benutzerdefinierten Themes in WordPress.

Install theme

Sie müssen auch ein Plugin wie WPForms verwenden, um Ihrer Website Formulare hinzuzufügen, z. B. Kontakt-, Registrierungs- und Anmeldeformulare.

Dies ist, weil WPForms kommt mit 1900 + vorgefertigte Vorlagen, komplette Spam-Schutz, und ist speziell für mobile Geräte optimiert, so dass mobile Besucher eine erstklassige Erfahrung.

WPForms page title and subtitle

Darüber hinaus sollten Sie die Größe großer Bilder ändern, einen schnellen Hosting-Anbieter verwenden, Kommentare langsam laden, ein mobil-responsives Navigationsmenü erstellen und vieles mehr.

Weitere Tipps finden Sie in unserem Tutorial über die Erstellung einer mobilfreundlichen WordPress-Website.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu erfahren, wie Sie die Farbe der Adressleiste in einem mobilen Browser ändern können, um sie an Ihre WordPress-Website anzupassen. Vielleicht interessieren Sie sich auch für unsere Anleitung für Einsteiger, wie Sie die Farben Ihrer WordPress-Website anpassen können, und für unsere Expertenauswahl der besten Page-Builder-Plugins für WordPress.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

69 KommentareEine Antwort hinterlassen

  1. Jiří Vaněk

    Thank you for the instructions. I used them on my website and it works great. Too bad it only works on mobile Chrome.

    • WPBeginner Support

      Maybe in the future it will be more likely for desktop browsing. :)

      Admin

  2. Jiří Vaněk

    Thank you for the instructions. I used them on my website, and now the Chrome browser on mobile displays it with the colors of the website’s header. It looks much better. It’s just a pity that, most likely, no other browser besides mobile Chrome supports it.

    • WPBeginner Support

      Some other mobile browsers are starting to adopt it so it should hopefully start to be seen more often :)

      Admin

  3. Ankit Sahu

    Absolutely working

    Thanks for this

    • WPBeginner Support

      Glad our guide was helpful!

      Admin

  4. Sarah

    This seems to have stopped working… I implemented this on my website back in Feb and I just applied it to another one… upon checking the new one doesn’t work and neither does the old! Did something change here in Chrome mobile app?

    • WPBeginner Support

      If you’re using dark mode for your browser, chrome will override this setting.

      Admin

  5. Naveen Rana

    Where to find theme or child theme‘s header.php file?

  6. Manshant Singh

    Great post and it is working but not working on category page and when I open a post.

    • WPBeginner Support

      You would want to check with the support for your specific theme that thee is not a different header styling being assigned to those pages.

      Admin

  7. Aditya Savita

    First of all thank you for this great tutorial but now I’m facing a problem the address bar color is not showing on the homepage of my site. It’s perfectly showing on all pages and posts of my site except my homepage.
    What should I do now? Please help!

    • WPBeginner Support

      You may want to check with the support for your specific theme that it is not set on the homepage template that could be overriding your settings.

      Admin

  8. Almesh

    I was able to get it done by one shot. thank you

    • WPBeginner Support

      Glad our guide was helpful :)

      Admin

  9. Craige Wilson

    Does it takes time to update?

    • WPBeginner Support

      It can and browser caching would also delay the change as well.

      Admin

  10. Ebrahim Talebi

    Thanks a lot.
    But, be aware that this trick won’t work if the user has enabled dark mode on its phone because it overrides everything else. (Some phones has an option called dark mode)

    • WPBeginner Support

      Thank you for sharing that in case someone ran into that issue :)

      Admin

    • WPBeginner Support

      Glad our guide was helpful :)

      Admin

  11. kafi

    I just needed to say man,
    you guys are the BEST.

    • WPBeginner Support

      Thank you, glad you like our content :)

      Admin

  12. Fred

    Another very easy tutorial from your team!

    I would like to add a gradient color to the address bar.

    Is it possible?

    • WPBeginner Support

      Not at the moment with this method.

      Admin

    • WPBeginner Support

      You’re welcome :)

      Admin

  13. Amit Ayalon

    Work very well! super easy to set up.
    Thank you very much!

    • WPBeginner Support

      You’re welcome, glad our guide could be helpful :)

      Admin

    • WPBeginner Support

      Glad our guide was helpful :)

      Admin

  14. Sunil Ilanthila

    Address bar color changed but text is in black, I wan it in Waite, how?

    • WPBeginner Support

      Unless I hear otherwise, that is decided by the mobile browser, not a color you set.

      Admin

  15. Deborah

    Thank you. Very quick and easy to do, and gives my website a rather posh look.

    • WPBeginner Support

      Glad our tutorial could help :)

      Admin

  16. Rohit

    Anyonebhelp me will it only work in Chrome and can it be used for asp.net also ?

    • WPBeginner Support

      For the moment it will only work on chrome.

      Admin

  17. Nasim

    If using elementor Page Builder How To Do That

    • Syaz Amirin

      It’s the same. The same process I meant, even using Elementor.

  18. Philarpy

    Wonderful, it’s working for me as well. Thanks.

  19. Mark

    brilliant, 2 minute job and works a treat! Thanks ;)

  20. Phil Duffney

    Thank you so much, that was a huge help!

  21. Nitish

    It is working in android kit kat too…I think they updated chrome…

  22. JEEiEE

    Thank you

    but what about iphone and windows

  23. Craig Jon Smith

    Worked great for me on Weebly. Instead of messing with the code just go to settings, and drop it in the section that literally says header code. I’ve done it to two sites, now. One more to go

  24. Diego

    Very nice… and it works! But how do we get the text to to change to white?

  25. Taylor

    Thanks so much! Just what I was looking and worked just the way you described its setup!

  26. Akash gupta

    Simply add this code in your theme or child theme‘s header.php file just before the closing tag.

    but it is not work in one website . why?

  27. ethann

    looks like it works on android version 5.0 and above

  28. enack

    Great tip, worked great for my site (as your site always does) do let me know if you get the code for iphones also but either way can’t complain. Thanks!

  29. Irfan abbas

    Can this method work on newspaper 7 themes.

    • Hamid Roshaan

      Exactly what I want to know

  30. zakaria

    hello, thanks for this tip but is that working on blogger s templates? if yes how to add it? i ve tried many times but blogger always showing error.

  31. Saikot Hc

    Awesome boss! Thanks…!!

  32. Xaif

    It didn’t work for me. I was having eleven40 child theme but it is not working

  33. Queven

    Hi! It’s supported in what browsers?

  34. Terri

    Love this! Thanks for the tip

  35. dhiravat

    Very applicable trick. Thanks!

  36. Alessio

    This is really cool! Thanks!

  37. Gerard Jimenez

    Great piece of info, just changed my site.

  38. Bobby

    Nice tip. Let’s figure out how to do that for all browsers on mobile. :-)

    • Ahmad Fatah

      Wow look simple.. i will try on my blog.
      Terima Kasih :D

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.