--- title: Headercontent with Search Bar url: "https://www.toujou.de/service/elementbibliothek/trip-elements/search-elements/headercontent-with-search-bar/" date: 2019-09-10 modified: 2022-09-27 --- # Headercontent 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 with Search Bar](https://www.toujou.de/service/elementbibliothek/trip-elements/search-elements/headercontent-with-search-bar/) Ihr maximal breites Medium im Kopfbereich mit unten integrierter Suchleiste. Item-ID: 12-001 [Beispielansicht](#c1006765) [Anleitung](#c1006764) [Verhalten](#c1006763) --- Beispielansicht ----------------- [ ![](https://www.toujou.de/_assets/processed/3W25tfazLDRhX88IIdinFkrYrBLLzS7za_AbrmRLUKQ/q:85/w:432/h:270/fn:Y3NtXzEyLTAwMS0wMV9IZWFkZXJfU2VhcmNoX0Jhcl8xNDQwXzAxX2U1ZTc5ODVjNmQ:t/cb:0f06a8dd0aaa953327d538dd3908a1ff0e64c637/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMTJfU2VhcmNoX0VsZW1lbnRzL0VsZW1lbnRfRnJvbnRlbmRfU2NyZWVuc2hvdHMvMTItMDAxLTAxX0hlYWRlcl9TZWFyY2hfQmFyXzE0NDBfMDEucG5n) Ansicht für Endgeräte mit mehr als 1440 px Breite ](https://www.toujou.de/fileadmin/Manual/12_Search_Elements/Element_Frontend_Screenshots/12-001-01_Header_Search_Bar_1440_01.png) #### **Widescreen** [ ![](https://www.toujou.de/_assets/processed/6rPHMHKzy-v1IkyyngXBxJwadDO1qCodkmxzqdV9gqg/q:85/w:432/h:270/fn:Y3NtXzEyLTAwMS0wMl9IZWFkZXJfU2VhcmNoX0Jhcl8xMDI0XzZiNTE0MTVjMzc:t/cb:c63315a444e77e035fa72f19ac80ec2955b75a59/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMTJfU2VhcmNoX0VsZW1lbnRzL0VsZW1lbnRfRnJvbnRlbmRfU2NyZWVuc2hvdHMvMTItMDAxLTAyX0hlYWRlcl9TZWFyY2hfQmFyXzEwMjQucG5n) Ansicht für Endgeräte mit mehr als 1024 px Breite ](https://www.toujou.de/fileadmin/Manual/12_Search_Elements/Element_Frontend_Screenshots/12-001-02_Header_Search_Bar_1024.png) #### **Desktop** [ ![](https://www.toujou.de/_assets/processed/ke-H9RWP1cPmhK0lU-TF2aurnF_wZ9aQBhngbZYWRs4/q:85/w:432/h:270/fn:Y3NtXzEyLTAwMS0wM19IZWFkZXJfU2VhcmNoX0Jhcl82MDBfYTk5ZjdiNjBiYw:t/cb:f9bdc5612ce3268ff56d3e5ffe7cf4fb0f3c76a3/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMTJfU2VhcmNoX0VsZW1lbnRzL0VsZW1lbnRfRnJvbnRlbmRfU2NyZWVuc2hvdHMvMTItMDAxLTAzX0hlYWRlcl9TZWFyY2hfQmFyXzYwMC5wbmc) Ansicht für Endgeräte mit mehr als 600 px Breite ](https://www.toujou.de/fileadmin/Manual/12_Search_Elements/Element_Frontend_Screenshots/12-001-03_Header_Search_Bar_600.png) #### **Tablet** [ ![](https://www.toujou.de/_assets/processed/L_X7opfRNkJa1vT0UTELOcVfRftOpE9ygx0RaLRcm4c/q:85/c:1438.56:900:fp:0.5005:0.5/rt:force/w:432/h:270/fn:Y3NtXzEyLTAwMS0wNF9IZWFkZXJfU2VhcmNoX0Jhcl8zNzVfMTUyOTY4ZGRmNw:t/cb:575d49b7fd793967f914dd49386380ae8b95ebdd/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMTJfU2VhcmNoX0VsZW1lbnRzL0VsZW1lbnRfRnJvbnRlbmRfU2NyZWVuc2hvdHMvMTItMDAxLTA0X0hlYWRlcl9TZWFyY2hfQmFyXzM3NS5wbmc) Ansicht exemplarisch mit 375 px Breite ](https://www.toujou.de/fileadmin/Manual/12_Search_Elements/Element_Frontend_Screenshots/12-001-04_Header_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/DZVjxZ0Z65WDCI46dPE_z71hof2A70RBnp04o5PT2NU/q:85/w:432/h:270/fn:Y3NtXzEyLTAwMV8wMV9IZWFkZXJfQ29udGVudF9TZWFyY2gtQmFyX3dhZWhsZW5fNjdhNWJjN2M4Yw:t/cb:b97bf4b91c2b456f7aa000304ffda21fe84cb776/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMTJfU2VhcmNoX0VsZW1lbnRzLzEyLTAwMV9IZWFkZXJfU2VhcmNoX0Jhci8xMi0wMDFfMDFfSGVhZGVyX0NvbnRlbnRfU2VhcmNoLUJhcl93YWVobGVuLnBuZw) ](https://www.toujou.de/fileadmin/Manual/12_Search_Elements/12-001_Header_Search_Bar/12-001_01_Header_Content_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 with Search Bar** aus. [ ![](https://www.toujou.de/_assets/processed/efVd3vFCHLdFCX3WTnj8MPpgwmcFyaMKRAMNFcwz8Pk/q:85/w:432/h:270/fn:Y3NtXzEyLTAwMV8wMl9IZWFkZXJfQ29udGVudF9TZWFyY2gtQmFyX1RhcmdldF9iZXN0YWV0aWdlbl80Zjk4MDMwZjYy:t/cb:44c20a0bdecb1ad7ee440c8fdaddb2ad91f1566d/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMTJfU2VhcmNoX0VsZW1lbnRzLzEyLTAwMV9IZWFkZXJfU2VhcmNoX0Jhci8xMi0wMDFfMDJfSGVhZGVyX0NvbnRlbnRfU2VhcmNoLUJhcl9UYXJnZXRfYmVzdGFldGlnZW4ucG5n) ](https://www.toujou.de/fileadmin/Manual/12_Search_Elements/12-001_Header_Search_Bar/12-001_02_Header_Content_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/7X4Df6kF9DuvMhr9B6rPczRTz9fOGDfwswmDYk-yc1s/q:85/w:432/h:270/fn:Y3NtXzEyLTAwMV8wM19IZWFkZXJfQ29udGVudF9TZWFyY2gtQmFyLUhlYWRsaW5lX1R5cGVfNTc3NmFmMzA2Nw:t/cb:5eccd3a4e5365e46cbbfe658e14df37b27062391/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMTJfU2VhcmNoX0VsZW1lbnRzLzEyLTAwMV9IZWFkZXJfU2VhcmNoX0Jhci8xMi0wMDFfMDNfSGVhZGVyX0NvbnRlbnRfU2VhcmNoLUJhci1IZWFkbGluZV9UeXBlLnBuZw) ](https://www.toujou.de/fileadmin/Manual/12_Search_Elements/12-001_Header_Search_Bar/12-001_03_Header_Content_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/dxA7gQGytB-ysH_SwbGVJUgybMjrggdSntKmCu56sKI/q:85/c:1760:1098.24:fp:0.5:0.4992/rt:force/w:432/h:270/fn:Y3NtXzEyLTAwMV8wNF9IZWFkZXJfQ29udGVudF9TZWFyY2gtQmFyLVNldHRpbmdzXzAxX2JmYjRiNjQ0NGM:t/cb:5002729f3871e83c741dbd337ebe05cbb9fcbdf3/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMTJfU2VhcmNoX0VsZW1lbnRzLzEyLTAwMV9IZWFkZXJfU2VhcmNoX0Jhci8xMi0wMDFfMDRfSGVhZGVyX0NvbnRlbnRfU2VhcmNoLUJhci1TZXR0aW5nc18wMS5wbmc) ](https://www.toujou.de/fileadmin/Manual/12_Search_Elements/12-001_Header_Search_Bar/12-001_04_Header_Content_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 with Search Bar* zeigt ein Medium im Kopfbereich, ggf. eine Überschrift sowie unten innerhalb des Mediums integriert eine einzeilige Suchleiste für Reisen an. **Responsive:** Das Verhalten wird anhand obenstehender Beispielansicht illustriert. Je kleiner das Endgerät, desto mehr konzentriert sich die Darstellung Ihres Mediums auf sein Zentrum bei gleichzeitiger Beibehaltung der gewählten Bildschirmhöhe. 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/). - Wählen Sie Headerbilder aus, deren Fokus auf dem Zentrum liegt, damit in kleiner werdenden Endgeräten seitlich keine wichtigen Bildinformationen ausgeblendet werden. Um auch responsiv alle Bild-Informationen zu transportieren, bietet sich stattdessen die Nutzung des [Headercontent (3:1 ratio) with Search Bar](https://www.toujou.de/service/elementbibliothek/trip-elements/search-elements/headercontent-31-ratio-with-search-bar/) an, das sein Bildverhältnis unabhängig vom Endgerät stets beibehält.