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:
Auf jeder Seite, hier auf der Startseite des Baukastens, stellen sich die Seiten aus verschiedenen «Elementen (Bereichen)» zusammen. Diese können jederzeit angepasst werden.
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
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.
Es wird automatisch der Bearbeitungsmodus angezeigt. Hier stehen Ihnen folgende Anpassungsmöglichkeiten zur Verfügung.
• Farbwahl bzw. Hintergrundbild
• Layout
• Animation
• Kopfzeilen-Anpassungen
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.
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.
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.
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.
Im Header-Bereich können Sie einerseits das Header-Bild und andererseits den Header-Text anpassen. Klicken Sie auf den entsprechenden Bereich. um fortzufahren.
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.
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
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.
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».
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».
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.
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».
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».
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.
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.
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).
Ihnen stehen folgende Bearbeitungsmöglichkeiten zur Verfügung:
• Farbe
• Layout
• Trennlinien
• Animation
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.
Ü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.
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».
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.
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.
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».
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.
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.
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.
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.
