Macromedia Online

Styleguide der Fernstudium Internetseite der Hochschule Macromedia

Dieser Living Styleguide ist ein lebendes Dokument und besteht aus den echten Modules und Styles der Macromedia Online Website.

Zur Übersicht

Störer

mit Untertitel und Button

Textmodul:
Überschrift oben
Text in 2 Spalten

In esse dolorum incidunt deleniti. Sit eligendi aperiam qui, maiores nihil mollitia reiciendis harum, aspernatur, eum quam obcaecati asperiores ipsum deserunt facere hic odio fugit modi. Delectus nam velit, a sint ducimus quibusdam, fugiat cumque quos adipisci officia cum vero illo cupiditate alias aut inventore nemo ut aperiam aliquid tenetur eligendi dignissimos, minima impedit placeat eius. Voluptatum optio alias ipsum ducimus assumenda, magnam dolore voluptas ea ab, fugiat, reprehenderit dolor excepturi nam? Laboriosam debitis impedit ducimus doloribus illo dolorem tenetur eveniet harum, voluptatum voluptate rem, repudiandae deleniti at aut incidunt quos culpa?

Link Text

Textmodul:
Überschrift oben
Text nur in linker Spalte

In esse dolorum incidunt deleniti. Sit eligendi aperiam qui, maiores nihil mollitia reiciendis harum, aspernatur, eum quam obcaecati asperiores ipsum deserunt facere hic odio fugit modi. Delectus nam velit, a sint ducimus quibusdam, fugiat cumque quos adipisci officia cum vero illo cupiditate alias aut inventore nemo ut aperiam aliquid tenetur eligendi dignissimos, minima impedit placeat eius. Voluptatum optio alias ipsum ducimus assumenda, magnam dolore voluptas ea ab, fugiat, reprehenderit dolor excepturi nam? Laboriosam debitis impedit ducimus doloribus illo dolorem tenetur eveniet harum, voluptatum voluptate rem, repudiandae deleniti at aut incidunt quos culpa?

Link Text

Textmodul:
Überschrift links
Text rechts

In esse dolorum incidunt deleniti. Sit eligendi aperiam qui, maiores nihil mollitia reiciendis harum, aspernatur, eum quam obcaecati asperiores ipsum deserunt facere hic odio fugit modi. Delectus nam velit, a sint ducimus quibusdam, fugiat cumque quos adipisci officia cum vero illo cupiditate alias aut inventore nemo ut aperiam aliquid tenetur eligendi dignissimos, minima impedit placeat eius. Voluptatum optio alias ipsum ducimus assumenda, magnam dolore voluptas ea ab, fugiat, reprehenderit dolor excepturi nam? Laboriosam debitis impedit ducimus doloribus illo dolorem tenetur eveniet harum, voluptatum voluptate rem, repudiandae deleniti at aut incidunt quos culpa?

Link Text

Allgemeine
Einführung

Mit diesem Einführungs-Element lässt sich ein ausklappbarer Text (links) mit Bild (rechts) darstellen. Beim Anlegen dieses Elements stehen zwei verschiedene Felder zur Verfügung. Im Bodytextfeld 1 wird der Text eingegeben, der immer sichtbar ist. Im Bodytextfeld 2 wird hingegen der Text platziert, der mit einem Klick auf "mehr anzeigen" eingeblendet wird.

Hinweis zum Bild: Bei diesem Element wird das Bild bzw. Foto nicht automatisch schräg zugeschnitten (wie es z.B. bei den Professoren der Fall ist). Wenn an dieser Stelle ein "schräges" Bild gewünscht sein sollte, muss dies mit einem Bearbeitungsprogramm vorab schräg zugeschnitten werden und ein transparenter Hintergrund hinterlegt werden. Bitte als PNG abspeichern und ins Typo3 hochladen, damit sich die Transparenz dem Hintergrund anpassen kann (automatischer Wechsel zwischen grauem und weißen Hintergrund).

Optional kann auch noch ein Call-To-Action Button mit Link hinzugefügt werden.

Neque alias eius, animi qui illum quasi at officia consectetur voluptate ipsam? Adipisci nobis impedit explicabo. Repudiandae placeat in beatae illo excepturi ipsa perferendis velit provident quaerat soluta amet facere quasi modi, perspiciatis laborum accusamus dolore voluptates corporis, obcaecati! Neque, nostrum. Facere itaque ut iure, quibusdam optio in quae quas aperiam nulla tempore ratione! Ad fuga ipsa ipsum, voluptates, aliquam nihil suscipit, ut quo facilis dolor quas iste quidem deserunt. Fuga perferendis, illum repudiandae, cum labore quas nesciunt.

