Elementor Editor - Grid Container

Ein Grid-Container in Elementor ist ein leistungsfähiges Layout-Tool, das es Ihnen ermöglicht, Ihre Webseiteninhalte in einem strukturierten Raster anzuordnen. Der Grid-Container verwendet das CSS-Grid-Layout-System, um Ihre Elemente präzise zu positionieren und zu skalieren.

Container anlegen

Auswahl Grid-Container

Auswahl der Struktur des Grid-Containers

2 Zeilen und 3 Spalten, jedes Feld ist gleich groß.

 

---

Grid - Container
6 Felder in 2 Reihen und 3 Spalten -
links oben 2 Widgets,
rechts oben ein Flex-Container

In jedes Feld können Sie nur 1 Widget einfügen und immer der Reihe nach, also von links nach rechts. Sie können aber auch in ein Feld einen Flex-Container einfügen und darin haben Sie alle Möglichkeiten.

Unter Grind bearbeiten / Layout / Elemente / Auto-flow können Sie auch die Reihenfolge nach Spalten einstellen.

---

 

---

Grid bearbeiten / Layout 
(Container, Elemente, zusätzliche Optionen) 

Layout

• Spaltenanzahl:
  Sie können die Anzahl der Spalten in Ihrem Grid-Container anpassen. Dies ermöglicht es Ihnen, verschiedene Layouts für unterschiedliche Bildschirmgrößen zu erstellen.
• Spaltenbreite:
  Jede Spalte kann eine individuelle Breite haben, die Sie in den Einstellungen festlegen können. Dies ist besonders nützlich, wenn Sie asymmetrische Layouts erstellen möchten.
• Zeilenhöhe:
  Sie können die Höhe der Zeilen anpassen, um sicherzustellen, dass der Inhalt gut aussieht und ausreichend Platz hat.

Container

Der Container selbst hat verschiedene Einstellungen, die Sie anpassen können:

• Hintergrund:
  Sie können einen Hintergrund für den Container festlegen, einschließlich Farben, Bilder oder Verläufe.
• Abstände:
  Paddings und Margins können für den Container eingestellt werden, um den Abstand zwischen dem Container und anderen Elementen zu steuern.
• Rahmen und Schatten:
  Sie können Rahmen und Schatten hinzufügen, um dem Container mehr Tiefe und visuelles Interesse zu verleihen.

Zusätzliche Optionen

Zusätzlich zu den grundlegenden Einstellungen gibt es viele weitere Optionen, die Sie nutzen können:

• Responsive Einstellungen:
  Sie können spezifische Einstellungen für verschiedene Bildschirmgrößen vornehmen, um sicherzustellen, dass Ihr Layout auf Mobilgeräten, Tablets und Desktops gut aussieht.
• Animationen:
  Elementor ermöglicht es Ihnen, Animationen für den Grid - Container und die darin enthaltenen Elemente hinzuzufügen, um die Benutzererfahrung zu verbessern.
• Z-Index:
  Sie können den Z-Index des Containers anpassen, um die Stapelreihenfolge von Elementen zu steuern, was besonders nützlich ist, wenn Sie überlappende Elemente haben.

 

---

 

---

Grid bearbeiten / Stil

1. Hintergrund 

• Hintergrundtyp:
  Sie können verschiedene Hintergrundtypen für den Grid-Container festlegen, einschließlich einfarbiger Hintergründe, Bilder oder Farbverläufe. Um den Hintergrund zu ändern, gehen Sie zu den Stil-Einstellungen und wählen Sie den gewünschten Hintergrundtyp aus.
• Hintergrundfarbe:
  Wählen Sie eine Farbe aus, die als Hintergrund für den gesamten Container dient. Dies kann eine solide Farbe oder ein Verlauf sein, der dem Design Ihrer Webseite entspricht.
• Hintergrundbild:
  Sie können ein Bild als Hintergrund hinzufügen. Hierbei können Sie auch die Position, den Wiederholungsmodus und die Größe des Bildes anpassen.

2. Hintergrundüberlagerung

