Header

Um den Header zu bearbeiten, öffnen Sie den "Bearbeiten"-Modus des Worldsoft Site Wizard und bewegen Sie die Maus über den oberen Bereich der Website. Anschließend klicken Sie auf "Header bearbeiten".

Verschiedene Header

Pro Seite kann ein eigener Header definiert werden. "Standard" ist immer vordefiniert. Um eine neuen leeren Header zu erstellen klicken Sie auf das "Zahnrad"-Symbol.

Es öffnet sich ein neues Menü.

a) Wenn Sie die Einstellungen von Standard verwenden möchten können Sie den bestehende Header duplizieren.

b) Um eine Header ohne Einstellungen zu erhalten klicken Sie auf "Neuen Header erstellen".

WICHTIG: Es gibt mehrere Header pro Seite aber nur ein Menü.

Globale Einstellungen

Im ersten Schritt bleiben wir im Tab "Global".

Webseitentitel & Logo

a) Geben Sie hier den Titel Ihrer Website ein. Wenn Sie kein Logo verwenden, wird dieser Text als Logo angezeigt. Zusätzlich erscheint der Titel im Browser-Tab sowie in den Suchergebnissen.

b) Laden Sie hier das Logo Ihrer Website hoch.

c) Wenn Sie anstelle eines Logos einen Text als Logo verwenden, können Sie hier die Schriftgröße festlegen.

d) Bestimmen Sie die Höhe des Logos separat für Desktop- und Mobilgeräte.

e) Optional können Sie ein eigenes Logo speziell für mobile Geräte hochladen.

Elemente - Button

Im Header können verschiedene Elemente angezeigt werden. Wir beginnen mit dem Button.

a) Wenn Sie einen Button anzeigen möchten aktivieren Sie hier die Funktion.

b) Geben Sie den Titel des Buttons ein.

c) Legen Sie den Link des Buttons fest. Sie können den Linke eingeben oder auf das "Ketten"-Symbol klicken.

d) Wählen Sie wie der Link des Buttons geöffnet werden soll.

e + f) Definieren Sie den Stil und die Form des Buttons.

g) Hier können Sie die Abstände des Buttons festlegen.

Wenn Sie Ihre Arbeiten abgeschlossen haben sollte im Header ein Button angezeigt werden.

Elemente - Bild

Wenn Sie ein Header-Layout ausgewählt haben, das ein Bild im Header verwendet, wird diese Einstellung angezeigt. Aktivieren Sie die Option "Bild" und klicken Sie anschließend auf das "Zahnrad"-Symbol, um weitere Einstellungen vorzunehmen.

a) Laden Sie ein Bild von Ihrem Computer hoch oder wählen Sie ein Bild aus dem Bildermanager aus.

b) Aktivieren Sie diese Option, wenn das Bild über dem Header angezeigt werden soll.

c) Geben Sie eine Alt-Tag-Beschreibung für das Bild ein, um die Barrierefreiheit und Suchmaschinenoptimierung zu verbessern.

d) Bestimmen Sie die Größe des Bildes.

e) Wählen Sie das gewünschte Seitenverhältnis des Bildes aus.

f) Aktivieren Sie diese Option, wenn das Bild gestreckt werden soll, um den verfügbaren Bereich auszufüllen.

g) Bestimmen Sie die Ausrichtung des Bildes (z. B. links, zentriert oder rechts).

h) Wenn Sie einen Link auf das Bild setzen möchten, geben Sie hier den Link sowie den Titel ein und wählen Sie, wie der Link geöffnet werden soll (z. B. im gleichen oder in einem neuen Fenster).

Elemente - Social Links

Wenn Sie unter "Einstellungen -> Social Links" Ihre Links zu den sozialen Netzerwerken definiert haben und diese Funktion aktivieren werden im Menü Icons der Netzwerke angezeigt. Hier können Sie die Größe der Icons definieren.

Wenn die Einstellungen richtig durchgeführt wurden, sollten die Icons wie rechts im Screenshot im Header angezeigt werden.

Elemente - Menü

Das Menü ist immer als Standard aktiv. Sie können das Menü jedoch auch ausblenden. Zusätzlich können Sie das Menü a) in Großbuchstaben anzeigen bzw. b) wenn ein Menüpunkt aktiv ist diesen unterstreichen.

Elemente - Sprachauswahl

Wenn Sie eine Website in mehreren Sprachen verwenden möchten, können Sie Ihre existierenden Seiten übersetzen. Mit der Aktivierung dieser Funktion haben nutzer die Möglichkeit verschiedene Sprachen im Menü zu wählen. Natürlich sollten Sie diese Sprachen vorab übersetzen.

