--- title: Map-Image right with text, square url: "https://www.toujou.de/service/elementbibliothek/map-elements/map-image-right-11/" date: 2019-01-11 modified: 2022-09-27 --- # Map-Image right with text, square 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 image right, 1:1](https://www.toujou.de/service/elementbibliothek/map-elements/map-image-right-11/) Map-Image right with text, square ================================= Ihre eigene quadratische Karte (Bild) auf der rechten Seite mit Kontaktinformationen auf der linken Seite. Item-ID: 06-006 [Beispielansicht](#c1003502) [Anleitung](#c1003499) [Verhalten](#c1003497) ![](https://www.toujou.de/_assets/processed/uu25yMw2J27lM5OTF84XQX3c4r9rePkvipZbtAxfOfQ/q:85/w:433/h:54/fn:Y3NtXzA2XzAwNi1tYXBfaW1hZ2VfcmlnaHRfLV9zcV8yMDAwXzI1MF9iZWI0ODUwMjhi:t/cb:141bb29e95a09f00add4135b29825161f1529b38/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9JY29ucy9Gb3JtYXRlL0JpYl8yMDAwXzI1MC8wNl9NYXBfRWxlbWVudHNfMjAwMF8yNTAvMDZfMDA2LW1hcF9pbWFnZV9yaWdodF8tX3NxXzIwMDBfMjUwLnBuZw) --- Beispielansicht ----------------- ![](https://www.toujou.de/_assets/processed/gWlrs5kL1UbbB0rr61pac_LP8cVZqlECpMM_m1-Vvr8/q:85/c:2073:2073:fp:0.473:0.5/rt:force/w:433/h:433/fn:Y3NtX01hcC1QaW5fOGE1ZTM0YWEyZQ:t/cb:646c78be3134ad775693e9c99fe9cb1bbb9f5013/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9NYXAtUGluLnBuZw) This is a map element designed for location images and this text. There are no restrictions for the nature of the content. So feel free to list the type of information as text or in the form of an address. [ ](https://www.facebook.com/) [ ]() [ ]() [ ]() [ ]() [ ](https://www.pinterest.com/) --- Anleitung ----------- [ ![](https://www.toujou.de/_assets/processed/7e-3qi8sGwnSkMJGBy3dNJ13lChcrrOq8cXEAzsI2qw/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA2LTAwNi0xLWVsZW1lbnRfYW5sZWdlbl8yZDBkOTU2MmFh:t/cb:cbaab887b6874770e66e4ed8aef20897fd98caf6/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDZfTWFwX0VsZW1lbnRzLzA2LTAwNi1tYXBfaW1hZ2VfcmlnaHRfdGV4dF9zdXFhcmUvMDYtMDA2LTEtZWxlbWVudF9hbmxlZ2VuLnBuZw) ](https://www.toujou.de/fileadmin/Manual/06_Map_Elements/06-006-map_image_right_text_suqare/06-006-1-element_anlegen.png) ### Karten-Element anlegen - Klicken Sie auf den Button **Inhalt***,* um ein Karten-Element zu erstellen. - Im Reiter *Map Elements* wählen Sie **Map-Image right with text, square**. [ ![](https://www.toujou.de/_assets/processed/r2AH3tKsByiB9W_HlBZb1TSkQzg4wzRJsIi5jBvbs_0/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA2LTAwNi0yLXRleHRfYmlsZF9laW5mdV9fZ2VuX2M0NTFjNzgyOGI:t/cb:0183a0f51fe4573095e594e3109135a036885b97/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDZfTWFwX0VsZW1lbnRzLzA2LTAwNi1tYXBfaW1hZ2VfcmlnaHRfdGV4dF9zdXFhcmUvMDYtMDA2LTItdGV4dF9iaWxkX2VpbmZ1X19nZW4ucG5n) ](https://www.toujou.de/fileadmin/Manual/06_Map_Elements/06-006-map_image_right_text_suqare/06-006-2-text_bild_einfu__gen.png) ### Bild hochladen & Text einfügen - Wählen Sie im Reiter *Upload Map Image* eine Bilddatei aus Ihrer Fileliste aus oder laden Sie eine Datei in den entsprechenden Ordner *(Datei auswählen und Hochladen*) hoch. - 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. [ ![](https://www.toujou.de/_assets/processed/riIrYuypLUWE7qi2CVTDXkS4oIezS3W7gRWcGX28sAk/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA2LTAwNi0zLXNvY2lhbF9tZWRpYV84OGUxNWRmNTUz:t/cb:7e21b217170e63692dac218b164051034f9c2224/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDZfTWFwX0VsZW1lbnRzLzA2LTAwNi1tYXBfaW1hZ2VfcmlnaHRfdGV4dF9zdXFhcmUvMDYtMDA2LTMtc29jaWFsX21lZGlhLnBuZw) ](https://www.toujou.de/fileadmin/Manual/06_Map_Elements/06-006-map_image_right_text_suqare/06-006-3-social_media.png) ### Social-Media-Buttons hinzufügen - Im Reiter *Social Media* 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. --- ### 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 ----------- ***Ihre eigene quadratische Karte auf der rechten Seite mit Kontaktinformationen auf der linken Seite*** **gibt ein festes Bild einer Karte mit festem quadratischen Seitenverhältnis sowie Text und Social-Media-Kontakte wieder.** **Responsive:** Ist nicht ausreichend Platz zur Darstellung nebeneinander vorhanden, zeigen alle Karten die zuvor nebenstehenden Kontaktdaten/Informationen unter dem Bild an. Unabhängig von der ursprünglichen Ausrichtung wird dadurch die Darstellung einheitlicher Karten auf kleinen Endgeräten gewährleistet. **Besonderheiten:** Für dieses Element steht Ihnen eine editierbare Textfläche zur Verfügung, in der Sie Kontakt-/Adressdaten und/oder andere Informationen frei eingeben können. --- 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. [Textbearbeitung](https://www.toujou.de/tutorials/seiteninhalte/textbearbeitung/) [Bildbearbeitung](https://www.toujou.de/tutorials/seiteninhalte/bildbearbeitung/) [Dateiliste](https://www.toujou.de/tutorials/dateiliste/)