Eine Sitejet-Website erstellen

Wie du mit dem Sitejet Website Builder schnell und einfach eine Website erstellst, zeigen wir dir Schritt für Schritt in diesem Artikel. 

Basiswissen

Füge ein neues Projekt hinzu, indem du auf "+ Website" klickst. Wähle nun das gewünschte Template aus oder starte ohne ein Template. Klicke auf "Website Bearbeiten" in deiner Website-Übersicht. Damit öffnest du den Website Builder (CMS).

Einen Überblick über den Website Builder findest du in unserem Artikel " Übersicht: Website Builder (CMS)"

Website bearbeiten

In unserem Beispiel wollen wir die Farben, das Logo, einige Inhalte und Bilder anpassen, um unsere eigene Website zu kreieren. Du kannst auch aus dem Website Project Manager heraus Templates komplett auswechseln. 

Tipp: Wechsel das Template nur zu Beginn deiner Arbeit an diesem Projekt, da du ansonsten alle Änderungen mit dem neuen Template überschreibst. Sitejet hat außerdem einen eingebauten Snapshotmanager, der es dir ermöglicht, das Projekt auf einen älteren Stand zurückzusetzen, sofern es z. B. zu einem Missgeschick gekommen ist. Speicherstände fungieren dadurch auch als "Backup" (auch "Snapshot" genannt). Gibt es ungespeicherte Änderungen, ist das Disketten-Symbol orange.

Logo ändern

In den meisten Templates und Websites werden für Logos Bilder verwendet. Wählst du ein neues Bild aus, kannst du mit unserem Farberkennungstool automatisiert die neuen Primär- und Sekundärfarben bestimmen lassen. Näheres hierzu erfährst du im Abschnitt " Farbschema". Um ein Bild als Logo zu verwenden, gehe wie folgt vor:

1. Bewege deine Maus über "+Inhalt hinzufügen"
2. Klicke auf "Element"
3. Ziehe das "Logo"-Element an die gewünschte Stelle auf der Website

Sitejet wird dich nun fragen, ob du das Logo auf der gesamten Website oder nur auf dieser Seite anpassen willst. Entscheidest du dich dafür, das Logo global auszutauschen, kannst du wie oben erwähnt das Farberkennungstool nutzen.

Alternativ ist es auch möglich eine einfache Überschrift zu verwenden, falls beispielsweise eine Wortmarke in einer bestimmten Schriftart als Logo eingesetzt werden soll. Gehe dazu wie folgt vor:

1. Bewege deine Maus über "+Inhalt hinzufügen"
2. Klicke auf "Element"
3. Ziehe das "Überschrift"-Element an die gewünschte Stelle auf der Website

Um den Logotext zu bearbeiten doppelklicke auf die neue Überschrift oder markiere das Element und drücke [Enter]. 

Der nun editierbare Text wird durch einen farblichen Hintergrund hervorgehoben. Tippe den gewünschten Namen (in diesem Beispiel nennen wir unsere Bar "Ye Olde Pug Club Pub") ein und bestätige mit [Enter] oder per Klick auf das Häkchen-Symbol. In der Toolbar kannst du den Text auch fett, kursiv, unterstrichen oder durchgestrichen formatieren, nachdem du den entsprechenden Text ausgewählt hast. Mit dem Flaggen-Symbol lassen sich Icons hinzufügen, über das Tropfen-Symbol kannst du die Textfarbe ändern. Noch präzisere Änderungen sind im internen HTML-Editor möglich. Diesen erreichst du per Klick auf "</>".

Da der Sitejet Website Builder das "Flexbox" Model nutzt, haben alle Elemente standardmäßig eine "Flex Basis" von 100%, d. h. sie nehmen immer die volle Breite des übergeordneten Elements ein. Sollte es kein übergeordnetes Element geben, nehmen Elemente die gesamte Breite des Displays ein. Ausnahmen sind manchmal in Presets vertreten, hier wird beispielsweise links und rechts ein Rand gelassen. Manuelle Vorgaben triffst du in den Element-Einstellungen unter dem Reiter "Layout (Flexbox-Item)", indem du die "Basis" von 100% auf "Auto" umschaltest oder einen bestimmten Wert vorgibst. Damit nimmt der Container nur noch die jeweilige Breite seines Inhalts bzw. die vorgegebene an.

