Dieser Startbereich befindet sich in der Usersyntax "para1". Die Syntax "paratextblack" stellt diesen Textbereich dar. Die Schrift oben nutzt die Usersyntax "schrift40".
Der folgende Pfeil besitzt die Syntax "schrift30". Um den Pfeil als Link zu nutzen und den Bereich"infos" anzuspringen, werden noch die Usersyntax "anker_link" und "anker_id" benötigt.
▼
Querenburg_1 - Allgemeine Infos (anker_id = infos)
OnePage Layout
Querenburg_1 ist ein sog. OnePage Layout. Hier kommen sämtliche Inhalte auf eine einzige Seite, was einige Vor- und auch einige Nachteile mit sich bringt.
Einige der Vorteile:
- Alles befindet sich übersichtlich auf einer Seite
- Ideal für Websites mit relativ wenig Inhalt
- Ideal für Landingpages
- Man kann auf eine Navigation weitestgehend verzichten
- Unterteilung / Trennung der einzelnen Bereiche durch Bilder (feststehend) oder verschiedenfarbige Hintergründe
Nachteile:
- Etwas Einarbeitung notwendig
- Für moziloCMS müssen zwingend Benutzerdefinierte Syntaxelemente verwendet werden
- Man mus die Logik des Seitenaufbaus verstehen (wichtig für die Syntax)
- Bei zu viel Inhalt kann es unübersichtlich werden
Querenburg Layouts und die Benutzerdefinierten Syntaxelemente
Die Layouts namens "Querenburg" nutzen weitestgehend dieselben Benutzerdefinierten Syntaxelemente (kurz: Usersyntax oder Benutzersyntax). Die Usersyntax, die in dem jeweiligen Layout angewendet werden, werden stets namentlich genannt.
Für die Darstellung dieser drei Boxen wird die Usersyntax 3_boxen verwendet, die in der Syntax coverboxcenter untergebracht wird. Für die Trennung (den Abstand) zwischen den einzelnen Spalten / Boxen wird zusätzlich die Usersytax abstand genutzt,
Querenburg_1 Syntax
Das Layout Querenburg_1 benötigt in der Minimal-Version folgende Usersyntax:
- para1 (und bei Bedarf weitere, z.B. para2, para3 usw.)
Benötigt für feststehende Hintergrund-Bild(er) - paratextblack bzw. paratextwhite
Benötigt für den schwarz- bzw. weiß-transparenten Textbereich über dem Hintergrund - text900
Stellt den normalen Textbereich außerhalb der Hintergrund-Bilder dar. - schrift40 (bei Bedarf)
Regelt die Schriftgröße (in diesem Falle 40 Pixel) oben im Bereich para1 - anker_id und anker_link (bei Bedarf)
Der Pfeil oben ist ein Link (anker_link), der beim Klicken zum Bereich "infos" (anker_id) führt.
Weitere Technik, Infos und CSS
Das Layout Querenburg_1 nutzt drei verschiedene Javascript-Anwendungen:
- Sticky Navigation
Hält eine Navigation an einer bestimmten Stelle nach dem Scrollen. Diese Technik erkläre ich bei der Version "Querenburg_1 Navi" in Kürze. - Soft Scrolling
Sorgt dafür, dass sämtliche Anker (Links) innerhalb derselben Seite "soft", also langsam gleitend angesteuert werden. - DIV einblenden
Blendet einen "nach oben" Bereich ab einer gewissen Scroll-Länge ein. Die Funktion "nach oben" kann bei Querenburg_1 bei Bedarf über die Usersyntax nach_oben eingebunden werden.
Die "minimale" Version einer OnePage Website mit moziloCMS benötigt nur wenige Usersyntax. Jedoch sind sämtliche, derzeit von mir kreierte Usersyntax sowohl in der syntaxelemente.txt Datei als auch in der style.css und usersyntax.css vorhanden.
Für eigene Style-Angaben, oder aber um bestehende Style-Angaben vom Layout zu überschreiben, enthält das Layout Querenburg_1 zusätzlich die Datei ownstyle.css.
Plugin: PhotoSwipe (Fotogalerie)
Für die Darstellung dieses Bereiches setze ich ein "neues" Usersyntax ein: [div_syntax=|...].
Diese Syntax erlaubt es, CSS-Angaben aus den Dateien style.css, usersyntax.css und - bei Bedarf - ownstyle.css anzuwenden.
In der Datei usersyntax.css befinden sich u.a. einige Angaben für Schriftfarbe, Schriftgröße und Hintergrundfarben. In diesem Abschnitt mit der Fotogalerie kommen die beiden CSS-Angaben bg_black und font_gray (jeweils CSS-Klassen) zum Einsatz, was zur Folge hat, dass der komplette Hintergrund schwarz und die Schriftfarbe in grau dargestellt wird. Da dieser Bereich lesbaren Inhalt darstellt, wende ich hier zusätzlich noch die Usersyntax text900 (Bereich mit max. 900 Pixeln Breite) an.
Komplette Syntax dieses Bereiches
[div_syntax=bg_black font_gray|[text900|... der Inhalt einschl. Fotogalerie ...]]
Die CSS-Klassen für die Hintergrundfarbe (bg_black) und Schriftfarbe (font_gray) werden innerhalb der Syntax div_syntax einfach durch ein Leerzeichen getrennt angegeben.
PhotoSwipe mit drei Vorschaubildern pro Reihe
Für die Darstellung von Fotogalerien setze ich am liebsten das Plugin PhotoSwipe ein. Die folgende Beispielgalerie enthält neun Bilder. Hierfür fand ich es besser, wenn die Vorschaubilder in 3er-Reihen statt (voreingestellt) 4er-Reihen dargestellt werden.
Um statt vier nur drei Vorschaubilder in einer Reihe anzuzeigen, öffnest du die Datei "index.php" des Plugins PhotoSwipe mit einem Texteditor und änderst in Zeile 129 die Angabe "$picsperrow" von 4 auf 3.
Nachteil bei diesem Vorgehen: Bei einer weniger breiten Darstellung wechseln sich 2 und 1 Vorschaubild(er) ab.
| 
| 
| 
|
| 
| 
| 
|
|
Alle Fotos / Bilder © Thorsten Gumball
Weitere Bilder / Fotos aus Bochum-Querenburg findest du auf der Website photo.gumball.de
... mit dem Textbereich paratextwhite (weiß-transparenter Hintergrund).
Für die Schriftgröße der Überschrift wird die Usersyntax schrift_50 verwendet. Zudem wird die Überschrift zusätzlich Fett geschrieben. Die komplette Syntax ist hier also:
[para2|[paratextwhite|[schrift50|[fett|Name dieses Bereichs...]]
... mit dem Textbereich...]]
Plugin: ColorBox für vergrößerte Bilderansicht
Auf das Bild klicken für größere Ansicht
Für die vergrößerte Darstellung von einzelnen Bildern setze ich sehr gerne das Plugin ColorBox ein. Durch bestimmte Angaben bei der Verwendung dieses Plugins (siehe Beschreibung des Plugins im Adminbereich) kann die Darstellung maßgeblich beeinflusst werden. Für meine Zwecke nutze ich i.d.R. die Angaben für maximale Breite (maxWidth) und maximale Höhe (maxHeight). Damit wird sichergestellt, dass das (vergrößerte Original-) Bild innerhalb des Bildschirms bleibt, also responsiv dargetellt wird.
Eine besondere Angabe für die Datei style.css ist nicht nötig. Im Grunde reicht das Anlegen einer Usersyntax wie folgt:
Ich habe diese Usersyntax also bildvergroesserung genannt. Das schien mir zweckdienlich, tut niemandem weh und etwas besseres ist mir auf die Schnelle auch nicht eingefallen.
Diese Usersyntax ist tatsächlich nur für die Darstellung eines einzelnen Bildes (Vorschaubild und Originalbild) konzipiert.
Nutzung der Usersyntax in der Inhaltsseite
Die Anwendung dieser Usersyntax ist eng gekoppelt mit der Funktionalität des Plugins ColorBox:
Die moziloCMS-eigene Syntax [bild|] muss zwingend genutzt werden, sonst werden die Bilder nicht dargestellt. Für das Originalbild wird die Syntax [bild|] genutzt, das Vorschaubild kann, wie in meinem Falle, auch die Syntax [bildlinks|] oder natürlich auch [bildrechts|] nutzen.
Hinweis zum Bereich "para2" weiter oben
Ich wollte in dem Bereich "para2" weiter oben nicht zu viel Text einbringen, denn im Gegensatz zu "para1" (ganz oben) und "para3" (weiter unten) erhält "para2" keine festgelegte Höhenangabe. Damit aber über und unter dem Textbereich in "para2" ein wenig "Luft" dargestellt wird, setze ich eine weitere Usersyntax ein.
Diese Usersyntax habe ich abstand_unten genannt, die im Grunde einen leeren Bereich mit einer Höhe von 50 Pixeln generiert. Im obigen Beispiel habe ich die Usersyntax "abstand_unten" jeweils 2 (zwei) Mal eingesetzt, also vor und nach dem Text im weiß-transparenten Hintergrund.
Im Grunde kann man statt der Usersyntax "abstand_unten" auch Zeilenumbrüche zur Generierung des "Freiraums" einfügen. Die Lösung mit der Usersyntax ist aber wesentlich eleganter.
Kontaktformular angepasst für dunkle Hintergründe
Das Kontaktformular im nächsten (und letzten) Bereich kann ganz "normal" genutzt werden. Ich wollte aber einen dunklen (in diesem Fall schwarzen) Hintergrund für das Formular haben.
Damit die Formularbereiche, also Text und Rahmen, hell dargestellt werden, habe ich ausnahmsweise eine Usersyntax erstellt, die ich kontakt_dark genannt habe. Um das Kontaktfomular auch bei dunklem Hintergrund sichtbar zu machen, wird die Usersyntax wie folgt eingesetzt:
Wobei ich anmerken möchte, dass ich mich manchmal (noch) nicht entscheiden kann, wie ich die Usersyntax letztendlich benenne. Die eben beschriebene Usersyntax ist halb-deutsch und halb-englisch. Naja, ich werde schon eine dauerhafte Lösung finden...
Kontakt
Für eine Kontaktaufnahme über das Kontaktformular fülle bitte die Felder aus, löse die mathematische Spamschutz-Aufgabe und akzeptiere meine Datenschutzerklärung.
Alternativ kannst du mir auch eine E-Mail an home _ät_ querenburg.com senden.
Deine Daten werden über meinen Provider per E-Mail an mich weitergeleitet und nach Beantwortung umgehend gelöscht, sofern keine gesetzlichen Aufbewahrungspflichten bestehen.
Eine Nutzung zu einem anderen Zweck oder eine Datenweitergabe an Dritte findet nicht statt.
Du kannst deine Einwilligung zur Datenerhebung und Datennutzung jederzeit durch Nachricht an mich widerrufen. Im Falle des Widerrufs werden deine Daten umgehend gelöscht.
Meine vollständige Datenschutzerklärung findest du auf der Seite D at en sc hu tz.