Bearbeitung der Startseite mit Elementor: Hinzufügen von Modulen (Text, Bilder, Schaltflächen usw.)

Das Erlernen des Hinzufügens von Basismodulen ist eine Grundvoraussetzung für die Gestaltung von Seiten mit Elementor. In diesem Kapitel erfahren Sie, wie Sie Text, Bilder, Schaltflächen und andere gängige Elemente von Hand hinzufügen und deren Stile anpassen, um Ihrer Homepage ihre erste Form zu geben.

Vorbereitung: Einstieg in den Elementor-Bearbeitungsmodus

1. Melden Sie sich im WordPress-Backend an, gehen Sie zu "Seiten" → Suchen Sie "Home" (oder die Seite, die Sie bearbeiten möchten) und klicken Sie auf "Bearbeiten".
2. Klicken Sie auf die Schaltfläche "Mit Elementor bearbeiten" (blau mit Elementor-Symbol) oben auf der Seite, um die visuelle Bearbeitungsoberfläche zu öffnen.

Nach dem Einstieg ist die Oberfläche in drei Bereiche unterteilt:

• Links: Modulplatte(enthält alle Elemente, die hinzugefügt werden können)
• Mitte: Bearbeitungsbereich(Echtzeitanzeige der Seiteneffekte)
• Rechts: Stil-Panel(Detaillierte Stile können angepasst werden, wenn ein Element ausgewählt ist)

Schritt 1: Hinzufügen des Moduls "Titel" (Texttitel)

Überschriften sind das "Gerüst" der Seite und dienen dazu, die Besucher durch die Inhaltshierarchie zu führen.

1. Finden Sie das Header-ModulSuchen Sie im linken Modulbereich das Modul "Titel" (Symbol "T") unter der Kategorie "Basis".
2. Ziehen und Ablegen zum Hinzufügen zur SeiteHalten Sie das Modul "Titel" gedrückt, ziehen Sie es an die Position "+ Element hierher ziehen" im mittleren Bearbeitungsbereich und lassen Sie die Maus los. Jetzt erscheint die Seite mit dem Standardtitel "Dies ist der Titel".
3. Ändern Sie den Inhalt des TitelsWählen Sie das soeben hinzugefügte Titelmodul aus, und auf der rechten Seite wird ein Bearbeitungsfeld angezeigt:
   • Löschen Sie unter "Inhalt" → "Titeltext" den Standardtext und geben Sie Ihren Titel ein (z. B. "Willkommen in meinem persönlichen Blog").
   • Wählen Sie die Ebene unter "Überschriftsebene" (H1 ist die größte, geeignet für Hauptüberschriften; H2 ist die zweitgrößte, geeignet für Zwischenüberschriften, und wird entsprechend der Inhaltsebene ausgewählt).
4. Anpassen des TitelstilsKlicken Sie auf die Registerkarte "Stile" im rechten Bereich, um sie anzupassen:
   • kalligrafischer StilWählen Sie Ihre bevorzugte Schriftart (z. B. "Microsoft Black" "Arial") aus dem Dropdown-Feld "Schriftart".
   • GrößenordnungZiehen Sie den Schieberegler "Schriftgröße", oder geben Sie den Wert direkt ein (die empfohlene Schriftgröße liegt zwischen 24 und 48 Pixel).
   • FarbeKlicken Sie auf das Feld "Textfarbe", um die Farbe des Titels auszuwählen (z. B. schwarz, dunkelblau).
   • sich in der richtigen Reihenfolge aufstellenKlicken Sie auf die Schaltfläche "Textausrichtung", um den Titel links, mittig oder rechts auszurichten (es wird empfohlen, den Haupttitel der Homepage mittig auszurichten).

Schritt 2: Hinzufügen des Moduls "Absatz" (Fließtext)

Absätze werden verwendet, um Einzelheiten darzustellen, wie z. B. eine Zusammenfassung, Beschreibung usw.

