Versions Compared

Old Version 177

changes.mady.by.user Karima Laghrami

Saved on

compared with

New Version Current

changes.mady.by.user Karima Laghrami

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Der Pagedesigner dient zur Strukturierung, Gestaltung und Erstellung von Inhalten mittels Drag'n'Drop-Oberfläche.

Struktur: Eine Seite kann mithilfe von Zeilen (Rows) strukturiert werden. Diese sind in verschiedenen Layouts verfügbar (einspaltig, zweispaltig, dreispaltig usw.) und können per Drag'n'Drop auf einer Seite platziert werden. Rows können beliebig verschachtelt werden, um möglichst viele Designlayouts abzudecken.

Inhalt: Zum Erstellen von Inhalten stehen verschiedene Komponenten (Bilder, Texteditor, Symbole, Zitate usw.) in Form von Kacheln zur Verfügung, welche an jeder beliebigen Stelle innerhalb einer Row platziert werden können. Änderungen werden stets in Echtzeit angezeigt (WYSIWYG - What You See Is What You Get). Alle Elemente können beliebig verschoben, gelöscht oder kopiert werden.

Styling: Vorhandene Rows und Komponenten können direkt im Editor mit zusätzlichen Stylings versehen werden. Ob Abstände, Rahmen oder Farben, es gibt Dutzende von Möglichkeiten, um eine Seite so individuell und originell wie möglich zu gestalten.

Responsive Design: Um eine Website auf möglichst vielen Geräten ansprechend darzustellen, kann die Seite in Form der gängigsten Grössen (Mobile, Tablet und Desktop) angezeigt und bearbeitet werden. Einstellungen können auf alle Ansichten oder speziell auf eine Grösse (z. B. Mobile) angewendet werden.


Expand
titleVideo-Tutorial: Einführung Pagedesigner

  • Log-in

  • Vorstellung Seitenbaum

  • Vorstellung Editor-Modus

Multimedia
name1-pagedesigner-allgemein.mp4
height280


→ Mittels Klick auf das Bearbeitungs-Icon am rechten, unteren Seitenrand wird der Pagedesigner geöffnet:

Der Pagedesigner besitzt die Form einer Werkzeugpalette, welche sich während der Bearbeitungszeit stets am oberen und rechten Seitenrand befindet (oranger Bereich). Die verschiedenen Icons stellen jeweils eine Kategorie mit Optionen/Funktionen dar, welche durch einen Klick angezeigt werden. 

Table of Contents
maxLevel4
stylenone


1. Übersicht Komponenten 

In diesem Kapitel finden Sie findest du Informationen und Beschreibungen zu den verschiedenen Komponenten.
Wie man sie anwendet, erfahren Sie erfährst du im Kapitel 2 und Kapitel 3.

Komponenten sind Elemente, welche Sie du beliebig auf ihrer deiner Website platzieren können kannst und mithilfe derer sie Inhalt du Inhalte kreieren könnenkannst:

Anchor
rows
rows

1.1 Übersicht - Zeilen (Rows)

Zeilen sind Behälter/Container, welche die Seite strukturieren. Innerhalb dieser Zeilen können Sie kannst du Elemente platzieren (Bilder, Texte, Formulare usw.).

Expand
titleÜbersicht Rows

Zeilen gibt es in verschiedenen Layouts und können zudem beliebig verschachtelt werden:

   NameLayoutAnsicht
  Einspaltige Zeile1

  Zweispaltige Zeile1/2 - 1/2

   Zweispaltige Zeile2/3 - 1/3

  Zweispaltige Zeile1/3 - 2/3

   Zweispaltige Zeile3/4 - 1/4

   Zweispaltige Zeile1/4 - 3/4

   Zweispaltige Zeile5/6 - 1/6

   Zweispaltige Zeile7/12 - 5/12

   Dreispaltige Zeile1/3 - 1/3 - 1/3

   Dreispaltige Zeile1/4 - 2/4 - 1/4
&
2/4 - 1/4 - 1/4

   Vierspaltige Zeile1/4 - 1/4 - 1/4 - 1/4

   Fünfspaltige Zeile1/5 - 1/5 - 1/5 - 1/5 - 1/5

   Sechsspaltige Zeile1/6 - 1/6 - 1/6 - 1/6 - 1/6 - 1/6



Anchor
elemente
elemente

1.2 Übersicht - Elemente

Elemente dienen der Erstellung von Seiteninhalt. Sie können auf allen Seiten innerhalb von Zeilen platziert werden:

Expand
titleÜbersicht Elemente



KomponenteBeschreibungOptionen*Vorschau

Youtube Video

Mithilfe dieses Elements, kann ein Youtube Video auf der Seite eingebunden werden. Benötigt dazu wird lediglich der Link des gewünschten Videos.

Es existiert eine Auswahl von verschiedenen Videoformaten wie beispielsweise:

  • 16:8 (Standard)
  • 85:1 (Wide)
  • 35:1 (Cinematic)


Expand
titleVorschau Youtube Video


Video

Dient zur Einbindung einer beliebigen Videodatei. Empfohlen wird das Videoformat MP4.

Zu den Video-Optionen gehören unter anderem:

  • Autostart
  • Steuerelemente anzeigen
  • Loop Video (Endlosschleife)
  • Mute Video (Tonlos abspielen)


Expand
titleVorschau Video


Expand
titleVideo-Tutorial: Video

  • Hochladen von Videos

  • YouTube-Video: siehe separates Tutorial

  • Einstellen Standbild

Multimedia
name12-pagedesigner-video.mp4
height280


AudioDient zur Einbindung einer beliebigen Audiodatei. 

Zu den Video-Optionen gehören unter anderem:

  • Autostart
  • Loop Video (Endlosschleife)
  • Mute Video (Tonlos abspielen)
  • Steuerelemente anzeigen


Expand
titleVorschau Audio


Texteditor

Mit dem diesem Editor kann Text in Echtzeit erstellt, formatiert und gestylt werden. 

Nebst den bekannten Standardoptionen (Format, Stil, Absatz, Auflistung usw.) besitzt der Editor weitere Funktionen wie: 

  • HTML-Editor (Quellcode)
  • Hyperlinks erstellen
  • Tabellen 


Expand
titleVorschau Textausgabe


HTML-Include

