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 Seite erstellt hast, kannst du hier über „neue Website“ eine neue Seite erstellen. Du bekommst eine große Auswahl an fertigen Templates, mit denen du sofort starten kannst. Du kannst diese ganzen Templates auch filtern, z.B. indem du sagst: Ich möchte nur Templates ansehen, die zum Thema „Webdesign Agentur“ gehören und: entsprechend wird die Ansicht dann gefiltert. (In unserem Beispiel hier ist das ein bisschen anders: Wir haben in den vorherigen Kursteilen schon eine Seite erstellt, deswegen gehe ich zu „meine Seiten“, um meine Seite zu bearbeiten. Wir klicken unten auf das blaue Icon „bearbeiten“. Es lädt die Vorlage, die wir ausgewählt haben.)
Grundprinzip des Page Builders
Am besten jedoch noch einmal einen Schritt zurück: Ich werde nochmal alles löschen und wir fangen wirklich Schritt für Schritt von vorne an. In diesem Teil möchte ich zeigen, wie das Grundprinzip des Page Builders funktioniert: Im Kopf Menü sehen wir oben, welche Seiten in dem Layout enthalten sind, also klassisch eine Seite „Home“ und eine Seite „Module“ / Layout – also 2 Seiten. Daneben können wir die Ansicht verändern, entweder als Desktop oder die mobile Ansicht wählen. Die einzelnen Module können nun pro Ansicht so verschoben werden, dass sie für uns perfekt aussehen.
- Wir können auch Arbeitsschritte rückgängig machen.
- Zudem können wir uns ein Lineal einblenden, um Elemente besser auszurichten.
- Wir können auch einzelne Elemente nicht nur löschen, sondern auch verstecken – diese sind dann hinter einem Button versteckt. Und von dort können wie sie auch wieder zurückholen.
- Außerdem haben wir hier die Ansicht „Vorschau“: Klick, da sind dann alle Hilfslinien und Marker verschwunden, so dass wir die Seite so sehen, wie sie später auch wirklich aussieht.
Über den Button „Weiterbearbeiten“ komme ich wieder in unseren Bearbeitungsmodus. Dort finden wir den Punkt „speichern“. Dieser Klick speichert unser Layout. Das sollte man auch regelmäßig tun. Alle Seitenelemente, die wir hinzufügen wollen, gibt es im Überblick: Als Erstes haben wir die wichtigste Ansicht – das sind die Layouts. Ihr müsst euch das so vorstellen, dass ihr pro Website verschiedene Layouts anlegen könnt. Ein Einzel-Layout umfasst den Kopfbereich, den Hauptbereich und den Fußbereich. Ihr könnt Hauptbereiche einmal anlegen und das gilt dann für alle Folgeseiten. Die Folgeseiten verstecken sich im Layout.
Verschiedene Layouts anlegen
In diesem Fall hier im Beispiel haben wir 2 Seiten. Ich kann die Seiten wechseln und da sehen wir, dass diese beiden Seiten den gleichen Kopf- und auch den gleichen Fußbereich haben. Sprich Kopf- und Fußbereich wird immer pro Layout angelegt. Das gilt irgendwann auch für die Schriften und für die Farben. Das ist dann immer in einem Layout gespeichert. Auf diese Weise könnt ihr verschiedene Layouts anlegen, zum Beispiel ein Layout für die Standardseiten, also Kontakt, über mich, die Einstiegsseite – all diese Dinge.
Es ist ein Layout für einen Mitgliederbereich gewünscht? Der ein anderes Menü haben soll, der vielleicht andere Farben hat? Alles möglich. Auf diese Weise könnt ihr dann die verschiedenen Seiten sauber voneinander trennen und bearbeiten.
Ergo: Das ist der wichtigste Punkt hier oben: „Layouts“.
Schriften auswählen
Dann haben wir den Bereich „Schriften“. Schriften werden mit dem jeweiligen Layout zusammen geladen. Diese könnt ihr dort entsprechend bearbeiten. So musst du nicht jedes Mal alles erneut eintippen, – wie eine Überschrift aussehen soll etc. Hier wählst du die Größen, die Schriftfonts. Bitte alles einmal festlegen in den verschiedenen Gruppen. Nun könnt ihr auf diese Schriftgruppen jederzeit zurückgreifen. Der wichtigste Punkt ist das „Pluszeichen“, denn hinter diesem Pluszeichen sind alle Seiten-Elemente enthalten, die ihr in euer Layout einfügen könnt: Pop Up Texte, Banner, Boxen, Buttons, Bildergalerien, einzelne Menüs, Audios, Videos, Kontaktformulare etc. (Es gibt übrigens noch weitere verschiedene Untermenüs, die ihr nutzen könnt.)
Zusammenfassung
Was wir uns merken müssen, ist: „Layouts„. Darüber legen wir die Seiten an. Schriften können wir als Schriftfamilien vordefinieren über das Pluszeichen fügen wir die einzelnen Seitenelemente hinzu. Dann haben wir noch das Zahnrädchen. Dort nehmen wir die wichtigsten Konfigurationen zu unserer ganzen Website, also nicht für das Layout, sondern für die komplette Website fest.
Das ist z.B. einmal der DSGVO-Aspekt, das können wir hier definieren. Außerdem können wir eine Sitemap erstellen, Benutzerverwaltung – all solche Dinge, die die gesamte Website betreffen.
Der nächste Punkt ist das „Check out“. Damit sind wir im Bereich „Shop“, dann haben wir natürlich einen Blog, wir können auch mehrere Blogs unserer Website hinzufügen. Vor allem geht es aber hier darum, komplette Shop-Systeme aufzubauen.
Ok, dies erst einmal als allererster Überblick, wie der Site-Builder von Builderall aufgebaut ist.
0 Kommentare