Übersicht >Damit lassen sich sehr individuelle Layouts realisieren. easyPage > easyPage - Mit Layouts arbeiten

easyPage - Mit Layouts arbeiten

Inhalte werden in einem Layout-Box-System platziert

goneo easyPage 3.0 arbeitet mit einem Layout-Boxen-System, um die verschiedensten Elemente einer Website zu platzieren. Mit diesem System lässt sich das Layout der Website so realisieren, dass auf verschiedenen Bildschirmgrößen eine optimale Darstellung möglich ist.

Einzelne Layout-Boxen können nebeneinander (horizontal) oder untereinander (vertikal) angeordnet werden. Dies lässt sich festlegen (oder auch verbieten, je nach Wunsch des Webseitenbetreibers). Bei kleinen Bildschirmen wäre es suboptimal, Boxen nebeneinander darzustellen, wenn die Breite des Bildschirms nicht ausreicht. Dann bricht der Browser die Seite so um, dass die einzelnen Layout-Boxen untereinander dargestellt werden. Daher ist idealerweise jeder Inhalt einer Webseite in eine Layout-Box eingebunden.

Auch easyPage-Vorlagen basieren auf Layout-Boxen

In easyPage gibt es über 220 Vorlagen, die sich alle das Anordnungsprinzip mit Layout-Boxen zunutze machen. Inhalte wie Texte, Bilder, Videos sind in Layout-Boxen integriert. Möchte man die Vorlage nutzen und personalisieren, macht man Bekanntschaft mit dem Layout-System. Um Änderungen an der Vorlage vorzunehmen ist es also hilfreich, ein Verständnis dafür zu haben, wie das Layout-System funktioniert.

Eigenschaften für Layout-Boxen

Das Prinzip ist, dass Layout-Boxen auf einer Webseite platziert werden. Diese Systematik aus Layout-Boxen bildet dann das Gerüst der Webseite. In eine Layout-Box kann man dann die eigentlichen Inhalte wie Text, Bilder und Kombinationen daraus einfügen. Dabei kann man für jede einzelne Layout-Box andere Eigenschaften zuweisen. Zu den Eigenschaften gehören:

Die Festelegung, wie die Layout-Boxen zueinander angeordnet werden sollen, also vertikal untereinander oder horizontal nebeneinander
Wie der Inhalt in der Layout-Box angeordnet werden soll: Mittig, links rechts beziehungsweise am oberen oder unteren Rand
Welchen Abstand die einzelnen Layout-Boxen zueinander haben sollen und welcher Abstand zu den Inhalten in der Box bestehen soll
Umrandung
Hintergrundfarbe oder Hintergrundbild

Layout-Boxen lassen sich auch ineinander verschachteln. Dabei kann jede Layout-Box andere Eigenschaften haben. So kann der Hintergrund, der Rahmen, die Größe individuell für jede Layout-Box festgelegt werden.

Wenn man eine neue Layout-Box in einer bestehenden erstellt, erbt die neue Layout-Box die Eigenschaften der umgebenden Layout-Box.

Kombinationen von Layout-Boxen

easyPage 3.0 stellt viele Kombinationen von Layout-Boxen bereit, die vertikal, horizontal oder gemischt angeordnet sind. Diese Kombinationen sind hinter dem Symbol "Layout" zu finden. Die Auswahl der Layout-Boxen-Variante sollte sich danach richten, welche Varianate für den darzustellenden Inhalt am besten geeignet erscheint.

Tutorial:
Header und Footer in eine leere Vorlage einfügen und Layout-Boxen platzieren

Wie man mit easyPage 3.0 diese Layout-Boxen verwendet, zeigt dieses Tutorial. Wir gehen von einer leeren Vorlage aus und fügen zunächst einen Header und einen Footer ein. Ein Header enthält normalerweise ein Logo auf der linken Seite und ein Seitenmenü sowie andere Elemente. Im Footer-Bereich werden in der Regel Links zu Inhalten wie Impressum, Kontaktseiten, Datenschutzerklärung etc. platziert.

