{"id":1563,"date":"2023-05-21T22:55:22","date_gmt":"2023-05-21T21:55:22","guid":{"rendered":"https:\/\/spielwiese.anitapascarella.ch\/?page_id=1563"},"modified":"2023-05-21T23:52:42","modified_gmt":"2023-05-21T22:52:42","slug":"vertikaler-header-erstellen","status":"publish","type":"page","link":"https:\/\/spielwiese.anitapascarella.ch\/","title":{"rendered":"Vertikaler Header"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1563\" class=\"elementor elementor-1563\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef6a6a3 e-con-full e-flex e-con e-parent\" data-id=\"ef6a6a3\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;}\" data-core-v316-plus=\"true\">\n\t\t<div class=\"elementor-element elementor-element-0f35d2c e-con-full e-flex e-con e-child\" data-id=\"0f35d2c\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-862e3a5 elementor-widget elementor-widget-text-editor\" data-id=\"862e3a5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.19.0 - 28-02-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<ul>\n<li>Flexbox-Containermodus aktivieren<\/li>\n<li>Theme Builder&nbsp;\u2192 Header&nbsp;\u2192 Hinzuf\u00fcgen&nbsp;<\/li>\n<li>\u00dcber + einen vertikalen Container hinzuf\u00fcge<\/li>\n<li>Den Container stylen<\/li>\n<li>Layout: Volle Breite<\/li>\n<li>Breite in px, H\u00f6he 100 vh<\/li>\n<li>&nbsp;und positioniere den Header fixiert mit einer hohen Z-Ebene.<\/li>\n<li>Ich f\u00fcge das Website-Logo und das Men\u00fc zum Header hinzu.<\/li>\n<li>Ich bearbeite das Men\u00fc, um den Text vertikal anzuzeigen, und \u00e4ndere das Styling des Men\u00fcs und des Logos.<\/li>\n<li>F\u00fcr die responsive Ansicht passe ich den Header an die Tablet- und Mobilger\u00e4te an.<\/li>\n<li>Ich f\u00fcge benutzerdefiniertes CSS hinzu, um den Header f\u00fcr die mobile Ansicht anzupassen.<\/li>\n<li>Ich f\u00fcge auch benutzerdefiniertes CSS hinzu, um den Seitenrand f\u00fcr die linke Seite zu erh\u00f6hen.<\/li>\n<li>Schlie\u00dflich aktualisiere ich die Website und \u00fcberpr\u00fcfe, ob der Header korrekt angezeigt wird.<\/li>\n<li>Wenn euch das Tutorial geholfen hat, freue ich mich \u00fcber einen Daumen nach oben und euer Abonnement meines Kanals.<\/li>\n<li>Wenn ihr an einem WordPress-Projekt mit mir arbeiten m\u00f6chtet, k\u00f6nnt ihr mich \u00fcber meine Website kontaktieren.<\/li>\n<\/ul><div>https:\/\/farjana-rashid.com\/create-simple-vertical-header-in-elementor\/#css_code<br><\/div>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5e603c2 elementor-widget elementor-widget-video\" data-id=\"5e603c2\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=PY4_KzijOxs&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.19.0 - 28-02-2024 *\/\n.elementor-widget-video .elementor-widget-container{overflow:hidden;transform:translateZ(0)}.elementor-widget-video .elementor-wrapper{aspect-ratio:var(--video-aspect-ratio)}.elementor-widget-video .elementor-wrapper iframe,.elementor-widget-video .elementor-wrapper video{height:100%;width:100%;display:flex;border:none;background-color:#000}@supports not (aspect-ratio:1\/1){.elementor-widget-video .elementor-wrapper{position:relative;overflow:hidden;height:0;padding-bottom:calc(100% \/ var(--video-aspect-ratio))}.elementor-widget-video .elementor-wrapper iframe,.elementor-widget-video .elementor-wrapper video{position:absolute;top:0;right:0;bottom:0;left:0}}.elementor-widget-video .elementor-open-inline .elementor-custom-embed-image-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:50%}.elementor-widget-video .elementor-custom-embed-image-overlay{cursor:pointer;text-align:center}.elementor-widget-video .elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play i{opacity:1}.elementor-widget-video .elementor-custom-embed-image-overlay img{display:block;width:100%;aspect-ratio:var(--video-aspect-ratio);-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center}@supports not (aspect-ratio:1\/1){.elementor-widget-video .elementor-custom-embed-image-overlay{position:relative;overflow:hidden;height:0;padding-bottom:calc(100% \/ var(--video-aspect-ratio))}.elementor-widget-video .elementor-custom-embed-image-overlay img{position:absolute;top:0;right:0;bottom:0;left:0}}.elementor-widget-video .e-hosted-video .elementor-video{-o-object-fit:cover;object-fit:cover}.e-con-inner>.elementor-widget-video,.e-con>.elementor-widget-video{width:var(--container-widget-width);--flex-grow:var(--container-widget-flex-grow)}<\/style>\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b9f0768 e-flex e-con-boxed e-con e-parent\" data-id=\"b9f0768\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1448a36 elementor-widget elementor-widget-text-editor\" data-id=\"1448a36\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>CSS-Schnipsel:<\/p>\n<ul>\n<li>F\u00fcr responsive Ansicht:&nbsp;<\/li>\n<\/ul>\n<p><br><\/p><p>@media all and (max-width: 767px){<\/p>\n<p>&nbsp; &nbsp; selector{<\/p>\n<p>&nbsp; &nbsp; writing-mode: horizontal-tb;<\/p>\n<p>&nbsp; &nbsp; transform: scale(1);<\/p>\n<p>}<\/p>\n<p>}<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-98ee63d e-flex e-con-boxed e-con e-parent\" data-id=\"98ee63d\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-564e2e5 elementor-widget elementor-widget-text-editor\" data-id=\"564e2e5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"group w-full text-gray-800 dark:text-gray-100 border-b border-black\/10 dark:border-gray-900\/50 bg-gray-50 dark:bg-[#444654]\"><div class=\"flex p-4 gap-4 text-base md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl md:py-6 lg:px-0 m-auto\"><div class=\"relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]\"><div class=\"flex flex-grow flex-col gap-3\"><div class=\"min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap break-words\"><div class=\"markdown prose w-full break-words dark:prose-invert light\"><p>Ich werde dir zeigen, wie du diesen vertikalen Men\u00fcbereich mit der Elementor Pro-Version f\u00fcr diese Website erstellen kannst. Standardm\u00e4\u00dfig wurde ein Header wie dieser angezeigt, der horizontal angeordnet war. Hier zeige ich dir, wie du einen benutzerdefinierten Header vertikal wie diesen erstellen kannst. F\u00fcr dieses Tutorial verwende ich die Elementor Pro-Version und ein wenig CSS-Code. Wenn dir das gef\u00e4llt und du mehr wertvolle Tutorials sehen m\u00f6chtest, gib diesem Video einen Daumen hoch. Andernfalls wirst du das n\u00e4chste Mal kein solches wertvolles Tutorial finden. Wenn du neu hier bist und mehr meiner zuk\u00fcnftigen Videos sehen m\u00f6chtest, vergiss nicht, meinen Kanal zu abonnieren. Jetzt wollen wir loslegen.<\/p><p>Zuerst gehe ich zum Dashboard und dann zu Elementor und Einstellungen. Von dort aus aktiviere ich den Flexbox-Container-Modus in den Experimenten. Anschlie\u00dfend erstelle ich unseren benutzerdefinierten Header, indem ich zu &#8222;Templates&#8220; und &#8222;Theme Builder&#8220; gehe. Ich f\u00fcge einen neuen Header hinzu und w\u00e4hle eine vertikale Ausrichtung aus. Ich \u00e4ndere die H\u00f6he auf die volle Bildschirmh\u00f6he und die Breite auf 100 Pixel. Dann \u00e4ndere ich die Hintergrundfarbe in eine dunkle Farbe.<\/p><p>Als n\u00e4chstes f\u00fcge ich die Elemente (Logo und Men\u00fc) in den Header ein. Ich f\u00fcge das Website-Logo und das Men\u00fc hinzu. F\u00fcr das Men\u00fc w\u00e4hle ich das gew\u00fcnschte Men\u00fc aus. Ich richte die Elemente im Header mit Abstand dazwischen aus und f\u00fcge etwas Padding oben und unten hinzu.<\/p><p>F\u00fcr das Men\u00fc \u00e4ndere ich die Textausrichtung vertikal und zentriere es. Ich \u00e4ndere die Textfarbe, Hintergrundfarbe und f\u00fcge einige Anpassungen hinzu. F\u00fcr das Logo \u00e4ndere ich die Breite.<\/p><p>Zum Schluss passe ich den Header f\u00fcr die Ansicht auf Mobilger\u00e4ten an. F\u00fcr Tablets bleibt die Ansicht unver\u00e4ndert, w\u00e4hrend ich f\u00fcr Mobilger\u00e4te die H\u00f6he des Containers \u00e4ndere und das Logo links und das Men\u00fc rechts ausrichte. Ich \u00e4ndere auch die Hintergrund- und Textfarben f\u00fcr das Dropdown-Men\u00fc.<\/p><p>Abschlie\u00dfend ver\u00f6ffentliche ich die \u00c4nderungen und \u00fcberpr\u00fcfe die Website, um sicherzustellen, dass der Header ordnungsgem\u00e4\u00df funktioniert.<\/p><\/div><\/div><\/div><div class=\"flex justify-between lg:block\"><div class=\"text-gray-400 flex self-end lg:self-center justify-center mt-2 gap-2 md:gap-3 lg:gap-1 lg:absolute lg:top-0 lg:translate-x-full lg:right-0 lg:mt-0 lg:pl-2 visible\"><div class=\"flex gap-1\"><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-size: var( --e-global-typography-text-font-size ); font-weight: var( --e-global-typography-text-font-weight ); text-align: var(--text-align);\">Nachdem wir die Anpassungen vorgenommen haben, k\u00f6nnen wir sehen, dass der Header auf der linken Seite der Website angezeigt wird und beim Scrollen fixiert bleibt. Es gibt jedoch noch ein Problem: Der Inhalt der Seite wird auf der linken Seite verdeckt. Um das zu beheben, gehen wir zur Bearbeitung der Seite mit Elementor.<\/span><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"group w-full text-gray-800 dark:text-gray-100 border-b border-black\/10 dark:border-gray-900\/50 bg-gray-50 dark:bg-[#444654]\"><div class=\"flex p-4 gap-4 text-base md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl md:py-6 lg:px-0 m-auto\"><div class=\"relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]\"><div class=\"flex flex-grow flex-col gap-3\"><div class=\"min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap break-words\"><div class=\"markdown prose w-full break-words dark:prose-invert light\"><p>In den Seiteneinstellungen w\u00e4hlen wir den Reiter &#8222;Erweitert&#8220; aus. Da es keine Option f\u00fcr Padding oder Margin gibt, m\u00fcssen wir hier benutzerdefinierten CSS-Code verwenden. Wir f\u00fcgen den CSS-Selektor hinzu und geben die gew\u00fcnschten linken Abstandswerte an, basierend auf der Breite unseres Headers.<\/p><p>Nachdem wir die \u00c4nderungen gespeichert haben, k\u00f6nnen wir die Seite neu laden und den vollen Inhalt der Seite sehen.<\/p><\/div><\/div><\/div><\/div><\/div><\/div>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Flexbox-Containermodus aktivieren Theme Builder&nbsp;\u2192 Header&nbsp;\u2192 Hinzuf\u00fcgen&nbsp; \u00dcber + einen vertikalen Container hinzuf\u00fcge Den Container stylen Layout: Volle Breite Breite in px, H\u00f6he 100 vh &nbsp;und positioniere den Header fixiert mit einer hohen Z-Ebene. Ich f\u00fcge das Website-Logo und das Men\u00fc zum Header hinzu. Ich bearbeite das Men\u00fc, um den Text vertikal anzuzeigen, und \u00e4ndere das [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/spielwiese.anitapascarella.ch\/index.php?rest_route=\/wp\/v2\/pages\/1563"}],"collection":[{"href":"https:\/\/spielwiese.anitapascarella.ch\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spielwiese.anitapascarella.ch\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spielwiese.anitapascarella.ch\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spielwiese.anitapascarella.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1563"}],"version-history":[{"count":28,"href":"https:\/\/spielwiese.anitapascarella.ch\/index.php?rest_route=\/wp\/v2\/pages\/1563\/revisions"}],"predecessor-version":[{"id":1613,"href":"https:\/\/spielwiese.anitapascarella.ch\/index.php?rest_route=\/wp\/v2\/pages\/1563\/revisions\/1613"}],"wp:attachment":[{"href":"https:\/\/spielwiese.anitapascarella.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}