Nun verlinken wir unser Logo noch auf die Startseite. Navigiere zum Reiter "Verlinken" und wähle als Ziel "Menüpunkt". Es öffnen sich weitere Felder, die dir helfen, den Link richtig zu setzen. Wähle aus der "Menüpunkt"-Liste "Home" aus und speichere anschließend das Projekt. 

Font und Farbschema

Schriftart ändern

Schriftarten änderst du über den Fonts Manager. Diesen erreichst du folgendermaßen:

1. Klicke auf "Design" in der oberen Menüleiste 
2. Klicke auf "Fonts" 

Wir wählen in unserem Beispiel die Schriftart "Lobster" und importieren sie als Spezialschrift ins Projekt (mehr Informationen zur genauen Vorgehensweise erhälst du im Artikel über das Hinzufügen von Fonts). Wir ändern außerdem die standardmäßige "Großschreibung" von "uppercase" auf "none", damit die Großschreibung so angezeigt wird, wie sie im Element von uns eingetragen wurde. Führe dazu folgende Schritte durch:

1. Bewege deine Maus in der Menüleiste über "Design" 
2. Klicke auf "Theme" 
3. Stelle sicher, dass du im Reiter "Text" bist und klicke diesen an, falls dem nicht so ist
4. Wähle "H2 - Überschrift" aus
5. Wähle im Feld "Großschreibung" den Eintrag "none" aus

In dieser Ansicht lassen sich auch Textvorgaben für andere Elemente treffen, also schaue dich hier ruhig noch etwas um.

Farbschema

Dein Farbschema kannst du in den "Theme"-Einstellungen finden. Nutze die Tastenkombination [Strg] + [Alt] + [Y] oder folgende Schrittfolge, um diese zu öffnen:

1. Bewege in der Menüleiste deine Maus über "Design"
2. Klicke auf "Theme"
3. Im sich rechts öffnenden Fenster klick auf "Farben"

Hier kannst du die Primärfarbe, Sekundärfarbe, Textfarbe und Hintergrundfarbe sowie Benutzerdefinierte Farben einstellen. Die Farben werden automatisch im CSS-Code für die Grundkonfiguration eingetragen und aktualisiert. Alle Presets greifen auf diese Standard Farbvariablen zu. In der Regel ist die Primärfarbe die prominente Markenfarbe, z. B. im Logo. Für das Beispiel wollen wir eine dunkle olivgrüne Farbe als Primärfarbe und ein bräunliches Grau als Sekundärfarbe festlegen. Die Textfarbe wird für Fließtext genutzt, deswegen nutzen wir eine möglichst kontrastreiche Farbe im Bezug auf die Hintergrundfarbe.

Navigation (Menüpunkte hinzufügen & entfernen)

Auf der Beispiel-Website sollen einige Details über die Bar, die Getränke, eine kleine Galerie und Kontaktinformationen angezeigt werden. Dafür passen wir die Navigation etwas an. Klicke doppelt auf das Hauptmenü deiner Website, um es zu bearbeiten. Du kannst es per Klick auch markieren und anschließend [Enter] drücken. Links am Bildschirmrand wird sich ein Einstellungsfenster öffnen. Hier kannst du das Aussehen des Menüs sowie alle Menüpunkte, Animationen und einige weitere Einstellungen bearbeiten. Zunächst reicht es, die Menüpunkte anzupassen.

1. Hier kannst du alle Vorgaben für die Links treffen. 
   1. "Menüpunkt" verlinkt z. B. zu eine Unterseite 
   2. "Extern" gibt Links zu externen Seiten an, zu Dateien in der Medienverwaltung oder "Anchor-Links" bzw. Element-IDs auf der Seite
   3. "Element" triggert beispielsweise animierte Elemente, z. B. Akkordeons 