Odit perferendis repellendus numquam laborum adipisci, ab quidem aliquid modi illum. Itaque hic cupiditate, tempore ex laudantium sunt laborum doloremque debitis architecto at id nulla voluptas quam omnis doloribus minus vel, pariatur eius unde? Modi ad eaque omnis ipsam adipisci dolorum? Officiis adipisci, explicabo aut unde consequatur veniam, quae reiciendis aspernatur quis, dolores possimus labore nobis.
Vitae odio alias optio saepe repudiandae praesentium asperiores aspernatur sunt ea quo distinctio, aut unde cupiditate obcaecati odit, illum inventore eum culpa sint aperiam rem accusamus et suscipit totam fugiat. Voluptas, dolore nihil temporibus quas?

Aperiam nisi quo quos excepturi inventore delectus, culpa, odit rerum nostrum atque neque minima illo, dolorem, cupiditate accusantium quaerat labore dolore ducimus ex possimus rem distinctio fuga provident veniam! Voluptate ipsa molestias, totam iure tempore explicabo maiores consequatur, alias architecto id earum ad ipsam commodi repudiandae quos, laudantium accusantium cum, ab nihil perspiciatis! Quod velit dicta ipsa incidunt ea doloribus, minima cumque pariatur praesentium nesciunt architecto aspernatur autem, itaque, sequi inventore. Autem doloribus assumenda harum quas eaque, iste quasi quis. Repudiandae fugit consequatur quos sapiente sit reiciendis voluptatibus veritatis ipsum, dolore temporibus animi, reprehenderit perspiciatis est, perferendis consequuntur laudantium! Recusandae distinctio aspernatur omnis impedit inventore minima laborum dolorem maiores, aperiam ad sint quae quos, delectus aliquam. Quam impedit ex, ducimus nobis fuga soluta!

Allgemeine
Einführung ohne Call-To-Action Button

Quasi quis obcaecati, eum, voluptates, perspiciatis cum fugiat quae in aperiam deserunt numquam similique maiores voluptas at, itaque atque beatae maxime architecto quaerat veniam. Possimus, nam modi deserunt ipsa, laborum excepturi esse commodi beatae optio, animi ipsam. Quis reprehenderit quisquam ipsum animi odit enim ipsam provident soluta itaque labore. Repellat debitis dolores iure neque deserunt, odio repudiandae natus nisi accusamus soluta consequuntur quo, quia impedit? Eius, accusantium atque vero iure voluptas iusto.

Facere veniam quas, illum ut facilis eligendi. Laudantium ipsam, delectus doloribus, atque rem error officia nulla blanditiis accusamus modi ipsa consectetur nostrum quia expedita vero, incidunt voluptate? Autem est velit explicabo at ipsa consequuntur aperiam veritatis mollitia nesciunt quasi, nobis adipisci veniam sequi debitis excepturi. Commodi recusandae, vero impedit molestias sunt.

Neque alias eius, animi qui illum quasi at officia consectetur voluptate ipsam? Adipisci nobis impedit explicabo. Repudiandae placeat in beatae illo excepturi ipsa perferendis velit provident quaerat soluta amet facere quasi modi, perspiciatis laborum accusamus dolore voluptates corporis, obcaecati! Neque, nostrum. Facere itaque ut iure, quibusdam optio in quae quas aperiam nulla tempore ratione! Ad fuga ipsa ipsum, voluptates, aliquam nihil suscipit, ut quo facilis dolor quas iste quidem deserunt. Fuga perferendis, illum repudiandae, cum labore quas nesciunt.

Odit perferendis repellendus numquam laborum adipisci, ab quidem aliquid modi illum. Itaque hic cupiditate, tempore ex laudantium sunt laborum doloremque debitis architecto at id nulla voluptas quam omnis doloribus minus vel, pariatur eius unde? Modi ad eaque omnis ipsam adipisci dolorum? Officiis adipisci, explicabo aut unde consequatur veniam, quae reiciendis aspernatur quis, dolores possimus labore nobis.
Vitae odio alias optio saepe repudiandae praesentium asperiores aspernatur sunt ea quo distinctio, aut unde cupiditate obcaecati odit, illum inventore eum culpa sint aperiam rem accusamus et suscipit totam fugiat. Voluptas, dolore nihil temporibus quas?

Oops, an error occurred! Code: 201906241521056579801f

Zweispaltiges Textmodul
Überschrift oben und Text in zwei Spalten

