Auf dieser Seite findet ihr verschiedene Vorlagen und Elemente für neue Seiten, die man einfach kopieren und weiter bearbeiten kann. Alle, auf der Seite verwendeten Elemente, sind hier als Maske abgelegt.

Für eine Vielzahl von unterschiedlichen Vorschaubildern für Beiträge, könnt ihr freepik.com verwenden.

ALLGEMEINE HINWEISE

Template

Es empfielt sich außer bei Beitragsseiten das Template „Elementor Volle Breite“ zu verwenden. Dann bekommt man eine Blanco- Seite und ist erheblich freier die Elemente zu strukturieren. Das Template „Standard“ bietet dagegen den vorgefertigten weißen Hintergrund mit der Überschrift, die aus dem Seitentitel generiert wird. Gut für schnelle Beiträge, aber diese lassen sich nicht bearbeiten.

Bearbeitungsebenen

Ihr könnt hier 3 Ebenen anwählen:
Der äußere blaue Rahmen umfasst Strukturrahmen (grau) und Elemente (blau). Er kann mit eigenen Einstellungen versehen werden. Man kann ihn auch verschachteln.
Der graue Rahmen umfasst den Innenbereich oder teilt diesen in verschiedene Strukturbereiche auf. Das hängt davon ab, welches Grundlayout man unten (lila Buttom) gewählt hat oder ob man weitere innere Abschnitte (Werkzeug links) eingefügt hat. 
Der blaue innere Rahmen markiert das tatsächliche Element, welches ihr von links aus dem Editor nach rechts in die grauen Strukturrahmen zieht. Hier geht es um den tatsächlichen Inhalt.
Jede dieser Ebenen kann mit Einstellungen versehen werden. Welche ihr mit welchen Einstellungen verseht, hängt vom Layout ab. Mit einem Klick auf das jeweilige Icon, könnt ihr Bereiche kopieren oder löschen und mit einem erneuten Klick auf einen anderen Bereich die Kopie dort unten einfügen. Auch könnt ihr verschiedene Rahmen ineinander verschachteln und miteinander verschränken. Nutzt dazu links das Werkzeug „Innere Abschnitt“.

Einstellungen

Wenn ihr auf einen leeren Bereich links oder rechts klickt, erscheint das Werkzeugmenü. Wählt ihr eines der oben genannten Bereiche aus, erscheint der Editor. Im Reiter „Inhalt“ geht es um die Inhalte der Elemente, wie Texte, Links und Icons. Im Reiter „Stil“ geht es um Farben, Hintergründe und die Gestaltung von Rändern und Schatten. Im Reiter „Erweitert“ stellt man vor allem Abstände (Margin) und Randmaße (Padding) ein. WICHTIG: Ich empfehle, zuerst überall eine 0 einzugeben, denn oftmals sind hier bereits Standardwerte eingestellt.

Ränder und Abstände

Die Elementen der Website werden auf mobilen Geräten untereinander angeordnet. Damit hier die Abstände stimmen, ist es wichtig, die äußeren Abstände (Margin) aller Felder den gleichen Wert zu geben. Da von vielen die Widgets an der Seite bevorzugt werden und man diese leider nicht nur einer Seite zuweisen kann, sind alle der folgenden Seitenlayouts oben mit einem Abstand (Margin) versehen, der sie auf eine Linie mit den Widgets setzt. Dieser beträgt 36,5Der Rand (Padding) aller Strukturfelder (graues Icon oben links) beträgt 20. Der Rand grau hinterlegter Textfelder (blaues Icon rechts) wie der Seitenlauf 10. Transparente Textfelder haben keinen Rand. Ränder (Reiter „Stil“) von Feldern reicht es auf 1 oder 2 zu setzen, es sei denn, man will sie besonders dick. Meist erfüllt der Schatten aber seinen Job gut und es braucht keine.

Bündigkeit

Wenn ihr merkt, dass Icons nicht bündig liegen, dann nutzt in der Editierung den Befehl „< br >“ (ohne Leerzeile). Dieser fügt einen Umbruch ein. Kopiert den Befehl so lange hintereinander, bis alles bündig liegt. Dies funktioniert bei reinen Textfeldern nur im HTML-Modus (oben neben „visuell“ im Reiter „Text“) oder bei Icons direkt in bei der Eingabe (Reiter „Inhalt“).

Sonderzeichen

Sonderzeichen vor Links, die zum Beispiel auf Downloads oder Verweise hindeuten (z.B. Pfeile), sind aus den Sonderzeichen (Omega-Symbol) zu holen. Eine größere Bandbreite an Zeichen findet sich bei Windows.

Standardseiten

Verschiedene Varianten der Standardseite.

[Titel]

[Überschrift]

[Text]

[Gremium]
[Name]

Kontakt
[EMail]

[Titel]

[Überschrift]

[Text]

[Titel]

[Überschrift]

[Text]

[Gremium]
[Name]

Kontakt
[EMail]