2. Entferne oder füge neue Menüpunkte hinzu, indem du deine Maus über einen vorhandenen Punkt bewegst und das Plus- oder Mülltonnen-Icon am linken Rand klickst.
3. Setzt du ein Häkchen bei "Aus Seiten generieren", wird die Menüstruktur automatisch aus der Seitenhierarchie generiert. Deine Unterseiten dienen somit als Menüpunkte und können in der Seitenverwaltung ([Strg] + [Alt] + [S]) erstellt, bearbeitet und entfernt werden.

Weitere Informationen zur Navigation findest du in unserem Artikel über " Navigation".

Header fertigstellen (Hintergrund und Text Icons ändern)

Unser für dieses Beispiel ausgewählte Template enthält bereits ein Header-Preset. Hieraus entfernen wir alles, was wir nicht mehr benötigen. Der "Book Now"-Link wird jedoch nicht mehr benötigt. Wir löschen es, indem wir es auswählen und [Entf] drücken. Dafür möchten wir aber eine Faxnummer neben der Telefonnummer abbilden. Wir können Elemente duplizieren, indem wir sie anwählen und per Rechtsklick das Kontextmenü aufrufen. Hier wählen wir "Element duplizieren" aus. Die Tastenkombination [Strg] + [D] dupliziert Elemente noch schneller.

Duplizieren wir nun also das Textelement für die Faxnummer. Um den Klon zu bearbeiten doppelklicken wir diesen und ersetzen die Telefonnummer durch die Faxnummer. Entferne dazu die Telefonnummer vollständig und füge per Klick auf das "Männchen"-Icon die "Fax"-Nummer ein. Um das Icon zu ändern, markieren wir es wie normalen Text. Da es sich um Iconfonts handelt, funktionieren diese ähnlich wie normaler Text. Beim Bearbeiten von Textelementen erscheint eine Werkzeugleiste darunter. Hier kannst du Formate, Schriftarten und -größen, Textstile wie fett, kursiv, durch- und unterstrichen, Farbe, Icons, Ausrichtungen, Verlinkungen, geordnete und ungeordnete Listen sowie Tabellen einstellen. Per Klick auf "</>" hast du auch Zugriff auf einen HTML Editor um noch mehr Kontrolle über die Struktur deines Textes zu bekommen.

Klicke auf das Flaggen-Icon um alle verfügbaren Icons anzuzeigen. Die verfügbaren Icons werden von FontAwesome zur Verfügung gestellt. Nutze die Suchfunktion am Ende der Liste, um bestimmte Icons zu finden.

Die orangene Linie um den Text deutet auf ein Databinding hin. Diese fügen automatisch die im Projekt hinterlegten Kontaktdaten (z. B. Telefonnummer, Name, E-Mail-Adresse, etc.) in den Text ein, so dass du diese nicht bei jeder Änderung auf der gesamten Seite aktualisieren musst. Entferne Databindings indem du den orange umrandeten Inhalt löschst. Hinzufügen kannst du Databindings über die Toolbar mit dem Männchen-Icon (siehe Screenshot oben). 

Willst du also den angezeigten Wert eines Databindings dauerhaft ändern, passe den Wert in den Kontaktdaten an. Bewege dazu deine Maus über "Website" und klicke anschließend auf "Daten".

Als nächstes passen wir den Header-Hintergrund an. Aktuell handelt es sich dabei in unserem Beispiel um einen Bildslider. Für dieses Beispielprojekt möchten wir allerdings ein statisches Bild verwenden. Das Hintergrundbild befindet sich auf dem übergeordneten Container-Element des Header-Presets. Doppelklicke dafür irgendwo am Rand innerhalb des Headers, damit sich dessen Einstellungsfenster auf der linken Seite öffnet.