• Überlagerung aktivieren:
  Eine Hintergrundüberlagerung kann hinzugefügt werden, um den Hintergrund visuell zu verbessern. Dies ist besonders nützlich, wenn Sie Text über ein Bild legen möchten, um die Lesbarkeit zu erhöhen.
• Farbe und Opazität:
  Sie können die Farbe der Überlagerung auswählen und die Opazität anpassen, um den gewünschten Effekt zu erzielen. Eine höhere Opazität macht die Überlagerung dunkler, während eine niedrigere Opazität mehr vom Hintergrundbild durchscheinen lässt.

3. Rahmen

• Rahmen hinzufügen:
  Sie können einen Rahmen um den Grid-Container hinzufügen, um ihm mehr Struktur zu verleihen. In den Stil-Einstellungen können Sie die Rahmenfarbe, -dicke und -art (z.B. durchgezogen, gestrichelt) auswählen.
• Ecken abrunden:
  Um dem Container ein weicheres Aussehen zu verleihen, können Sie die Ecken abrunden. Dies geschieht durch die Anpassung der Eckenradius-Einstellungen.

4. Trennlinie

• Trennlinie hinzufügen:
  Sie können eine Trennlinie innerhalb des Grid-Containers hinzufügen, um verschiedene Abschnitte visuell zu trennen. Dies kann durch das Hinzufügen eines Trennlinien-Widgets erfolgen.
• Stil der Trennlinie:
  Sie können die Farbe, Dicke und den Stil der Trennlinie anpassen. Auch hier können Sie zwischen verschiedenen Linienarten wählen, um das gewünschte Design zu erzielen.

Fazit

Der Grid-Container in Elementor bietet Ihnen eine Vielzahl von Stiloptionen, um das Erscheinungsbild Ihrer Webseite zu gestalten. Durch die Anpassung von Hintergrund, Hintergrundüberlagerung, Rahmen und Trennlinien können Sie ein ansprechendes und professionelles Layout erstellen. Mit diesen Werkzeugen können Sie sicherstellen, dass Ihre Webseite sowohl funktional als auch visuell ansprechend ist. 

---

 

---

Grid bearbeiten / Erweitert 

1. Layout

• Ausrichtung:
  Mit den Layout-Einstellungen können Sie die Ausrichtung der Inhalte innerhalb des Grid-Containers steuern. Sie können Elemente horizontal (z.B. links, zentriert, rechts) und vertikal (z.B. oben, Mitte, unten) ausrichten.
• Abstände:
  Paddings und Margins können für den gesamten Container und für einzelne Elemente eingestellt werden. Dies hilft, den Abstand zwischen den Elementen zu steuern und das Layout zu optimieren.

2. Bewegungseffekte

• Eingangsanimationen:
  Elementor bietet eine Vielzahl von Bewegungseffekten, die Sie auf den Grid-Container oder die darin enthaltenen Elemente anwenden können. Dazu gehören Effekte wie „Einblenden“, „Wischen“ oder „Vergrößern“.
• Effektgeschwindigkeit:
  Sie können die Geschwindigkeit und den Verzögerungseffekt der Animationen anpassen, um den gewünschten visuellen Effekt zu erzielen.

3. Transformieren

• Transformationen:
  Mit den Transformationswerkzeugen können Sie Elemente innerhalb des Grid-Containers verschieben, drehen, skalieren oder kippen. Dies ist nützlich, um einzigartige visuelle Layouts zu erstellen.
• 3D-Effekte:
  Sie können auch 3D-Transformationen hinzufügen, um den Elementen Tiefe zu verleihen, was das Design ansprechender macht.

4. Responsiv

• Responsive Einstellungen:
  Elementor ermöglicht es Ihnen, spezifische Einstellungen für verschiedene Bildschirmgrößen vorzunehmen. Sie können festlegen, wie sich der Grid-Container und seine Elemente auf Mobilgeräten und Tablets verhalten.
• Verstecken/Ausblenden:
  Sie können bestimmte Elemente für bestimmte Geräte ausblenden, um sicherzustellen, dass Ihre Webseite auf jedem Gerät optimal aussieht.

5. Attribute