1. Absatzmodul hinzufügenSuchen Sie das Modul Absatz (Symbol ist das Absatzsymbol) in der Kategorie "Basis" auf der linken Seite und ziehen Sie es unter das Modul Titel.
2. Ändern Sie den Inhalt des AbsatzesWählen Sie das Absatzmodul aus und geben Sie den Inhalt ein (z. B. "Hier teile ich meine Lebenserfahrungen und Studiennotizen, willkommen zum häufigen Austausch!) .
3. Optimieren von AbsatzformatenWechseln Sie zur Registerkarte "Stile":
   • SchriftgrößeEs wird eine Einstellung von 16-18px empfohlen (zur besseren Lesbarkeit).
   • Ihre Größe (Ehrentitel)Einstellen auf das 1,5-1,8-fache (für einen bequemeren Textabstand).
   • FarbeWählen Sie eine Farbe, die sich vom Titel abhebt (z. B. ein dunkles Grau, um eine zu große Nähe zur Hintergrundfarbe zu vermeiden).

Schritt 3: Fügen Sie das Modul "Bild" hinzu (Bild einfügen)

Bilder erwecken die Seite zum Leben und es wird empfohlen, klare, relevante Bilder zu wählen (z. B. persönliche Fotos, Produktbilder, Landschaften).

1. Bilder hochladen oder auswählenSuchen Sie das Modul "Bilder" in der Kategorie "Basis" auf der linken Seite und ziehen Sie es an den unteren Rand des Absatzes. Wählen Sie das Modul "Bilder" aus und klicken Sie auf "Bild auswählen" unter "Inhalt" → "Bild" auf der rechten Seite:
   • Wenn sich das Bild bereits auf Ihrem Computer befindet, klicken Sie auf "Datei hochladen" → Wählen Sie das Bild aus → Klicken Sie auf "Auswählen".
   • Wenn Sie zuvor ein Bild hochgeladen haben, können Sie das vorhandene Bild direkt in der Mediathek auswählen.
2. Einstellen der BildanzeigeWechseln Sie zur Registerkarte "Stile":
   • GrößenBreite: Legen Sie unter "Breite" den Anteil des Bildes auf der Seite fest (z. B. 100% bedeutet volle Bildschirmbreite, 80% bedeutet schmaler).
   • abgerundete EckeZiehen Sie den Schieberegler Randradius, um die Ecken des Bildes abzurunden (je größer der Wert, desto stärker sind die Ecken abgerundet).
   • fig. ein traumatisches Erlebnis, das jemanden verfolgtSchalten Sie "Box Shadow" ein, um dem Bild einen leichten Schatten hinzuzufügen (um ihm ein mehrschichtiges Aussehen zu verleihen).
3. Bildbeschreibung hinzufügen (optional)Die Eingabe einer Beschreibung des Bildes (z. B. "Meine Reisefotos") unter "Inhalt" → "Alternativer Text" hilft den Suchmaschinen, den Inhalt des Bildes zu verstehen und verbessert die Suchmaschinenoptimierung.

Schritt 4: Hinzufügen des Moduls "Schaltfläche" (geführter Klick)

Schaltflächen werden häufig verwendet, um Besucher zu Aktionen zu veranlassen, z. B. "Mehr anzeigen", "Kontakt", "Jetzt kaufen" usw.

1. Modul Schaltfläche hinzufügenSuchen Sie das Modul "Schaltflächen" in der Kategorie "Basis" auf der linken Seite und ziehen Sie es per Drag & Drop unter das Bild.
2. Einstellung von Schaltflächeninhalten und LinksÜberprüfen Sie das Schaltflächenmodul auf der rechten Seite unter "Inhalt":
   • Kopien: Geben Sie den Text der Schaltfläche ein (z. B. "Meine Beiträge anzeigen").
   • LinkKlicken Sie auf das Eingabefeld neben "Dynamisch" und geben Sie die Linkadresse ein (z. B. die Adresse Ihrer Blogroll-Seite oder einen externen Link).
     • Wenn Sie auf eine Seite im Sender verlinken, können Sie auf das Symbol "Seite auswählen" auf der rechten Seite des Eingabefeldes klicken, um die Zielseite direkt auszuwählen.
3. Entwerfen von SchaltflächenstilenWechseln Sie zur Registerkarte "Stil", um auffällige Schaltflächen zu erstellen:
   • FarbeWählen Sie Weiß für "Textfarbe" und helle Farben für "Hintergrundfarbe" (z. B. Blau, Orange, um mit der Hauptfarbe der Seite zu harmonieren).
   • GrößenWählen Sie "Mittel" oder "Groß" für "Schaltflächengröße", um die Schaltfläche leichter anklicken zu können.
   • GeometrieStellen Sie den "Border Radius" auf 5-10 px ein (leicht abgerundete Ecken sind ästhetisch ansprechender).
   • ** Hover-Effekt **: Klicken Sie auf die Registerkarte "Hover", um die Farbe einzustellen (z. B. die Farbe zu vertiefen), wenn die Maus in der Schwebe ist, um das interaktive Gefühl zu verbessern.

Schritt 5: Modulabstände anpassen (für eine übersichtlichere Seite)

Nach dem Hinzufügen mehrerer Module kann es zu Problemen mit den Abständen zwischen den Modulen kommen, und das Layout muss angepasst werden:

1. Ausgewählte ModuleKlicken Sie auf den Rand des Moduls (es erscheint ein blauer Rahmen).
2. Anpassen der äußeren RänderIn der rechten Leiste "Erweitert" -> "Rand", stellen Sie den Abstand zwischen dem Modul und den oberen und unteren Elementen ein (z.B. wird "Oberer Rand" auf 30px eingestellt, um den Abstand zum oberen Modul zu vergrößern).
3. sich aufstellen: Drücken und halten Sie Ctrl Taste (oder Command Taste) Wählen Sie mehrere Module gleichzeitig aus und klicken Sie auf die Schaltfläche "Ausrichten" in der oberen Symbolleiste (z. B. "Zentriert ausrichten"), um die Elemente sauberer auszurichten.

Schritt 6: Speichern und Vorschau

1. Änderungen speichernKlicken Sie auf die Schaltfläche "Aktualisieren" in der linken unteren Ecke der Seite (es wird empfohlen, die Änderungen nach jeder Änderung rechtzeitig zu speichern).
2. Vorschau-EffektKlicken Sie auf die Schaltfläche "Vorschau" in der oberen linken Ecke und wählen Sie "Desktop-Vorschau", "Tablet-Vorschau" und "Handy-Vorschau", um den Anzeigeeffekt auf verschiedenen Geräten zu überprüfen (stellen Sie sicher, dass sich der Text nicht überschneidet und das Bild auf dem Handy nicht verzerrt ist).

Tipps für Einsteiger

• Module können wiederholt hinzugefügt werden: Wenn Sie mehr als einen Absatz oder ein Bild benötigen, können Sie das entsprechende Modul direkt mehrmals per Drag & Drop hinzufügen.
• Modul löschen: Nachdem Sie ein Modul ausgewählt haben, drücken Sie auf das Tastenfeld Delete oder klicken Sie auf das Symbol "Mülleimer" oben im Modul.
• Modul kopieren: Nachdem Sie ein Modul ausgewählt haben, klicken Sie auf das Symbol "Kopieren", um Elemente desselben Stils schnell zu kopieren (ändern Sie einfach den Inhalt).

Mit den obigen Schritten haben Sie die grundlegenden Fähigkeiten zum Hinzufügen von Modulen in Elementor erlernt. Als nächstes können Sie versuchen, "Icon", "Divider", "List" und andere Module hinzuzufügen, um die Homepage reichhaltiger zu gestalten!