1. Stelle sicher, dass du das richtige Container-Element mit dem Hintergrund ausgewählt hast, indem du auf die Breadcrumbs unten am Editor-Rand achtest: Wähle den Container mit dem Bild-Icon davor aus
2. Sobald das Element ausgewählt wurde, kannst du im Einstellungsfenster links oben "Hintergrund" auswählen
3. Wechsel nun von "Slider" zu "Bild". Du kannst jedes Bild einfach in den Bereich mit der gestrichelten Umrandung ablegen oder darauf klicken und sie von der Festplatte oder der Medienverwaltung auswählen
4. Hier findest du die Einstellungen für den Parallax Effekt des Hintergrundbildes. 0% sorgt für ein statisches Bild, 50% ergibt einen regelmäßig starken Parallax Effekt und 100% fixiert die Position des Hintergrunds, während der Rest der Seite darüber hinweg scrollt. Du kannst auch eine Hintergrundfarbe und die Transparenz einstellen. So kannst du Hintergründe farblich verändern, aufhellen oder abdunkeln, um z. B. Textinhalte prominenter darzustellen. Über den Farbpicker hast du Zugriff auf alle bereits in der Grundkonfiguration vorgegeben Farben.

"Über uns" Bereich (Container auspacken vs löschen)

Unter dem Header gibt es in unserem verwendeten Template eine Kombination zweier Presets, bestehend aus einem "about-with-image"-Preset und einem "accordion"-Preset darin. Da ein simpler Text ausreicht, um unsere Bar vorzustellen, kannst du die überflüssigen Elemente entfernen. Zunächst möchten wir aber erklären, wie Verschachtelung von Presets und Elementen funktioniert.

1. Das übergeordnete "About-with-image"-Preset: Über das Puzzleteil-Icon gelangst du in die Preset-Einstellungen
2. Das zusätzliche "Accordion"-Preset: Dieses Preset befindet sich innerhalb des "About-with-image"-Presets, weshalb das "Accordion"-Preset rechts vom "About-with.image"-Preset angezeigt wird
3. Dieses Container-Element beinhaltet die Elemente, die in "Content 2" eingefügt wurden; über das Stern-Icon gelangst du zu den Animations-Einstellungen für diesen Container
4. Das aktuell ausgewählte Text-Element ist das letzte Element, dass in den Breadcrumbs angezeigt wird, es ist Bestandteil des "Content 2"-Container-Elements

Klicke auf ein beliebiges Textelement innerhalb dieses Abschnitts und betrachte die Breadcrumbs. Sie geben immer auch die Hierarchie der verschachtelten Elemente an. Beachte die Container mit Puzzleteil-Icon davor. Diese sind die Container-Elemente für das jeweilige Preset. In diesem Beispiel können wir das rechte Preset mit Puzzleteil-Icon entfernen. Dadurch bleibt das "about-with-image"-Preset übrig. Beim Löschen erscheint ein Fenster, wo du zwischen "Auspacken" und "Löschen" wählen kannst.

• "Auspacken" löscht das Container-Element und listet anschließend die Inhalte/Elemente untereinander auf 
• "Löschen" entfernt den gesamten Container mit allen Inhalten

Da wir das das Accordion-Preset inklusive dem Inhalt entfernen wollen, wählen wir "Löschen" aus. Jetzt kannst du die Überschrift anklicken und den gewünschten Text eintippen. Unter jedem markierten Element kannst du per Rechtsklick und anschließendem Klick auf "Element hinzufügen" ein neues hinzufügen. In diesem Falle fügen wir ein Textelement ein. Dies kannst du auch mit der Tastenkombination [Strg] + [2] machen. Füge nun deinen "Über uns"-Text ein. Zwischen Überschrift und Textelement kannst du auch ein "Abstandselement" oder "Spacer" mit [Strg] + [5] oder dem Kontextmenü einfügen. Falls kein Element markiert ist, wird das neue Element am Seitenende eingefügt.