Innerhalb dieser Komponente kann beliebiger HTML-Code erfasst werden. Am häufigsten werden dazu iframes verwendet, welche es ermöglichen HTML-Inhalt von externen Seiten einzubinden. Beliebte iframes sind Standorte (Google Maps), Wetter-Widgets, Werbung oder Social-Media-Ausschnitte. Für diese Komponente stehen keine Optionen zur Verfügung, da der HTML-Code bereits individuell bearbeitet werden kann.


Expand
titleVorschau HTML-Include (Wetter Widget)


Expand
titleVideo-Tutorial: HTML Include

  • Einfügen von HTML- und JavaScript-Elementen

  • Beispiel Integration von Google Maps

Multimedia
name14-pagedesigner-html-include.mp4
height280


Icon

Kleines Piktogramm/Symbol welches als grafische Schaltfläche (versehen mit einem Hyperlink) oder zu Dekorationszwecken genutzt werden kann. 

Dem Anwender steht eine grosse Auswahl an verschiedenen Icons zur Verfügung. Für jedes Icon können die folgenden Optionen genutzt werden:

  • Verlinkung
  • Ausrichtung (links, rechts, mitte)


Expand
titleVorschau Icon (3 Variationen)


Anker-Navigation

Anker dienen als Sprungmarken. Mittels Klick darauf, landet der Besucher an einer bestimmten Stelle einer Seite (automatisches Scrollen bis zum definierten Abschnitt). Die Anchor Anker Navigation stellt die Anker in Form einer Navigation dar: 

Für die Anker-Navigation gibt es folgende Optionen:

  • Position
  • Ausrichtung (horizontal oder vertikal)
  • Ein- oder Ausblendung des dazugehörigen Icons


Expand
titleVorschau Anker-Navigation


Expand
titleVideo-Tutorial: Anker Navigation

  • Anker-Navigation einfügen und formatieren

  • Anpassung der Farben-Grundeinstellung

Multimedia
name16-pagedesigner-anker-navigation.mp4
height280


Bild

Mithilfe dieser Komponente können Bilder hochgeladen, bearbeitet oder ausgewählt werden. 

Für Bilder existieren diverse Optionen - zu den wichtigsten gehören: 

  • Verlinkung
  • Attribute wie Titel oder alt. Titel
  • Darstellung (Nativ oder Lightbox)


Expand
titleVorschau Beispielbild


Dokument

Dokumente können hochgeladen und/oder ausgewählt werden. Auf der Website werden Dokumente in Form eines Links dargestellt, welcher zur Anzeige (pdf) oder zum automatischen Download der Datei führt.

Jedes Dokument kann mit einem Titel versehen werden. Handelt es sich um eine pdf-Datei, so stehen folgende zusätzlichen Optionen zur Verfügung: 

  • Verlinkung
  • Art der Verlinkung (gleiches Fenster, neues Fenster)


Expand
titleVorschau Dokument (pdf)


SVG

Komponente zur Einbindung von Vektorgrafiken. Da sich dieses Format in allen Auflösungen gestochen scharf darstellen lässt, wird es vor allem für Logos, Illustrationen und komplexe Grafiken empfohlen.Die SVG-Komponente besitzt die gleichen Optionen wie die Bilder-Komponente.  


Expand
titleVorschau Vektorgrafik


Socials

Piktogramme mit Verlinkung auf die Social-Media-Plattformen des Seiteninhabers.

Als Optionen stehen die verschiedenen Plattformen zur Verfügung, welche verlinkt werden können: 

  • Facebook
  • Twitter
  • LinkedIn
  • YouTube


Expand
titleVorschau Socials


Image AddedImage Removed