• HTML-Attribute:
  Sie können benutzerdefinierte HTML-Attribute für den Grid-Container oder die einzelnen Elemente hinzufügen. Diese Attribute können für SEO-Zwecke oder zur Integration mit anderen Tools nützlich sein.
• ID und Klassen:
  Die Zuweisung von IDs und Klassen ermöglicht es Ihnen, spezifische Stile oder Skripte auf bestimmte Elemente anzuwenden.

6. Individuelles CSS

• CSS anpassen:
  Elementor ermöglicht es Ihnen, benutzerdefiniertes CSS für den Grid-Container und seine Inhalte hinzuzufügen. Dies gibt Ihnen die Freiheit, das Design noch weiter anzupassen, als es die Standardoptionen erlauben.
• Stil und Layout:
  Mit individuellem CSS können Sie spezifische Stile und Layoutänderungen vornehmen, die nicht über die normalen Optionen hinausgehen, wie z.B. komplizierte Animationen oder spezifische responsive Anpassungen.

---

---

Zeilen + Spalten im Grid-Container

Zeilen:
Eine Zeile im Grid-Container ist eine horizontale Anordnung von Elementen. Sie können mehrere Zeilen in einem Grid-Container erstellen, um verschiedene Abschnitte Ihrer Webseite zu organisieren. Jede Zeile kann eine unterschiedliche Anzahl von Spalten enthalten, was Ihnen erlaubt, verschiedene Layouts innerhalb derselben Seite zu gestalten.

Spalten:
Spalten sind die vertikale Anordnung innerhalb einer Zeile. Sie können die Anzahl der Spalten in einer Zeile anpassen, um das Layout nach Ihren Wünschen zu gestalten. Elementor ermöglicht es Ihnen, die Breite jeder Spalte individuell zu definieren, sodass Sie eine Vielzahl von Designs erstellen können. Die Spalten können auch responsive eingestellt werden, was bedeutet, dass sie sich je nach Bildschirmgröße anpassen.

  

 

---

Vorteile des Grid-Containers in Elementor:

Flexibilität:
Mit dem Grid-Container können Sie Ihre Inhalte schnell und einfach in einem responsiven Raster anordnen. Sie können die Spaltenanzahl, Spaltenbreite, Zeilenabstände und vieles mehr anpassen, um das perfekte Layout für Ihre Webseite zu erstellen.Responsivität: Der Grid-Container passt sich automatisch an verschiedene Bildschirmgrößen an, sodass Ihre Webseite auf allen Geräten optimal dargestellt wird.

Leistungsfähigkeit:
Das CSS-Grid-Layout-System ist leistungsfähiger und effizienter als herkömmliche Layout-Methoden wie Tabellen oder Floating-Elemente.

Einfache Bedienung:
Elementor bietet eine intuitive Benutzeroberfläche, mit der Sie den Grid-Container ganz einfach konfigurieren und anpassen können, ohne dass Sie Programmierkenntnisse benötigen.

---

 

---

 

Nachteile des Grid-Containers in Elementor:

Lernkurve:
Für Neueinsteiger kann es etwas Zeit in Anspruch nehmen, sich mit den Funktionen und Einstellungen des Grid-Containers vertraut zu machen.

Browserkompatibilität:
Nicht alle älteren Browser unterstützen das CSS-Grid-Layout-System vollständig, sodass Sie möglicherweise Kompromisse bei der Darstellung eingehen müssen.

Komplexität:
Bei sehr komplexen Layouts mit vielen Elementen kann der Grid-Container schnell unübersichtlich werden und die Leistung beeinträchtigen.

Weitere Details zum Grid-Container in Elementor:

Der Grid-Container bietet Ihnen zahlreiche Optionen, um Ihr Layout zu gestalten. Sie können die Anzahl der Spalten, die Spaltenbreite, den Zeilenabstand, die Ausrichtung und vieles mehr einstellen. Außerdem können Sie innerhalb des Grid-Containers weitere Elemente wie Bilder, Text, Buttons usw. platzieren und individuell anpassen.

 

 

Elementor Editor - Typografie am Beispiel Texteditor