Beatae nulla quam deserunt corporis earum nesciunt voluptatem facere placeat architecto ab consectetur, ducimus at sapiente impedit ipsum, eveniet! Praesentium, aliquid ipsa? Maxime minima commodi molestias, nulla est, eaque in earum ea suscipit ut qui odit facere nihil veniam corporis fugiat! Hic sunt ipsa maiores ratione, neque vitae! Deserunt quisquam dolore quaerat quos eum ipsam quidem magni, non distinctio earum facere fuga aspernatur, asperiores provident. Vitae doloremque obcaecati, animi atque consectetur, cumque minus ratione officia ipsa, cum laboriosam! Odit a sit sunt fuga accusamus ipsum minus asperiores quis suscipit, odio eos eveniet, earum obcaecati? Esse omnis repellendus, atque quo dolores voluptatem illo velit maxime vero commodi id laudantium nostrum beatae iste veritatis quae quis. Eligendi magnam nulla accusantium error iste accusamus commodi deserunt, at maxime earum, sit voluptatibus minus maiores, atque excepturi aliquam blanditiis quidem minima amet laborum cupiditate. Similique nam assumenda totam fugit eos voluptates tempora temporibus numquam suscipit. Maiores tempora ut esse harum repudiandae quasi dolores ducimus non quaerat, corporis quas tenetur fuga reprehenderit, quos architecto, aspernatur. Repudiandae, adipisci tenetur aliquid sit culpa sed provident laboriosam voluptatum non totam vitae nesciunt, inventore voluptatibus ratione. Explicabo dolore exercitationem vitae rem odio?

Zur Übersicht
01

Tabs mit maximal 9 Elementen

Mit diesem Tab-Modul können bis zu maximal 9 einzelne Tabs angelegt werden. 

Dieses Element wird beispielsweise bei den "5 Gründen" eingesetzt. Dieses Modul wurde unter den Vorlagen angelegt, sodass dieses als Datensatz auf den entsprechenden Seiten eingebunden werden kann und bei möglichen Änderungen nur an einer Stelle die Bearbeitung des Elements notwendig ist. 

 

Störer ohne Bild

Die
Professoren

Dieses Element eignet sich zur Darstellung von Personen (z.B. Professoren oder Team Mitglieder). Hier werden maximal vier Personen in einer Reihe angezeigt. Die Fotos der Personen werden automatisch schräg angeschnitten. 

Mehr über uns

Im Überblick

Das Inhaltselement "Überblick" kann am Seitenanfang als eine Art Inhaltsverzeichnis genutzt werden. Im Textblock können die Inhalte mit Nummerierung eingegeben werden. Über die zwei Teaser können zusätzliche Inhalte mit Links zu anderen Seiten platziert werden. Bei den Teasern werden die hinterlegten Fotos automatisch schräg angeschnitten.

Im Überblick

  1. Quod officiis numquam
  2. Quo possimus natus
  3. In voluptatibus
  4. Rerum quis modi quae
  5. Neque nostrum eveniet
  6. Impedit vero ut nesciunt
  7. Distinctio facere
  8. Iure commodi temporibus

Jetzt einschreiben!

Projekte & Praxis

Bei dem Inhaltselement "Projekte & Praxis" werden im Frontend jeweils vier Kacheln nebeneinander in einer Reihe angezeigt. Redakteure legen innerhalb des Projekte & Praxis-Elements pro Kachel ein eigenes "Projekt" an. Hier wird jeweils ein Bild, Name und Link angegeben. Die Reihenfolge der Kacheln kann über das Typo3 angepasst werden.

Unsere
Partner

Bei der Aktualisierung der Partnerlogos muss darauf geachtet werden, dass die Logos als svg-Dateien im Typo3 hochgeladen werden. Die Logos können auch farbig sein, da diese automatisch vom Typo3 in Graustufen eingefärbt werden. 

Zertifikate

Die Darstellung der Zertifikate ähnelt der Partnerlogo Präsentation. Auch hier werden die einzelnen Zertifikate als Bild (bzw. Mediendatei) im Inhaltselement hinzugefügt. Der Unterschied ist hier allerdings, dass die Zertifikate/Logos vorab in Graustufen und als png bearbeitet wurden. Werden neue Zertifikate hinzugefügt, müssen diese also vorher entsprechend angepasst und danach hochgeladen werden.

Linktext

Voices – Listen to Them

Mit diesem Element können die Testimonials dargestellt werden. Idealerweise werden hier immer drei, sechs oder neun Personen gezeigt.

Innerhalb des Elements wird für jede Person ein neues Tab angelegt. Hier werden sowohl Bild, Name, Job und das Zitat angegeben.

Der Bildausschnitt kann über den Editor angepasst werden.

Zur Übersicht

Buttons

Call-To-Action Buttons können mithilfe des HTML Plugins angelegt werden.

Dokumente
Downloads

Mit dem Downloads-Element können weitere Informationen zur Verfügung gestellt werden. Dieses Element eignet sich primär dazu, PDF Dateien zum Download bereitzustellen. Die Dateien werden als Medienelemente angelegt. Hierbei ist wichtig pro Datei einen Titel anzugeben, da dieser in der Übersicht angezeigt wird. 

Formatierung von Überschriften

