Builderall für Anfänger

Minikurs

In dieser Tutorial-Serie zeige ich dir das LMS Learndash. Du lernst, wie man Learndash installiert und einen Kurs samt Lektionen, Modulen und Tests anlegt – und wie ich Learndash optimiere, um meinen Studenten ein noch besseres Erlebnis zu bieten.

Lektion

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 …

Kursinhalt

Builderall Tutorial Deutsch (02/09): DSGVO & Cookies

https://youtu.be/Wbnqj_EWICo Datenschutzgrundverordnung In diesem Video werden wir uns darum kümmern, die Seite für den deutschen Markt fit zu machen, sprich wir werden uns um die Datenschutzgrundverordnung kümmern. Kurz DSGVO - das Schöne ist: Da  alle Werkzeuge, die...

Builderall Tutorial Deutsch (02/08): DSGVO Impressum Datenschutz

https://youtu.be/yrHa2J1aiYg Achte auf alle rechtlichen ToDos Impressum, DSGVO, Datenschutz - einiges musst du beachten, Buidlerall hilft dir dabei ... DSGVO - Informationen Die Datenschutzgrundverordnung ist ein wichtiger, nicht zu ignorierender Punkt für dich als...

Builderall Tutorial Deutsch (02/08): Website veröffentlichen

https://youtu.be/ST2sfzs_Dw4 Website publizieren In diesem Video schauen wir uns an, wie wir das Impressum und die Datenschutzerklärung anlegen. Dazu brauchen wir zunächst eine Seite: Impressum. Ich gehe zu meinen Layouts, wähle dann das Layout aus, in dem ich mein...

Builderall Tutorial Deutsch (02/07): Mobile Version anpassen

https://youtu.be/TK92mVx7oNg Für mobile Geräte optimieren Prima, wir haben mittlerweile unsere erste Website erstellt, - was jetzt noch fehlt? Wir müssen die Seite für die mobilen Geräte, insbesondere für das Smartphone, optimieren. Wir gehen also zu unserer Seite, in...

Builderall Tutorial Deutsch (02/06): Kontaktformular erstellen

https://youtu.be/mfXXQbi7UHo So erstellt du den Kontakt / das Kontaktformular Was jetzt noch fehlt, ist eine Seite: "Kontakt". Dazu gehen wir auf unsere Layouts. Öffne "unser Layout" und füge eine Seite hinzu. Her haben wir wieder alle möglichen Varianten zur Auswahl....

Builderall Tutorial Deutsch (02/05): Banner nutzen

https://youtu.be/gf3ZP1x9bD8 Banner als Medium Als nächstes wollen wir uns noch eine Sektion anlegen, wo wir ein paar Highlights vom Produkt hervorheben können. Also gehen wir zu "Banner". Wir wählen mal "Leistung". Es liegt jetzt unser Leistungs-Banner über unserem...

Builderall Tutorial Deutsch (02/04): Button erstellen und verbinden

https://youtu.be/Mgv3FCioKoU Button erstellen In diesem Video zeige ich dir, wie man einen Button erstellt und dann mit einer anderen Seite verlinkt oder den Button auch mit anderen Funktionen belegen kann. Wir klicken auf "plus" und auf "Button". Hier sehen wir...

Builderall Tutorial Deutsch (02/03): Website Inhalte erstellen

https://youtu.be/rDh7W1bIw5g Website Inhalte erstellen Kommen wir jetzt zum Inhalt. Meine Empfehlung ist, hinter jedem Element, hinter jeder Sektion Kästen zu hinterlegen, mit denen man einzelne Inhaltselemente gruppieren kann. Klingt kompliziert? Ist es nicht: Was...

Builderall Tutorial Deutsch (02/01): Website Builder Überblick

https://youtu.be/CuWImKf7lbo Herzlich willkommen zum nächsten Video auf builderallbox.de Dieses Mal schauen wir uns an, wie wir eine erste Website erstellen. Dazu gehen wir auf "Home", wählen den Pixel Perfect Site Builder und öffnen diesen. Wenn du noch gar keine...

Builderall Tutorial Deutsch (01/06): SSL

https://youtu.be/vZGczovYcUo SSL Seite absichern Willkommen zum nächsten Video. Jetzt wollen wir unsere Seite SSL absichern. SSL ist ein Sicherheitszertifikat. Sobald wir Daten über unsere Website austauschen, also über ein Kontaktformular oder eine Bestellung...

Deine Meinung ist gefragt!

Hat dir der Artikel gefallen? Oder fehlt etwas?
Hinterlasse mir gern einen Kommentar!
Builderall Tutorial Deutsch (02/09): DSGVO & Cookies

Builderall Tutorial Deutsch (02/09): DSGVO & Cookies

https://youtu.be/Wbnqj_EWICo Datenschutzgrundverordnung In diesem Video werden wir uns darum kümmern, die Seite für den deutschen Markt fit zu machen, sprich wir werden uns um die Datenschutzgrundverordnung kümmern. Kurz DSGVO - das Schöne ist: Da  alle Werkzeuge, die...

Builderall Tutorial Deutsch (02/08): DSGVO Impressum Datenschutz

Builderall Tutorial Deutsch (02/08): DSGVO Impressum Datenschutz

https://youtu.be/yrHa2J1aiYg Achte auf alle rechtlichen ToDos Impressum, DSGVO, Datenschutz - einiges musst du beachten, Buidlerall hilft dir dabei ... DSGVO - Informationen Die Datenschutzgrundverordnung ist ein wichtiger, nicht zu ignorierender Punkt für dich als...

Builderall Tutorial Deutsch (02/08): Website veröffentlichen

Builderall Tutorial Deutsch (02/08): Website veröffentlichen

https://youtu.be/ST2sfzs_Dw4 Website publizieren In diesem Video schauen wir uns an, wie wir das Impressum und die Datenschutzerklärung anlegen. Dazu brauchen wir zunächst eine Seite: Impressum. Ich gehe zu meinen Layouts, wähle dann das Layout aus, in dem ich mein...

Builderall Tutorial Deutsch (02/07): Mobile Version anpassen

Builderall Tutorial Deutsch (02/07): Mobile Version anpassen

https://youtu.be/TK92mVx7oNg Für mobile Geräte optimieren Prima, wir haben mittlerweile unsere erste Website erstellt, - was jetzt noch fehlt? Wir müssen die Seite für die mobilen Geräte, insbesondere für das Smartphone, optimieren. Wir gehen also zu unserer Seite, in...

|

Platz für deinen Kommentar!

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Workshops

Workshops, Academy, Magazin, Masterclass

Starten

Neue Themes

Neu: Scroll-Effekte, WooCommerce-Module u.v.m.

Galerie

lms learndash

Aktuelle Version und neue Features um Überblick.

Builderall Preise

Neu: Builderall 5 – Kurs

Überblick

Galerie

Features

Preise