Der Texteditor in Elementor ist ein vielseitiges Widget, das es Ihnen ermöglicht, Textinhalte auf Ihrer Webseite zu erstellen und zu formatieren. Die Typografie-Einstellungen sind entscheidend, um das Aussehen und die Lesbarkeit Ihres Textes zu optimieren. Hier sind die wichtigsten Einstellmöglichkeiten im Texteditor und deren detaillierte Erklärungen.

Typografie-Einstellungen 

1. Schriftfamilie

• Erklärung:
  Die Schriftfamilie bestimmt den Stil der Schrift, die für den Text verwendet wird. Elementor bietet eine Auswahl an Google Fonts sowie die Möglichkeit, benutzerdefinierte Schriftarten hochzuladen.
• Beispiel:
  Wenn Sie die Schriftfamilie auf „Roboto“ einstellen, wird der gesamte Text in dieser Schriftart angezeigt, was ein modernes und sauberes Aussehen verleiht.

2. Schriftgröße

• Erklärung:
  Die Schriftgröße legt fest, wie groß der Text auf der Seite angezeigt wird. Sie können die Größe in Pixel (px), em oder rem angeben.
• Beispiel:
  Eine Schriftgröße von 24px für Überschriften sorgt dafür, dass diese hervorstechen, während eine Größe von 16px für Fließtext gut lesbar ist.

3. Schriftschnitt

• Erklärung:
  Der Schriftschnitt ermöglicht es Ihnen, zwischen verschiedenen Gewichtungen der Schrift zu wählen, wie z.B. normal, fett oder kursiv.
• Beispiel:
  Wenn Sie den Schriftschnitt auf „Fett“ setzen, wird der Text hervorgehoben, was besonders für wichtige Informationen nützlich ist.

4. Zeilenhöhe

• Erklärung:
  Die Zeilenhöhe bestimmt den vertikalen Abstand zwischen den Textzeilen. Eine angemessene Zeilenhöhe verbessert die Lesbarkeit.
• Beispiel:
  Eine Zeilenhöhe von 1.5 sorgt dafür, dass der Text nicht zu gedrängt wirkt und leichter zu lesen ist.

5. Buchstabenabstand (Laufweite)

• Erklärung:
  Der Zeichenabstand beeinflusst den horizontalen Abstand zwischen den Buchstaben. Dies kann verwendet werden, um den Text optisch zu verbessern oder um bestimmte Stile zu erzielen.
• Beispiel:
  Ein Zeichenabstand von 1px kann den Text luftiger erscheinen lassen, während ein negativer Abstand von -1px den Text dichter zusammenrücken lässt.

6. Textfarbe

• Erklärung:
  Die Textfarbe legt fest, in welcher Farbe der Text angezeigt wird. Sie können eine vordefinierte Farbe auswählen oder einen benutzerdefinierten Farbcode eingeben.
• Beispiel:
  Eine dunkle Textfarbe auf hellem Hintergrund sorgt für einen hohen Kontrast und verbessert die Lesbarkeit.

7. Textausrichtung

• Erklärung:
  Die Textausrichtung bestimmt, wie der Text innerhalb des Containers positioniert ist. Optionen sind linksbündig, zentriert, rechtsbündig oder im Blocksatz.
• Beispiel:
  Eine zentrierte Ausrichtung eignet sich gut für Überschriften, während linksbündiger Text für Fließtext oft besser lesbar ist.

8. Textüberlauf

• Erklärung:
  Diese Einstellung steuert, wie der Text behandelt wird, wenn er den verfügbaren Platz überschreitet. Optionen sind „clip“, „ellipsis“ oder „scroll“.
• Beispiel:
  Wenn Sie „ellipsis“ wählen, wird der Text, der nicht in den Container passt, mit „...“ abgekürzt, was eine elegante Lösung für lange Texte ist.

Fazit

Der Texteditor in Elementor bietet eine Vielzahl von Typografie-Einstellungen, die es Ihnen ermöglichen, den Text auf Ihrer Webseite individuell zu gestalten. Durch die Anpassung von Schriftfamilie, Größe, Schriftschnitt, Zeilenhöhe, Zeichenabstand, Textfarbe, Ausrichtung und Überlauf können Sie sicherstellen, dass Ihre Inhalte sowohl ansprechend als auch gut lesbar sind. Diese Anpassungen tragen dazu bei, das Gesamtdesign Ihrer Webseite zu verbessern und eine positive Benutzererfahrung zu schaffen.

