Transparente Header liegen heutzutage im Trend und werden von immer mehr Websites verwendet. Diese Art von Kopfzeilen lässt Ihre Seite professionell aussehen und ermutigt Benutzer, länger auf der Seite zu bleiben.
Above the fold, Beaver Builder Transparent Header bezieht sich auf den Bereich auf der Webseite, der von den Benutzern auf den ersten Blick gesehen wird, dh was die Benutzer sehen, ohne die Seite zu scrollen.
Neugierig auf Beaver Builder, keine Sorge, ich habe das Richtige für Sie UNSERE ausführlicher Beaver Builder Review.
Diese Fragen werde ich im Blog beantworten, schaut mal rein:
- Was ist ein Seitenkopf?
- Was bedeutet ein transparenter Header?
- Was bewirkt das Hinzufügen eines transparenten Headers zu Ihrer Website?
- Was sind die Funktionen von Beaver Builder?
- Wie setze ich einen transparenten Header mit Beaver Builder?
- Was sind die Schritte, um Ihren Webseiten-Header transparent zu machen?
- Welche wichtigen Code-Begriffe müssen Sie kennen?
- Was kostet Beaver Builder?
Inhaltsverzeichnis
Was ist ein Seitenkopf?
Als Seitenkopf wird der oberste Abschnitt einer beliebigen Webseite auf Ihrer Website bezeichnet. Die Kopfzeilen werden häufig mit nur dem oberen Streifen, der Ihr Firmen-/Website-Logo und eine Menüleiste enthält, falsch interpretiert.
Dies ist jedoch nicht der Fall, der Seitenkopf ist der gesamte Inhalt, den ein Benutzer sieht, wenn er auf Ihrer Seite landet, die wie oben erwähnt als „Above-the-Fold-Inhalt“ bezeichnet wird.
Es gibt verschiedene Funktionen, die Ihr Header haben kann, die Sie je nach Bedarf hinzufügen können.
Diese sind:
- Ihr Firmen- oder Website-Logo
- Jede Art von Call-to-Action, die die Benutzer auf Ihre Landingpage führen würde
- Überschrift oder Slogan, der Sie und Ihre Marke repräsentiert
- Menüleiste für Benutzerfreundlichkeit
- Eine Suchoption zum einfachen Navigieren auf Ihrer Website.
Was bedeutet transparenter Header?
Normale Kopfzeilen haben oben auf Ihrer Webseite ein streifenartiges Rechteck, das Ihren Kopfzeileninhalt und den Seiteninhalt in einigen Fällen voneinander trennt.
Wenn Sie eine transparente Kopfzeile verwenden, hilft diese dabei, den Inhalt Ihrer Seite mit der Kopfzeile und dem oberen rechteckigen Streifen zu verschmelzen, der Ihr Website-Logo, Ihren Call-to-Action und Ihr Menü enthält.
Funktionen von Beaver Builder
Es sind mehrere Funktionen enthalten Biberbauer. Lassen Sie uns einige der wichtigen Funktionen besprechen.
1. Seitenvorlagen
Seitenvorlagen sind eine Art Thema, das Sie für Ihre Webseiten festlegen können. Mit einem Beaver Builder können Sie für jede unterschiedliche Webseite eine andere Seitenvorlage oder eine gemeinsame Vorlage verwenden.
Es liegt an dir. Diese Vorlagen sind kreativ, einzigartig, benutzerfreundlich und vor allem mobil ansprechend.
2. Platzierung von Inhalten
Sie können die Größe von Bildern ändern, sie verschieben und zuschneiden, indem Sie einfach darauf klicken. Platzieren Sie Ihren Call-to-Action, ansprechende Symbole und Überschriften über das vereinfachte Dashboard des von Ihnen ausgewählten Beaver Builder-Themas.
Sie können Ihre Seite auch in Segmente unterteilen, um mehr Inhalt auf Ihre Seite zu stellen und etwas reduzierter auszusehen, mit dem Ziel, dass sie eine einprägsame Wirkung auf die Kunden hat.
3. Powerpack Beaver Builder
Dies ist ein Addon, das Sie in einen Beaver Builder integrieren können und eine große Anzahl von Integrationen erhalten, um die Leistung Ihrer Website zu verbessern und die Webseiten zu verschönern.
Müssen Sie Ihre Inhalte auf der WordPress-Oberfläche schreiben? Machen Sie sich keine Sorgen, mit Beaver Builder können Sie Ihre Inhalte auf der typischen WordPress-Oberfläche zusammenstellen und alles zusammen in das Beaver Builder-Theme importieren, das Sie für Ihre Seite verwenden möchten.
Für den Fall, dass Sie den Beaver Builder nicht mehr verwenden möchten, können Sie die mit der Beaver Builder-Vorlage erstellten Seiten ohne Verlust Ihrer Inhalte in Ihre normale WordPress-Seitenoberfläche exportieren.
Das könnte Ihnen auch gefallen:
Wie setze ich einen transparenten Header mit Beaver Builder?
Es ist nur ein Tool erforderlich, um einen transparenten Header auf einer der Webseiten Ihrer Website festzulegen: The Beaver Themer. Lassen Sie uns Beaver Themer im Detail besprechen.
Biber Themer
Biber Themer wird Ihnen helfen attraktiv und optimiert gestalten Web-Seiten mit nur einem Klick über das benutzerfreundliche Dashboard.
Es verfügt über die Funktion, mit der Sie Kopf- und Fußzeilen erstellen können 404-Fehlerseiteund damit auch die Seiten, die Sie archiviert haben. Außerdem können Sie die Kopf- und Fußzeile für jede Webseite erstellen, was dem Benutzer die einfache Navigation durch Ihre Website erleichtert.
Eigenschaften
- Verschiedene Themen zur Auswahl
Sie können das Thema für jede einzelne Seite Ihrer Website festlegen und alle können auch unterschiedlich sein.
Mithilfe dieser Themen können Sie Blog- und Zielseiten erstellen und die 404-Fehlerseiten so ändern, dass diese Seiten Ihren Benutzern helfen können, auf der richtigen Seite zur Website zu gelangen.
- Thementeile
Diese Teile sind eine einzigartige Funktion und in keinem anderen Theme-Layout-Tool zu finden.
Es hilft Ihnen, Teillayouts zu erstellen. Mit Hilfe dieser Teile können Sie beispielsweise eine Kopf- oder Fußzeile auf jeder Ihrer Seiten erstellen, unabhängig davon, ob die Seite mit einem Beaver-Thema erstellt wurde oder nicht. Ist das nicht erstaunlich!
- Feldverbindungen
Sie können das Beaver-Theme in jede Ihrer vorhandenen Seiten integrieren und den Inhalt während dieses Vorgangs sichern.
Bei anderen Theme-Layout-Tools besteht die Gefahr, dass Inhalte verloren gehen, wenn Sie das Tool in Ihre normal erstellte Seite oder eine Seite einbinden, die mit einem anderen Theme-Layout-Tool erstellt wurde.
- Beitragsraster
Sie können ein Design auswählen, das Ihre Blogs in Raster einteilt, und Sie können jedes Raster nach Ihren Bedürfnissen bearbeiten. Es wird dazu beitragen, dass Ihre Seite einfach zu navigieren ist und ihr ein wunderbares Aussehen verleiht.
- Gemeinsamer Inhalt
Möchten Sie, dass ein kleiner Ausschnitt dynamischen Inhalts gemeinsam ist und auf allen Seiten angezeigt wird? Wenn ja, ist das Beaver-Theme Ihre Lösung. Mit dem Beaver-Theme erhalten Sie ein völlig anderes Dashboard zum Erstellen von Inhalten, die auf jeder einzelnen Seite Ihrer Website angezeigt werden.
Sie können wählen, ob der Inhalt dynamisch, verschiebbar oder einfach statisch sein soll. Denken Sie nur daran, lange Inhalte nicht so häufig zu platzieren, da dies zu einer Duplizierung von Inhalten auf all Ihren Seiten führen kann.
Sie können die folgenden Arten von Inhalten erstellen – Text, Bilder, Links und benutzerdefinierte Felder. Sobald sie erstellt sind, verknüpfen Sie sie mit allen Seiten, auf denen diese Inhalte angezeigt werden sollen.
Schritte, um den Header Ihrer Webseite transparent zu machen
Hier sind einige wichtige Schritte, die Sie befolgen sollten:
Stufe 1: Laden Sie Beaver herunter und beginnen Sie mit der Erstellung einer Seite für Ihre Website mit Beaver Builder
An erster Stelle steht die Erstellung des Page-Through Beaver Builder.
In WordPress können Sie nach der Einführung des Beaver-Herstellermoduls eine Seite nicht über WordPress erstellen, sondern einfach die Seite öffnen, mit WordPress einen Titel zur Seite hinzufügen, anschließend auf „Mit Beaver-Entwickler ändern“ klicken und mit der Arbeit beginnen.
Schritt 2: Hinzufügen von Inhalten
Nachdem Sie ein grundlegendes Seitenlayout erstellt haben, entscheiden Sie sich für den Inhalt, den Sie oben auf der Seite hinzufügen möchten, d nur ein Logo und ein Bild.
Erstellen Sie nun mit Hilfe eines Beaver Builders eine Zeile und fügen Sie Ihren geplanten Inhalt zur Zeile hinzu. Fügen Sie unterhalb der Zeile das gewünschte Hintergrundbild hinzu, damit die transparente Kopfzeile darüber angezeigt wird.
Schritt 3: Klassenzusatz
Sie müssen zum Hinzufügen von Klassen auf die Schraubenschlüssel-Schaltfläche in der oberen Reihe gehen. Fügen Sie dann eine CSS-Klasse hinzu, indem Sie zur Option Erweitert gehen. Vergessen Sie nicht, auf die Schaltfläche Speichern zu klicken.
Schritt 4: Header transparent machen
Also planen wir jetzt, die Top-Banner-Spalte unter die Kopfzeile zu verschieben. Vor allem müssen wir den Header geradlinig gestalten.
Wir tun dies jetzt mit dem Ziel, dass wir sehen können, wo der Kopf der Top-Banner-Spalte endet, wenn wir CSS verwenden, um ihn unter dem Site-Header zu platzieren.
Fügen Sie Ihre CSS-Datei in style.css hinzu oder fügen Sie sie direkt in den Beaver-Builder ein.
Einige wichtige Begriffe des Kodex, die Sie kennen müssen:
- Körper. fl-page-header-primär:
Das obige CSS-Snippet wird von einem Beaver-Builder zum Codieren der Kopfzeile oben auf der Seite Ihrer Website verwendet.
Wir fügen den Hauptteil der Seite voran, um die Spezifität der Seite zu erhöhen. Ein weiterer Grund, auf den obigen Codeausschnitt abzuzielen, besteht darin, ein Duplikat des Primärcodes zu erstellen, der vom Beaver Builder für den Header verwendet wird, und dann die Änderung vorzunehmen.
Dies verhindert, dass Ihr Header dauerhaft zerstört wird, falls etwas mit dem Code schief geht.
- Hintergrund: transparent:
Dieses CSS-Snippet wird verwendet, um den Hintergrund zu entfernen, der standardmäßig festgelegt ist, wenn Sie mit der Verwendung eines Beaver-Builders beginnen. Wenn Ihre Seite nicht über den Beaver-Builder erstellt wurde, können Sie den Header dennoch transparent machen, indem Sie die CSS-Datei in die Ihnen zur Verfügung gestellte erweiterte Option exportieren in der obersten Reihe.
Aber die Hintergrundfarbe muss in jedem Fall über das obige CSS-Snippet entfernt werden.
- Position: relativ und z-index:10:
Um die Ausrichtung unseres transparenten Headers, also des oberen Banners, mit dem vorhandenen festen Header und dem Hintergrund-Header sicherzustellen, verwenden Sie das erwähnte CSS-Snippet.
Schritt 5: Ausrichtung der oberen Bannerreihe
Ein weiterer CSS-Code muss an derselben Stelle hinzugefügt werden, an der Sie die obigen CSS-Snippets hinzugefügt haben.
Wichtige CSS-Begriffe, auf die Sie im Code stoßen würden:
@media screen und (min-width 660px): Die Verwendung dieses Codes richtet lediglich das obere Banner an der vorhandenen Kopfzeile aus. Der erwähnte px-Wert, der in diesem Fall 660 beträgt, ist sehr wichtig. Der Wert kann standardmäßig mit dem Code geliefert werden oder Sie müssen ihn möglicherweise manuell hinzufügen.
Der Standard- oder durchschnittliche Pixelwert, den Sie einstellen müssen, liegt je nach Systemkonfiguration möglicherweise im Bereich von 990 bis 995 Pixel.
.top-banner .fl-row-content-wrap: Dieses CSS-Snippet hilft Ihnen, die Auffüllung gemäß Ihren Anforderungen anzupassen.
Rand-oben:-100px: Dieses Snippet hilft Ihnen, den Rand der Kopfzeile auf allen vier Seiten Ihren Anforderungen entsprechend anzupassen.
Schritt 6:
Passen Sie die transparente Kopfzeile an und verschönern Sie sie, um Ihr Logo und Ihr Menü so zu gestalten, dass es gut aussieht und mit der Transparenz der Kopfzeile harmoniert.
Header global transparent machen
Mit der Beaver Builderhaben Sie die Möglichkeit, das erstellte Top-Banner zu speichern und auf anderen Webseiten Ihrer Website zu verwenden.
Häufige Probleme beim Transparentmachen der Kopfzeile
- Die Kopfzeile ist nur auf Desktops zu sehen, nicht aber auf Handys und Tablets.
Dieses Problem ist leicht lösbar. Sie müssen nur Aussehen > Anpassen > Allgemein > Hintergrund besuchen und die Farbe so einstellen, dass sie sich von Ihrer Kopfzeile abhebt, damit sie auffällt und lesbar ist.
- Die obere Leiste der Kopfzeile ist nicht sichtbar.
Die Probleme hier liegen bei der CSS-Snippet des Codes, den Sie kopiert und eingefügt oder selbst geschrieben haben, einschließlich des Textkörpers. fl-page-bar.
Preise für Beaver Builder
Um einen transparenten Header hinzuzufügen, benötigen Sie ein Beaver-Theme, das in der kostenpflichtigen Version des Beaver Builder-Pakets enthalten ist.
Sie müssen 149 $ für ein Jahr bezahlen Beaver Builder Dieser Dienst umfasst Beaver-Themen, mit denen Sie ganz einfach transparente Header zu Ihrer Website hinzufügen können.
Vor- und Nachteile von Beaver Builder Transparente Kopfzeile
Vorteile
- Wenn Sie eine optisch ansprechende Seite wünschen, ist das Beaver-Theme ein Muss
- Sie können das Layout für jedes Gerät separat ändern, also für Mobiltelefone, Tablets und Desktops. Sie können das Ganze auch zusammen mit einer anderen Landingpage oder einer normalen Seite für alle drei Geräte erstellen.
Nachteile
- Das einzig Negative am Beaver-Theme ist, dass der Preis für kostenpflichtige Pläne etwas hoch ist. Aber ein Blick auf die Funktionen, die es bietet, lohnt sich auf jeden Fall.
Beaver Builder-Kundenbewertungen
Quick-Links:
- Beaver Builder Promo- und Gutscheincodes
- Beaver Builder gegen Divi
- Beaver Builder gegen Elementor
- Beaver Builder vs. Visual Composer
Häufig gestellte Fragen | Beaver Builder Transparente Kopfzeile
Woher bekomme ich den CSS-Code?
Sie können sich an den Kundensupport von Beaver Builder wenden, der sich schnell um Ihre Anfrage kümmert und Ihnen die Lösung bietet, oder Sie können Plattformen wie Git Hub nutzen und den Code direkt von diesen Plattformen kopieren, da diese kostenlos genutzt werden können.
Was ist der transparente Header in WP?
In WordPress ist die Deckkraft der Hintergrundfarbe für einen transparenten Header auf 0 eingestellt, sodass er durchsichtig ist. Dieser Effekt kann Ihrer Website ein modernes und minimalistisches Erscheinungsbild verleihen, während der Inhalt dennoch durch die Kopfzeile sichtbar ist.
Wie kann ich das Design meines transparenten Headers anpassen?
Sie können die Stilauswahl in Ihrem Seitenersteller ändern, um das Aussehen Ihrer durchsichtigen Kopfzeile zu personalisieren. In den Header-Moduleinstellungen von Beaver Builder können Sie beispielsweise Schriftart, Schriftgröße, Schriftfarbe und Textausrichtung ändern. Sie können auch zusätzliche Header-Komponenten oder -Module wie ein Logo oder ein Navigationsmenü hinzufügen und deren stilistische Parameter ändern. Sie können auch benutzerdefiniertes CSS verwenden, um das Aussehen Ihres durchscheinenden Headers weiter zu personalisieren.
Wie fange ich mit dem Beaver Builder an?
Der Inhaltsbereich von WordPress unterscheidet sich von Kopfzeile, Fußzeile und Seitenleiste. Das Beaver Builder Plugin ermöglicht die Erstellung von Layouts entsprechend dem Inhaltsbereich. Darüber hinaus können Sie das Beaver-Themer-Plugin verwenden, um Layouts an Orten außerhalb des Inhaltsbereichs zu erstellen.
Wie aktiviere ich einen transparenten Header?
Navigieren Sie zu „Darstellung“ > „Anpassen“ > „Kopfzeile“, um die Option „Transparente Kopfzeile“ zu aktivieren. Anschließend wird die Option „Transparente Kopfzeile nur auf der Homepage anzeigen“ verfügbar. Wenn Sie es deaktivieren, wird die Kopfzeile auf jeder Seite transparent.
Wie mache ich einen Header in Beaver Builder transparent?
Um einen Header in Beaver Builder transparent zu machen, können Sie die folgenden Schritte ausführen: Öffnen Sie den Beaver Builder-Editor und klicken Sie auf das Header-Modul, das Sie bearbeiten möchten. Navigieren Sie in den Moduleinstellungen zur Registerkarte Stil. Klicken Sie im Abschnitt „Hintergrund“ auf das Farbauswahltool neben der Option „Hintergrundfarbe“. Schieben Sie im Farbwähler den Deckkraftbalken nach links, bis die Deckkraft auf 0 eingestellt ist. Dadurch wird die Kopfzeile transparent. Speichern Sie die Änderungen und veröffentlichen Sie die Seite, um den transparenten Header anzuzeigen.
Wie ändere ich den Header in Beaver Builder?
Um die Kopfzeile in Beaver Builder zu ändern, können Sie die folgenden Schritte ausführen: Öffnen Sie den Beaver Builder-Editor und navigieren Sie zu der Seite, auf der Sie die Kopfzeile ändern möchten. Klicken Sie auf das Header-Modul, das Sie bearbeiten möchten. In den Moduleinstellungen können Sie Änderungen am Layout, Stil und Inhalt der Kopfzeile vornehmen. Um neue Elemente oder Module zum Header hinzuzufügen, können Sie die Drag-and-Drop-Schnittstelle in Beaver Builder verwenden. Sobald Sie die gewünschten Änderungen vorgenommen haben, speichern und veröffentlichen Sie die Seite, um die aktualisierte Kopfzeile anzuzeigen.
Fazit: Erstellen Sie mit Beaver Builder einen benutzerdefinierten Header 2024
Transparente Kopfzeilen sind ein sehr wichtiges Merkmal einer Website, wenn diese ansprechend, stilvoll und modern sein soll.
Es trägt sogar dazu bei, dass Ihr Call-to-Action im oberen Banner oder im „above-the-fold“-Inhalt hervorsticht. Mit einem Beaver Builder ist es einfach, einen transparenten Header zu erstellen.
Die oben genannten Schritte können verwirrend sein oder schwierig erscheinen, aber das Einzige, was Sie tun müssen, ist, den Code zu kopieren und in ein Leerzeichen einzufügen, die Änderungen zu sehen und ihn bei Bedarf global zu machen.
