Dokumentation und Tutorials iqual Drupal PageDesigner

Der iqual PageDesigner für Drupal ist eine benutzerfreundliche Oberfläche zur Bedienung von Websites, welche auf der Basis von Drupal erstellt wurden. Eine Einführung in den PageDesigner bietet untenstehendes PDF. Zum iqual PageDesigner und den entsprechenden Komponenten finden Sie unten einige Video-Tutorials.

iqual PageDesigner für Drupal 8 - Videotutorials

PageDesigner Einführung

  • Log-in
  • Vorstellung Seitenbaum
  • Vorstellung Editor-Modus

Theme Aufbau

  • Meta-Header-Navigation
  • Navigationsbereich
  • Slider
  • Inhaltsbereich
  • Footer

Seitenbaum

Bereich Main Navigation

  • Alle Seiten erscheinen in Hauptnavigation
  • Mehrsprachigkeit
  • Optionen: neue Seite erstellen, Seite bearbeiten, Settings, Publizierungsstatus etc.

Bereich PageDesigner parts

  • Seitenübergreifende Einstellungen für Header- und Footer-Elemente

Theme Einstellungen

  • Farben, Schriften und Grundeinstellungen

PageDesigner Bearbeitungsmodus

Editier-Modus

  • Buttons oben links: Desktop, Tablet, Mobile
  • Buttons oben rechts: Hilfslinien Fullscreen, Editier-Modus schliessen
  • rechte Seite: Einfügen Block-Elemente, Inhaltselemente, Stylings, Layers, Page settings, Asset manager

Webseite erstellen: Beispiel Elemente einfügen

 

PageDesigner Design-Raster

Erklärung Raster-Aufbau

  • Elemente einfügen, verschieben, kopieren, verschachteln
  • Stylings: Einstellungen Mobile, Abstände, Farben, etc.

PageDesigner Layouts

  • Layouts = Ansammlung an verschiedenen Elementen
  • Layouts erstellen, abspeichern, bearbeiten und einfügen

PageDesigner Webforms

  • Formulare erstellen und einbinden
  • Beispiele: Kontaktformular, Anmeldung, etc.

PageDesigner Layers

  • Auflistung aller Elemente pro Seite
  • Ebenen / Bereiche ein- und ausblenden
  • hilfreich bei komplexen Strukturen

PageDesigner YouTube

  • Einbinden eines YouTube-Videos
  • Integration von einem oder mehreren Videos
  • Formatierung

PageDesigner Video

  • Hochladen von Videos
  • YouTube-Video: siehe separates Tutorial
  • Einstellen Standbild

PageDesigner Formatable Text

  • Text einfügen und editieren
  • Formatierungen
  • Link setzen

PageDesigner HTML-Include

  • Einfügen von HTML- und JavaScript-Elementen
  • Beispiel Integration von Google Maps

PageDesigner Quote

  • Quote = Aussage einer Person
  • Anwendungsbeispiel Kundenreferenz
  • Quote einfügen und formatieren

PageDesigner Anker Navigation

  • Anker-Navigation einfügen und formatieren
  • Anpassung der Farben-Grundeinstellung