Mit Builderall eine Website erstellen
In diesem Video werde ich zeigen, wie man mit Builderall eine Website erstellt, dazu gehen wir zu unserem Site Builder und auf „neue Website“. Hier bekommen wir jetzt eine große Auswahl an Designs angezeigt. Wir können uns zu jedem Design die Vorschau anzeigen lassen oder wir starten in disem Fall ein ganz eigenes Projekt. Was wir in diesem Demo machen werden. Dazu gehen wir auf „leere Seite“. Dort wählen wir dann in der Tat die leere Seite „blank Page bearbeiten“. Wie der Site Builder aufgebaut ist, – dazu habe ich schon ein Video gemacht. Jetzt kümmern wir uns um die Inhalte der Seite. Zum Verständnis: Wir haben oben im Kopfbereich entsprechend … den Kopfbereich, den Header. Diesen können wir hier in der Höhe beliebig variieren und dieser Kopfbereich ist auf der gesamten Website dann immer der gleiche. In der Mitte gehören später die ganzen Inhalte hin. Fehlt noch unten der Footer, also der Fußbereich, – den können wir jederzeit verschieben und alles, was hier unten reinkommt, das wird dann ebenfalls auf allen Webseiten, die in diesem Layout sind, gleich aussehen.
Schauen wir uns das Ganze in unserer Layoutverwaltung an: Dort siehst du deine Layouts aufgelistet. Wir nehmen ein Layout, öffnen es. Es erscheint die Home-Seite. Beim Aufklappen sehen wir ebenfalls ein Layout – dort liegt die eine Seite „Home“ drin.
Seite gestalten
Fangen wir nun an, unsere Seite zu gestalten. Als Erstes wollen wir den Kopfbereich etwas anpassen. Dazu klicken wir mit der rechten Maustaste einmal oben drauf und wählen „Ansicht bearbeiten“. Wir sehen den Kopfbereich, den können wir nun bearbeiten. Z. B. sagen wir, wie der Kopfbereich aussehen soll, beispielsweise: transparent, volle Breite auf den Satzspiegel usw. Oder wir können auch festlegen, es soll in der Mitte im Satzspiegel liegen und links und rechts wird eine andere Farbe genutzt. In meinem Fall gestalte ich den Kopfbereich einfarbig. Nun zum Hintergrund: Du kannst dafür ein eigenes Bild hochladen oder Farben festlegen, Schatten hinzufügen usw. Wir nehmen jetzt mal einfach irgendeine Hintergrundfarbe; du kannst du eine beliebige Farbe wählen. Du kannst das auch über den Farbwähler machen: eine beliebige Farbe wählen oder du gibst einen eigenen Farbcode ein. Ist der Hintergrund in der gewünschten Farbe, einfach „speichern“. Dann brauchen wir das beim nächsten Mal nicht erneut einzutippen, sondern wir haben gleich alles fertig in unserem Farbmenü.
Logo einfügen
Als nächstes wollen wir oben ein Logo hinzufügen: ein Logo ist im Prinzip ein Bild. Also gehen wir zu unseren einzelnen Elementen, wo wir das Element „Bild“ wählen. Wir haben hier im Beispiel ein Standardbild. Dieses Bild soll nun ein Logo sein. Ich nutze die rechte Maustaste und gebe damit den Befehl „Bild ändern“. Jetzt lädt die Bibliothek, hier sind alle Bilder enthalten, die wir bei uns bereits gespeichert haben. Wir haben eine Bildersammlung – das sind Bilder, die wir frei benutzen können. Wir haben eigens diese einfügen können, verschiedene Buttons, alles Mögliche …
Wir wollen jetzt aber ein ganz individuelles Bild hochladen: Gehe oben auf den Punkt „hochladen“ und wähle mal die kleine Builderall Krake aus. Wir warten, bis das Bild hochgeladen ist, dann kommt die Bestätigung. Jetzt steht die Krake uns zur Verfügung und nun können wir sie auch anklicken. Wir sehen das kleine Häkchen, die Krake ist ausgewählt. Wir bestätigen und da ist sie: Voilà. Ist noch riesengroß. Um sie zu verkleinern, gehen wir an der Seite auf den kleinen Anfasser und ziehen sie einfach in die gewünschte Größe.
Menü einfügen
Als nächstes werden wir jetzt mal ein Menü hinzufügen. Dazu gehen wir auf „Apps“. Wähle „Menü“ und welches ist dir überlassen. Das verschiebst du nun in den Kopfbereich. Als Erstes müssen wir jetzt mit der rechten Maustaste einen Menüpunkt auswählen, damit wir auch was sehen. Das kann ein Link sein oder eine Seite. Wir haben ja im Beispiel hier nur eine Seite bislang, also nehmen wir die. „Bestätigen“ – und da ist sie auch schon. Diese Seite können wir jetzt umbenennen oder auch noch eine Teileinstellung vornehmen. Soll sich die Seite im gleichen Tab öffnen oder im nächsten und es gibt noch weitere Funktionen? Wir lassen der Einfachheit halber erstmal alles, wie es ist und klicken „bestätigen“, es erscheint unser Menü. Gefällt es dir in dieser Form noch nicht, kannst du das Design jetzt etwas anpassen: Also wieder rechte Maustaste, diesmal wählen wir „Ansicht bearbeiten“. Dort sehen wir den hinterlegten Stil, den können wir jetzt umbenennen: Damit wir später den Überblick behalten, welcher Stil zu was gehört. Über das kleine Zahnrad kannst du weitere Einstellungen vornehmen: Design anpassen, die Schriftart, die Schriftart für die Handyansicht auswählen, die Abstände optimieren, die Abstände zum Untermenü anpassen, die Textfarbe wählen … Die Textfarbe werde ich als erstes anpassen.
Fertig: Wir haben unser Menü angelegt. (Zwar erst einen Punkt, aber immerhin.)
Achtung: Zeit, unser erstes Layout zu speichern, da die Seite bislang noch nicht gespeichert wurde. Wir müssen jetzt einen Namen hinterlegen, z.B. Testseite. Es wird gezeigt, was alles gespeichert wird.
Schriften
So, als nächstes kümmern wir uns um die Schriften, die hier verwendet werden. Dazu schauen wir unter „T“, ob uns die Standard schriften gefallen. Andernfalls können wir die Schriften anpassen. In diesem, meinem Fall nehme ich als Standardschrift die Lato. Die Schriftgrößen lassen wir erstmal so wie sie sind. Da müssen wir auch später mal schauen, wie das dann passt. Und an dieser Stelle bitte nicht wundern: manchmal lädt das System die Schriften etwas langsamer nach. Sprich, es wird die eine Standardschrift genommen, die vom System ausgesucht ist. Also ein bisschen Geduld. Dann sieht die Schrift auch ordentlich aus.
Ok, damit habe ich meine Hauptschriften zugeordnet und bei dem Menü werden wir das auch noch einmal machen. Damit wir im Menü die gleichen Schriften haben wie auch auf der Website insgesamt. Ich wähle dafür ebenfalls die Schrift Lato in meinem Beispiel. In Größe 16 Punkt. Das ist die Größe, die ich auch für meinen normalen Text auf der Website gewählt habe. Einmal speichern nicht vergessen. Und weiter geht’s …
0 Kommentare