Website ausdrucken
Wenn Sie die pixel.cube Helpsite mit allen Inhalten ausdrucken wollen, dann können Sie das hier machen. Auf dieser Seite befinden sich alle Inhalte der Menüpunkte „Module“ und „Inhaltseditor“.
Wir bitten aber dennoch vom Ausdrucken der Anleitung abzusehen, denn wie auch der pixel.cube ständig weiterentwickelt wird, werden auch die Anleitungen hier stetig erweitert und ergänzt.
Bitte denken Sie auch an die Umwelt.
pixel.cube Helpsite
Der von pixelpoint entwickelte WordPress pixel.cube ist ganz einfach selbst zu bedienen. Um es noch einfacher zu machen und auch, weil es manchmal gut ist, nachsehen zu können, finden Sie auf dieser Helpsite die wichtigsten Anleitungen für das Arbeiten mit dem pixel.cube zusammengefasst.
Sollte es trotzdem zu Unklarheiten und/oder Fragen kommen, stehen wir gerne unter wordpress@pixelpoint.at für Support bereit!
Inhaltsübersicht
Module
Eine pixel.cube Website besteht meist aus mehreren Modulen, die unterschiedlichste Funktionen zur Verfügung stellen.
Die meisten Module sind im WordPress Backend in der Navigation auf der linken Seite eingetragen und können von dort aus bedient werden.
Der Header-Bereich
Der Header-Bereich einer Website ist der oberste Bereich, der mit einem oder mehreren Bildern oder einer Video-Animation gestaltet werden kann. Zusätzlich kann der Header-Bereich mit einem kurzen Text versehen werden. Wenn mehrere Bilder im Headerbereich sind, spricht man von einem Slider.
Der Slider kann Inhaltsbreite oder volle Breite haben. Bei voller Breite kann der Slider über die volle oder halbe Höhe erstreckt werden. Das genaue Erscheinungsbild kann je nach Konfiguration der Website variieren.
Der übliche Slider ist der Bilder- und Videoslider. Es ist aber auch möglich, News (Aktuelle Beiträge), eine Animation oder eine Google Maps Karte im Seitenkopf anzuzeigen.
Tipp
Sollten Animationen im Headerbereich gewünscht werden: Diese müssen individuell vom pixelpoint-Team für die jeweillige Website entwickelt werden und stehen nur dann zur Verfügung.
Eine Google Maps-Karte im Seitenkopf erfordert ein Google Maps-Konto mit Schlüssel. Außerdem ist zu beachten, dass die DSGVO vorschreibt, dass eine Karte erst nach expliziter Zustimmung des Users angezeigt wird. Das ist im Headerbereich problematisch, denn dann ist der Kartenbereich das erste, was der User sieht. Eine solche Karte sollte daher nicht auf der Startseite angezeigt werden. Allgemein empfiehlt es sich, eine notwendige Karte eher im unteren Seitenbereich einzubauen.
Bei einem Bild- und Video-Slider kann ausgewählt werden, ob Elemente in der Reihenfolge dargestellt werden sollen, in der sie (siehe weiter unten) angegeben oder jedes Mal neu und zufällig gemischt werden. Außerdem kann die Wechselgeschwindigkeit angegeben werden:
Bei den einzelnen Slider-Elementen kann links ein Bild oder Video gewählt werden (bei einem Video muss „Hintergrund“ rechts auf „Video“ umgestellt werden.
Über dem Bild/Video kann ein Text eingeblendet werden: Ein primärer Titel und ein darunterliegender Text an einer gewählten Position. Außerdem kann ein Link zu einer Unterseite oder externen Seite gesetzt werden. Ein Klick auf das Bild oder den Text führt den User dann an dieses definierte Ziel.
Mit „Bild oder Video hinzufügen“ können dem Slider weitere Elemente hinzugefügt werden.
Aktuelles
News-Beiträge werden in pixel.cube-Websites üblicherweise „Aktuelles“ genannt, können aber je nach Kundenwunsch auch anders benannt werden (z.B. Kunden-News oder Ankündigungen).
Sie werden nicht als Seiten, sondern als eigener Beitragstyp verwaltet:
Die Aktuelles-Beiträge besitzen nicht den vollen Header-Slider der Websites, sondern nur ein Titelbild. Sonst benutzen sie denselben Inhaltseditor mit allen zur Verfügung stehenden Elementen.
Aktuelles-Beiträge können über den Block „Aktuelle Beiträge“ in eine bestehende Website (oft auf der Startseite) eingebunden werden und/oder auf einer eigenen Archivseite angezeigt werden (Die Adresse kann je nach Website variieren).
Bei Klick auf den Beitrag wird dieser in einer Detailseite mit den im Inhaltseditor definierten Inhalten geöffnet.
Der Aktuelles-Bereich bietet noch ein paar zusätzliche Einstellungsmöglichkeiten:
Unter „Schlagwörter“ können Kategorien erstellt werden, die bei den Aktuelles-Beiträgen ausgewählt werden können und der Filterung dienen.
Unter „Detailseite“ wird definiert, ob ein allgemeiner Text auf der Detailseite jedes Beitrags angezeigt werden soll und entschieden, wie groß das Header-Bild dargestellt wird und ob eine Seitenleiste angezeigt werden soll.
Unter „Übersichtsseite“ wird definiert, wie eine etwaige Archiv-Seite der Beiträge aussehen soll.
Hier kann
- ein Header wie auf einer normalen Website definiert werden,
- eingestellt werden, ob eine Seitenleiste angezeigt werden soll und
- ob ein beschreibender Inhalt vor/nach der Beitragsliste angezeigt werden soll. Dieser wird mit dem üblichen Inhaltseditor erstellt.
Unter „Einstellungen“ kann noch ein Standard-Bild definiert werden, das verwendet wird, wenn ein Beitrag kein eigenes Bild besitzt.
Veranstaltungen
Veranstaltungen sind vergleichbar mit den Aktuelles-Beiträgen ein eigener Beitragstyp, mit Archivseite, Detailseiten und der Möglichkeit, mit dem „Veranstaltungen“-Block in eine Seite integriert zu werden.
Die wichtigste Eigenschaft für eine Veranstaltung ist „Datum und Uhrzeit“, mit dem das Datum oder der Zeitraum festgelegt werden kann, in dem die Veranstaltung stattfindet. Auch wiederkehrende Termine sind möglich.
Darüber hinaus wird ein Titelbild für die Detail- und Listenansicht, ein Beschreibungstext und optional ein Veranstalter und Veranstaltungsort definiert.
Basierend auf diesen Daten werden die Veranstaltungen dargestellt und können auch gefiltert werden.
Wie bei Aktuelles können auch bei den Veranstaltungen die einleitenden Texte für die Archiv- und Detailseiten definiert werden und gewählt werden, ob eine Seitenleiste angezeigt werden soll oder nicht.
Bildverwaltung
Bei Bildern hat man üblicherweise die Option ein Bild aus der Mediathek zu wählen oder eine neue Datei hochzuladen.
Wenn eine Datei neu hochgeladen wird, sollte sie vorher in einem Bildbearbeitungsprogramm korrekt beschnitten werden:
- Bilder, die über die ganze Bildbreite angezeigt werden sollen (z.B. Header-Bilder) sollten zumindest 1920px breit sein.
- Eine vorherige Komprimierung ist aber nicht notwendig, das erledigt das System beim Hochladen automatisch.
Tipp
Tipp
Wenn ein Bild ausgewählt wird, entweder aus der Mediathek oder nachdem es gerade hochgeladen wurde, werden auf der rechten Seite die Eigenschaften des Bildes angezeigt und können auf Wunsch ergänzt werden. Zumindest ein verständlicher Titel sollte immer eingegeben werden.
- Der Alternativtext kommt zum Einsatz, wenn das Bild aus irgendeinem Grund nicht dargestellt werden kann. Er ist nicht zwingend notwendig, diesen Text einzugeben, aber ein Alternativtext erhöht die Barrierefreiheit. Er sollte beschreiben, was man auf dem Bild sieht, als würde man jemand anderem das Bild erklären.
- Unter Image Crop Focus kann man den Bildfokus festlegen. Mit Klick+Halten im Bild bei den roten Linien kann der Fokus verschoben werden.
Wie auch immer das Bild automatisiert zugeschnitten oder skaliert wird, das System wird immer versuchen, den Fokus sichtbar zu halten. Daher empfiehlt es sich, diesen zum Beispiel auf die Köpfe von Personen zu legen.
Wenn die Bildrechte-Einstellungen für die Website aktiviert sind, können auch diese hinterlegt werden. Sie werden dann auf der Website beim Bild automatisiert angezeigt und sorgen damit für Rechtssicherheit.
pixel.cube Inhaltseditor
Im sog. Inhaltseditor kann eine Folge verschiedener Elemente (Blöcke oder Layouts genannt) auf einer Website untereinander angeordnet werden. Er hilft dabei, dass die Inhalte einer Website geordnet-abwechslungsreich dargestellt werden können.
Neuen Block hinzufügen, einen Block löschen oder verschieben
Ein neuer Block kann über „Inhaltsblock hinzufügen“ am unteren Ende des Editors hinzugefügt werden oder, wenn bereits Blöcke vorhanden sind, über das + Symbol oberhalb des bestehenden Blocks eingefügt werden.
Ein bestehender Block kann auch über das – Symbol gelöscht oder über das Kopieren-Symbol dupliziert werden.
Klick+Halten auf den grauen Kopfbereich eines Blocks erlaubt es den Block „Drag & Drop“ innerhalb der Seite berliebig nach oben oder unten zu verschieben.
Es gibt eine große Auswahl verschiedener Blöcke im Inhaltseditor (Text, Text & Bild, Galerie etc.). Aber: Nicht alle davon sind auf jeder Website verfügbar. Um die Übersichtlichkeit zu wahren, werden nur die für die jeweilige Seite notwendigen Blöcke aktiviert.
Inhaltsblock: Text
Der Textblock ist einer der absoluten Basis-Inhaltsblöcke – ein Basic für Contenterstellung, denn: mit diesem Block können Text-Inhalte (und in beschränktem Maß Bildinhalte) über einen Word-ähnlichen Texteditor erfasst und gestaltet werden.
Tipp
Wichtig sind hier die Wahl Absatz/Überschrift (links oben) und Formate (darunter).
Textformatierung
Wenn man einen Text markiert, kann man links oben wählen, ob es sich um einen
- normalen Fließtext (Absatz) oder
- eine Überschrift handelt.
Diese Auswahl sollte nicht zur Formatierung genutzt werden, sondern zur semantischen Einordnung.
Überschriften-Hierarchie
Anders als bei der „normalen“ Gestaltung von Texten wie z.B. in Word, ist es wichtig, auf Websites die sogenannte Überschriften-Hierarchie einzuhalten – darum sind die Formatierungen auch dementsprechend vorgegeben (Überschrift 1, 2 etc.). Diese Hierarchie sind wichtig für Suchmaschinen (z.B. Google) und damit auch für das Ranking einer Website sowie für das barrierefreie Bedienen einer Website.
- Jede Website sollte nur eine Überschrift 1 haben, und zwar ihren Titel.
- Weitere Überschriften sollten in hierarchischer Reihenfolge folgen und echte Überschriften sein.
- Keine Überschriften zum reinen Hervorheben bzw. Vergrößern von Texten verwenden! Dazu „Formate“ verwenden.
Tipp
Wenn ein Textbereich einfach nur hervorgehoben werden soll, obwohl er eigentlich keine Überschrift (oder keine Überschrift ausreichender Wichtigkeit) ist, kann der nächsten Punkt genutzt werden:
Formate
Unter Formate kann man einen markierten Text, egal ob Fließtext (Absatz) oder Überschrift, so formatieren, dass er besonders groß, klein oder wie eine bestimmte Überschrift erscheint. Optisch kann man so mehrere Überschriften wie eine Überschrift 1 aussehen lassen, für Google relevant ist aber nur diejenige, die als solche definiert wurde.
Buttons
Wenn ein Text verlinkt wird, kann man ihn auch als Button erscheinen lassen, indem man aus den Formaten unter dem Punkt Links, Buttons auswählt. Das ist wichtig, um einerseits Dinge hervorzuheben als auch, damit Links für die User klar als solche erkennbar sind – man unterstützt damit die Bedienbarkeit einer Website.
Das genaue Erscheinungsbild von Buttons hängt von Design und Konfiguration der Seite ab.
Über den Umschalter Visuell/Text rechts oben kann man sich den Textinhalt im HTML-Code ansehen und bearbeiten. Aber: Wer keine Erfahrung mit HTML-Code hat, sollte das vermeiden. Wenn man aber versehentlich in den Text-Modus gelangt, kommt man ganz einfach mit einem Klick auf „Visuell“ wieder zurück.
Dateien einfügen
Über „Dateien einfügen“ links oben kann im Texteditor ein Bild eingefügt werden.
Dabei ist wichtig, das Bild nur in einer notwendigen Größe auszuwählen (rechts unten im „Medien einfügen“-Dialog“):
Tipp
Soweit möglich, empfiehlt es sich aber, statt ein Bild im Texteditor einzufügen, den Block „Bild (mit Text)“ zu verwenden.
Spalten
Neben den allgemeinen Einstellungen gibt es bei den Einstellungen des Textblocks die Option, den Block mehrspaltig zu gestalten: bis zu vier Textblöcke können nebeneinander in Spalten angeordnet werden:
Mobil werden diese Textbereiche automatisch untereinander angeordnet.
Videos – YouTube und Co.
pixel.cube Websites unterstützen die unkomplizierte Einbindung von Videos der Dienste YouTube, Vimeo und Streamdiver. Für den Einbau ist kein spezieller Einbettungscode nötig und die Videos werden responsive, dh. mit voller Unterstützung auch für kleine Bildschirme, eingebunden. Bei YouTube und Vimeo Videos erfolgt die Darstellung beim Besucher erst nach expliziter Zustimmung zur Datenschutzerklärung des jeweiligen Dienstes. Damit ist die Einbindung absolut DSGVO-konform.
Dazu einfach die URL des Videos in einen Text-Inhaltsblock per Copy & Paste einfügen. Das Video erscheint dann automatisch im Textblock.
WICHTIG: Die URL des Videos muss in eine neue, leere Zeile eingefügt werden!
Am besten direkt in einen neuen Text-Inhaltsblock einfügen, dann kann das Video einfach über den Inhaltsblock in der Größe angepasst werden bzw. mit Hintergrundfarbe hervorgehoben werden.
Inhaltsblock: Bild (mit Text)
Der Block Bild (mit Text) wird benutzt, um ein einzelnes Bild prominent darzustellen – optional mit einem beschreibenden Text. Mit diesem Inhaltsblock wird das Bild automatisch besser für die darstellenden Geräte formatiert und positioniert, als wenn es im Textblock platziert werden würde.
Der Inhalt besteht aus dem gewählten Bild und einem Texteditor, der in seiner Bedienung dem Text-Block entspricht.
- Die Mindesthöhe gibt an, wie das Bild beschnitten wird: Größen von extra klein bis extra groß oder im Originalverhältnis erhalten stehen zur Verfügung.
- Die Textposition gibt an, wo ein Textinhalt relativ zum Bild platziert wird.
Wenn der Text links oder rechts vom Bild platziert wird, kann
- das Verhältnis von Bild zu Text am Desktop gewählt werden,
- ebenso ob der Text oben, unten oder mittig zum Bild platziert wird und
- ob er mobil/am Smartphone unter oder ober dem Bild platziert werden soll (am Smartphone wird das Bild immer in voller Breite angezeigt).
Der Text kann auch im Bild platziert werden (mit Auswahl der Positionierung und Breite).
Beispiel-Seiten:
Inhaltsblock: Bildergalerie
In diesem Block können beliebige Bilder ausgewählt werden („Zur Galerie hinzufügen“).
In den Einstellungen kann gewählt werden, wie die Bilder dargestellt werden sollen:
- Masonry (Mosaik mit unterschiedlichen Größen)
- Kacheln (alle Bilder quadratisch und gleich groß)
- Slider
In den Einstellungen gibt es weitere Optionen für die Darstellung, wie z.B. die Geschwindigkeit des Sliders.
Beispiel-Seiten:
Inhaltsblock: Liste – Bild mit Beschreibung
Hier können schnell und einfach mehrere Elemente bestehend aus Bild und Text angelegt werden, die untereinander angezeigt werden.
Unter Link kann ausgewählt werden, ob ein Klick auf das Bild dieses in einem vollflächigen Popup öffnet, zu einer Subseite oder einer externen Web-Adresse führen soll.
Tipp
Wenn mehr Formatierungsoptionen notwendig sind, sollte auf den Inhaltsblock Bild (mit Text) zurückgegriffen werden.
Beispiel-Seiten:
Inhaltsblock: Featured Buttons
Dieser Block bietet ähnlich wie die Icon/Text-Kacheln (aber mit etwas anderer Optik) die Möglichkeit, Links mit Bild und Text zu erstellen, um zum Beispiel wichtige Bereiche prominent auf der Startseite zu verlinken.
Elemente werden mit Bild + Titel (optional Text, wenn in den Eigenschaften aktiviert) und Link angelegt.
In den Einstellungen kann gewählt werden:
- wie hoch die Bilder dargestellt werden sollen
- wie viele Spalten angezeigt werden und
- ob die Spalten automatisch bei kleineren Geräten reduziert werden sollen oder nicht.
Außerdem kann gewählt werden ob
- nur Titel oder Titel + Text dargestellt werden und
- ob in oder unter dem Bild und
- wie die Animation aussehen soll, wenn die Maus über das Element bewegt wird.
Beispiel-Seiten:
Inhaltsblock: Google Maps und Mapbox Karten
Es gibt drei unterschiedliche Inhaltblöcke für Karten (Landkarten), wobei jeweils nur einer dieser Inhaltsblöcke auf der Website aktiv sein kann:
- Google Maps und Mapbox sind ab einer gewissen Anzahl von Aufrufen (Besucher auf der Website) kostenpflichtig und benötigen einen speziellen „API Key“ um verwendet werden zu können. Falls Sie einen dieser Inhaltsblöcke verwenden können (er in der Auswahl der Inhaltsblöcke aufscheint), dann ist bereits ein entsprechender API Key hinterlegt.
- Google Maps Embed ist kostenlos verfügbar. Hat jedoch den Nachteil, dass nur ein Pin (Stecknadel) gesetzt werden kann. Das sollte aber für die meisten Anwendungsfälle ausreichend sein.
Google Maps Embed
Die Position des Pins kann als Adresse oder als Koordinaten eingegeben werden. Zus. können Darstellungsform (Straßenkarte, Satellitenbild, Hybrid, Gelände) und die initiale Zoomstufe gewählt werden.
Beispiel-Seiten:
Inhaltsblock: Downloads
Der Block „Downloads“ bietet die Möglichkeit, Dokumente wie z.B. Flyer-pdfs sauber formatiert zum Download anzubieten.
Unter „Überschrift anzeigen“ kann man wählen, ob über den Downloads
- die Standardüberschrift „Downloads“,
- eine selbst gewählte Überschrift oder
- keine Überschrift stehen soll.
Über die erste hinaus können weitere Dateien über „Datei hinzufügen“ unten rechts hinzugefügt werden. Bestehende Einträge können mit – Zeichen entfernt werden.
Wenn eine Datei ausgewählt wird, werden rechts die Dateidetails angezeigt und können dort auch bearbeitet werden.
Tipp
Wichtig ist ein gut lesbarer Titel, denn dieser wird auf der Website als Beschriftung dargestellt.
Beispiel-Seiten:
Inhaltsblock: Foto-Download
Eine Kombination aus Galerie und Download ist der Block Foto-Download. Hier werden die Bilder gleich zusammen mit einem Link dargestellt, mit dem das Bild/die Bilder als ZIP in Originalgröße heruntergeladen werden kann.
Beispiel-Seiten:
Inhaltsblock: Akkordeon
Dieser Block erlaubt es, klassische FAQs als ausklappbares Akkordeon zu bauen.
Jeder Eintrag besitzt eine Überschrift, einen Text und optional einen Untertitel.
Weitere Einträge können mit „Eintrag hinzufügen“ unten rechts oder dem +Symbol neben einem bestehenden Eintrag (erscheint bei Mausbewegung über der rechte Leiste) hinzugefügt werden.
Bestehende Einträge können mit dem –Symbol entfernt werden. Mit Klicken+Halten auf den grauen Bereich links des Blocks kann dieser nach unten oder nach oben verschoben werden.
In den Einstellungen kann das Verhalten des Akkordeons genauer definiert werden:
- Ob anfangs alle Einträge offen oder geschlossen sein sollen
- Ob es Buttons zum Öffnen/Schließen aller Einträge geben soll
- Ob es möglich ist, mehrere Einträge gleichzeitig zu öffnen
- Oder das Öffnen eines Eintrags die anderen Einträge automatisch schließt.
Wird der Haken bei „Symbol-Bilder“ erlauben gesetzt, können bei den Einträgen zusätzliche Bilder gewählt werden, die links neben dem Eintrag angezeigt werden.
Beispiel-Seiten:
Inhaltsblock: Bild-Kacheln
Wenn die Optionen der Icon/Text-Kacheln oder der Featured Buttons nicht ausreichen, ermöglicht dieser umfangreich konfigurierbare Block die Erstellung von individuellen Bild-Kachel-Elementen. Der Block erfordert aber etwas mehr Einarbeitung. Jede Kachel im Block besteht aus einem Bild und optional einem Titel und/oder Text.
Für jede Kachel muss eine Kachelgröße (1×1, 2×1 horizontal, 3×1 horizontal, 1×2 vertikal, 2×2 extra groß) ausgewählt werden, um zu bestimmen, wie die Kachel im Verhältnis zu den anderen Kacheln dargestellt wird.
Der Untertitel kann mehrere Zeilen umfassen. Dabei muss aber jede Zeile einzeln eingegeben werden – es findet kein automatischer Umbruch statt.
Im Tab „Kachel-Formatierung“ kann das Erscheinungsbild der Kacheln festgelegt werden.
- Darstellung: Definiert, ob die Kacheln innerhalb des Bildes einen weißen Rahmen erhalten oder nicht. Die Darstellung „Icon-Darstellung“ führt zu einer ähnlichen Optik, wie die Icon/Text-Kacheln. Da die Bildkacheln aber insgesamt aufwändiger zu konfigurieren sind, wird in diesem Fall empfohlen, die Icon/Text-Kacheln zu verwenden.
- Abstand: Hier kann festgelegt werden, ob die Kacheln unmittelbar aneinander angrenzen oder ob es einen Abstand zueinander geben soll.
- Textposition (horizontal) und Textausrichtung: Geben die Positionierung von Titel+Text innerhalb der Bildkachel an.
- Untertitel anzeigen: Definiert, ob der Text immer sichtbar ist, oder nur, wenn die Maus über die Kachel bewegt wird.
- Abstand Titel-Untertitel definiert, ob ein Abstand zwischen dem Titel und dem Text immer, nie oder nur dann angezeigt wird, wenn mit der Maus über die Kachel gefahren wird.
- Titel-Hintergrund gibt an, ob der Titel flächig mit einer Farbe hinterlegt wird, um ihn besser vom Kachelbild abzuheben.
- Untertitel-Hintergrund definiert dasselbe für den Text
- Verhältnis Höhe zu Breite: Üblicherweise sind Kacheln quadratisch bzw. entsprechend der angegebenen Kachelgröße rechteckig. Hier kann allerdings noch eine Verzerrung definiert werden, um die Kacheln allgemein flacher oder höher zu machen.
- Abgerundete Ecken: Wird hier ein Wert eingegeben, werden die Ecken der Kachelbilder sanft abgerundet.
- Einzelkachel-Einstellungen: Definiert, ob jede einzelne Kachel, die hier getroffenen Einstellungen überschreiben kann. Beim Standard (Nur Basis, Sonstige vom Standard), verwenden die Kacheln die allgemein definierten Parameter (wird üblicherweise empfohlen).
Tipp
Wird „überschreibbar“ aktiviert, kann jede Kachel im Inhalt unterschiedlich formatiert werden (Was nur in Ausnahmefällen Sinn macht!).
Beispiel-Seiten:
Inhaltsblock: Icon/Text-Kacheln
Dieser Block ermöglicht es einfach Kacheln mit Bildicons+Titel+Beschreibungstext zu erstellen und zu konfigurieren. Jede Kachel kann optional mit einem Link auf eine Subseite oder eine externe Web-Adresse versehen werden.
In den Einstellungen kann gewählt werden, wo Bild+Text in der Kachel platziert werden sollen:
- mittig
- Mitte links
- Mitte rechts
- oben links
- oben Mitte
- oben rechts
- unten links
- unten Mitte
- unten rechts
und in wie vielen Spalten die Kacheln angezeigt werden sollen, bevor sie in eine neue Zeile umbrechen.
Bei kleineren Displaygrößen (responsive mobile Ansicht) wird die Spaltenanzahl automatisch reduziert, um eine optimale Darstellung zu erzielen.
Beispiel-Seiten:
Inhaltsblock: Trenner
Dieser Block kann größere Abstände zwischen Imhlatsblöcken schaffen, wenn selbst der „extra große“ Abstand in den Block-Einstellungen nicht mehr ausreicht oder wenn eine Trennergrafik verwendet werden soll. Er sollte auch nur dann verwendet werden!
Inhaltsblock: Aktuelle Beiträge
Dieser Block zeigt die aktuellsten News-Beiträge übersichtlich an (natürlich nur, wenn solche auf der Website existieren). Dabei können diese entweder in einem Raster (mit Bild links oder oberhalb des Beschreibungstextes) oder als Slider dargestellt werden.
Beispiel-Seiten:
Inhaltsblock: Veranstaltungen & Termine
Wie beim Block Aktuelle Beiträge werden mit diesem Block die aktuellen Veranstaltungen (sofern diese auf der Website existieren) dargestellt.
Beispiel-Seiten:
Allgemeine Einstellungen
Diese Einstellungen finden sich im Inhaltseditor bei den jeweiligen Inhaltsblöcken im Tab „Einstellungen“ und definieren die allgemeine Darstellung des Inhaltsblocks auf der Website. Meist gibt es für den jeweiligen Inhaltsblock noch zusätzliche Einstellungen wie die Anzahl der Spalten, eine Mindesthöhe usw.
Die hier aufgezählten Einstellungen finden sich in fast allen Inhaltsblöcken wieder.
Breitendefinitionen
Der Inhaltseditor bietet verschiedene vordefinierte Breiten:
- Inhaltsbreite (übliche Breite für den Inhalt, gut zu lesen)
- Bildschirmbreite (über den ganzen Bildschirm, üblicherweise begrenzt auf 1920px, bei einigen Elementen auch bis zu 4K/3840px)
- Schmal und Extra schmal (schmäler als der Standard-Inhalt, um etwas Dynamik in das Seitendesign zu bringen).
Die genauen Pixel-Breiten von Inhaltsbreite, Schmal und Extra schmal können je nach Website-Design variieren.
Viele Elemente bieten auch die Möglichkeit Bildschirmbreite – Inhalt normal/schmal/extra-schmal.
In diesem Fall wird eine Hintergrundfärbung/Bild über die ganze Breite gestreckt, ein (Text-)Inhalt aber auf die angegebene Breite beschränkt.
Farbdefinitionen
Jede pixelpoint-Seite mit dem pixel.cube-Inhaltseditor benutzt ein für jede Website fest definiertes Farbschema, um zu gewährleisten, dass das Design einheitlich und stimmig wirkt.
Daher können Farben im Editor üblicherweise nicht frei gewählt werden, sondern es wird während der Designentwicklung der Website jeweils eine „Hauptfarbe“ und „Akzentfarbe“ festgelegt. Diese stehen dann als Auswahl zur Verfügung.
Die meisten Inhaltsblöcke bieten die Option, eine Hintergrundfarbe zu wählen. Die Farben werden aber auch an anderen Stellen verwendet.
Abstände
Die meisten Inhaltsblöcke bieten die Option, einen Abstand zum vorhergehenden (oberen) Inhaltsblock auszuwählen. Dabei wird bewusst mit abstrakten Größen klein/normal/groß/extra groß gearbeitet. Der tatsächliche Abstand richtet sich nach der Konfiguration der Website und dem Gerät, auf dem sie dargestellt wird (responsive Design).
Erweiterte Einstellungen
Diese Einstellungen finden sich im Inhaltseditor bei den jeweiligen Inhaltsblöcken im Tab „Einstellungen“ und definieren die erweiterte Einstellungendes Inhaltsblocks auf der Website.
Die hier aufgezählten Einstellungen finden sich in fast allen Inhaltsblöcken wieder.
Zeitliche Begrenzung von Inhaltsblöcken
„Zeige ab“
Zeigt das Inhaltselement ab dem angegebenden Datum.
„Zeige bis“
Zeigt das Inhaltselement bis zum angegebenden Datum.
Anker Links
Anker-Links sind Links, die auf eine bestimmte Stelle innerhalb einer Webseite verweisen, anstatt auf die Startseite oder eine andere Webseite im Allgemeinen. Sie werden auch als „Sprungmarke“ oder „Anker“ bezeichnet und sind nützlich, um Benutzern den direkten Zugriff auf bestimmte Abschnitte einer Webseite zu ermöglichen, ohne dass sie sich durch die gesamte Seite scrollen müssen.
Die Funktionsweise von Anker-Links ist relativ einfach. Zunächst muss der Autor oder der Entwickler der Webseite eine Anker-ID für den Abschnitt erstellen, auf den der Anker-Link verweisen soll. Eine Anker-ID ist im Grunde genommen nur ein eindeutiger Name oder eine eindeutige Kennung für den Abschnitt, auf den der Link verweist.
Sobald die Anker-ID erstellt wurde, kann der Autor dann einen Link auf diese ID erstellen, indem er den Link-Text oder das Bild markiert, das den Link enthalten soll, und dann die Anker-ID als Ziel-URL angibt. Zum Beispiel könnte der Anker-Link so aussehen:
#erweiterte-einstellungen
In diesem Beispiel würde der Link „Linktext“ auf die Anker-ID „erweiterte-einstellungen“ verweisen. Wenn der Benutzer auf den Link klickt, wird er direkt zum Abschnitt auf der Seite geleitet, der mit der Anker-ID übereinstimmt.
Beispiel 1:
Nach oben, zu den Erweiterte Einstellungen
Ein weiterer wichtiger Punkt bei der Verwendung von Anker-Links ist die Notwendigkeit, sicherzustellen, dass die Anker-ID eindeutig ist. Wenn zwei oder mehr Abschnitte auf der gleichen Seite dieselbe Anker-ID haben, funktioniert der Link möglicherweise nicht ordnungsgemäß oder führt den Benutzer zum falschen Abschnitt. Aus diesem Grund sollten Autoren bei der Verwendung von Anker-Links sehr sorgfältig darauf achten, dass jede Anker-ID auf der Seite eindeutig ist.
Wichtig:
Es gibt einen Unterschied zwischen „#anker“ und „/#anker“.
#anker => Führt den Benutzer zur aktuellen Seite und scrollt direkt zum Abschnitt mit dem Anker „anker“ auf dieser Seite. Siehe Beispiel 1.
/#anker => Führt den Benutzer über die Startseite der Website und scrollt direkt zum Abschnitt mit dem Anker „anker“.
Beispiel 2:
Link der zur Erklärung der Textformatierung mit Formaten führt.
Es ist wichtig zu beachten, dass der Link mit „/#anker“ nur funktioniert, wenn es tatsächlich einen Anker mit dem Namen „anker“ auf der Startseite gibt. Wenn kein Anker mit diesem Namen vorhanden ist, führt der Link den Benutzer zur Startseite, aber nicht zum Anker.
In jedem Fall sind Anker-Links eine nützliche Möglichkeit, um Benutzern den schnellen Zugriff auf bestimmte Abschnitte von Webseiten zu ermöglichen und die Navigation auf der Website zu erleichtern.
