Worldsoft Logo
Zurück zur Übersicht
Druckoptimierte Version
 

Post-it-Sticker

Mit dem Post-it-Sticker können Sie Blöcke (in diesem Fall ein Post-it-Sticker) an einer von Ihnen bestimmten Stelle auf Ihrer Website positionieren. Ob Sie nun möchten, dass der Block auf einem Platz fixiert wird oder ob der Block beim Scrollen immer für den Kunden sichtbar sein soll bleibt Ihnen überlassen. 

Post-it-Sticker Block erstellen

  Post-it-Sticker - Anleitungen zur Bedienung

Um den "Post-it-Sticker" nutzen zu können, sind folgende Schritte erforderlich:

1.) CMS-Block mit Inhalt erstellen
2.) Auf Webseite positionieren
 

Erläuterungen zum Post-it-Sticker im Detail
 

Lupeklicken Sie auf die Grafiken um diese zu vergrößern.

1.) CMS-Block mit Inhalt erstellen

Post-it-StickerWählen Sie im Quickstart-Menü die "Block-Einstellungen" aus. 

Klicken Sie auf "Neuen Block erstellen".









 

Post-it-Sticker

Fügen Sie z.B. ein Bild oder Text in den CMS-Block ein.

In diesem Beispiel wurde ein Bild eingefügt und mit einem Link versehen. 










 

Post-it-Sticker

Speichern Sie den CMS-Block und vergeben diesem einen Namen. 





 

Post-it-Sticker

2.) Auf Webseite positionieren

Sie finden den erstellten CMS-Block nun unter dem Klapp-Menü "Html".

Nun können Sie den CMS-Block auf der gewünschten Inhaltsseite in den gewünschten Bereich per Drag and Drop ziehen und speichern.

Alternativ können Sie auch in Ihrer Inhaltseite einen CMS-Block einfügen und über Rechtsklick in den Eigenschaften Ihren "Post-it-Sticker-Block" auswählen.




In diesem Beispiel soll der "Post-it-Sticker" an einer bestimmten Stelle im Browserfenster sichtbar sein. Deshalb ist es egal, in welchem Bereich der Block eingefügt wird, er darf lediglich nicht in einem Bereich mit den CSS-Einstellungen "Sichtbarkeit=keine" eingefügt werden.

Post-it-StickerDeshalb wird der Block in unserem Beispiel in "Mitte (Center -Mitte)" platziert.

Um nun diesem Block die Anweisung zu geben, nicht an der eingefügten Stelle, sondern an der gewünschten Position zu stehen, sind ein paar wenige CSS-Einstellungen notwendig.
Klicken Sie auf diesem Block auf "CSS". 


 

Post-it-StickerIn diesem CSS-Bearbeitungsfenster stellen Sie bei "Position" auf "absolute" und bei Positionierung "von oben" = 0 und "von links"=0 ein.

Mit der Angabe "absolut" und der Angabe 0 Pixel Abstand von oben und von links, wird nun der Block eben an dieser "absoluten Position" in der linken oberen Ecke angezeigt.

Welchen Wert Sie eingeben und von welcher Richtung Sie den Post-it-Sticker "absolut positionieren" möchten, bleibt Ihrer Vorstellung überlassen.

Sie können auch noch weitere Angaben machen, wie z.B. eine Hintergrundfarbe vergeben, eine feste Größe einstellen, oder einen Rahmen und die Rahmenfarbe auswählen.

Hierbei ist ein "Probieren", bis Sie mit dem Ergebnis zufrieden sind, sicherlich angebracht.

Tipp: Achten Sie darauf, dass in unserem Beispiel der "Post-it-Sticker" immer in der linken oberen Ecke bleibt und es von der Monitorgröße des Nutzers abhängig ist, ob der "Post-it-Sticker" auf dem Hintergrund der Webseite (bei größeren Monitoren, und abhängig von der Webseitenbreite), oder bei kleineren Monitoren über der Inhaltsseite selbst liegt.
 

relative Position

Eine weitere Möglichkeit, den "Post-it-Sticker" zu positionieren, ist z.B. die Position nicht auf "absolut", sondern auf "relativ" zu stellen.Ihre Eingaben zum Abstand beziehen sich nun auf den Container in dem der Block positioniert wurde, in diesem Beispiel ist es "Mitte (center-Mitte)". Die eingegeben Werte werden von dieser Position ausgehend berechnet.
Ein so positionierter Block bleibt exakt an seiner angegebenen Position, auch wenn man z.B. das Browserfenster verkleinert.

Tipp: Sie können auch mit negativen Werten arbeiten, um den "Post-it-Sticker" an die gewünschte Position zu bringen.


static Position

hat keine spezielle Positionierung und ist für dieses Beispiel nicht relevant.
 

fixed Position

Wie die absolute Position, nur mit dem Unterschied, dass beim Scrollen der "Post-it-Sticker" nicht mit der Seite gescrollt wird, sondern immer an der definierten Position, unabhängig vom Scrollen der Seite, bleibt.

Testen Sie einfach mal verschiedene Einstellungen aus! 



Viel Erfolg mit dem Post-it-Sticker des Worldsoft-CMS! (sr)


Benutzername:
User-Login
Ihr E-Mail