Volltextsuche
Mobile Performance durch Einbetten der benötigten CSS-Definitionen im Kopfbereich
ab: Version Veröffentlichungsdatum: 25. Juni 2018 Änderungsdatum: 27. Mai 2021 weblication cms performance mobile css kopfbereich head Version 13: Durch Einbetten der benötigten CSS-Definitionen im Kopfbereich werden Seiten auf mobilen Geräten in
Scroll-Fortschritt im Kopfbereich anzeigen
Projektgrundlage: BASE Der Scroll-Fortschritt kann an beliebiger Stelle eingebunden werden. Neben dem Body z.B. auch im Kopfbereich, wodurch je nach Layout beim hochgeschobenen Kopfbereich nur noch genau der Scrollbalken sichtbar bleibt.
Weblication® Entwicklerbereich
Innerhalb der Seitendarstellung des Objektes wird nun auch Instagram berücksichtigt 15 April BASE für Version 18: Kopfbereich über Struktureditor pflegen 1.0.279: Barrierefrei-Menu im Kopfbereich verfügbar (ab Version 19). Über dieses Menü
RSS: Weblication® Mobile First Changelogs
und Änderungen zu den BASE Mobile First Weblics® der aktuellen Version. 25.04.2024 17:11 BASE für Version 18: Kopfbereich über Struktureditor pflegen 1.0.305: Das Barrierefrei-Menü kann nun mit oder ohne Icons angezeigt werden 23.04.2024
Das HTML Seiten-Template (standard.wDocument.php)
Systematischer Aufbau des Standard-XSL-Stylesheets Einbinden der benötigten Stylesheets für die Transformation Der Kopfbereich Objekte und Inhaltsbereiche Systembereiche Besonderheiten Einführung Die XSL-Transformation stellt im XSLT-Stylesheet
Das HTML Seiten-Template (standard.wDocument.php)
Systematischer Aufbau des Standard-XSL-Stylesheets Einbinden der benötigten Stylesheets für die Transformation Der Kopfbereich Objekte und Inhaltsbereiche Systembereiche Besonderheiten Einführung Die XSL-Transformation stellt im XSLT-Stylesheet
Scrollverhalten des Headers
Kopfbereiches beim Scrollen beeinflussen, genügt es die Styleregeln in der header.scss anzupassen. Das Verhalten des Kopfbereiches (header) wird über folgende CSS-Klassen gesteuert, die über JavaScript dem html-Tag zugewiesen werden:
Scroll-Fortschrittsanzeige für Seiten
JavaScript- und CSS-Dateien mitgeliefert. BASE Classic: Zeigt den Scroll-Fortschritt innerhalb body an (design.css) - Kopfbereich nicht fixiert body { -w-add-classes: wglAddScrollProgress;} #scrollProgress { position: fixed; top: 0; /* zeigt den
Einfügen von Struktur-Elementen einschränken bzw. erlauben
2023 weblication cms core grid strukturelemente elemente items einschränken beschränken ausblenden newsletter weblics kopfbereich Die Auswahl an Strukturelementen über das Modul Struktureditor können Sie individuell beeinflussen. Sie wollen den
Semantische Bereiche einer Webseite - header, footer, section
verwenden. Das BASE (Mobile First) Projekt nutzt bereits im Standard die header und footer Tags zur Kennzeichnung von Kopfbereich und Fußbereich der Webseite. Hinsichtlich der Inhaltsbereiche können Sie über CSS-Only definieren, daß der
Navigationsbeispiel: Hauptnavigation getrennt mit Logo mittig
als Administrator auf Standardmittel zurückgreifen. Die BASE liefert Ihnen hierzu die Auswahlmöglichkeiten über den Kopfbereich und den Einsatz von Dekoratoren / Effekten. Gehen Sie ausgehend von einer aktuellen BASE Projektbasis wie folgt vor:
Navigation unter dem Banner anzeigen
Sie im Seiten-Layout 'Hauptnavigation im Inhaltsbereich anzeigen aktivieren'. Im Panel können Sie anschließend über 'Kopfbereiche, Portalinhalte pflegen' Elemente
Hintergrundbild dynamisch pro Navigationspunkt definieren
somit ein Werkzeug an die Hand geben, um die Webseiten mit Hintergrundbildern für den Inhalt (body) bzw. den Kopfbereich aufzuwerten. Die BASE ab Version 2.x stellt Ihnen bereits standardmäßig diese Möglichkeit zur Verfügung.
Menü-Navigationen: Mehrere Varianten für Öffner auswählbar
Icon und Text Im Screen sehen Sie die zuletzt genannte Möglichkeit als Umsetzung. Gewünschte Menü-Navigation wählen Kopfbereich bearbeiten - Hauptnavigation Um die Menü-Navigation einzustellen, öffnen Sie über das Weblication® Panel den
Hauptnavigation, im Menü zusätzlich die Metanavigation
BASE unterstützt dies bereits im Standard. Stellen Sie in aktueller BASE Projektgrundlage über "Layout anpassen" den Kopfbereich so ein, daß dieser über den Struktureditor gepflegt werden kann. In der Bearbeitung des Kopfbereiches öffnen Sie die
Menünavigation anpassen
Eine andere Farbe lässt sich über eine Maske des Layout-Wizard einstellen. Rufen Sie dazu die Bearbeitung des Kopfbereiches auf, z.B. über das Weblication® Panel unter dem Zahnrad-Symbol und dort in der Spalte "Konfiguration / Layout". Im
Sanftes Scrollen bei internen Links konfigurieren
scrollingauto [yes|no] Legt fest, ob beim Scrollen die Ereignisse genutzt werden sollen, was dazu führt, dass z.B. der Kopfbereich nach oben fährt. ist kein Wert angegeben, entspricht das 'yes' . Soll der Kopfbereich z.B. beim Klick entsprechen dem
Änderungen in Weblication® CMS Core/GRID
05.11.2020 Final Version 015.003.060.000 02.11.2020 Benötigte Style-Definitionen werden nur beim ersten Laden im Kopfbereich eingebettet, da sie anschließen über die gecachte design.css verfügbar sind. 015.003.054.000 29.10.2020
Smooth Scrolling per CSS-Only generell aktivieren
(Mobile First) ist dies bereits im Standard aktiviert. Unter anderem haben Sie dadurch den Vorteil, daß bei fixiertem Kopfbereich auch bei Anker-Links innerhalb einer Seite sanft zum Ziel gescrollt wird und der fixierte Kopfbereich berücksichtigt
wPageCur::registerJs
Parameter path Pfad der JS Datei target Ziel, wo die JS-Dateien eingebunden werden sollen (z.B. head, um es im Kopfbereich einzubinden). Das WSL-tag includeJsRessources muss ebenfalls das entsprechende Attribut target enthalten. allowMerge
So definieren Sie ein Flash Movie, um andere Inhalte nicht zu verbergen
wie Sie ein Flash-Bild als Objekt definieren, das andere Bilder oder Layer nicht überlagert. Ein Flash Film im Kopfbereich der Seite kann so definiert werden, dass andere Inhalte (z.B. eine Layernavigation, Bilder, Logo, etc.) durch das
Bereich mit wechselbarem Bild umsetzen
Webseiten mit individuellen und ständig wechselnden Bildern. Eine Webseite können Sie durch wechselnde Bilder im Kopfbereich der Seite ansprechender für Seitenbesucher gestalten. Hierfür stehen Ihnen viele Möglichkeiten der Umsetzung zur
Navigation mit Toggler und Layer mehrspaltig horizontal
toggler hamburger menü layer horizontal mehrspaltig Die BASE verfügt über eine weitere Navigationsumsetzung. Kopfbereich: Einstellung Hauptnavigation Die Navigation zeigt auch bei großen Bildschirmen direkt dasToggler-Symbol
Menünavigation (Toggler) seitlich oder von oben einfahren
Menünavigation (Toggler-Navigation) kann über den Layoutwizard hinsichtlich des Einfahr-Verhaltens eingestellt werden. Kopfbereich - Menünavigation Öffnen Sie hierzu über das Panel über " Layout anpassen " den Layoutwizard. Sie finden die
Wie blendet man CSS-Variablen in der Maske aus?
Über folgende Anweisung wird z.B. in der colors.scss (Farben) die CSS-Variable für die Hintergrundfarbe des Kopfbereiches nur angezeigt, wenn der Kopfbereich nicht über den Struktureditor gepflegt wird (!= structure). Beispiel: Auszug aus
Scrolling von oben erzwingen
//wOffsetScrolledTopDefault, ist eine Variable aus der ui.js die die Höhe des fixierten Kopfbereiches enthält window.scrollTo(0,
Megadropdown Navigation - HowTo und Tipps
Type AJAX IFrame Megadropdown Navigations-ID ergänzen Ja Nein Sie finden diese Einstellungen in der Maske des Kopfbereiches ( header.scss ) im Block "Hauptnavigation". Erforderliche Dateien und Skripte Das aktuelle Mobile First Standard-Projekt
So prüfen Sie die Personalisierung bzw. Zeitsteuerung bei Binärdateien
können Sie PHP-Dateien auf einfache Weise personalisieren. Es genügt, die Berechtigungsprüfung im Kopfbereich einer Datei durchzuführen, um die Anzeige gegebenenfalls zu verhindern. Dies ist in den Beispielprojekten bereits
Linken Seitenbereich zur Pflege aktivieren
nicht der Fall, führen Sie bitte folgende Schritte aus: Öffnen Sie über das Panel die Portalinhalte zur Bearbeitung (Kopfbereich, Portalinhalte pflegen) Wird Ihnen in der Entwurfsansicht der linke Seitenbereich angezeigt, fügen Sie hier das Element
Hintergrundbilder global, pro Navigationspunkt oder pro Seite definieren
definieren Navigationsabhängige Hintergrundbilder definieren Sie am Besten, indem Sie im Panel über "Kopfbereich, Portalinhalte pflegen" gehen und dort im ersten Inhaltsbereich das Element "Navigationsabhängiges Hintergrundbild
Individuelle Elemente ohne eigene Templates nutzen
Wert enthält, individuell formatiert werden, lässt sich dafür ein Datenfragment nutzen. Diese sind unter anderem im Kopfbereich im Einsatz, wo man z.B. eine formatierte Telefonnummer pflegen kann. Datenfragmente unterstützen zudem die Auswahl von
Login / Logout in vorangestellter Kopfleiste
Datenfragmente und PHP-Code Über das Weblication® Panel öffnen Sie als Administrator unter "Konfiguration/Layout - Kopfbereiche, Portalinhalte pflegen" die Bearbeitung des Kopfbereiches. Dort können Sie diverse Strukturelemente, welche für den
Änderungen in Weblication® CMS Core/GRID
und path, um z.B. über clip-path Formen zu definieren. 017.006.034.000 06.03.2023 Die CSS-Datei zum Anpassen des Kopfbereichs ist nun direkt über das Panel erreichbar. 017.006.029.000 02.03.2023 Die Funktion
Nur spezielle Varianten eines Elementes auswählbar machen
z.B. als einziges eingefügt oder auch als einziges nicht eingefügt werden kann name= " Spezieller Container für den Kopfbereich " type= "
Unterschiedliche CSS-Definitionen, z.B. zu Farben, in Projekten nutzen
wie folgt strukturiert ist: /de /de-wGlobal /wissen /wissen-wGlobal /multi-wAssets /multi-wGlobal Um dem Kopfbereich eine andere Hintergrundfarbe zu geben, definieren Sie über den Selektor zum html-Tag für die Klasse des
Änderungen in Weblication® CMS Core/GRID
lassen sich eigene Seitenverhältnisse im Bildeditor definieren. 009.005.061.000 29.01.2015 Kopfbereich mit zentriertem Logo auswählbar. 009.005.015.000 28.12.2014 Über die Framework-Funktion wVariables::setValue kann
Änderungen in Weblication® CMS Core/GRID
lassen sich eigene Seitenverhältnisse im Bildeditor definieren. 009.005.061.000 29.01.2015 Kopfbereich mit zentriertem Logo auswählbar. 009.005.015.000 28.12.2014 Über die Framework-Funktion wVariables::setValue kann
Snippets
Eingaben des Seitenbesuchers angeboten werden. Zum Snippet Scrollverhalten des Headers Möchten Sie das Verhalten des Kopfbereiches beim Scrollen beeinflussen, genügt es die Styleregeln in der header.scss anzupassen. Zum Snippet Sortieren von