--- title: "Headercontent (3:1 ratio) with Search Bar" url: "https://www.toujou.de/service/elementbibliothek/trip-elements/search-elements/headercontent-31-ratio-with-search-bar/" date: 2019-09-10 modified: 2022-09-27 --- # Headercontent (3:1 ratio) with Search Bar 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/) 4. [Search Elements](https://www.toujou.de/service/elementbibliothek/trip-elements/search-elements/) 5. [Headercontent (3:1 ratio) with Search Bar](https://www.toujou.de/service/elementbibliothek/trip-elements/search-elements/headercontent-31-ratio-with-search-bar/) Ihr maximal breites Medium im Kopfbereich mit festem Seitenverhältnis und unten integrierter Suchleiste. Item-ID: 12-004 [Beispielansicht](#c1006784) [Anleitung](#c1006790) [Verhalten](#c1006796) --- Beispielansicht ----------------- [ ![](https://www.toujou.de/_assets/processed/K2uYW8UtIcS9B5Oa5xY_JIv6aIXQ-2ZPsSsHbUUXh7k/q:85/w:432/h:270/fn:Y3NtXzEyLTAwNC0wMV9IZWFkZXJfMy0xX1NlYXJjaF9CYXJfMTQ0MF8yMjM4NDRjZjEx:t/cb:4b114876fb2df4afcbb1e3af7aa38de9cca1f472/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMTJfU2VhcmNoX0VsZW1lbnRzL0VsZW1lbnRfRnJvbnRlbmRfU2NyZWVuc2hvdHMvMTItMDA0LTAxX0hlYWRlcl8zLTFfU2VhcmNoX0Jhcl8xNDQwLnBuZw) Ansicht für Endgeräte mit mehr als 1440 px Breite ](https://www.toujou.de/fileadmin/Manual/12_Search_Elements/Element_Frontend_Screenshots/12-004-01_Header_3-1_Search_Bar_1440.png) #### **Widescreen** [ ![](https://www.toujou.de/_assets/processed/lfH_wJAZGYS29IhxyzgUq01CPzjmMAJDf-ILfHOuxT0/q:85/w:432/h:270/fn:Y3NtXzEyLTAwNC0wMl9IZWFkZXJfMy0xX1NlYXJjaF9CYXJfMTAyNF83ZDg2YTIxNWM2:t/cb:fc4f366519fa688fef66800253f09bd92bbc993b/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMTJfU2VhcmNoX0VsZW1lbnRzL0VsZW1lbnRfRnJvbnRlbmRfU2NyZWVuc2hvdHMvMTItMDA0LTAyX0hlYWRlcl8zLTFfU2VhcmNoX0Jhcl8xMDI0LnBuZw) Ansicht für Endgeräte mit mehr als 1024 px Breite ](https://www.toujou.de/fileadmin/Manual/12_Search_Elements/Element_Frontend_Screenshots/12-004-02_Header_3-1_Search_Bar_1024.png) #### **Desktop** [ ![](https://www.toujou.de/_assets/processed/owRyyqUSdqVZcsHck3fWJUSRCW5alXq5tEwp2cEGzmE/q:85/w:432/h:270/fn:Y3NtXzEyLTAwNC0wM19IZWFkZXJfMy0xX1NlYXJjaF9CYXJfNjAwX2U3OTk0NjdiOTI:t/cb:320af1ea8b7cea172ebf6c30d85862112b16730b/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMTJfU2VhcmNoX0VsZW1lbnRzL0VsZW1lbnRfRnJvbnRlbmRfU2NyZWVuc2hvdHMvMTItMDA0LTAzX0hlYWRlcl8zLTFfU2VhcmNoX0Jhcl82MDAucG5n) Ansicht für Endgeräte mit mehr als 600 px Breite ](https://www.toujou.de/fileadmin/Manual/12_Search_Elements/Element_Frontend_Screenshots/12-004-03_Header_3-1_Search_Bar_600.png) #### **Tablet** [ ![](https://www.toujou.de/_assets/processed/-SEcMBDtetJhKz9FK-w3Ibbd4NwB6EpnUrv0BX1F2f0/q:85/w:432/h:270/fn:Y3NtXzEyLTAwNC0wNF9IZWFkZXJfMy0xX1NlYXJjaF9CYXJfMzc1XzY4MTEwM2U5MDY:t/cb:824c6276ac1fae6c4f8df15211626f194b2de494/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMTJfU2VhcmNoX0VsZW1lbnRzL0VsZW1lbnRfRnJvbnRlbmRfU2NyZWVuc2hvdHMvMTItMDA0LTA0X0hlYWRlcl8zLTFfU2VhcmNoX0Jhcl8zNzUucG5n) Ansicht exemplarisch mit 375 px Breite ](https://www.toujou.de/fileadmin/Manual/12_Search_Elements/Element_Frontend_Screenshots/12-004-04_Header_3-1_Search_Bar_375.png) #### **Mobile** --- Anleitung --------- In der folgenden Anleitung werden spezifische Einstellungen für Header-Elemente im übergeordneten Bereich der [Reisesuchen](https://www.toujou.de/tutorials/reiseseiten/reisesuchseite/) erläutert. Allgemeine Informationen zu Einsatz und Verhalten von Header-Elementen finden Sie in den entsprechenden [Elementbeschreibungen](https://www.toujou.de/service/elementbibliothek/widgets/#c1001440). [ ![](https://www.toujou.de/_assets/processed/wxrxkrvp-3YdKnLMOA2PruxyFfvssJuelsaS8vBhf_s/q:85/w:432/h:270/fn:Y3NtXzEyLTAwNF8wMV9IZWFkZXJfQ29udGVudF8zLTFfU2VhcmNoLUJhcl93YWVobGVuXzU2OTkzZGRkZjM:t/cb:70e997aed2f2d45bef52d5f97cf1a18da6b4dfe0/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMTJfU2VhcmNoX0VsZW1lbnRzLzEyLTAwNF9IZWFkZXJfMy0xX1NlYXJjaF9CYXIvMTItMDA0XzAxX0hlYWRlcl9Db250ZW50XzMtMV9TZWFyY2gtQmFyX3dhZWhsZW4ucG5n) ](https://www.toujou.de/fileadmin/Manual/12_Search_Elements/12-004_Header_3-1_Search_Bar/12-004_01_Header_Content_3-1_Search-Bar_waehlen.png) ### Header anlegen - Header-Elemente sind grundsätzlich nur im *Kopfbereich* Ihrer Seite als Elemente wählbar. - Klicken Sie auf den Button **Inhalt** und wählen Sie unter dem Reiter *Search Elements* das Element **Headercontent (3:1 ratio) with Search Bar** aus. [ ![](https://www.toujou.de/_assets/processed/YlvDvT5FlyWq6dBBuhMcY3uK2b_Kh_RyM0rsJrJCwvU/q:85/w:432/h:270/fn:Y3NtXzEyLTAwNF8wMl9IZWFkZXJfQ29udGVudF8zLTFfU2VhcmNoLUJhcl9UYXJnZXRfYmVzdGFldGlnZW5fNzg1MTNlNDcwOA:t/cb:44c20a0bdecb1ad7ee440c8fdaddb2ad91f1566d/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMTJfU2VhcmNoX0VsZW1lbnRzLzEyLTAwNF9IZWFkZXJfMy0xX1NlYXJjaF9CYXIvMTItMDA0XzAyX0hlYWRlcl9Db250ZW50XzMtMV9TZWFyY2gtQmFyX1RhcmdldF9iZXN0YWV0aWdlbi5wbmc) ](https://www.toujou.de/fileadmin/Manual/12_Search_Elements/12-004_Header_3-1_Search_Bar/12-004_02_Header_Content_3-1_Search-Bar_Target_bestaetigen.png) ### Zielseite wählen - Reiter *Search Settings*: Im Dropdownmenü **Target Pid of Search** werden ausschließlich Seiten des Typs *Search Page* angezeigt. - **Wichtig**: In der Regel gibt es nur eine [Suchergebnisseite](https://www.toujou.de/tutorials/reiseseiten/reisesuchseite/), die Reisen nach gewählten Kriterien ausspielt. Diese wird automatisch angezeigt. - Wählen Sie im Falle mehrerer Suchseiten eine aus, auf der die Suchergebnisse für dieses Element ausgespielt werden sollen. [ ![](https://www.toujou.de/_assets/processed/afAvH4-4oGIZj2xiHR4cDVEwbjewrQCIAGAKWzskHJg/q:85/w:432/h:270/fn:Y3NtXzEyLTAwNF8wM19IZWFkZXJfQ29udGVudF8zLTFfU2VhcmNoLUJhci1IZWFkbGluZV9UeXBlX2JkYjQ0MGVhZjM:t/cb:34ac95a5b49256cd5db8e4f4f02a6caad0acbe1f/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMTJfU2VhcmNoX0VsZW1lbnRzLzEyLTAwNF9IZWFkZXJfMy0xX1NlYXJjaF9CYXIvMTItMDA0XzAzX0hlYWRlcl9Db250ZW50XzMtMV9TZWFyY2gtQmFyLUhlYWRsaW5lX1R5cGUucG5n) ](https://www.toujou.de/fileadmin/Manual/12_Search_Elements/12-004_Header_3-1_Search_Bar/12-004_03_Header_Content_3-1_Search-Bar-Headline_Type.png) ### Headline einfügen - Reiter *Content*: Sie haben die Möglichkeit, eine *Überschrift* zu platzieren. - **Wichtig**: Ändern Sie die *Default*-Einstellung der Headline im Bereich *Typ* nach Wunsch und passen ggf. die *Headline Size* an ([mehr zu Headlines ❯](https://www.toujou.de/service/elementbibliothek/headline-element/)). - Ausrichten lässt sich der Text innerhalb des Feldes durch die Optionen unter **Ausrichtung**. [ ![](https://www.toujou.de/_assets/processed/eGNPIlxpwm3XkTz-MVO9JXyyA3nkDno28bKeJvtbHCI/q:85/w:432/h:270/fn:Y3NtXzEyLTAwNF8wNF9IZWFkZXJfQ29udGVudF8zLTFfU2VhcmNoLUJhci1TZXR0aW5nc18wMV81NWUyNzcxNjhm:t/cb:076ab261d0145e895bcbeb9f9249eb772dd0f224/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMTJfU2VhcmNoX0VsZW1lbnRzLzEyLTAwNF9IZWFkZXJfMy0xX1NlYXJjaF9CYXIvMTItMDA0XzA0X0hlYWRlcl9Db250ZW50XzMtMV9TZWFyY2gtQmFyLVNldHRpbmdzXzAxLnBuZw) ](https://www.toujou.de/fileadmin/Manual/12_Search_Elements/12-004_Header_3-1_Search_Bar/12-004_04_Header_Content_3-1_Search-Bar-Settings_01.png) ### Headerelement Settings - Reiter *Settings*: Wählen Sie im Bereich *Headerelement Settings* die gewünschte Höhe des Headers aus. Wenn Sie hier keine Änderungen vornehmen, wird standardmäßig die *default*-Größe 80% ausgespielt. - Über die Bereiche *Vertical Position*, *Horizontal Position* und *Headercontent Size* bearbeiten Sie die Größe und Position Ihrer Überschrift. --- Verhalten ----------- Das Element *Headercontent (3:1 ratio) with Search Bar* zeigt ein Medium im Kopfbereich, ggf. eine Überschrift sowie unten innerhalb des Mediums integriert eine Suchleiste für Reisen an. **Responsive:** Das Verhalten wird anhand obenstehender Beispielansicht illustriert: Unabhängig vom Endgerät bleibt das Medium stets in voller Darstellung erhalten. Die Suchleiste wird entsprechend mehrzeilig und unter dem Medium dargestellt. **Besonderheiten**: Die spezifischen Inhalte, die in Suchelementen angezeigt werden, gehören dem übergeordneten Bereich der [Erstellung von Reiseseiten](https://www.toujou.de/tutorials/reiseseiten/) an. Voraussetzung für den Einsatz von Suchelementen ist die Erstellung einer [Ergbenisseite für Reisesuchen](https://www.toujou.de/tutorials/reiseseiten/reisesuchseite/).