Elementor Editor - Seitenlayout für einen Beitrag auswählen

Beitragseinstellungen in Elementor

In Elementor können Sie Beiträge einfach bearbeiten und anpassen. Die Beitragseinstellungen bieten Ihnen verschiedene Optionen, um das Erscheinungsbild und die Funktionalität Ihrer Beiträge zu steuern. Hier sind die wichtigsten allgemeinen Einstellungen, die Sie als Neueinsteiger kennen sollten.

Allgemeine Einstellungen 

1. Titel

• Erklärung:
  Der Titel ist der Hauptüberschrift Ihres Beitrags. Er sollte prägnant und ansprechend sein, um das Interesse der Leser zu wecken.
• Beispiel:
  Wenn Sie einen Beitrag über gesunde Ernährung schreiben, könnte der Titel „10 Tipps für eine gesunde Ernährung“ lauten. Dieser Titel ist klar und gibt den Lesern sofort eine Vorstellung vom Inhalt des Beitrags.

2. Status

• Erklärung:
  Der Status eines Beitrags gibt an, ob er veröffentlicht, als Entwurf gespeichert oder in den Papierkorb verschoben wurde. Dies ist wichtig, um den Veröffentlichungsprozess zu steuern.
• Beispiel:
  Wenn Sie einen neuen Beitrag erstellen, können Sie ihn zunächst als „Entwurf“ speichern, um später daran weiterzuarbeiten, bevor Sie ihn veröffentlichen.

3. Titel ausblenden

• Erklärung:
  Diese Option ermöglicht es Ihnen, den Titel des Beitrags auf der Webseite auszublenden. Dies kann nützlich sein, wenn Sie den Titel nicht im Layout anzeigen möchten oder wenn Sie eine andere Überschrift verwenden.
• Beispiel:
  Wenn Sie eine Landing Page erstellen, auf der der Titel nicht sichtbar sein soll, können Sie die Option „Titel ausblenden“ aktivieren, um den Titel zu verbergen.

4. Seitenlayout

• Erklärung: Das Seitenlayout bestimmt, wie der Inhalt auf der Seite angezeigt wird. Elementor bietet verschiedene Layout-Optionen, darunter „Vorgabe“, „Elementor Canvas“ und „Elementor Full Width“.
  • Vorgabe:
    Dies verwendet das Standardlayout Ihres WordPress-Themes, einschließlich Kopf- und Fußzeile.
  • Elementor Canvas:
    Dies ist ein leeres Layout ohne Kopf- und Fußzeile, ideal für benutzerdefinierte Seiten.
  • Elementor Full Width (Volle Breite):
    Dies zeigt den Inhalt in voller Breite an, behält jedoch die Kopf- und Fußzeile des Themes bei.
  • Theme:
    Die Einstellungen des Themes werden angewandt.
• Beispiel: Wenn Sie eine Verkaufsseite erstellen möchten, könnten Sie „Elementor Canvas“ wählen, um eine saubere, ablenkungsfreie Seite zu haben, die sich nur auf den Inhalt konzentriert.

Website Einstellungen

Die Website-Einstellungen in Elementor sind der zentrale Ort, an dem Sie globale Einstellungen für Ihre Website vornehmen. Diese wirken sich auf alle Seiten und Elemente aus, die Sie mit Elementor erstellen.

---

 

---

Design-System: Globale Farben und Schriftarten 

Das Design-System von Elementor hilft dir, ein einheitliches Erscheinungsbild für Ihre Website zu schaffen. Änderungen an den globalen Einstellungen wirken sich automatisch auf alle Elemente aus, die diese Einstellungen verwenden.

2.1 Globale Farben