Um das Bild auf der rechten Seite auszutauschen, klicke es doppelt und tausche das Bild genau so aus, wie bereits beim Hintergrundbild im Header geschehen. Du kannst das Bild auch direkt in Sitejet bearbeiten, einen Weichzeichnungseffekt über das Bild legen oder es in Graustufen anzeigen lassen. Klicke auf das "Crop"-Icon in der Werkzeugleiste über dem Bild, um es zu beschneiden. Dort kannst du auch das Seitenverhältnis einstellen, das Bild drehen oder hinein- und herauszoomen. Wähle in diesem Fall ein 1:1 Verhältnis, um ein quadratisches Bild zu erhalten. Der bereits eingestellte Rahmenradius in den Elementeinstellungen im Reiter "Optionen" macht daraus einen kreisförmigen Ausschnitt. Stelle jetzt noch im Einstellungsfenster auf der linken Seite im Abschnitt "Größe" die Größe des Bildes wieder auf 100% ein.

"Leistungen" Bereich (Anker-ID setzen, Icon Element nutzen, Tabellen gestalten)

In diesem Bereich der Website stellen wir das Angebot der Bar vor. Wir wollen eine Auswahl an Getränken zeigen, um den potenziellen Gast über unsere Preise zu informieren.

Zunächst kannst du die Überschrift ändern, beispielsweise "Refreshing Beverages". Wichtig ist auch, die ID der Sektion in den Einstellungen des Hauptmenüs einzugeben, damit die Navigation weiß, wohin sie beim Klicken auf "Getränke" springen muss.

Standardmäßig sind in Templates bereits die IDs für Sektionen einer Website vergeben. Um eine neue ID zu setzen oder eine bestehende zu ändern, gehe wie folgt vor:

1. Wähle den übergeordneten Container der Sektion, um das Einstellungsfenster links zu öffnen
2. Öffne den Reiter "Optionen" um weiter unten den Abschnitt "ID & Klassen" zu finden
3. Wechsle dort zum Reiter "Container (div)" um dort die ID einzugeben, welche im Menü als Ziel angegeben wird (z. B. "getraenke"), Näheres haben wir hierzu im Abschnitt "Navigation" vorgestellt

Icons lockern das Design auf. Das Einfügen von Icons ist dank des Icon-Elements in Sitejet sehr einfach. Hiermit hast du eine noch größere Auswahl als bei den Text-Elementen. Das Icon-Element verwendet Vekorgrafiken anstelle von Fonticons, weshalb das Styling etwas anders funktioniert. Füge das Element folgendermaßen unter der Überschrift hinzu:

1. Bewege deine Maus über "Inhalte hinzufügen" 
2. Klicke auf "Elemente" 
3. Wähle "Icon" aus und ziehe es an die gewünschte Stelle auf der Website

Alternativ hierzu kannst du das Element auch per Rechtsklick über das Kontextmenü hinzufügen, indem hier auf "Elemente hinzufügen" und anschließend auf "Icon" klickst. Den gleichen Effekt erreichst du auch mit der Tastenkombination [Strg] + [8] .

In dem Feld "Icon suchen" kannst du nun nach einem englischen Stichwort suchen, um dein gewünschtes Icon zu finden. Du erhältst eine Auswahl an möglichen Icons. Wähle eines, das dir gefällt und verändere es im Abschnitt "Erscheinungsbild" indem du die Breite und Farbe des Icons oder auch einen Rahmen vorgibst. Im Abschnitt "Ausrichtung" kannst du es dann beispielsweise zentrieren. Falls noch nicht geschehen, platziere das Icon-Element unter der Überschrift in der Leistungssektion. Zum Verschieben von Elementen kannst du das Element entweder mit der Maus ziehen und platzieren oder einfach das ausgewählte Element mit gedrückter [Strg]-Taste über die Hoch-/Herunter-Pfeiltasten verschieben.

Erstelle jetzt ein neues Textelement und nutze die Werkzeugleiste darin, um eine Tabelle zu erstellen. Beim Anklicken des Tabellen-Icons kannst du auswählen, wie viele Reihen und Spalten du nutzen möchtest. Fürs erste reichen 1x2. Du kannst sie aber im nachhinein jederzeit erweitern. Klicke in den Elementeinstellungen des Text-Elements auf den Abschnitt "ID & Klasse" im Reiter "Optionen". Füge hier das Wort "drinks" ein. "drinks" werden wir im CSS Code als Klasse definieren, um die Tabelle etwas ansprechender zu gestalten. Zunächst erweitern wir die Tabelle aber noch um entsprechende Getränke und die jeweiligen Preise. 

