Stecknadel in DIVI Karten ersetzen

Marius Marzian • 25. Juni 2020 • 3 Min. Lesezeit

Bildschirmfoto 2020 06 25 Um 08.47.36 1024x539 1

SEO-Experte

Marius Marzian

OIT GmbH

Das Divi Theme von Elegant Themes bietet ein integriertes Karten-Modul mit Google Maps. Der Standard-Marker ist ein roter Pin – für viele Webseiten passt das farblich nicht zum Branding. In diesem Artikel zeigen wir dir zwei Möglichkeiten, wie du den Standard-Pin durch ein eigenes Icon ersetzen kannst – mit und ohne Theme-Update-Sicherheit.

Methode 1: Direkte Datei-Ersetzung

Die einfachste Methode ist das direkte Ersetzen der Marker-Datei im Divi-Theme-Ordner. Navigiere per FTP oder Dateimanager zu folgendem Pfad:

Pfad zur Marker-Datei

/wp-content/themes/Divi/includes/builder/images/marker.png

Ersetze die Datei marker.png durch dein eigenes Icon im PNG-Format. Empfohlene Größe: 30×40 Pixel mit transparentem Hintergrund.

Achtung: Theme-Updates

Problem: Bei jedem Divi-Update wird die Datei überschrieben und dein individueller Marker geht verloren
Lösung: Nutze Methode 2 (htaccess-Redirect) oder ein Child Theme, das die Änderung schützt

Methode 2: htaccess-Redirect (empfohlen)

Die elegantere und update-sichere Lösung: Eine Redirect-Regel in der .htaccess-Datei leitet Anfragen für den Standard-Marker auf dein eigenes Bild um. So überlebt die Änderung jedes Theme-Update.

htaccess-Code einfügen

Füge folgenden Code am Anfang deiner .htaccess-Datei ein (vor den WordPress-Regeln). Ersetze die URL durch den Pfad zu deinem eigenen Marker-Bild:

RewriteEngine On
RewriteRule ^wp-content/themes/Divi/includes/builder/images/marker\.png$ /wp-content/uploads/custom-marker.png [L]

Tipps für den eigenen Marker

Achte darauf, dass dein Marker-Icon die gleichen Proportionen wie das Original hat (ca. 30×40 Pixel). Verwende PNG mit transparentem Hintergrund und wähle Farben, die zu deinem Corporate Design passen. Teste die Darstellung auf verschiedenen Geräten, da der Marker auf mobilen Bildschirmen kleiner angezeigt wird. Bei Retina-Displays empfiehlt sich ein Marker in doppelter Auflösung (60×80 Pixel) für scharfe Darstellung.

Webdesign-Beratung anfragen

Bitte eine gültige E-Mail-Adresse angeben.