Die wichtigste Eigenschaft des Togglers ist das Ein- und Ausblenden eines Objekts. Daher wird in den Optionen in erster Linie das betroffene Objekt in Form einer ID hinterlegt. Weitere Optionen sind: 

  • Tooltip
  • Scrolling deaktivieren
    • Ausrichtung (links, rechts, mitte

    Vertrauens-

    Toggler

    		Ein Toggler ist ein "Schalter" zum Ein- und Ausblenden von Elementen. Er besitzt standardmässig die Form eines Burgers. Sobald er aktiviert ist, wird er zum "Close-Button" (Kreuz). Der Toggler wird meistens zum Öffnen von mobilen Navigationen eingesetzt.

    Element

    		Mittels Trust Elementen soll das vertrauen der Seitenbesucher gestärkt werden. Sie bestehen aus zwei Teilen: einem Kurztext (oder Icon) und aus einer Beschreibung.  

    Beim Vertrauenselement können folgende Optionen genutzt werden:

    • Auswahl eines Icons
    • Kurztext
    • Beschreibung (Texteditor)


    Mithilfe dieser Komponente kann eine Bildergalerie erstellt werden. Die Bilder befinden sich in einem definierten Raster und werden nach einem Klick darauf in Form einer Lightbox dargestellt. Galerien können
    Expand
    titleVorschau Toggler (an und aus)

    aus / inaktiv / standard:

    Image Removed

    an / aktiv:

    Image Removed 

    		Image Removed

    Vertrauens-
    Element

    		Mittels Trust Elementen soll das vertrauen der Seitenbesucher gestärkt werden. Sie bestehen aus zwei Teilen: einem Kurztext (oder Icon) und aus einer Beschreibung.  

    Beim Vertrauenselement können folgende Optionen genutzt werden:

    • Auswahl eines Icons
    • Kurztext
    • Beschreibung (Texteditor)
    Expand
    titleVorschau Vertrauenselement (2 Variationen)

    Image Removed

    		Image Removed

    Galerie

    Vertrauenselement (2 Variationen)

    Image Added


    Image Added

    Galerie

    		Mithilfe dieser Komponente kann eine Bildergalerie erstellt werden. Die Bilder befinden sich in einem definierten Raster und werden nach einem Klick darauf in Form einer Lightbox dargestellt. Galerien können gespeichert und wiederverwendet werden. 

    Nebst der wichtigsten Option, der Bilderauswahl, können weitere Einstellungen getroffen werden: 

    • Anzahl Spalten (1-5)
    • Auswahl einer bereits gespeicherten Galerie
    • Reihenfolge der Bilder


    Expand
    titleVorschau Galerie


    Image Removed

    Image Added

    Button

    		Steuerelement in Form einer grafischen Schaltfläche.

    Für Buttons stehen nebst der typischen Verlinkung und Beschriftung diverse Optionen zur Verfügung: 

  • Art der Verlinkung (gleiches Fenster, neues Fenster)
    • Ausrichtung (Slide Gallery    		Mithilfe dieser Komponente kann eine Bildergalerie erstellt werden, welche die Eigenschaften eines Sliders besitzt. Der Inhalt kann per Klick- oder Wischfunktion gesteuert werden. Bilder werden nach einem Klick in einer Lightbox dargestellt. Galerien können gespeichert und wiederverwendet werden. 

    Nebst der wichtigsten Option, der Bilderauswahl, können weitere Einstellungen getroffen werden: 

    • Anzahl Bilder in einer Reihe (1-5)
    • Auswahl einer bereits gespeicherten Galerie
    • Reihenfolge der Bilder
    • Icons für den linken und rechten Navigationspfeil


    Expand
    titleVorschau Slide Gallery

    Image Added


    Image Added

    Button

    		Steuerelement in Form einer grafischen Schaltfläche.

    Für Buttons stehen nebst der typischen Verlinkung und Beschriftung diverse Optionen zur Verfügung: 

    • Art der Verlinkung (gleiches Fenster, neues Fenster)
    • Ausrichtung (links, rechts, mitte)
    • Icon und dessen Position


    Expand
    titleVorschau Button (2 Variationen)


    AnkerAnker dienen als Sprungmarken. Sie können beliebig platziert und mit einer ID versehen werden. Diese ID wird am Ende von Links angehängt, wodurch der Besucher (nach einem Klick) genau an der Stelle der Seite landet, wo der Anker platziert ist. Vor dem Anker im Link, muss immer ein Hashtag (#) stehen. Anker sind auf der Liveversion unsichtbar, können jedoch mithilfe der Anker-Navigation auch grafisch dargestellt werden. 

    Der Hauptbestandteil eines Ankers ist seine ID, daneben können weitere Optionen angewandt werden:

    • Label (für die Anker Navigation)
    • Icon (für die Anker Navigation)

    Da Anker unsichtbar sind, wird hier ein Link (welcher auf einen Anker zeigt) demostriert: 

    Anker ID: textstelle1

    Link: www.max-muster.ch/kontaktformular#textstelle1

    ZitatEin Zitat hebt eine zitierte Textstelle mithilfe von Satzzeichen grafisch hervor.

    Für das existieren 2 Optionen: 

    • Texteingabe 
    • Art der Darstellung (Linie oder Satzzeichen)


    Expand
    titleVorschau Zitat (2 Variationen)


    Expand
    titleVideo-Tutorial: Quote

    • Quote = Aussage einer Person

    • Anwendungsbeispiel Kundenreferenz

    • Quote einfügen und formatieren

    Multimedia
    name15-pagedesigner-quote.mp4
    height280

    anchor


    Expand
    titleÜbersicht Blöcke
       NameBeschreibungVorschau
       Hauptnavigation (linksbündig)Hauptnavigation (Ebene 1 mit Dropdown) linksbündig

    Image Removed

       Hauptnavigation (rechtsbündig)Hauptnavigation (Ebene 1 mit Dropdown) rechtsbündig 

    Image Removed

       Subnavigation
    (linksbündig)    		Subnavigation (ab 2. Ebene) linksbündig

    Image Removed

       Subnavigation
    (rechtsbündig)    		Subnavigation (ab 2. Ebene) rechtsbündig

    Image Removed

    Image Added

    drupal-blocksdrupal-blocks

    1.3 Übersicht - Drupal Blöcke

    Blöcke sind Teile des Gesamtlayouts. Im Pagedesigner finden Sie in dieser Kategorie unter anderem sämtliche Navigationen, welche Sie verwenden können:

       SeparatorMit diesem Element können Seitenabschnitte grafisch gegliedert/abgetrennt werden. Er besitzt standardmässig die Form einer Linie, kann jedoch in den Stylingoptionen verändert werden.  

    Beim Seperator stehen folgende Optionen zur Verfügung: 

    • Ein Icon in der Linienmitte
    • Ein SVG in der Liniemitte
    • Individueller Text in der Linienmitte

    Stylings: 

    • Separatorstyle: (Linie, verbleichende Linie, Schattenlinie)
    • Dicke 
    • Farbe


    Expand
    titleVorschau Separator (Diverse Optionen)

    Image Added

    Image Added

    Image Added

    Image Added


    Image AddedTogglerEin Toggler ist ein "Schalter" zum Ein- und Ausblenden von Elementen. Er besitzt standardmässig die Form eines Burgers. Sobald er aktiviert ist, wird er zum "Close-Button" (Kreuz). Der Toggler wird meistens zum Öffnen von mobilen Navigationen eingesetzt.

    Die wichtigste Eigenschaft des Togglers ist das Ein- und Ausblenden eines Objekts. Daher wird in den Optionen in erster Linie das betroffene Objekt in Form einer ID hinterlegt. Weitere Optionen sind: 

    • Tooltip
    • Scrolling deaktivieren
    • Ausrichtung (links, rechts, mitte)


    Expand
    titleVorschau Toggler (an und aus)

    aus / inaktiv / standard:

    Image Added

    an / aktiv:

    Image Added 


    Image Added

    		Button HideMit einem Klick auf diesen Button, kann ein beliebiges Objekt ausgeblendet werden.
    Anwendungsfall: Schliessbutton für Pop up Meldungen. 

    Die wichtigste Eigenschaft des Hide Buttons ist das Ausblenden eines Objekts. Daher wird in den Optionen in erster Linie das betroffene Objekt in Form einer ID hinterlegt. Weitere Optionen sind: 

    Tooltip
    Scrolling deaktivieren
    Ausrichtung (links, rechts, mitte)


    Expand
    titleVorschau Hide Button (vorher, nachher)

    vorher: 

    Image Added

    nachher: 

    Image Added

    (Textfeld "Lorem ipsum dolor" wurde durch Klick auf den Button (error) ausgeblendet)


    Image Added

    		Button ShowMit einem Klick auf diesen Button, kann ein beliebiges Objekt eingeblendet werden.
    Voraussetzung: Das Objekt muss vorgängig via Stylingoptionen ausgeblendet werden. 

    Die wichtigste Eigenschaft des Show Buttons ist das Einblenden eines Objekts. Daher wird in den Optionen in erster Linie das betroffene Objekt in Form einer ID hinterlegt. Weitere Optionen sind: 

    Tooltip
    Scrolling deaktivieren
    Ausrichtung (links, rechts, mitte)


    Expand
    titleVorschau Show Button (vorher, nachher)

    vorher: 

    Image Added

    nachher: 

    Image Added

    (Textfeld "Infotext" wurde durch Klick auf den Button (info) eingeblendet)


    Image Added

    		Classtoggler

    (info) dieses Element erfordert Grundkenntnisse in HTML &CSS

    Mit dem Classtoggler kann einem Objekt eine beliebige CSS-Klasse angehängt (und wieder entfernt) werden. 
    Er besitzt standardmässig die Form eines Burgers. Sobald er aktiviert ist, wird er zum "Close-Button" (Kreuz)

    Die wichtigste Eigenschaft des Classtogglers ist das Hinzufügen und Entfernen einer CSS-Klasse. Daher wird in den Optionen in erster Linie das betroffene Objekt in Form einer ID hinterlegt und eine Klasse definiert. 

    Weitere Optionen sind: 

    Tooltip
    Scrolling deaktivieren
    Ausrichtung (links, rechts, mitte)

    Beispiel für definierte Klassen: 

    • hidden / show
    • active


    Expand
    titleVorschau Class Toggler (vorher, nachher)

    Classtoggler mit Klasse "hidden" auf Textelement "Infotext"

    vorher 

    Image Added

    nachher: 

    Image Added

    (Textfeld "Infotext" wird mittels Klick aus- und eingeblendet)


    Image Added

    		Hero Banner

    Mit dem Hero Banner können auf jeder Seite Hero Images eingebunden werden. 


    Die Komponente bietet neben vielen optional befüllbaren Feldern wie den Pre- und Subtitel, einem formattierbaren Textfeld und zusätzlichem Button, viele Styling Optionen.

    Beispielsweise können Overlays (zum Beispiel Blur-Effekt oder Farben wie im Screenshot ersichtlich) über das Bild gelegt werden, um die Farbdefinition der Schriften zu vereinfachen. 


    Expand
    titleVorschau Hero Banner

    Image Added


    Image Added

    		Teaser CardDie Teaser Card bietet verschiedene Optionen zur Darstellung von Inhaltsteasern, um Verteilerseiten oder Elemente zu integrieren. Die Komponente bietet viele optionale Felder, die befüllt werden können, sowie diverse Styling-Optionen, um das Styling dem Design anzupassen. 


    Expand
    titleVorschau Teaser Card

    Image Added

    Image AddedImage Added





    Anchor
    drupal-blocks
    drupal-blocks

    1.3 Übersicht - Drupal Blöcke

    Blöcke sind Teile des Gesamtlayouts. Im Pagedesigner findest du in dieser Kategorie unter anderem sämtliche Navigationen, welche du verwenden kannst:

    Expand
    titleÜbersicht Blöcke


       NameBeschreibungVorschau
       Hauptnavigation (linksbündig)Hauptnavigation (Ebene 1 mit Dropdown) linksbündig

    Image Added

       Hauptnavigation (rechtsbündig)Hauptnavigation (Ebene 1 mit Dropdown) rechtsbündig 

    Image Added

       Subnavigation
    (linksbündig)    		Subnavigation (ab 2. Ebene) linksbündig

    Image Added

       Subnavigation
    (rechtsbündig)    		Subnavigation (ab 2. Ebene) rechtsbündig

    Image Added

       Mobile NavigationMobile Navigation (Blockabsatz)



    Anchor
    compositecomposite

    1.4 Übersicht - Zusammengesetzte Komponenten

    Expand
    titleÜbersicht Kompositionen
       NameBeschreibungVorschau   SliderDer Slider zeigt in einem vordefinierten Intervall verschiedene Bilder an

    Image Removed

       Ausklappbares Element

    Elemente, welche in Form von Tabs oder eines Akkordeons auf- und zugeklappt werden können.

    Image Removed

    Image Removed

    FlipboxBestehend aus zwei beliebigen Teilen, welche mittels verschiedenen Effekten unterschiedlich dargestellt werden.  

    Multimedia
    nameflipbox_pd.mp4
    autostarttrue

    composite
    composite

    1.4 Übersicht - Zusammengesetzte Komponenten


    Expand
    titleÜbersicht Kompositionen


       NameBeschreibungVorschau
       SliderDer Slider zeigt in einem vordefinierten Intervall verschiedene Bilder an

    Image Added

       Ausklappbares Element

    Elemente, welche in Form von Tabs oder eines Akkordeons auf- und zugeklappt werden können.

    Image Added

    Image Added

    FlipboxBestehend aus zwei beliebigen Teilen, welche mittels verschiedenen Effekten unterschiedlich dargestellt werden.  

    Multimedia
    nameflipbox_pd.mp4
    autostarttrue

    Modal

    Diese Komponente ermöglicht es, ein Pop up auf der Seite zu integrieren. Es kann entweder auf einen Buttonklick oder beim Laden der Seite direkt erscheinen, des Weiteren sind individuelle Animationen möglich. Es wird nicht instanzweit angezeigt, sondern nur auf der Seite, auf der es integriert ist. Es wird pro Session gespeichert, wenn es einmal geschlossen wurde, damit es nicht erneut angezeigt wird. 

    Die Komponente kann mit allen Elementen nach belieben befüllt werden. 

    Image Added



    Anchor
    forms
    forms

    1.5 Übersicht - Formulare

    Alle erstellten Formulare werden in dieser Kategorie aufgelistet und können auf den Seiten platziert werden: 

    Expand
    titleÜbersicht Formulare


    NameVorschau
    Kontaktformular (Standard)


    Expand
    titleVideo-Tutorial: Webforms

    • Formulare erstellen und einbinden

    • Beispiele: Kontaktformular, Anmeldung, etc.

    Multimedia
    name8-pagedesigner-webforms.mp4
    height280





    -

    Anchor
    einfuegen-bearbeiten
    einfuegen-bearbeiten

    2. Zeilen einbinden und bearbeiten

    In diesem Kapitel lernen Sielernst du, wie Komponenten eingebunden und bearbeitet werden.

    Expand
    titleVideo-Tutorial: Design-Raster

    • Elemente einfügen, verschieben, kopieren, verschachteln

    • Stylings: Einstellungen Mobile, Abstände, Farben, etc.

    Multimedia
    name6-pagedesigner-design-raster.mp4
    height280

    2.1 Zeile einbinden

    Jedes Element (Bild, Text, Button usw.) benötigt einen Behälter/Container, in dem es sich befindet.
    Diese Behälter heissen Zeilen/Rows, und stehen in verschiedenen Layouts zur Verfügung. 

    Info
    iconfalse

     Anleitung

    1. Öffnen Sie Öffne den Pagedesigner und navigieren Sie navigiere zu den Komponenten - die einzelnen Zeilen besitzen die Form von Kacheln.

    2. Wählen Sie Wähle die Kachel mit dem gewünschten Layout und ziehen Sie ziehe sie mit gedrückter Maustaste in den Inhaltsbereich.

    → Bereiche in denen Rows platziert werden dürfen, sind orange und beinhalten den Text "drop-item" 

    3. Sobald die Zeile platziert ist, stehen Ihnen dir die folgende Aktionen zur Verfügung: 



    Anchor
    edit-row
    edit-row

    2.2 Zeilen bearbeiten

    An einer Zeile können fünf verschiedene Optionen angewendet werden.

    Info
    iconfalse

     Anleitung

    1. Klicken Sie Klicke auf die Zeile und wählen Sie wähle zwischen einer der 5 Optionen: 

    Expand
    titleOptionen Row

    1. Mithilfe des Fadenkreuzes können Sie kannst du die Zeile mit gedrückter Maustaste innerhalb der Seite verschieben.

    2. Mit einem Klick auf diesen Pfeil, gelangen Sie gelangst du im (Falle einer Verschachtelung) auf das übergeordnete Element.

    3. Ein Klick auf dieses Icon kopiert die gesamte Zeile (samt Inhalt). Die Kopie erscheint direkt unterhalb des Originals.

    3. Diese Option löscht die Zeile. Aus Sicherheitsgründen muss eine Löschung stets bestätigt werden. 

    4. Falls Sie du eine Zeile (samt Inhalt) auf anderen Seiten verwenden möchtenmöchtest, können Sie kannst du sie als Layout speichern. Nach dieser Aktion stehen sie Ihnen dir in den Komponenten als Kachel zur Verfügung. 

    Expand
    titleVideo-Tutorial: Layouts

    • Layouts = Ansammlung an verschiedenen Elementen

    • Layouts erstellen, abspeichern, bearbeiten und einfügen

    Multimedia
    name7-pagedesigner-layouts.mp4
    height280





    Anchor
    place-element
    place-element

    2.3 Element in Zeile einfügen

    Sobald Ihre deine Zeile platziert ist, können Sie kannst du sie mit Elementen ihrer deiner Wahl befüllen. Nebst Elementen können Sie kannst du übrigens auch weitere Zeilen in eine Zeile integrieren (verschachteln). 

    → Eine Übersicht sämtlicher Elemente, finden Sie findest du in den Kapiteln 1.2 - 1.5

    Info
    iconfalse

     Anleitung

    1. Öffnen Sie Öffne den Pagedesigner und navigieren Sie navigiere zu den Komponenten - wählen Sie wähle ein Element aus.

    2. Ziehen Sie  Ziehe das gewünschte Element mit gedrückter Maustaste in den Inhaltsbereich (Zelle) einer Zeile.

    Expand
    titleDas Innere einer Row

    Bereiche innerhalb von Zeilen, wo Elemente platziert werden können heissen "Cell/Zelle". 

    Ansicht einer 2/3 - 1/3 Row mit den darin enthaltenen Zellen


    In die linke Zelle wird das Element "Icon" eingebunden. Eine grüne Linie markiert die Zielposition.


    Befinden sich bereits Elemente in einer Zelle, so können weitere Elemente darüber oder darunter eingefügt werden:

    Das Element "Texteditor" wird unterhalb des Elements "Icon" eingefügt. Die Platzierung wird wiederum mit einer grünen Linie markiert. 

    3. Sobald das Element platziert ist, können Sie kannst du es editieren.




    Anchor
    editieren
    editieren

    3. Komponenten editieren

    In diesem Kapitel lernen Sielernst du, wie Komponenten editiert werden resp. wie der eigentliche Inhalt generiert wird.

    Expand
    titleVideo-Tutorial: Bearbeitungsmodus

    Multimedia
    name5-pagedesigner-bearbeitungsmodus.mp4
    height280

    Sobald Sie du Elemente auf der Seite platziert habenhast, können Sie kannst du in der rechten Werkzeugleiste auf das Bleistift-Icon klicken, um in den Editiermodus zu gelangen. 

    → Elemente besitzen zumeist unterschiedliche Eigenschaften. Dementsprechend stehen Ihnen dir diverse Editier-Werkzeuge zur Verfügung: 

    Anchor
    dateiupload
    dateiupload

    3.1 Dateien hochladen und einbinden 

    → Wird verwendet bei: Videos, Bilder, Dokumente, SVG, Youtube Video, Galerie

    Info
    iconfalse

     Anleitung

    1. Öffnen Sie Öffne den Editiermodus einer Komponente mit integriertem Dateimanager

    2. Klicken Sie Klicke auf den Button, welcher zum Upload führt (Dokument auswählen, Bild auswählen usw.) → es öffnet sich der Dateimanager

    Expand
    titleAnsicht Dateimanager

    3. Der Upload findet im linken Teil der Maske statt - nutzen Sie nutze eine der beiden Möglichkeiten um eine Datei hochzuladen:

    Expand
    titleMöglichkeiten Datei Upload

    Möglichkeit 1: Ziehen Sie  Ziehe die Datei direkt von ihrem Dateimanager deinem Dateiexplorer in den markierten Bereich: 

    Möglichkeit 2: Klicken Sie Klicke in den markierten Bereich, woraufhin sich ihr Dateimanager dein Dateiexplorer öffnet und Sie du die gewünschte Datei auswählen könnenkannst:

    4. Sobald die Datei hochgeladen ist, landet sie in der Dateiübersicht im rechten Teil der Maske.

    5. Mittels einfachem Klick auf eine Datei, blenden Sie blendest du die Dateioptionen ein → passen Sie passe sie bei Bedarf an:

    Expand
    titleÜbersicht Dateioptionen


    OptionBeschreibungBetroffene Komponenten
    NameDer DateinameBild, Video, Dokument, SVG, Youtube-Video
    Video URLDie URL der Datei (Youtube-Link)Youtube-Video
    KategorieDient der Kategorisierung in der Dateiübersicht. Es kann entweder eine neue Kategorie erstellt, oder eine bestehende zugeordnet/ausgewählt werden. Wenn du mehrere Kategorien hinzufügen willst, kannst du diese mit einem Komma (ohne Leerzeichen) trennen. Bild, Video, Dokument, SVG, Youtube-Video
    Alternativer TextEine kurze Beschreibung des Bildes , die von Screenreadern verwendet wird und angezeigt wird, wenn das Bild nicht geladen werden kann. Dies ist kann. Dieser Text kann von Screenreadern gelesen werden, was wichtig für die Barrierefreiheit.Bild
    Video fileFalls das Video ersetzt werden soll, kann hier ein neues File hochgeladen werden. Video


    6. Mittels Doppelklick auf die Datei, wird sie auf der Seite eingebunden.



    Anchor
    embed-url
    embed-url

    3.2 URL einbinden (Youtube)

    → Wird verwendet bei: Youtube Video

    Expand
    titleVideo-Tutorial: Youtube Video

    • Einbinden eines YouTube-Videos

    • Integration von einem oder mehreren Videos

    • Formatierung

    Multimedia
    name11-pagedesigner-youtube.mp4
    height280


    Info
    iconfalse

     Anleitung

    1. Kopieren Sie  Kopiere vorgängig die URL des Youtube Videos, welches Sie du einbinden möchtenmöchtest.

    2. Klicken Sie  Klicke auf die platzierte Youtube-Komponente und öffnen Sie öffne den Editiermodus - klicken Sie klicke auf den Button: Auswählen: einbetten

    3. Kopieren Sie  Kopiere eine oder mehrere URLs in das Textfeld am linken Seitenrand (1 URL pro Zeile)

    Expand
    titleAnsicht: URL einfügen

    4. Klicken Sie Klicke auf Upload links

    5. Einbindung und Verwaltung verhalten sich gleich wie bei Dateien (Kapitel 3.1)




    Anchor
    texeditor
    texeditor

    3.3 Texteditor 

    → Wird verwendet bei: Texteditor, Vertrauenselement, Zitat, Ausklappbares Element

    Expand
    titleVideo-Tutorial: Texteditor

    • Text einfügen und editieren

    • Formatierungen

    • Link setzen

    Multimedia
    name13-pagedesigner-formatable-text.mp4
    height280


    Info
    iconfalse

     Anleitung

    1. Öffnen Sie  Öffne den Editiermodus einer Komponente mit integriertem Texteditor

    2. Erfassen Sie  Erfasse Text im Editor → Ihr Inhalt wird auf der Seite in Echtzeit dargestellt:

    Expand
    titleAnsicht Texteditor und Seiteninhalt

    3. Nutzen Sie  Nutze die verschiedenen Werkzeuge, welche der Texteditor beinhaltet:

    Expand
    titleWerkzeuge Texteditor



    		InformationenAnwendung

    		Hyperlink erstellen

    1. Markieren Sie Markiere die Textstelle, welche Sie du verlinken möchten möchtest und klicken Sie klicke auf das Hyperlink-Symbol.

    2. Suchen Sie Suche nach einer internen Ziel-URL oder fügen Sie füge eine externe URL (inkl. http/https) ein. Sobald der Link eingegeben wurde, erscheint er in einem Dropdown darunter, es ist WICHTIG, dass Sie du darauf klicken klickst und den Link somit bestätigenbestätigst. 

    3. Setzen Sie Setze den Linktitel (Tooltip).

    4. Öffnen Sie Öffne den Reiter "Erweitert" und wählen Sie wähle aus, ob der Link in einem neuen Fenster geöffnet werden soll oder nicht. 

    		Hyperlink entfernenMarkieren Sie Markiere den Link, welchen Sie du entfernen möchten möchtest und klicken Sie klicke anschliessend auf das Symbol. 

    		Tabelle

    1. Klicken Sie Klicke auf das Tabellen-Symbol und definieren Sie definiere in der darauf folgenden Maske die Anzahl Spalten und Zeilen sowie Ausrichtung, Breite und Titel → klicken Sie klicke auf OK

    2. Befüllen Sie Befülle die Tabelle im Texteditor mit Inhalt

    		Ansicht QuellcodeMit einem Klick auf dieses Symbol wechseln Sie wechselst du in die Quellcode-Ansicht. Falls Sie du mit HTML vertraut sindbist, können Sie kannst du Änderungen innerhalb dieser Ansicht vornehmen.  

    		Editor vergrössernDieses Symbol führt zur Vollbildansicht der Editors

    		Absatzformat

    Markieren Sie Markiere eine Textstelle und wählen Sie wähle zwischen verschiedenen Absatzformaten aus: 

    -Überschriften 1-6
    -Formatiert
    -Normal

    → Die Stylings dafür haben Sie hast du im "Design - Kapitel Typographie" definiert

    		Schriftstil

    Markieren Sie Markiere eine Textstelle und wenden Sie wende einen Schriftstil an: 

    -Heading 1-6 (sehen aus wie die Überschriften 1-6 aber ohne das Format)
    -Lead Text (der Lead befindet sich meist zwischen Titel und Text)
    -Small Text (das Kleingedruckte)
    -Deco Font 1-3 (Schriften zu Dekorationszwecken)

    → Die Stylings dafür haben Sie hast du im "Design - Kapitel Typographie" definiert


    4. Speichern Sie den Speichere  den erfassten Inhalt (Save)



    Anchor
    icon-auswahl
    icon-auswahl

    3.4 Icon-Auswahl

    → Wird verwendet bei: Icon, Vertrauenselement, Button, Anker, Slider, Ausklappbares Element

    Info
    iconfalse

     Anleitung

    1. Öffnen Sie  Öffne den Editiermodus einer Komponente mit integrierter Icon-Asuwahl

    2. Scrollen Sie  Scrolle durch die verschiedenen Icons oder nutzen Sie nutze den Textfilter: 

    Expand
    titleAnsicht Icon-Auswahl und Filter

    Anwendung Filter:

    3. Klicken Sie Klicke auf das gewünschte Icon

    4. Bei Bedarf können Sie kannst du das Icon verlinken



    Anchor
    toggler
    toggler

    3.5 Toggler

    → Wird verwendet bei: Toggler, Hide Button, Show Button, Classtoggler

    Info
    iconfalse

     Anleitung → Beispiel (Bild mittels Toggler ein- und ausblenden)

    1. Platzieren Sie  Platziere den Toggler auf der Seite

    2. Platziere Sie eine neue Zeile auf der Seite

    3. Innerhalb dieser Zeile, platzieren Sie platzierst du das Bild, welches mithilfe des Togglers ein- und ausgeblendet werden soll. 

    4. Klicken Sie Klicke auf die Zeile, öffnen Sie öffne die Komponenten-Stylings, kopieren Sie kopiere die Komponenten-ID heraus und blenden Sie blende anschliessend die gesamte Zeile aus:

    Expand
    titleKomponenten-ID

    1. Zeile, in der sich das Bild befindet und welche mithilfe des Togglers ein- und ausgeblendet werden soll

    2. Komponenten-Stylings einblenden

    3. Komponenten-ID (#pd-cp-Nummer)

    4. Zeile ausblenden

    5. Klicken Sie Klicke nun auf den Toggler, wechseln Sie wechsle in den Editiermodus (Bleistift-Icon) und fügen Sie füge die ID in das Feld "Die ID der Zielkomponente"

    Expand
    titleKomponenten-ID einfügen

    6. Nun wird das Bild mit Klicks auf den Toggler ein- und ausgeblendet:

    Expand
    titleAnsicht Toggler (an und aus)




    3.5 Anchor/Anker

    → Wird verwendet bei: Anker, (Anker-Navigation)

    Info
    iconfalse

     Anleitung 

    1. Platzieren Sie  Platziere den Anker an der gewünschten Position der Seite (wo Sie du anschliessend automatisch hingelangen möchtenmöchtest)

    2. Öffnen Sie  Öffne den Editiermodus und setzen Sie setze die Anker-ID → am besten kleingeschrieben und ohne Leerschläge (verwenden Sie verwende stattdessen Bindestriche) 

    3. Fügen Sie Füge bei Bedarf Label & Icon hinzu (wird nur in der Anker-Navigation angezeigt). 

    Anker ansteuern:

    4. Erstellen Sie Erstelle einen Link und fügen Sie füge am Ende der URL ein Hashtag und die Anker ID ein:

    Beispiel Anker-ID: kapitel-5

    Beispiel URL: www.max-muster.ch/dokumentation#kapitel-5

    Wichtig: befindet sich der Anker auf der gleichen Seite, so muss in der Linkmaske lediglich #kapitel-5 eingegeben werden: 

    Image Added




    3.6 Favoriten

    Komponenten, welche Sie du oft und gerne verwendenverwendest, können als Favoriten markiert werden, wodurch sie zuoberst in der Auswahl erscheinen: 

    Info
    iconfalse

     Anleitung 

    1. Öffnen Sie  Öffne die Komponenten-Auswahl und klicken Sie klicke auf das jeweilige Stern-Icon um eine Komponente als "Favorit" zu markieren.

    Die Kategorie "Favoriten" erscheint in der Auswahl: 

    2.  Mittels Klick auf das Stern-Icon eines Favoriten, wird die Markierung wieder aufgehoben.




    4. Komponenten stylen

    In diesem Kapitel lernen Sielernst du, wie Komponenten gestylt werden.

    Expand
    titleVideo-Tutorial: Design-Raster

    • Elemente einfügen, verschieben, kopieren, verschachteln

    • Stylings: Einstellungen Mobile, Abstände, Farben, etc.

    Multimedia
    name6-pagedesigner-design-raster.mp4
    height280

    Sobald Sie du Zeilen und Elemente auf der Seite platziert habenhast, können Sie kannst du in der rechten Werkzeugleiste auf das Pinsel-Icon klicken, um die Stylingoptionen anzuzeigen.  

    → Elemente besitzen zumeist unterschiedliche Eigenschaften. Dementsprechend stehen Ihnendir diverse Editier-Werkzeuge zur Verfügung: 

    4.1 Übersicht der Stylings

    4.1.1 Globale Optionen

    Expand
    titleÜbersicht Globale Optionen


    NameBeschreibungVorschau
    Für Druck ausblendenFalls
    Sie
    du Seiten
    besitzen
    besitzt, welche in Form eines PDFs oder als Druckversion zur Verfügung stehen sollen,
    können Sie
    kannst du Komponenten ausblenden lassen. Diese Funktion wird meistens verwendet, sobald sich eine grössere Grafik auf der Seite befindet, welche die Drucker Ressourcen unnötig verbrauchen würde. 


    Expand
    titleVorschau: Für Druck ausblenden

    Beispiel: Element Bild für Druck ausgeblendet

    Ansicht Website: 

    Image Modified

    Ansicht PDF: 

    Image Modified


    InvertiertElement wird in invertierten Farbe angezeigt. Sämtliche Farben
    können Sie
    kannst du in Design-Einstellungen - Kapitel "Farben" definieren und ändern. 
    LeadtextElement wird in Form eines Leadtextes angezeigt. Sämtliche
    Schriftarten können Sie
    Schriftarten kannst du in Design-Einstellungen - Kapitel "Typography" definieren und ändern. 
    Text kleinElement wird in kleinerer Schriftgrösse angezeigt. Sämtliche
    Schriftarten können Sie
    Schriftarten kannst du in Design-Einstellungen - Kapitel "Typography" definieren und ändern. 


    4.1.2 Responsive Optionen

    Für Responsive Optionen stehen Ihnen dir jeweils drei verschiedene Varianten zur Verfügung. Diese Varianten stellen die Grösse der betroffenen Endgeräte dar: Desktop, Tablet oder Mobile. 

    Die Optionen können für die 3 Grössen spezifisch gesetzt werden:

    → Möchten Sie Möchtest du beispielsweise eine Komponente auf mobilen Geräten ausblenden so können Sie kannst du bei der Option "Komponente ausblenden" die Checkbox mit dem Mobile-Icon aktivieren. 

    Expand
    titleÜbersicht: Responsive Optionen


    NameBeschreibungVorschau
    Volle BreiteDie Zeile besitzt keine Seitenränder mehr und nimmt die gesamte Breite der Seite ein. 


    Expand
    titleVorschau: Volle Breite

    → Vergleich einer gewöhnlichen Zeile (oben) und einer Zeile in voller Breite (unten)


    Kein AussenabstandEntfernt die Seitenabstände von den einzelnen Zellen.


    Expand
    titleVorschau: Kein Aussenabstand

    → Dreispaltiges Layout mit Abständen (oben) und ohne Abständen (unten)


    Kein Einzug
    Sorgt bei Verschachtelungen dafür, dass alle darin enthaltenen Elemente nicht eingerückt werden. 
    → Option muss lediglich auf der äussersten Zeile angewendet werden


    Expand
    titleVorschau: Kein Einzug

    → Vierfach verschachteltes Bild (links) wird standardmässig eingerückt 
    → Vierfach verschachteltes Bild (rechts) wird nicht eingerückt unter Anwendung von "kein Einzug" 


    Komponente ausblendenKomponente wird ausgeblendet. 
    → Diese Option wird standardmässig bei den Navigationen angewendet: Die Mobilenavigation ist auf Desktop-Geräten unsichtbar und erscheint erst ab der Grösse eines Tablets. 


    Expand
    titleVorschau: Komponente ausblenden

    → Im Editiermodus werden ausgeblendete Elemente leicht transparent dargestellt, damit sie gleichwohl editiert werden können. 



    4.1.2 Einfache Styling Optionen

    Sämtliche Farben, welche in diesen Optionen zur Verfügung stehen, können Sie  kannst du in den Design-Einstellungen - Kapitel "Farben" definieren & ändern.

    Expand
    titleÜbersicht: Einfache Styling Optionen


    NameBeschreibungVorschau
    HintergrundfarbeDie Hintergrundfarbe einer Zeile


    Expand
    titleVorschau: Hintergrundfarbe

    Image Modified


    SchriftfarbeDie Schriftfarbe


    Expand
    titleVorschau: Schriftfarbe

    Image Modified


    Dekoration Kante (oben)

    Winkel der oberen Kante:

    20° Winkel (rechts nach links)
    40° Winkel (rechts nach links)
    20° Winkel (links nach rechts)
    40° Winkel (links nach rechts)


    Expand
    titleVorschau: Dekoration Kante (oben)

    Image Modified

    → Bild 1: Angeled (2 deg)
    → Bild 2: Reverse Angeled (4 deg) 


    Dekoration Kante (unten)

    Winkel der unteren Kante:

    20° Winkel (rechts nach links)
    40° Winkel (rechts nach links)
    20° Winkel (links nach rechts)
    40° Winkel (links nach rechts)


    Expand
    titleVorschau - Bottom Border Decoration

    Image Modified

    → Bild 1: Angeled (4 deg)
    → Bild 2: Reverse Angeled (2 deg)



    4.1.3 Effekte und Animationen

    → siehe Dokumentation Effekte

    4.1.4 Erweiterte Styling Optionen

    Die Erweiterten Styling Optionen werden nur Nutzern mit CSS-Kenntnissen empfohlen. 


    5. Inhaltsstruktur (Ebenen)

    Dieses Werkzeug hilft Ihnendir, das Seitenlayout zu untersuchen. 

    Expand
    titleVideo-Tutorial: Layers

    • Auflistung aller Elemente pro Seite

    • Ebenen / Bereiche ein- und ausblenden

    • hilfreich bei komplexen Strukturen

    Multimedia
    name9-pagedesigner-layers_0.mp4
    height280

    In der Inhaltsstruktur befinden sich die verschiedenen Ebenen, welche durch Komponenten und deren Verschachtelung entstehen.

    → Klicken Sie Klicke in der rechten Werkzeugleiste auf das Struktur-Icon, um die verschiedenen Ebenen anzuzeigen.  

    5.1 Aufbau

    Der Aufbau der Struktur erfolgt von oben nach unten und enthält jeden einzelnen Baustein: 

    Expand
    titleBeispiel Übersicht von Ebenen

    Ansicht im Seiteneditor:

    Ansicht der Ebenen: 

    1. Container: Der Container umschliesst den gesamten Seiteninhalt und ist stets das oberste/äusserste Element.

    2. 2-Spaltiges Layout.

    3. Linke Zelle.

    4. Linkes Bild innerhalb der Zelle.

    5. Rechte Zelle.

    6. Rechtes Bild innerhalb der Zelle.

    7. Mit einem Klick auf die Augen-Icons, können Sie kannst du Ebenen ein- und ausblenden.




    5. Seiteneinstellungen

    Mit einem Klick auf dieses Icon landen Sie landest du direkt in den jeweiligen Seiteneinstellungen. 

    Eine detaillierte Beschreibung der Eigenschaften finden Sie findest du in der Seitenbaum-Dokumentation (Kapitel 2)



    6. Medienmanager

    Der Medienmanager dient der Verwaltung von sämtlichen Dokumenten. Sie haben Du hast die Möglichkeit, Dateien im Manager hochzuladen, zu bearbeiten, zu kategorisieren oder zu löschen. Anschliessend stehen sie innerhalb von Datei-Komponenten (z.B Bild oder Video) in der Auswahl zur Verfügung. 

    → Eine detaillierte Beschreibung der Anwendung finden Sie findest du im Kapitel 3.1 - Dateien hochladen und einbinden.

    6.1 Erweiterte Filtermöglichkeiten

    Im Medienmanager haben Sie hast du die Möglichkeit, Dateien nach ihrem Typ oder ihrer Kategorie zu filtern:

    Expand
    titleAnsicht Filteroptionen im Asset Manager




    7. Publizieren und Depublizieren

    Sie haben Du hast die Möglichkeit, Seiten direkt im Pagedesigner zu publizieren oder zu depublizieren:

    Info
    iconfalse

     Anleitung 

    1. Mit einem Klick auf das Publish-Icon öffnet sich eine neue Maske - klicken Sie klicke auf "Inhalt veröffentlichen"

    2. Mit einem Klick auf das Unpublish-Icon öffnet sich eine neue Maske - klicken Sie klicke auf "Inhalt archivieren"

    3. Kontrollieren Sie  Kontrolliere im Seitenbaum ob sich der Publikationsstatus der Seite aktualisiert hat.

    grün: Seite ist publiziert/live

    rot: Seite ist depubliziert

    → Weitere Informationen zu den Publikationsstati finden Sie findest du in der Seitenbaum-Dokumentation - Kapitel 4.



    ...