a) Wählen Sie welche Sprachen zur Auswahl angezeigt werden soll.

b) Hier können Sie den Stil der Sprachauswahl festlegen.

c) Legen Sie das Trennzeichen der Sprachen fest.

e) Definieren Sie die Schriftgröße der Sprache.

f) Wenn Sie möchten das eine Sprache nach dem Klick unterstrichen ist aktivieren Sie diese Funktion. Wenn Sie möchten können Sie auch Flaggen neben dem Text anzeigen lassen.

Nachdem Sie die Einstellungen durchgeführt haben sollte im Menü die Sprachauswahl angezeigt werden.

Elemente - Warenkorb

Wenn Sie einen Shop auf Ihrer Website nutzen, können Sie auch im Header einen Warenkorb einbinden. Aktivieren Sie den "Warenkorb" und klicken Sie anschließend auf das "Zahnrad"-Symbol.

Wir beginnen mit dem Tab "Einstellungen".

a) Wählen Sie für welchen Shop der Warenkorb genutzt werden soll.

b) Legen Sie das Icon für den Warenkorb fest.

c) Wenn Sie möchten, dass neben des Icons ein Text erscheint, dann können Sie den Text hier eingeben.

d) Legen Sie fest ob nur das Icon + Text oder mit der Einstellung "Kreis" außen noch ein Hintergrundkreis angezeigt wird. Zusätzlich können Sie auch die "Größe" definieren.

e) Wählen Sie die Ausrichtung des Warenkorbs.

f) Definieren Sie ob beim Icon des Warekorbs die Anzahl oder der Preis des Inhalts angezeigt werden soll.

g) Hier können Sie festlegen was passiert wenn jemand auf den Warenkorb klickt. Soll der Inhalt als PopUp oder eine neue Seite mit dem Warenkorb angezeigt werden.

i) Legen Sie hier die Farben des Warenkorb Icons fest.

j) Hier können Sie die Farben für der Warenkorb Sidebar festlegen. Die Sidebar wird angezeigt wenn Sie das Warenkorb Icon nicht eingefügt haben.

Elemente - Warenkorb - Labels

Wechseln Sie in den Bereich "Labels". Hier können Sie die Übersetzungen der einzelnen Texte frei definieren.

Rechts sehen Sie einen Screenshot des Ergebnisses wenn Sie alle Einstellungen definiert wird.

Elemente - Suche

Um die Suche im Header zu aktivieren klicken Sie auf diese Funktion. Mit dem Klick auf das "Zahnrad"-Symbol erhalten Sie die weiteren Einstellungen.

WICHTIG: Die Suche ist im Moment für die Artikel im Shop verfügbar.

a) Wählen Sie aus welchen Inhalt Sie gerne durchsuchen möchten. Im Moment ist die Suche nur für den Shop verfügbar.

b) Legen Sie das Icon des Suchsymbols fest.

c) Wenn Sie zusätzlich zum Icon noch einen Text anzeigen möchten können Sie den Text hier eingeben.

d) Definieren Sie die Größe des Icons.

e) Legen Sie die Ausrichtung der Suche fest.

f) Geben Sie den Text ein der als Platzhalter im Suchfeld angezeigt werden soll.

g.) Wählen Sie das Layout aus um zu definieren wie die Suchergebnisse angezeigt werden soll.

Elemente - Login

Wenn Sie das Login im Header integrieren möchten, aktivieren Sie diese Funktion und klicken Sie auf das Zahnrad-Symbol, um weitere Einstellungen festzulegen.

a) Wählen Sie das Layout für das Login aus.

b) Legen Sie das Icon für das Login fest.

c) Definieren Sie das Icon für das Logout.

d) Legen Sie die Schriftgröße der Buttons fest.

e) Bestimmen Sie die Ausrichtung der Buttons.

f) Entscheiden Sie, ob der Text "Sie sind eingeloggt" angezeigt werden soll.

g) Definieren Sie, welche Aktion nach dem Login ausgeführt werden soll.

h) Legen Sie fest, welche Aktion nach dem Logout ausgeführt werden soll.

i) Wählen Sie die Farben für Ihr Login aus.

Wechseln Sie zum Reiter "Label" und passen Sie die Texte individuell nach Ihren Wünschen an.

Farben

Hier können Sie die Farbeinstellungen des Headers festlegen.

a) Wenn Sie die Einstellung "Transparenten" aktivieren, wird automatisch der Hintergrund der nächsten Sektion verwendet d.h. wenn Sie ein Bild verwenden wird der Header über diesem Bild angezeigt.

b) Wählen Sie das Theme aus das Sie als Farb-Template für den Header verwenden möchten.

Position

