Unsere site.pro Tipps

Eine Seite erstellt, wechselt oder bearbeitet man links oben im Pulldown-Menü neben dem Site.pro-Logo. Das Anlegen einer neuen Seite geht aber auch während dem Erstellen oder Bearbeiten eines Menüs. Klicke dazu auf ein bestehendes Menü und wähle "Menu bearbeiten" aus, oder erstelle ein neues Menü. Mit einem Klick auf den Link "+ Neues Menüelement" links unten im sich öffnenden Fenster erzeugst du automatisch zum Menüelement eine neue Seite.

Eine Seite aus dem Menü entfernen kannst du, indem du im selben Fenster auf das "x" rechts neben einem Menüelement klickst. Die Seite selbst wird dadurch nicht gelöscht.

Damit horizontal angeordnete Container/Spalten ab einer bestimmten Browserbreite umbrechen, also untereinander rutschen, kann man wie folgt vorgehen:

1. Einen Container markieren, der mehrere Spalten enthält.
2. Rechts in den Bearbeitungsoptionen unter dem Abschnitt "Layout" die Checkbox "Wechseln Sie auf kleineren Bildschirmen zum vertikalen Layout" anhaken und darunter mit den Radio-Buttons angeben, ab welcher Ansicht die Spalten untereinander rutschen sollen.

In der rechten Spalte unter dem Abschnitt "Layout" gibt es eine Checkbox mit der Bezeichnung "Dauerhaft". Damit kann man Objekte an einer Kante des Browsers fixieren. Im Quadrat darunter gibt man noch an, welche Kante das sein soll.

Sollen zum Beispiel die Menüpunkte eines Menüs abgerundete Ecken bekommen, kann man wie folgt vorgehen:

1. Das Menü markieren
2. Rechts in den Bearbeitungsoptionen unter dem Abschnitt "Menüpunkte" auf die Box "Rand" klicken (den Stil kann man für Standard, Schwebend (= hover) und Aktiv individuell einstellen)
3. In der Raster-Darstellung auf eine Ecke klicken (man kann auch unten die Checkbox "Verwende unterschiedliche Ränder" oder "Verwenden Sie verschiedene Ecken" anklicken und die Ränder oder Ecken unterschiedlich stylen). Daraufhin erscheint eine Auswahl verschiedener Ecken-Stile. Man kann den Eckradius aber auch über einen manuellen Wert angeben.

1. Das Menü markieren

2. Rechts in den Bearbeitungsoptionen unter dem Abschnitt "Menüpunkte" auf die Box "Animation" klicken
3. Im Fenster den Reiter "Schwebend" auswählen und im Pulldown-Menü "Bewirken" die gewünschte Animation auswählen. Dann die benötigte Richtung, Dauer, Verzögerung usw. angeben.

Das Context-Menü zum Bearbeiten eines Containers kann man entweder mit Klick auf das Stift-Symbol in der oberen rechten Ecke aufrufen. Noch bequemer geht es mit Rechtsklick auf den Container.

Margin und Padding, also die äußeren und inneren Abstände um ein Objekt, kann man in der rechten Spalte unter dem Abschnitt "Abstand" festlegen. Darunter kann man pro Gerät/Bildschirmbreite angeben, wieviel Prozent davon angewendet werden sollen.
Intuitiver kann man Margin und Padding auch einstellen, indem man mit dem Cursor am äußeren Rand des Objekts zieht.

Für die gesamte Website allgemeingültige Stile/Textformate kann man einrichten, indem man entweder mit Klick auf einen Text-Container, dann auf "Text Bearbeiten" und dann auf das Stiftsymbol ganz rechts klickt. Zu den gleichen Einstellungen kommt man auch mit Klick ganz oben rechts auf den Menüpunkt "Einstellungen" und dann auf den Unterpunkt "Style".

Hier sieht man, dass schon einige Formate standardmäßig zur Verfügung stehen. Du kannst bestehende Formate anpassen oder neue erstellen.

Nachträgliche Änderungen an einem Textformat wirken sich auf alle Bereiche aus, auf die es angewendet wurde.

Den Haupt-Container vom Content-Bereich markieren und rechts in den Bearbeitungsoptionen unter dem Abschnitt "Größe" beim Feld "max" die Checkbox anhaken und die gewünschte Maximal-Breite eingeben.

Ein Favicon, also ein kleines Bildchen, das immer links im Browser-Tab zu sehen ist, kann man über das Menü "Einstellungen" oben rechts, Unterpunkt "Favicon", hinzufügen.

Das Formular markieren, in der rechten Spalte im Abschnitt "Etiketten" die Checkbox "Beschriftung Spaltenbreite" anhaken und die Spaltenbreite für das Label eingeben.

Sobald man auf der Seite ein Element vom Typ "Sprachen" erstellt und in der rechten Spalte unter dem Abschnitt "Languages" weitere Sprachen hinzugefügt hat, erscheint bei der Bearbeitung jedes Textes ein zusätzliches Dropdown-Menü für die Sprachen. Dort kann man jeweils eine der verfügbaren Sprachen auswählen und eine Übersetzung eingeben.

Man kann anfangen, indem man ein Objekt vom Typ "Button" erstellt. Dann kann man in der rechten Spalte unter dem Abschnitt "Button" mit Klick auf das Feld "Hintergrund" einen Hintergrund hinzufügen. Nun auf das Feld "Bild" klicken, um ein Hintergrundbild auszuwählen. Dann die Größe und Position festlegen, und ob sich das Bild horizontal oder vertikal wiederholen soll. Da es sich um einen Link handelt, müssen diese Einstellungen auch für den Hover(Schwebend)- und Active-Zustand vorgenommen werden.

Sollte ein bestimmtes Design nicht über die Baukasten-Optionen umsetzbar sein, kann man auch eigene Stylesheets hinzufügen:
- Oben rechts im Menü "Einstellungen" den Punkt "Seiten" auswählen. Dann auf den Reiter "Skripte" wechseln und in das Feld "Vor </head>" die gewünschten Stylesheets eintragen. Solche Änderungen werden allerdings nicht in der Baukasten-Ansicht sichtbar, sondern erst in der Vorschau.

Auch Grafiken, die Text enthalten, können je nach Seitensprache ersetzt werden. Voraussetzung dafür ist, dass du die benötigten Sprachen schon angelegt hast, wie beschrieben im Abschnitt "Mehrsprachigkeit" beschrieben.

Füge das Bild mit dem Text in der ersten Sprache ein, dann klicke bei ausgewähltem Bild auf das Stift-Symbol und fahre mit dem Cursor über den Menüeintrag "Entfernen". Daraufhin werden alle verfügbaren Sprachen zur Auswahl gestellt. Lösche das Bild für alle Sprachen, in denen es nicht angezeigt werden soll. Dann füge das Bild mit dem Text in der zweiten Sprache ein und fahre wie oben beschrieben fort.