• Elementor erlaubt es Ihnen, Farbpaletten zu erstellen, die du auf deiner gesamten Website verwenden kannst.
• Sie können Farben für Primär, Sekundär, Akzent und Hintergrund definieren.
• Änderungen an einer globalen Farbe aktualisieren automatisch alle Elemente, die diese Farbe verwenden.
  
  
• 

2.2 Globale Schriftarten

• Definiere globale Schriftarten für Überschriften, Absätze und andere Textelemente.
• Sie können Schriftarten, -größen, -stile und -abstände festlegen.
• Globale Schriftarten sorgen für Konsistenz und erleichtern spätere Änderungen.

Die Standard-Einstellungen sind in der Regel ausreichend

---

 

 

---

Theme-Stil: Typografie, Buttons, Bilder und Formularfelder

Der Theme-Stil ist ein weiterer zentraler Bereich, in dem du das Erscheinungsbild Ihrer Website definierst.

3.1 Typografie

• Passe die Schriftarten, Größen, Zeilenhöhen und Abstände für Überschriften (H1-H6) und Fließtext an.
• Sie können auch Fettdruck, Kursivschrift und Textfarben global einstellen.

3.2 Buttons

• Definiere das Design deiner Buttons, einschließlich:
  • Hintergrundfarbe und Textfarbe.
  • Rahmen und Eckenradius (z. B. abgerundete Buttons).
  • Hover-Effekte, wie Farbänderungen oder Animationen.

3.3 Bilder

• Lege fest, wie Bilder standardmäßig angezeigt werden:
  • Rahmen oder Schatten hinzufügen.
  • Abstände und Ausrichtung anpassen.

3.4 Formularfelder

• Passe das Design von Formularen an, z. B. Kontaktformulare:
  • Feldhintergrund, Rahmenfarbe und Schriftart.
  • Abstände zwischen den Feldern.

---

 

---

Website-Einstellungen

Die Website-Einstellungen sind der zentrale Ort, an dem Sie globale Einstellungen für Ihre Website vornehmen. Diese Einstellungen wirken sich auf alle Seiten und Elemente aus, die Sie mit Elementor erstellen.

1.1 Website-Informationen

Hier können Sie grundlegende Informationen über deine Website festlegen:

• Titel und Beschreibung:
  Diese erscheinen in Suchmaschinen und Browser-Tabs.
• Favicon:
  Das kleine Symbol, das in der Browser-Registerkarte angezeigt wird.
• Logo:
  Wird oft in der Kopfzeile oder im Footer verwendet.

1.2 Hintergrund

Sie können einen globalen Hintergrund für Ihre Website festlegen:

• Farbe:
  Wähle eine einheitliche Hintergrundfarbe.
• Bild:
  Lade ein Bild hoch, das als Hintergrund dient. Sie können auch Optionen wie Wiederholung und Position anpassen.

1.3 Layout

Hier bestimmen Sie das Standard-Layout deiner Seiten:

• Seitenbreite:
  Lege fest, wie breit der Inhalt deiner Website sein soll.
• Abstände:
  Definiere Standardabstände für Abschnitte und Widgets.
• Container-Typ:
  Wähle zwischen Boxed (eingeschränkte Breite) oder Full-Width (volle Breite).

1.4 Lightbox

Die Lightbox ist eine Funktion, die Bilder oder Videos in einem Overlay öffnet, wenn sie angeklickt werden. Sie können hier:

• Animationen und Hintergrundfarben der Lightbox anpassen.
• Zoom- und Navigationsoptionen aktivieren.

1.5 Seitenübergänge

Elementor bietet die Möglichkeit, Animationen zwischen Seitenwechseln hinzuzufügen, um die Benutzererfahrung zu verbessern.

1.6 Individuelles CSS

Mit Elementor Pro können Sie benutzerdefiniertes CSS hinzufügen, um Ihre Website noch weiter anzupassen.

1.7 Nach oben scrollen

Aktiviere eine "Nach oben"-Schaltfläche, die es Benutzern ermöglicht, schnell zum Seitenanfang zurückzukehren.

1.8 Zusätzliche Einstellungen

Hier können Sie weitere Optionen wie Responsive Einstellungen (z. B. für mobile Geräte) oder SEO-Plugins integrieren.