[Titel]

[Überschrift]

[Text]

[Titel]

[Überschrift]

[Text]

Transparente Seite

Gut geeignet, wenn man mit Icons Grafiken erstellen will und keinen Hintergrund formierten braucht.

[Titel]

[Überschrift]

[Text]

Archivseite

Eine Seite für archivierte Dokumente. Das Drop-Down-Menü kann auch extrahiert werden, um es in anderen Layouten einzubauen.

[Titel]

[Überschrift]

[Text]

[Text/Link]

[Text/Link]

Buttom

Varianten von Buttoms. Schatten sind eingestellt. Am besten erstellt man ein Raster von Icons und Texten darunter und setzte dann die Buttoms drunter, um so auf weitere Seite zu gelangen. Links und Icons auf den Buttoms können eingestellt werden. Man kann die Buttoms aber auch an beliebige Stellen ziehen. Bei Buttoms und allen anklickbaren Elementen gibt es zwei Einstellungen bei „Stil“: „Normal“ und „Hover“. Bei Normal stellt man den Buttom ein, wie er ruhend angezeigt werden soll. Bei Hover, was passiert, wenn man ihn mit dem Cursor berührt und anklickt.

Icon-Raster

Ein Raster aus Icons, wie verwendet auf der Startseite. Man kann die Icons nur als Bild verwenden und mit einem Buttom kombinieren oder man gibt direkt einen Link ein, der beim Klick auf das Icon geöffnet wird. Einzelne Icons können aus dem Raster entfernt werden. In dem Fall wurden alle Icons bereits zu einem Feld zusammengefügt. Wollt ihr nur eine bestimmte Anzahl, müsst ihr ein neues Feld erstellen (unten auf das lila Symbol) und zieht dann die blauen Elemente einfach hinein . Jedem Icon-Element (blau) wurde etwas Rand (Padding) gegeben, damit die Texte und Bilder nicht an den Rand stoßen und es sich Abstand zwischen den einzelnen Elementen bildet. 

[TITEL]

[Beschreibung]

[TITEL]

[Beschreibung]

[TITEL]

[Beschreibung]

[TITEL]

[Beschreibung]

[TITEL]

[Beschreibung]

[TITEL]

[Beschreibung]

[TITEL]

[BESCHREIBUNG]

[TITEL]

[Beschreibung]

Themenkacheln

Eine gute Möglichkeit, um auf einer Eingangsseite verschiedene Themenfelder darzustellen, auf die man dann per Buttom gelangt. Die Kacheln sind bereits mit Rand und Abstand eingestellt: Das Icon-Element (blau) weist keinen Rand auf, das Feld (grau) einen Rand von 20 und einen Abstand von 10, damit zwischen allen Feldern die gleichen Abstände liegen. Auch ein Beispiel, wie man den Befehl nutzen kann, um bei unterschiedlichen Textlängen alle Fluchten bündig zu bekommen.

Unten eine Variante mit Photos statt Icons. Wichtig ist hier, dass man den Rand des grauen Strukturrahmens auf 0 setzte, damit das Bild das Feld ausfüllt, und man stattdessen den Rand der Elemente einstellt. Oben und unten dieser Ränder kann man auf 0 lassen, die braucht man nicht. Ganz wichtig: Die Bilder müssen alle dieselben Abmaße haben.

Um die kleinen Icons reinzubekommen, nutzt man die Funktion „Innerer Abschnitt“. Wenn man diese in ein Feld zieht, wird dieses horizontal geteilt, und klickt man mit rechts auf das graue Icon, kann man weitere Spalten hinzufügen oder löschen.

ALUMNI-TREFFEN


Alle Infos zum Alumni-Treffen, Termine, Gäste und Anmeldung.

SOMMERFESTIVAL


Alle Infos zum Sommerfestival, Termine, Bands und Anmeldung.

RUNDER TISCH


Alle Infos zum Runden Tisch der Fachschaften, Termine, Gäste und Anmeldung.

LOREM IPSUM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

LOREM IPSUM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Schwarzes Brett

Das Element für neue Aushänge am schwarzen Brett für den Fall, dass jemand alle anderen gelöscht hat.

++ [TITEL] ++

[Text]

Komplexe Seite

Dies ist eine Variante für eine komplexe Seite. Es funktioniert allerdings nur, wenn man keine Schatten verwendet, da diese sonst auf den Feldern liegen. Prinzipiell ist in den Strukturen alles möglich einzubauen, von Texten und Buttoms bis hin zu Icons und Photos, sogar Videos einbinden. Sollte aber nur ohne Widgets verwendet werden, da der Bildschirm in voller Breite genutzt werden sollte. Die Photos stellt man ein, indem man als Hintergrund ein Bild wählt (Größe auf „Cover“) und dann unter „Hintergrund Überlagerung“ eine Farbfläche mit entsprechender Deckkraft darüberlegt.

2020

Lorem ipsum
dolor sit amet

LOREM IPSUM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.