--- title: "Map contact left, 1:1" url: "https://www.toujou.de/service/elementbibliothek/map-elements/map-contact-left-11/" date: 2019-01-11 modified: 2022-09-27 --- # Map contact 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 contact left, 1:1](https://www.toujou.de/service/elementbibliothek/map-elements/map-contact-left-11/) Map with contact information left, square ========================================= Eine quadratische Karte auf der linken Seite mit Kontaktinformationen auf der rechten Seite. Item-ID: 06-001 [Beispielansicht](#c1003553) [Anleitung](#c1003551) [Verhalten](#c1003549) ![](https://www.toujou.de/_assets/processed/ZXL57Bs67TSTHwgUftA6R0aQOCZceYUX7LWF1oxuu68/q:85/w:433/h:54/fn:Y3NtXzA2XzAwMS1tYXBfY29udGFjdF9sZWZ0Xy1fc3FfMjAwMF8yNTBfZjAyNTBlMDM1Zg:t/cb:0bb0aa3ba5c1022cf3ae59ffda08d2c3956f39b9/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9JY29ucy9Gb3JtYXRlL0JpYl8yMDAwXzI1MC8wNl9NYXBfRWxlbWVudHNfMjAwMF8yNTAvMDZfMDAxLW1hcF9jb250YWN0X2xlZnRfLV9zcV8yMDAwXzI1MC5wbmc) --- 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 GmbH --------- Graf-Pückler-Limpurg-Str. 87 90768 Fürth Tel: [+49 911 23980-870](tel:+4991123980870) E-Mail: [ ](https://www.facebook.com/toujou.typo3/) [ ](https://twitter.com/toujou_de) [ ](https://www.instagram.com/toujou.de/) [ ](https://www.linkedin.com/company/12834142) --- Anleitung ----------- [ ![](https://www.toujou.de/_assets/processed/yXvVYfutLXaNl5pUhEfuvBcoov4g3g857D0lMM_E0I0/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA2LTAwMS0xLWVsZW1lbnRfYW5sZWdlbl9iMDU4ODRiZWMy:t/cb:822b5e669e8b555bc2b86c42e802a5dbf4263da3/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDZfTWFwX0VsZW1lbnRzLzA2LTAwMS1tYXBfY29udGFjdGluZm9fbGVmdF9zcXVhcmUvMDYtMDAxLTEtZWxlbWVudF9hbmxlZ2VuLnBuZw) ](https://www.toujou.de/fileadmin/Manual/06_Map_Elements/06-001-map_contactinfo_left_square/06-001-1-element_anlegen.png) ### Neues Element anlegen - Klicken Sie auf den Button **Inhalt***,* um ein Kartenelement zu erstellen. [ ![](https://www.toujou.de/_assets/processed/YETTTLRnsbgObeP2F_YOwTten4-94e8GtTXxvuGj0dY/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA2LTAwMS0yLWVsZW1lbnRfd2FfX2hsZW5fZGQxNDRiZDYyOA:t/cb:fc668ba0f06878809653787c0debf129d0a1197a/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDZfTWFwX0VsZW1lbnRzLzA2LTAwMS1tYXBfY29udGFjdGluZm9fbGVmdF9zcXVhcmUvMDYtMDAxLTItZWxlbWVudF93YV9faGxlbi5wbmc) ](https://www.toujou.de/fileadmin/Manual/06_Map_Elements/06-001-map_contactinfo_left_square/06-001-2-element_wa__hlen.png) ### Karten-Element wählen - Im Reiter *Map Elements* wählen Sie **Map with contact information left, square**. [ ![](https://www.toujou.de/_assets/processed/GzQD5OiVWFh74p8pGl-fK8vuHRDNQrtZ5BE0v0m9VRM/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA2LTAwMS0zLWtvbnRha3RkYXRlbl93YV9faGxlbl82OWJkZDU2OWEw:t/cb:580c887bdf6657abf7f2125b1ed615bdaa1a9c13/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDZfTWFwX0VsZW1lbnRzLzA2LTAwMS1tYXBfY29udGFjdGluZm9fbGVmdF9zcXVhcmUvMDYtMDAxLTMta29udGFrdGRhdGVuX3dhX19obGVuLnBuZw) ](https://www.toujou.de/fileadmin/Manual/06_Map_Elements/06-001-map_contactinfo_left_square/06-001-3-kontaktdaten_wa__hlen.png) ### Kontaktdaten wählen - Im Reiter *Choose Business-Contact* wählen Sie aus der Dropdownliste die gewünschten Kontaktdaten, die Sie im Vorfeld über das übergeordnete Modul [Contact Information](https://www.toujou.de/tutorials/kontakte-anlegen/) angelegt haben. --- ### 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 Karte auf der linken Seite mit Kontaktinformationen auf der rechten Seite*** **gibt die von Ihnen gewählten Kontaktdaten neben einer Map mit festem quadratischen Seitenverhältnis wieder.** **Responsive:** Ist nicht ausreichend Platz zur Darstellung nebeneinander vorhanden, zeigen alle Karten die zuvor nebenstehenden Kontaktdaten 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 Kontaktdaten, die innerhalb dieses Elements zur Auswahl stehen, werden vorab durch die von Ihnen vorgenommenen Grundeinstellungen im übergeordneten toujou-Menüpunkt *Contact Information* bestimmt. Die Textfläche ist dadurch nicht editierbar. - Für die Anzeige der Karten auf der Website sind zwei Drittanbieter möglich. Mapbox oder OpenStreetMap. Ist kein Mapbox-Token in den [Theme Settings](https://www.toujou.de/service/toujou-setup/analytics/) hinterlegt, greift das System automatisch auf Mapbox zurück. --- Verknüpfte Themen ----------------- Erläuterungen aus dem [toujou](https://www.toujou.de/service/toujou-setup/)- & [TYPO3-Setup](https://www.toujou.de/tutorials/), die mit dieser Elementanleitung in Verbindung stehen. [Kontakt](https://www.toujou.de/tutorials/kontakte-anlegen/)