Öffne nun den Code-Editor indem du auf "</>" oben rechts in der Ecke des Website Builders klickst. Solltest du dich nicht bereits im Reiter "(S)CSS" befinden, klicke diesen einmal an. Scrolle ans Ende der Ansicht und erstelle die Klasse ".drinks" wie im Foto gezeigt.

Tipp: Du kannst mit der [Tab]-Taste schnell zur nächsten Zelle in der Tabelle springen. Bist du aktuell in der letzten Zelle, wird bei weiterem Drücken eine neue Reihe in der Tabelle hinzugefügt.

Eine Galerie einfügen

Im Leistungsbereich sind weitere Presets, die für dieses Beispielprojekt nicht benötigt werden. Entferne die restlichen Presets bis auf den Footer und schaffe so etwas Platz für die nächste Sektion: die Bildergalerie.

Für Galerien stehen mehrere Presets zur Verfügung, die verschiedene Designs und Anordnungen ermöglichen. Eine Galerie fügst du folgendermaßen hinzu:

1. Bewege deine Maus über "Inhalte hinzufügen" in der oberen Leiste des CMS 
2. Klicke "Preset" um zur Preset-Liste zu gelangen 
3. Unter "Bilder" findest du eine Auswahl an Galerie-Presets

Wähle jetzt "Gallery" (4. Preset) und zieh es auf die Website an die gewünschte Stelle, direkt unter die Leistungssektion. Das Preset fügt sich präzise zwischen übergeordneten Containern ein, wenn du es normal hinein ziehst. Du kannst es aber auch beliebig innerhalb der Container platzieren, indem du [Strg] gedrückt hältst, während du das Preset hinein ziehst. Achte auf die orangene Linie, die anzeigt an welche Stelle das Preset eingefügt wird.

Bilder ändern oder hinzufügen funktioniert auf die gleiche Weise, wie schon im Header. Doppelklicke zunächst eines der Bilder, um das dazugehörige Galerie-Element auszuwählen. Dieses Element ist ein eigenständiges, unabhängiges Element und dem Galerie-Preset untergeordnet. Im Galerie-Element wird der Inhalt, also die anzuzeigenden Bilder, verwaltet. Das Galerie-Preset bestimmt das Erscheinungsbild. 

Nun kannst du links in den Einstellungen Bilder hinzufügen, ändern oder löschen. Du kannst unterhalb der Auswahl auch alle Bilder gleichzeitig löschen. Einzelbilder entfernst du mit dem "X"-Icon in der oberen rechten Ecke des jeweiligen Thumbnails. Am Bild-Icon darunter kannst du das Bild austauschen. Neue Bilder fügst du im oberen Bereich mit der gestrichelten Umrandung hinzu.

1. Um das Aussehen zu verändern öffnen wir die Preset-Einstellungen. Diese erreichst du, wenn du in den Breadcrumbs unten auf den Container mit dem Puzzle Icon klickst
2. Hier kannst du verschiedene Varianten auswählen, falls dir ein anderer Galeriestil besser gefällt
3. Stelle hier z. B. den Hover-Stil, abgerundete Bilder oder die Galerie-Reihenfolge und andere Einstellungsmöglichkeiten ein
4. Im Abschnitt "Spalten" kannst du bestimmen, wie viele Bilder in einer Reihe und pro Viewport (Desktop, Tablet und Mobile) dargestellt werden sollen

Auch hier tragen wir wieder die ID der Sektion in "ID & Klassen" ein, damit unser Menüpunkt die Website auch dort hin scrollen lässt.

Kontaktbereich anpassen

Der Footer ist ebenfalls ein Preset und kann entsprechend deiner Wünsche angepasst werden. Rufe dazu die Einstellungen des Footers im übergeordneten Container per Klick auf das Puzzleteil-Icon auf. Hier können wir den Footer so belassen wie er ist, wir ergänzen lediglich ein paar Informationen und möchten die Google Map etwas bearbeiten.

