--- title: "Map address left, 1:1" url: "https://www.toujou.de/service/elementbibliothek/map-elements/map-address-left-11/" date: 2019-01-11 modified: 2026-04-28 --- # Map address left, 1:1 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/) 4. [Map Elements](https://www.toujou.de/service/elementbibliothek/map-elements/) 5. [Map address left, 1:1](https://www.toujou.de/service/elementbibliothek/map-elements/map-address-left-11/) Map of place left with text, square =================================== Eine quadratische Karte (gemäß der Adresse, die Sie angeben) auf der linken Seite mit Kontaktinformationen auf der rechten Seite. Item-ID: 06-013 [Beispielansicht](#c1003429) [Anleitung](#c1003427) [Verhalten](#c1003425) ![](https://www.toujou.de/_assets/processed/JE1DO894trgPk9lZaGV9xEu6TeOUyvJS4LjfBRXADZo/q:85/w:433/h:54/fn:Y3NtXzA2XzAxMy1tYXBfYWRkcmVzc19sZWZ0Xy1fc3FfMjAwMF8yNTBfZDE0YmIxMzlhMg:t/cb:73d36a60e2cee800926037890226ea324b06f315/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9JY29ucy9Gb3JtYXRlL0JpYl8yMDAwXzI1MC8wNl9NYXBfRWxlbWVudHNfMjAwMF8yNTAvMDZfMDEzLW1hcF9hZGRyZXNzX2xlZnRfLV9zcV8yMDAwXzI1MC5wbmc) --- Beispielansicht ----------------- Um externe HTML-Inhalte anzuzeigen, benötigen wir Ihre Einwilligung. Weitere Informationen finden Sie in unserer [ Datenschutzerklärung. ](https://www.toujou.de/datenschutz/) Einmal erlauben Immer erlauben DFAU ---- Graf-Pückler-Limpurg-Str. 87 90768 Fürth Bayern, DE Tel: [+49 911 239808-70](tel:+4991123980870) E-Mail: This is a map element that displays an address above any type of information. The text and/or other type of content is displayed underneath the address and above social media icons, if you wish to link to social media channels. [ ](https://www.facebook.com/DFAU1/) [ ](https://twitter.com/DFAU) [ ](https://www.instagram.com/toujou.de/) [ ](https://www.xing.com/companies/dfaugmbh) --- Anleitung ----------- [ ![](https://www.toujou.de/_assets/processed/mEGlih9bxk6kJHhQCCDyIQMd2HKATdjh-gfl9W71ors/q:85/c:1921.7777777778:1081:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX21hcC1vZi1wbGFjZS1lbGVtZW50YXVzd2FobC0xLTEtbGlua3NfMDEyZWU0ZGEyOQ:t/cb:1c7e5557fbaf75e3ce9482ca7cd5af6d156cc43c/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA2X01hcF9lbGVtZW50cy8wNl8wMl9wbGFjZS9tYXAtb2YtcGxhY2UtZWxlbWVudGF1c3dhaGwtMS0xLWxpbmtzLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/06_Map_elements/06_02_place/map-of-place-elementauswahl-1-1-links.png) ### Karten-Element anlegen - Klicken Sie auf den Button **Inhalt***,* um ein Karten-Element zu erstellen. - Im Reiter *Map Elements* wählen Sie **Map of place left with text, 1:1**. [ ![](https://www.toujou.de/_assets/processed/kSXf3wj8sPYEnhfWmIerRv3bV19LrhayVNPDugoSKWU/q:85/c:1921.7777777778:1081:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX21hcC1vZi1wbGFjZS0xLTEtbGlua3MtbmFtZS1hZHJlc3NlX2IwODY3NzJlM2Y:t/cb:03f6cdfe9b84e6b276a44b85346941afc5e4f84f/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA2X01hcF9lbGVtZW50cy8wNl8wMl9wbGFjZS9tYXAtb2YtcGxhY2UtMS0xLWxpbmtzLW5hbWUtYWRyZXNzZS5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/06_Map_elements/06_02_place/map-of-place-1-1-links-name-adresse.png) ### Name und Adresse einfügen - Geben Sie im Feld *Name* die gewünschte Bezeichnung ein. - Um die Adresse, die in der Kartenansicht dargestellt werden soll, zu definieren, stehen Ihnen drei Optionen zur Verfügung: *Geocode-Wizard, Geo-Koordinaten* und *Postalische Adresse*. - Um die korrekte Darstellung einer Adresse zu gewährleisten, ist das Ausfüllen eines der drei Optionen erforderlich. [ ![](https://www.toujou.de/_assets/processed/Oo_UgANJPyudrUZNE8BZKfsbTKJ0qGHuPeSbLZM9WaE/q:85/c:1921.7777777778:1081:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX21hcC1vZi1wbGFjZS1nZW9jb2RlXzRiYjU2NDY5YzQ:t/cb:a9688427ffe95e5deabe97aea4a7e18d5df5f38e/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA2X01hcF9lbGVtZW50cy8wNl8wMl9wbGFjZS9tYXAtb2YtcGxhY2UtZ2VvY29kZS5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/06_Map_elements/06_02_place/map-of-place-geocode.png) ### Geocode-Wizard - Um den Geocode-Wizard zu nutzen, klicken Sie auf den Button **Geocode-Wizard für die Adresse** aus dem vorherigen Schritt. - In das geöffnete Fenster geben Sie in das Textfeld die Straße und Hausnummer und Stadt ein. - Das Suchfeld hat eine Auto-Vervollständigung. Klicken Sie auf den dargestellten Vorschlag. - Anschließend schließt das Fenster und Sie finden die Daten im Beireich des Geocode-Wizards. [ ![](https://www.toujou.de/_assets/processed/lK064IV-WolV78ZeeniFmgQ40lbb4fqKWMtW23E-lr8/q:85/c:1921.7777777778:1081:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX21hcC1vZi1wbGFjZS1wb3N0YWxpc2NoZS1hZHJlc3NlXzAwN2FhZTE2ZWU:t/cb:8fabbbf8b3ed4c1247869e1ef2ed3e554049ba5c/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA2X01hcF9lbGVtZW50cy8wNl8wMl9wbGFjZS9tYXAtb2YtcGxhY2UtcG9zdGFsaXNjaGUtYWRyZXNzZS5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/06_Map_elements/06_02_place/map-of-place-postalische-adresse.png) ### Postalische Adresse - Die Option der postalischen Adresse aktivieren Sie, indem Sie den Button **+ Neu anlegen** klicken. - Hinterlegen Sie alle relevanten Informationen. - Die Felder Telefon Fax und E-Mail in diesem Bereich stehen auch bei den anderen Adress-Optionen zur Verfügung. [ ![](https://www.toujou.de/_assets/processed/igC1IJJJV_IFqC20gGwDvPIts2p6p_SOFi0FZxzSxl0/q:85/c:1921.7777777778:1081:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX21hcC1vZi1wbGFjZS10ZXh0X2I2MjI5MzEyNjE:t/cb:fdc3af931cdc36b1328de2bf59b0da3e98bc689f/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA2X01hcF9lbGVtZW50cy8wNl8wMl9wbGFjZS9tYXAtb2YtcGxhY2UtdGV4dC5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/06_Map_elements/06_02_place/map-of-place-text.png) ### Text hinterlegen - Geben Sie Ihren Text ins Textfeld ein. - Sollten Sie den Text aus einer anderen Datei kopieren, achten Sie auf eventuell mitkopierte Formatierungen. - Der Text kann direkt im Textfeld, mit dem Menü über dem Textfeld, formatiert werden. - Im [Element Design](#c1009739) individualisieren Sie das Erscheinungsbild. [ ![](https://www.toujou.de/_assets/processed/lMTZ877kXHim23Y4G6OXa5IdW6HaWwtugxDSGxFor80/q:85/c:1921.7777777778:1081:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX21hcC1vZi1wbGFjZS1zb2NpYWxtZWRpYV82N2U0OThiYzJl:t/cb:12fdd7220a6d2f118c5819b8aa6d241efd9f58b0/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA2X01hcF9lbGVtZW50cy8wNl8wMl9wbGFjZS9tYXAtb2YtcGxhY2Utc29jaWFsbWVkaWEucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/06_Map_elements/06_02_place/map-of-place-socialmedia.png) ### Social Media verknüpfen - Im Reiter **Soziale Medien** haben Sie die Möglichkeit, für diverse Social-Media-Kanäle Verlinkungen zu erstellen. - Fügen Sie für das jeweilige Medium den Direktlink zum gewünschten Profil ein. [ ![](https://www.toujou.de/_assets/processed/yYHYcakbvIhm5fG9BmDK0ukhjnNE051QEku5lnV4eNk/q:85/c:1921.7777777778:1081:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX21hcC1vZi1wbGFjZS1zZXR0aW5nc183MWQ2ZmU0ZWRi:t/cb:4ecf6c05f26ec01d33e7da5238261f09b954a39d/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA2X01hcF9lbGVtZW50cy8wNl8wMl9wbGFjZS9tYXAtb2YtcGxhY2Utc2V0dGluZ3MucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/06_Map_elements/06_02_place/map-of-place-settings.png) ### Headline einstellen und Adresse verstecken - Unter dem Reiter *Settings* können Sie im Bereich ***Headline*** die H-Auszeichung (für Code und Suchmaschinen relevant) über das **Dropdownmenü** definieren. - Mit der *Größe der Headline* stellen Sie die Schriftgröße der Überschrift ein. - Um die Adresse zu verstecken, aktivieren Sie mit einem Klick in das **Kästchen** die Funktion. Taucht ein Häkchen auf, ist diese Funktion aktiviert und es erscheint nur der hinterlegte Text. --- ### Element Design für mehr Individualität In diesem Element können Sie zudem das Erscheinungsbild ganz leicht mit dem *Element Design* mit einem Klick ändern. Mit der Auswahl von Standard Design, Primary Design, Secondary Design oder Umgekehrtes Design wechseln Sie Hintergrundfarbe des Elements und ggfs. die Hintergrundfarbe der Headline oder Pfeile bzw. des Textbereichs entsprechend der in den [Theme-Settings definierten Farbe](https://www.toujou.de/service/toujou-setup/farben-festlegen/). ![](https://www.toujou.de/_assets/processed/XEc5X-Qx0dzfOl3J4GUEueIei3HUGvlKhRfby_OPkOs/q:85/c:789.15789473684:200:fp:0.46421052631579:0.5/rt:force/w:432/h:109/fn:Y3NtX2VsZW1lbnRfZGVzaWduX2F1c3dhaGxfbWVkYXRzdV82NTk4MTFkYjhi:t/cb:b70ef9624e2ccbfba77c8a4e802f3ee405748758/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzAyX1RlYXNlcl9lbGVtZW50cy9DaW5lbWFfVGVhc2VyXzMzLTY2L2VsZW1lbnRfZGVzaWduX2F1c3dhaGxfbWVkYXRzdS5wbmc) - Mit Klick auf das **Element Design** im Reiter Allgemein / General erhalten Sie im Dropdown-Menü die Wahl für eine individuelle Designfarbe. - Wählen Sie aus den Optionen Standard, Primary, Secondary sowie Umgekehrt die gewünschte Option aus. - Speichern Sie die Änderungen im Element, damit sie sichtbar werden. --- Verhalten ----------- ***Eine quadratische Adress-Karte auf der linken Seite mit Kontaktinformationen auf der rechten Seite*** **gibt die von Ihnen gewählte Adresse in einer Map mit festem quadratischen Seitenverhältnis wieder.** **Responsive:** Ist nicht ausreichend Platz zur Darstellung nebeneinander vorhanden, zeigen alle Karten die zuvor nebenstehenden Kontaktdaten/Informationen unter der Karte an. Unabhängig von der ursprünglichen Ausrichtung wird dadurch die Darstellung einheitlicher Karten auf kleinen Endgeräten gewährleistet. **Besonderheiten:** - Die Nutzung dieses Elements bietet sich für die Darstellung von Adressen an, die nicht bereits in Ihren Grundeinstellungen im übergeordneten Menü *Contact Information* eingetragen sind. Für dieses Element steht Ihnen zusätzlich zur Darstellung der Adresse eine editierbare Textfläche zur Verfügung, in der Sie weitere Informationen frei eingeben können. - Für die Anzeige der Karten auf der Website wird der Drittanbieter Mapbox genutzt. Dafür muss ein Mapbox-Token in den [Theme Settings](https://www.toujou.de/service/toujou-setup/analytics/) hinterlegt werden.