Danach fügen wir in den Inhaltsbereich der Webseite eine Kombination aus Layout-Boxen ein und statten die erste davon mit einem Intergrundbild aus der Bildergalerie aus, die in easyPage 3.0 inklusive ist. Dies erfordert dann einige Anpassungen. Wir zeigen also auch, wie das Bild angepasst wird und die Größe der Layout-Box verändert wird. Außerdem sieht man, wie Abstände geändert werden.

Ein Nebenaspekt in diesem Video ist die Auswahl von vordefinierten Textstilen mittels Text-Toolbox. Dem Textstyling widmmen wir aber einen extra Abschnitt.

Das Layout-System in easyPage 3.0 ist sehr vielseitig und flexibel. Layout-Boxen können ineinander verschachtelt werden, wobei Eigenschaften vererbt werden: Die eingefügte Box übernimmt die Eigenschaften der umgebenden Box. Dies lässt sich natürlich ändern.

Damit lassen sehr individuelle Layouts realisieren.

Die Herangehensweise mit Layout-Boxen oder Rastern spielt eine wesentliche Rolle im modernen Webdesign.

Damit sind klare und konsistente Strukturen für die Anordnung von Inhalten auf einer Webseite möglich. Das hilft, verschiedene Elemente wie Text, Bilder und Links auf einer Seite zu organisieren. Diese Konsistenz verbessert das Gesamtbild und die Benutzererfahrung auf der Website.

Dieses Layout-Konzept bildet ein Gerüst zur Anordnung von Inhalten ermöglicht es, Webseiten zu erstellen, die sich automatisch an verschiedene Bildschirmgrößen anpassen. Es strukturiert die Seite visuell und kann dabei helfen, ein sauberes, ausgewogenes und professionelles Design zu erstellen. Dies ist die Basis für gutes Design für Websites, die sowohl ästhetisch als auch ansprechend und benutzerfreundlich sind.

Tutorial-Video:
Layout-Boxen für Text platzieren und anpassen

In diesem Video zeigen wir, wir man Text über ein Bild hinzufügt. Das Bild ist als Hintergrundbild einer Layout-Box eingebaut. Wir übernehmen das aus dem vorherigen Video. In diese Layout-Box fügen wir weitere Layout-Boxen ein, die dann Text beinhalten sollen, nämlich eine Überschrift für die Webseite und (wie in einem folgenden Video gezeigt) noch eine Unterüberschrift.

Zudem zeigen wir im Video, wie man die Boxen genau ausrichten kann, indem man Abstände von oben und von der linken Seite relativ zur umgebenden Layout-Box festlegt.

Mehr Know How zu easyPage 3.0

Überblick
Allgemeine Tipps | easyPage 3.0 starten | Der Webbuilder und seine Funktionen
Videos:
„Willkommen“ |„Mit dem Webbuilder umgehen“

Layouts
Die Idee hinter den Layout-Boxen in easyPage | Inhaltselemente auf einer Webseite platzieren und ausrichten
Videos:
„Header und Footer in eine leere Vorlage einfügen und Layout-Boxen platzieren“ | Video „Layout-Boxen für Text platzieren und anpassen“

Inhaltselemente platzieren
Texte, Bilder und andere Objekte an die richtige Stelle setzen
Videos:
„Kontrolle über Layout-Elemente“ | „Noch eine weitere Layout-Box mit Bildinhalt“ | „Wie man sich das Layout-Boxen-System einer easyPage-Website vorstellen muss“

Weitere Inhaltselemente in easyPage
Umgang mit vorgefertigten und zusammengestellten Objekten
Video:
„Button einfügen, Formen einfügen und ausrichten“

Seitenmanagement
Neue Seiten hinzufügen | Navigationsmenü erstellen und ändern | Mehrsprachigkeit
Videos:
„Seiten und Menüelemente hinzufügen“ | Video „Mehrsprachige Websites herstellen“ | Video „Mehrsprachiges Menü für Websites“

Vorlagen
Die Idee hinter der Vorlagensammlung | Kategorien
Video:
„Vorlage finden und anpassen“

FAQ
Häufige Fragen zu easyPage 3.0 und Antworten dazu.