In den Einstellungen des Google Maps Elements findest du mehrere Gestaltungsoptionen. Du kannst den Typ der Karte einstellen, den Stil (mit einigen vordefinierten Stilen sowie eigener Farbauswahl), die Höhe, die Zoomstufe und ob Steuerungs-Elemente aktiv oder inaktiv sein sollen. Du kannst auch einen oder mehrere eigene Map-Marker als Bild hochladen und deren Größe festlegen. Mit der "Info"-Checkbox kannst du auch weitere Informationen direkt auf den Map-Marker einblenden lassen.

Weitere Informationen zum Google Maps Element erfährst du in unserem Artikle zum Hinzufügen und Bearbeiten von Google Maps Karten in Sitejet.

Impressum (Unterseiten erstellen und Elemente referenzieren)

Sobald wir mit der Hauptseite fertig sind, wird es Zeit, das Projekt zum Abschluss zu bringen. Für gewöhnlich gibt es immer ein Impressum mit Kontaktdaten und wichtigen Angaben, die je nach Land notwendig sind. Beim Erstellen der Seite hat Sitejet bereits diese wichtigen Seiten angelegt. Öffne die Seitenverwaltung über den Punkt "Seiten" in der Menüleiste oberen Rand des Website Builder (CMS) oder klicke [Strg] + [Alt] + [S] um die Seitenhierarchie mit Unterseiten zu sehen.

Bisher waren wir auf der "Home" Seite. In der Seitenverwaltung kannst du im jeweiligen Abschnitt "SEO & Details" zusätzliche Informationen angeben. Um eine Seite umzubenennen, klicke in das "Name" Feld und tippe den gewünschten Namen ein. Die URL ändert sich dann automatisch. Um eine Unterseite zu öffnen, kannst du auf das rechte Icon rechts neben dem Seitennamen klicken. Suche jetzt die "Legal Notice"-Unterseite und öffne sie.

In einem neuen Reiter oben links wird die Unterseite über der Menüleiste in einem Tab geöffnet. Über diese Tabs kannst du problemlos zwischen den geöffneten Seiten wechseln und sogar Inhalte von einer zur anderen Seite übertragen. Da auf der "Legal Notice"-Seite in dem verwendeten Template kein Footer hinterlegt ist "kopieren" wir diesen indem wir eine Referenz für den Footer von der "Home"-Seite auf der "Legal Notice"-Seite einfügen.

Wechsle dazu als erstes zur "Home"-Seite im oberen Reiter und scrolle herunter zum Footer. Markiere den gesamten Footer indem du wie auch zuvor den übergeordneten Container mit Puzzleteil-Icon in den Breadcrumbs anklickst und klicke anschließend rechts und im Kontextmenü auf "Referenz erstellen". Dadurch wird ein Referenzelement erstellt, das identisch aussieht und sich jederzeit dem Original angleicht, sofern dieses geändert wird. Das spart Zeit, wenn Details geändert werden sollen und funktioniert auch über alle Unterseiten hinweg.

Schneide das Referenz-Element mit Rechtsklick und anschließendem Klick auf "Element ausschneiden" (oder [Strg] + [X]) aus und wechsle wieder zur "Legal Notice"-Unterseite. Füge dort die Footer-Referenz per Rechtsklick und anschließendem Klick auf "Element einfügen" bzw. [Strg] + [V] wieder ein.

Tipp: Eine noch schnellere Methode ist es ein Element zu markieren und dann [Strg] + [C] zum Kopieren und [Strg] + [Shift] + [V] zum einfügen zu drücken. Dadurch wird nämlich keine Kopie, sondern ein Referenz-Element eingefügt.

Zusammenfassung

Es ist vollbracht! Mit einem Template, einigen Presets und nur wenigen Zeilen CSS Code hast du bereits deine erste Website erstellt. All das dient als kleine Einführung. Weitere Artikel werden die verschiedenen Elemente, Presets und deren Anwendung sowie weitere interessante Themen im Detail behandeln.

Zurück zum Anfang