Kontakt

hs-icon-callcenter
Anrufen
hs-icon-callcenter

Rufen Sie uns an

Unser Support-Team hilft Ihnen gerne, egal ob Sie technische oder administrative Fragen haben. Wir sind persönlich für Sie da!

 

+43 (0)720 511 555
(Anrufe aus dem Österreichischen Festnetz 0.25 EUR/Minute)


Administration

Montag bis Freitag
9.00–12.00 Uhr
13.30–17.30 Uhr
 

Technischer Support

Montag bis Freitag
8.00–17.30 Uhr

Samstag
9.00–16.00 Uhr

hs-icon-doc-write
Schreiben
hs-icon-doc-write

Schreiben Sie uns

Damit wir Ihnen so rasch und so gut wie möglich helfen können, bitten wir Sie Ihre Anfrage so spezifisch wie möglich zu formulieren. Sie können uns auch gerne über unsere E-Mail-Adresse erreichen: support@hoststar.at

 

Bereiche – Layout anpassen

Support > Designer ab 11.2019 > Baukasten

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.

 

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:

Anpassen
Löschen

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.

Ihnen stehen folgende Bearbeitungsmöglichkeiten zur Verfügung:

Farbe
Trennlinien
Animation

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.