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 wir dieser Text als Logo angezeigt. Zusätzlich wir der Text auch oben im Browser-Tab sowie in den Suchergebnissen angezeigt.

b) Laden Sie hier das Logo der Website hohc.

c) Legen Sie die Höhe des Logos fest für Desktop und mobile Geräte fest.

d) Bei Bedarf können Sie auch ein eigenes Logo 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 - 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.

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 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.

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

Beispieltext

Beispieltext

Desktop - Menü

Beispieltext

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ü

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.