Bereiche – Layout anpassen
Sie können jederzeit das Layout (Aufteilung der verschiedenen Elemente pro Inhaltsbereich), die Farben bzw. ob ein Hintergrundbild oder nicht, etc. der einzelnen Bereiche Ihrer Webseite anpassen.
Nachdem Sie sich in den Designer eingeloggt haben, befinden Sie sich auf der Startseite im Designer-Editor und somit im Bereich Baukasten. Gehen Sie wie folgt vor:
1. Navigieren
Auf jeder Seite, hier auf der Startseite des Baukastens, stellen sich die Seiten aus verschiedenen Elementen (Bereichen) zusammen. Diese können jederzeit angepasst werden.
2. Bereichsvarianten
Es gibt verschiedenen Bereichs- bzw. Inhaltstypen. Entsprechend den Typen sind die Bearbeitungsmöglichkeiten von Titel, Text und Bild unterschiedlich. Wir gehen hier auf folgende ein:
• Titel- & Menüleiste
• Header-Bereich
• Inhaltsbereich Bilder und Text
• Inhaltsbereich mit Button und Text
• Fusszeile
• Text anpassen
• Bild anpassen
• Button anpassen
3. Titel- & Menüleiste
Um den Titel- & Menübereich anzupassen, fahren Sie mit der Maus über das runde Regler-Icon links des Bereiches, es öffnet sich der Button Bereich anpassen. Klicken Sie nun auf das Icon.
3.1 Bearbeitungsmodus
Es wird automatisch der Bearbeitungsmodus angezeigt. Hier stehen Ihnen folgende Anpassungsmöglichkeiten zur Verfügung.
• Farbwahl bzw. Hintergrundbild
• Layout
• Animation
• Kopfzeilen-Anpassungen
3.2 Farbauswahl / Hintergrundbild
Gemäss Ihrem gewählten Design und dessen Farbschema, können Sie nun den Bereich gemäss den 3 Farbkomponenten definieren. Oder Sie wählen das Bild, welches sich dann als Hintergrundbild über diesen Bereich legt.
3.3 Layout ändern
Um zu definieren, welche Inhalte im Headerbereich angezeigt werden, können Sie aus verschiedenen vorgefertigten Header-Bereichen auswählen. Klicken Sie dafür auf Layout ändern.
Wählen Sie durch Klick Ihr gewünschtes Header Layout aus und klicken Sie anschliessend auf Aktualisieren. Das neue Layout wird umgehend angewendet.
3.4 Animation
Sie können den Textbereichen eine Animation hinzufügen und sie entsprechend einblenden lassen. Klicken Sie dazu auf Animation.
Jetzt können Sie zwischen Überblenden und Slide wählen. Klicken Sie dann auf Fertig.
Schauen Sie sich entweder die Animation auf der Vorschau an oder veröffentlichen Sie die Animationen der Abschnitte direkt.
3.5 Kopfzeilen-Anpassungen
Sie können definieren, ob Sie das gewählte Layout nur für die Startseite oder für alle Seiten anwenden möchten. Klicken Sie dafür auf den untersten Bereich, hier: Geteilte Kopfzeile.
Es öffnet sich ein Popup mit den Wahlmöglichkeiten für Ihren Header-Bereich:
• Alle Seiten
• Nur diese Seite
Klicken Sie anschliessend auf Fertig, damit die gewünschten Änderungen gespeichert.
4. Header-Bereich
Im Header-Bereich können Sie einerseits das Header-Bild und andererseits den Header-Text anpassen. Klicken Sie auf den entsprechenden Bereich. um fortzufahren.
4.1 Header-Bild
Wenn Sie einen Vollbild-Bereich anpassen möchten, fahren Sie mit der Maus über das runde Regler-Icon links des Bereiches, es öffnet sich der Button Bereich anpassen. Klicken Sie nun auf das Icon.
4.2 Header-Bild - Bearbeitungsmodus
In diesem Beispiel ist unser Startbild ein Vollbild-Bereich. Es stehen nun für die Anpassung am Bild folgende Einstellungen zur Vefügung:
• Bild ändern
• Überlagerung
• Fokuspunkt
• Scroll-Effekte
• Layout
• Trennlinien
• Animation
4.2.1 Bild ändern
Sie können jederzeit dieses Bild austauschen. Klicken Sie dazu auf Bild ändern.
Sie können nun entweder ein neues Bild hochladen Upload oder ein Kürzlich hinzugeführtes Bild bzw. eines aus Ihrem Facebook-Account auswählen oder ein Professionelles Bild beziehen.
Bitte beachten Sie, dass Ihnen je nach Abonnement eine bestimmte Anzahl Fotos-Credits für den Designer zur Verfügung steht.
Wenn Sie Ihr Bild ausgewählt haben, klicken Sie darauf. Es wird umgehend gespeichert und die Ansicht aktualisiert.
4.2.2 Überlagerung
Der Vollbild-Bereich ist standardmässig mit einer Farbüberlagerung angezeigt. Möchten Sie die Farbe oder die Deckkraft der Farbüberlagerung anpassen, so klicken Sie auf Überlagerung.
Gemäss Ihrem gewählten Design und dessen Farbschema, können Sie nun im Bereich Voreinstellungen aus der Dunklen oder hellen Akzentfarbe oder aus Schwarz, Grau oder Weiss die Überlagerungsfarbe auswählen.
Im Bereich Individuell können Sie Ihre Wunschfarbe bzw. die Farbe Ihres Logos durch Hex- oder RGB-Daten einfügen.
Und wählen Sie nun im Bereich Deckkraft die Intensität aus, mit welcher die gewählte Farbe das Bild überlagert. Wenn Sie den Regler bewegen, passt sich das Vorschaubild umgehend an.
Sind Sie mit Ihren Einstellungen zufrieden, so klicken Sie auf Speichern.
4.2.3 Fokuspunkt
Im Vollbild-Bereich können Sie einen Fokuspunkt für dieses Bild setzen. Klicken Sie dazu auf Fokuspunkt.
Sie können nun im sich öffnenden Popup den Fokuspunkt via Mausklick im Bereich der Bildvorschau den Fokuspunkt setzen. Das Vorschaubild passt sich umgehend an.
Sind Sie mit Ihren Einstellungen zufrieden, klicken Sie anschliessend auf Fertig.
4.2.4 Scroll-Effekt
Wenn Sie möchten, dass der Kopfbereich einen Scroll-Effekt hat, klicken Sie auf die Schaltfläche Scroll-Effekte.
Jetzt können Sie zwischen Parallax, Zoom und Fixed wählen. Klicken Sie dann auf Fertig.
Um die Scroll-Effekte anzusehen, klicken Sie entweder auf Vorschau oder Sie veröffentlichen Ihre Webseite direkt.
4.2.5 Layout
Im Vollbild-Bereich können Sie durch die Wahl des Layout festlegen, wo bzw. an welcher Stelle im Bild der Text-Bereich platziert wird. Klicken Sie dazu auf Layout.
Klicken Sie nun auf das Pfeil-Icon um in der Vorschau die verschiedenen Layouts anzusehen.
Sind Sie mit Ihren Einstellungen zufrieden, klicken Sie anschliessend auf Fertig.
4.2.6 Trennlinien
Möchten Sie im Bild noch einen farblichen Akzent setzen, dann wählen Sie hier Trennlinien.
Wählen Sie nun die gewünschte Form der Trennlinie aus. In der Vorschau wird die Auswahl umgehend angepasst. Sie können nun gemäss Ihrem gewählten Design und dessen Farbschema auswählen, in welcher Farbe die Trennlinie dargestellt wird.
Sind Sie mit Ihren Einstellungen zufrieden, klicken Sie anschliessend auf Fertig.
4.2.7 Animation
Sie können dem Header-Bild eine Animation hinzufügen und sie entsprechend einblenden lassen. Klicken Sie dazu auf Animation.
Jetzt können Sie zwischen Überblenden und Slide wählen. Klicken Sie dann auf Fertig.
Um die Animation anzusehen, klicken Sie entweder auf Vorschau oder Sie veröffentlichen Ihre Webseite direkt.
4.3 Header-Text
Wenn Sie einen Text im Vollbild-Bereich anpassen möchten, fahren Sie mit der Maus über den gewünschten Text. Dieser wird nun mit einem Rahmen markiert.
Es stehen Ihnen folgende Anpassungsmöglichkeiten zur Verfügung:
4.3.1 Header-Text anpassen
Um den Textbereich im Header-Bild zu verändern, klicken Sie auf den entsprechenden, markierten Text.
Im sich nun öffnenden Bearbeitungsmodus können Sie den Text in gewohnter Manier anpassen (Fett, Kursiv, Verlinken, Farbe, Grösser, Kleiner) und durch Klick auf das Pfeil-Icon rechts, öffnet sich noch der Ausrichtungs- und Listenbereich.
Sind Sie mit Ihren Anpassungen zufrieden, so klicken Sie mit der Maus ausserhalb des Textes und der Textbereich wird automatisch aktualisiert und gespeichert.
4.3.2 Header-Bereich löschen
BEACHTEN SIE, wenn Sie auf das Abfall-Eimer-Icon neben dem Text klicken, wird nicht nur der Textbereich gelöscht, sondern das ganze Inhaltsmodul (hier: Header-Vollbild inkl. Textbereich).
5. Inhaltsbereich mit Bilder und Text
Um den Bilder & Text-Bereich anzupassen, fahren Sie mit der Maus über das runde Regler-Icon links des Bereiches, es öffnet sich der Button Bereich anpassen. Klicken Sie nun auf das Icon.
Natürlich können Sie auch die einzelnen Bereiche wie Text und Bild anpassen.
Ihnen stehen folgende Bearbeitungsmöglichkeiten zur Verfügung:
• Farbe
• Layout
• Trennlinien
• Animation
5.1 Farbe
Um die Hintergrundfarbe des Bild-Text-Bereiches zu verändern, klicken Sie auf eine der Farben, die Ihnen gemäss Ihrem gewählten Design und dessen Farbschema zur Verfügung stehen. Die Vorschau wird umgehend angepasst.
5.2 Layout
Über das Layout definieren Sie, wo das Bild bzw. der Text platziert wird (Bild links, rechts oder oben). Klicken Sie dazu auf Layout ändern.
Im sich nun öffnenden Popup können Sie durch Klicken auf die Pfeil-Icons die verschiedenen Layouts wählen. Die Vorschau wird Ihnen umgehend auf der Webseite angezeigt. Haben Sie Ihr gewünschtes Layout gewählt, klicken Sie auf Fertig um die Auswahl zu speichern.
5.3 Trennlinien
Möchten Sie im Bild noch einen farblichen Akzent setzen, dann wählen Sie hier Trennlinien.
Wählen Sie nun die gewünschte Form der Trennlinie aus. In der Vorschau wird die Auswahl umgehend angepasst. Sie können nun gemäss Ihrem gewählten Design und dessen Farbschema auswählen, in welcher Farbe die Trennlinie dargestellt wird.
Sind Sie mit Ihren Einstellungen zufrieden, klicken Sie anschliessend auf Fertig.
5.4 Animation
Sie können dem Bild&Text-Bereich eine Animation hinzufügen und sie entsprechend einblenden lassen. Klicken Sie dazu auf Animation.
Jetzt können Sie zwischen Überblenden und Slide wählen. Klicken Sie dann auf Fertig.
Um die Animation anzusehen, klicken Sie entweder auf Vorschau oder Sie veröffentlichen Ihre Webseite direkt.
6. Inhaltsbereich mit Button und Text
Wenn Sie einen Button-Text-Bereich anpassen möchten, fahren Sie mit der Maus über das runde Regler-Icon links des Bereiches, es öffnet sich der Button Bereich anpassen. Klicken Sie nun auf das Icon.
Natürlich können Sie auch die einzelnen Bereiche wie Text und Button anpassen.
6.1 Farbe
Um die Hintergrundfarbe des Button-Text-Bereiches zu verändern, klicken Sie auf eine der Farben, die Ihnen gemäss Ihrem gewählten Design und dessen Farbschema zur Verfügung stehen. Die Vorschau wird umgehend angepasst.
6.2 Trennlinien
Möchten Sie einen farblichen Akzent setzen, dann wählen Sie hier Trennlinien.
Wählen Sie nun die gewünschte Form der Trennlinie aus. In der Vorschau wird die Auswahl umgehend angepasst. Sie können nun gemäss Ihrem gewählten Design und dessen Farbschema auswählen, in welcher Farbe die Trennlinie dargestellt wird.
Sind Sie mit Ihren Einstellungen zufrieden, klicken Sie anschliessend auf Fertig.
6.3 Animation
Sie können dem Text&Button-Bereich eine Animation hinzufügen und sie entsprechend einblenden lassen. Klicken Sie dazu auf Animation.
Jetzt können Sie zwischen Überblenden und Slide wählen. Klicken Sie dann auf Fertig.
Um die Animation anzusehen, klicken Sie entweder auf Vorschau oder Sie veröffentlichen Ihre Webseite direkt.
7. Fusszeile
Der Fusszeilenbereich entspricht in der Anpassung der Titel- & Menüleiste.
Natürlich können Sie auch die Text-Bereiche anpassen.
Um eine Animation hinzuzufügen, gehen Sie nach der Anleitung in der Titel & Menüleiste vor.
Selbstverständlich können Sie auch bei der Fusszeile, gleich wie bei der Kopfzeile, wählen, ob diese für alle oder nur für diese Seite gilt.
8. Bild anpassen
Um ein Bild auszuwechseln, egal in welchem Bereich, fahren Sie mit der Maus über das Bild, bis es einen Rahmen erhält. Dann klicken Sie darauf.
Im sich nun öffnenden Popup können Sie folgende Anpassungen vornehmen:
1. Bilddetails
Sie können ein neues Bild hinzufügen, aus vorhandenen Bildern wählen oder Bild bearbeiten.
2. Bilderlink
Hier können Sie dem gewählen Bild einen Link zu ordnen. Sie können wählen aus Eine Seite auf meiner Webseite, Eine externe Seite oder E-Mailadresse. Je nach dem was Sie hier auswählen, geht ein entsprechender Bereich auf, um die entsprechende Info (Seite auswählen / Externer Link und Zielfenster / E-Mail) einzutragen.
3. Optionen anzeigen
Wählen Sie den Massstab, in welchem Ihr Bild angezeigt werden soll (wählen Sie aus diversen Voreinstellungen) und bestimmen Sie die Bildausrichtung (links, mittig, rechts).
4. SEO
Hinterlegen Sie die SEO (Suchmaschinenoptimierung) relevanten Daten wie Alt-Attribut, Titel und Beschreibung.
Sind Sie mit Ihren Anpassungen zufrieden klicken Sie auf Speichern, um diese Änderungen zu sichern.
9. Button anpassen
Um einen Button Ihren Anforderungen entsprechend anzupassen, egal in welchem Bereich, fahren Sie mit der Maus über den Button, bis er einen Rahmen erhält. Dann klicken Sie darauf.
Im sich nun öffnenden Popup können Sie folgende Anpassungen vornehmen:
1. Klickaktionen
Hier können Sie dem gewählen Button einen Link zu ordnen. Sie können wählen aus Eine Seite auf meiner Webseite, Eine externe Seite oder E-Mailadresse. Je nach dem was Sie hier auswählen, geht ein entsprechender Bereich auf, um die entsprechende Info (Seite auswählen / Externer Link und Zielfenster / E-Mail) einzutragen.
2. Optionen anzeigen
Hier können Sie dem gewählen Button unter Text den anzuzeigenden Text hinterlegen. Unter Grösse wählen Sie die Textgrösse des angezeigten Button-Textes. Unter Format können Sie definieren, wenn Sie den Text Fett oder Kursiv anzeigen lassen möchten und zu guter Letzt können Sie unter Button-Ausrichtung (links, mittig, rechts) den Stanord des Buttons bestimmen.
Sind Sie mit Ihren Anpassungen zufrieden klicken Sie auf Speichern, um diese Änderungen zu sichern.