Wenn Inhalte nicht in einem der Mask-Elements, sondern als Text & Media angelegt werden, lässt sich im Reiter "Allgemein" im Feld "Typ" die Art der Überschrift einstellen. Hier kann eine Auswahl zwischen H1 und H5 getroffen werden. Die unterschiedlichen Formatierungen werden nachfolgend gezeigt. 

SEO Hinweise:

  • pro Seite sollte es nur eine H1 (= Seitentitel / Hauptüberschrift) geben
  • nach der H1 wird der Inhalt in sinnvolle Abschnitte und Unterabschnitte mit H2 bis H5 Überschriften strukturiert

Überschrift 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum obcaecati eveniet vero, facere dolor commodi dolorem doloremque unde molestias adipisci nostrum cupiditate nobis quae sed. Neque atque assumenda similique voluptates sequi soluta perspiciatis sit, asperiores obcaecati cupiditate quisquam voluptas id ex eveniet voluptatem quidem mollitia quam placeat, ipsa iste quae totam quas accusantium sapiente! Aut omnis eum a at atque qui dolore ut perspiciatis, quos illum asperiores quisquam quibusdam cumque recusandae! Accusamus suscipit aperiam reprehenderit possimus et veritatis illo dolores blanditiis, iste sequi commodi earum facere at iusto nostrum iure provident animi facilis, odio reiciendis soluta similique. Consectetur, error corporis.

Überschrift 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum obcaecati eveniet vero, facere dolor commodi dolorem doloremque unde molestias adipisci nostrum cupiditate nobis quae sed. Neque atque assumenda similique voluptates sequi soluta perspiciatis sit, asperiores obcaecati cupiditate quisquam voluptas id ex eveniet voluptatem quidem mollitia quam placeat, ipsa iste quae totam quas accusantium sapiente! Aut omnis eum a at atque qui dolore ut perspiciatis, quos illum asperiores quisquam quibusdam cumque recusandae! Accusamus suscipit aperiam reprehenderit possimus et veritatis illo dolores blanditiis, iste sequi commodi earum facere at iusto nostrum iure provident animi facilis, odio reiciendis soluta similique. Consectetur, error corporis.

Überschrift 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum obcaecati eveniet vero, facere dolor commodi dolorem doloremque unde molestias adipisci nostrum cupiditate nobis quae sed. Neque atque assumenda similique voluptates sequi soluta perspiciatis sit, asperiores obcaecati cupiditate quisquam voluptas id ex eveniet voluptatem quidem mollitia quam placeat, ipsa iste quae totam quas accusantium sapiente! Aut omnis eum a at atque qui dolore ut perspiciatis, quos illum asperiores quisquam quibusdam cumque recusandae! Accusamus suscipit aperiam reprehenderit possimus et veritatis illo dolores blanditiis, iste sequi commodi earum facere at iusto nostrum iure provident animi facilis, odio reiciendis soluta similique. Consectetur, error corporis.

Überschrift 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum obcaecati eveniet vero, facere dolor commodi dolorem doloremque unde molestias adipisci nostrum cupiditate nobis quae sed. Neque atque assumenda similique voluptates sequi soluta perspiciatis sit, asperiores obcaecati cupiditate quisquam voluptas id ex eveniet voluptatem quidem mollitia quam placeat, ipsa iste quae totam quas accusantium sapiente! Aut omnis eum a at atque qui dolore ut perspiciatis, quos illum asperiores quisquam quibusdam cumque recusandae! Accusamus suscipit aperiam reprehenderit possimus et veritatis illo dolores blanditiis, iste sequi commodi earum facere at iusto nostrum iure provident animi facilis, odio reiciendis soluta similique. Consectetur, error corporis.

Überschrift 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum obcaecati eveniet vero, facere dolor commodi dolorem doloremque unde molestias adipisci nostrum cupiditate nobis quae sed. Neque atque assumenda similique voluptates sequi soluta perspiciatis sit, asperiores obcaecati cupiditate quisquam voluptas id ex eveniet voluptatem quidem mollitia quam placeat, ipsa iste quae totam quas accusantium sapiente! Aut omnis eum a at atque qui dolore ut perspiciatis, quos illum asperiores quisquam quibusdam cumque recusandae! Accusamus suscipit aperiam reprehenderit possimus et veritatis illo dolores blanditiis, iste sequi commodi earum facere at iusto nostrum iure provident animi facilis, odio reiciendis soluta similique. Consectetur, error corporis.

Weitere Tipps und Erklärungen

FOLLOW US

Als Hochschule des Digitalen Wandels sind wir natürlich in den Sozialen Medien aktiv.
Informiere Dich über unser brandneues Fernstudium, komm in unsere Community und 
nutze unsere Netzwerke für Deine Karriere.

Wir freuen uns auf Dein Feedback.