a) Wenn Sie möchten, dass sich der Header beim Scrollen mit nach unten bewegt, dann aktivieren Sie diese Einstellung.

b) Bei Bedarf können Sie auch die Farbe beim Scrollen ändern d.h. wenn der Header normal "schwarz" ist, könnte er beim Scrollen "weiß" angezeigt werden.

c) Ähnlich wie bei den Farben können Sie auch beim Scrollen ein neues/anderes Logo anzeigen.

Desktop

Wechseln Sie in den Tab "Desktop". Hier können Sie spezielle Einstellungen für den Header definieren.

Desktop - Header Typ

Legen Sie fest ob Sie einen "normalen" Header oder eine Sidebar verwenden möchten.

Desktop - Header Layout

Es stehen Ihnen vordefinierte Layouts zur Aufteilung des Headers zur Verfügung. Mit nur einem Klick können Sie das gewünschte Layout auswählen und ändern. Für diesen Test wählen wir das erste Layout aus.

Das Layout sollte nun angezeigt und so wie im Screenshot rechts aussehen.

Als Test wechseln wir nun das Layout.

Das Layout sollte jetzt wie auf dem Screenshot auf der rechten Seite aussehen.

Desktop - Menü

Passen Sie hier die Abstände, Ausrichtung und Schriftgröße sowie das Symbol für das Dropdowns des Menüs an.

a) Bestimmen Sie die Breite des Headers. Bei der Option "Boxed" wird die Breite des Inhaltsbereichs verwendet, während bei "Volle Breite" der gesamte Bildschirmbereich genutzt wird.

b) Passen Sie die Abstände der Elemente sowie die Abstände zum Rand an.

Mobil

Wechseln Sie in den Tab "Mobil". Hier können Sie spezielle Einstellungen für den Header definieren.

Mobil - Header Layout

Ihnen stehen vordefinierte Layouts für die Aufteilung des Headers zur Verfügung. Sie können mit einem Klick das Layout einfach ändern. Wir legen als Test das erste Layout fest.

Mobil - Header Overlay Menü

a) Bestimmen Sie die Ausrichtung des Textes im mobilen Menü.

b) Legen Sie die Abstände zwischen den Links fest.

c) Passen Sie die Schriftgröße der Links an.

Definieren Sie das Icon, das auf mobilen Geräten zum Öffnen des mobilen Menüs verwendet werden soll, sowie die Bildschirmgröße, ab der das Menü angezeigt wird.

Top Bar

Wechseln Sie in den Tab "Top Bar". Hier können Sie spezielle Einstellungen für einen Bereich über dem Header festlegen.

Um die Top Bar zu aktivieren wählen Sie "Aktivieren" aus.

Sie haben nun die Möglichkeit neue "Elemente" in die Top Bar zu integrieren. Mit dem Klick auf das "+" können Sie ein neues Element einfügen.

Ihnen werden nun die möglichen Element angezeigt. In unserem Test wählen wir "E-Mail Adresse" aus.

Geben Sie nun die gewünschte E-Mail Adresse ein. Sie können auch ein "Brief"-Icon anzeigen lassen und wählen ob Sie dieses Element auch auf mobilen Geräten angezeigt werden soll.

Nachdem Sie die Einstellungen durchgeführt haben, wird Ihnen über dem Header die Top Bar angezeigt.

Sie sehen eine "strichlierte" Linie. Mit dieser Linie können Sie die Größe des Feldes vergrößern. Klicken Sie auf die "strichlierte" Linie und ziehen Sie die Maus nach rechts/links.

In unserem Beispiel haben wir die Größe nach rechts verschoben und somit das Feld vergrößert.

a) Sie können die Top Bar auch mit einem "Schließen Icon" versehen. Dann wird rechts in der Top Bar ein "x" angezeigt um die Top Bar zu schließen.

b) Wählen Sie die Ausrichtung der Top Bar d.h. wie die Ausrichtung der einzelnen Felder sein sollte.

c) Wählen Sie die Textausrichtung der einzelnen Elemente in der Top Bar.

b) Wählen Sie die Breite der Top Bar.

e) Hier können Sie die Höhe der Top Bar fest.

f) Wählen Sie den Abstand der einzelnen Elemente.

g) Legen Sie die Schriftgröße in der Top Bar fest.

h) Wenn Sie möchten das Link "unterstrichen" werden aktivieren Sie diese Einstellung.

i) Sofern Sie selbst die Größe der einzelnen Felder in der Top Bar angepasst haben, können Sie mit dem Klick auf "Automatische Breite aktivieren" die Felder auf die ursprungsgröße zurücksetzen.

j) Hier können Sie die Farben der Top Bar festlegen.