- Schwierigkeitsgrad: sehr leicht
- Umsetzungsdauer: 50-90 Minuten
Nun beginnen wir mit dem designen der Homepage, jetzt wirst du sehen wie du innerhalb von wenigen Minuten die deine Seite einfach, schnell und vor allem professionell einrichten kannst.
Gehe dafür ins Dashboard deiner Seite.
http://ihre-domain.de/wp-admin
Klicke links in der Menüleiste auf „Seiten“. Da siehst du aktuell zwei Seiten, einmal die Datenschutzseite „Privacy Policy“ diese bearbeiten wir aber erst einige Schritte später.
Wir benötigen die „Sample Page“ welche wir jetzt bearbeiten werden. Klicke entsprechend auf diese Seite.
Hier können wir nun den Inhalt der Seite einstellen. Klicke als erstes das Popup Fenster weg. (Da wird nur kurz der interne Editor von WordPress / Gutenberg-Editor erklärt. Diesen verwenden wir aber nicht.)
Klicken oben in den Bereich „Sample Page“ und benenne diesen um in „Startseite“
Danach müssen wir noch das richtige Seiten-Attribute einstellen.
Gehe dafür rechts im Menü auf „Seiten-Attribute“ und stelle es auf „Elementor Volle Breite“ um.
Und klicke oben rechts auf „Aktualisieren“.
Jetzt geht es los mit den designen der Homepage. Klicke dafür auf „Mit Elementor bearbeiten“.
Es öffnet sich der Elementor Editor, hier können wir jetzt sehr einfach die Homepage gestalten.
Als erstes wollen wir das Textfeld entfernen. Gehe dafür auf das Textfeld und klicke auf das kleine „x“ damit löschen wir diesen Baustein.
Um jetzt das Layout für unsere neue Fahrschule Homepage zu erstellen, klicken wir jetzt auf das graue Ordnersymbol.
Hier finden wir unter dem Reiter sehr viele vorgefertigte Seiten, diese kann man komplett benutzen und entsprechend an sein Thema anpassen.
Da wir hier aber eine kostenlose Homepage erstellen wollen, ohne weitere monatlichen Kosten, bauen wir auch mit der kostenlosen Basis Version von Elementor die Homepage weiter.
Als Basis-Design wählen wir das Agency Template. Dafür über die Seite gehen und auf „einfügen“ klicken.
Jetzt dauert es ein paar Sekunden und das Design wird erstellt.
Das Design ist jetzt geladen, jetzt könnt ihr entsprechend in die einzelnen Elemente klicken und verändern.
Links findet ihr eine Leiste wo ihr auch noch entsprechende Elemente verändern könnt. Zum Beispiel Farben, Größen, Abstände und vieles mehr.
Als erstes wollen wir jetzt den Banner (das große Bild) zum Thema anpassen, da eignet sich ein Bild mit Autos sehr gut.
Um das Bild zu ändern klicken wir über dem großen Bild auf die „sechs Punkte“ im hellblauen Feld.
Rechts in der Bearbeitungsleiste können wir die Einstellungen für diesen Abschnitt vornehmen.
Klicke da jetzt auf „Stil“.
Um das Bild zu ändern klicken wir über dem großen Bild auf die „sechs Punkte“ im hellblauen Feld.
Rechts in der Bearbeitungsleiste können wir die Einstellungen für diesen Abschnitt vornehmen.
Klicke da jetzt auf „Stil“. Da können wir jetzt auch das Bild austauschen.
Um das Bild auszutauschen klicke einfach auf das Bild und wähle ein neues Bild aus.
Es öffnet sich die Mediathek, hier kannst du entweder aus vorhanden Bildern wählen oder neue hochladen.
Dafür klicke oben links auf „Dateien hochladen“ und wähle das neue Bild zum hochladen. Das dauert je nach Bildgröße einige Sekunden.
Sobald du dein Bild hochgeladen und ausgewählt hast, klicke unten rechts auf „Medien einfügen“.
Das Bild wurde jetzt erfolgreich ausgetauscht und sieht wie folgt aus.
Bei dem Bild ist auch noch eine Hintergrund-Überlagerung aktiv. Damit wird eine Farbe oder auf Wunsch auch ein weiteres Bild über das erste Bild gelegt.
Vorteil in unserem Fall, man kann dadurch die Schrift besser sehen.
Die Hintergrund-Überlagerung kann man auch ändern. Zum Beispiel die Farbe oder auch die Deckkraft der Überlagerung.
Dafür gehe links auf den Punkt „Hintergrund Überlagerung“, hier experimente einfach ein wenig rum und schaue was am besten zu deiner Homepage/ Thema passt.
Jetzt wollen wir in diesem Bild den Text anpassen.
Dafür musst du einfach nur auf den zu ändernden Text klicken und entweder direkt im Feld oder links im Textfeld den Text anpassen.
In unserem Fall haben wir uns für den Text „Fahrschule in Berlin Spandau“ entschieden.
So können Sie die Textgröße oder auch die Farbe anpassen.
Klicken Sie dafür auf die entsprechende Textpassage, in diesem Fall auf die Überschrift und dann links auf „Stil“. Hier finden Sie nun die Textfarbe, Typografie (enthält Schriftart, Schriftgröße, Textbreite, Text-Decoration und mehr.)
Dies kann bei jedem Text eingestellt werden.
Als nächstes habe ich den zweiten Text im Banner Bild geändert. Text anklicken und entweder direkt im Editor oder links im Textfeld den entsprechenden Text ändern.
Jetzt wollen wir das Bilder Karussell (mit den vielen Logos) ändern, dafür sollen da die Fahrzeugklassen welche die Fahrschule anbietet rein. Dafür benötigen wir aber ein andere Modul und müssen das vorhandene löschen.
Dafür klicken wir auf das Bilder Karussell, es aktiviert sich dadurch ein dünner blauer Rahmen, oben finden wir das „plus“, „die sechs Punkte“ und das „x“ damit können wir das Modul löschen.
Das Modul ist jetzt verschwunden, um ein neues passendes Modul für die Fahrzeugklassen zu finden, müssen wir jetzt über das unter Modul mit der Bewertung gehen, dieses Feld wird wieder mit einem dünnen blauen Rahmen markiert und den dazugehörigen 3 Auswahlmöglichkeiten. Jetzt wollen wir zwischen dem Banner Modul und dem Bewertungs-Modul ein neues einsetzen. Dafür einmal auf „+“ klicken und auf den „grauen Ordner“.
Es öffnet sich wieder ein Popup mit den Seiten, dieses mal benötigen wir aber nur ein Modul (einen Websiten-Block) dafür gehen wir oben auf „Blöcke“. Hier befindet sich zahlreiche vorgefertigte Modul für deine Homepage.
Wir suchen jetzt ein Modul womit man die Fahrzeugklassen am besten präsentieren kann.
Wir haben uns für folgendes Modul entschieden. Damit kann man visuell per Bild und einmal per Überschrift, sowie einen kleinen Text die entsprechende Fahrzeugklasse präsentieren.
Wenn Sie auch ein passendes Modul gefunden haben, dann klicken Sie auf „einfügen“.
Die Überschrift benötigen wir dabei nicht mehr und wollen die löschen.
Dafür über die Überschrift „Services“ fahren bis der blaue Rahmen kommt und dann oben rechts auf den „Stift“ mit der „rechten Maustaste“ klicken. Dann finden Sie alle Möglichkeiten für diese einzelnen Überschrift.
Wir wollen diese aber löschen und klicken ganz unten auf „löschen“.
Jetzt sollen noch die Abstände über und unter dem Modul verringert werden.
Dafür über dem Modul auf die „sechs Punkte“ klicken.
Es öffnet sich links wieder im Bearbeitungsfenster wieder ein Menü zu diesem Modul. Oben finden Sie den Reiter „Erweitert“ da bitte drauf klicken.
Jetzt sehen Sie ein paar Einstellungsmöglichkeiten um solche Abstände wie wir Sie ändern wollen, geändert werden können. Da sind bei Padding zwei Werte mit 100 (Pixel) angeben. Genau diese Werte sind die Abstände über und unter dem Modul. Diese wollen wir verringern. Einfach rein klicken und die Werte ändern.
Der große Vorteil, alle Änderungen die Sie vornehmen sehen Sie sofort Live im Editor.
Wir haben uns für die Werte 0 und 30 entschieden, damit die Abstände nicht so groß sind. In diesem Fall sollen die Fahrzeugklassen direkt unter dem großen Banner Bild angezeigt werden.
Jetzt zu den Boxen für die Fahrzeugklassen. Insgesamt sollen 5 Klassen angeboten werden, momentan haben wir aber nur 3 Boxen. Wir brauchen also 2 weitere Boxen.
Dafür fahren wir über eine der Boxen um diese zu duplizieren, es aktiviert sich ein Rahmen und ein graues Feld mit einem geteiltem Bildschirm, in der oberen linken Ecke. Jetzt ist sehr wichtig das richtige Feld auszuwählen. Entsprechendes das „graue Feld mit dem geteiltem Bildschirm“ was im Vordergrund zur Box gehört.
Klicken Sie da mit der „rechten Maustaste“ drauf und klicken auf „Duplizieren“. Das Ganze wiederholen wir noch einmal damit wir 5 Boxen haben.
Jetzt wirkt das aber alles ziemlich gequetscht. Damit dies nicht mehr der Fall ist müssen wir den Abschnitt dafür verbreitern.
Dafür fahren wir über das Gesamte Modul und klicken wieder auf die „sechs Punkte“.
Links im Bearbeitungsfenster (Abschnitt bearbeiten) können wir jetzt unter „Inhaltsbreite“ auf „volle Breite“ einstellen. Damit wird der Bereich an die Browserfenster komplett angepasst.
Das Ganze muss jetzt aber noch für den inneren Abschnitt gemacht werden.
Links im Bearbeitungsfenster können wir jetzt unter „Inhaltsbreite“ auch auf „volle Breite“ einstellen. Damit wird der Bereich an die Browserfenster komplett angepasst.
Jetzt sieht man auch das die Boxen sich die gesamtverfügbare Breite teilen und nicht mehr gequetscht aussehen.
Jetzt soll natürlich endlich der Boxinhalt geändert werden.
Dafür fahre mit der Maus über die entsprechende Box, es kommt der blaue Rahmen und oben recht der „Stift“ da einfach drauf klicken. Links im Bearbeitungsfenster können jetzt das Bild, die Überschrift/ Titel und die Beschreibung geändert werden und auf Wunsch auch ein Link auf eine interne Seite oder externe Seite gesetzt werden. Zum Thema Link setzen, finden Sie mehr im „Schritt Links richtig setzen“.
Ein Bild, die Überschrift sowie den Text haben wir jetzt von der ersten Box geändert. Jetzt wollen wir aber noch die Bildgröße, Abstände und die Schrift ändern.
Dafür oben auf „Stil“ klicken und da mit den Schiebereglern die Einstellungen ändern. Einfach probieren bis es super aussieht.
Das sieht doch schon viel besser aus.
Jetzt soll noch die Schrift geändert werden, dafür im linken Bearbeitungsfenster auf „Inhalt“ klicken und da entsprechend die Farben und die Typografie ändern.
Jetzt haben wir alle Boxen geändert und die Fahrzeugklassen hinzugefügt.
Nun wollen wir uns das Ganze mal als Vorschau im Browser anschauen. Dafür müssen wir unten links neben dem Button „speichern“ auf das „Auge“ klicken. Es öffnet sich ein neuer Browser-Tab wo die Vorschau-Ansicht geladen wird.
Dieses Tab kannst du ruhig offen lassen, denn immer wenn du wieder auf „speichern“ klickst, aktualisierst sich diese Vorschau von allein und du kannst dir deine Einstellungen Live anschauen.
So machst du das jetzt mit der Ganzen Website weiter. Arbeite dich von Modul zu Modul vor. Mach dir einen Überblick was du alles auf der Homepage präsentieren möchtest und arbeite dies ein.
Live Support
- Erreichbar: von 8:00 - 18:00 Uhr
- Durchschnittliche Antwortzeit: 13 Minuten