Widget Beiträge (Posts) 

Das Beiträge-Widget wird verwendet, um eine Sammlung von Blog-Beiträgen oder Inhalten anzuzeigen. Es ist ideal für:

• Blog-Seiten:
  Um die neuesten Artikel oder Beiträge anzuzeigen.
• Portfolio-Seiten:
  Um Projekte oder Arbeiten zu präsentieren.
• Archiv-Seiten:
  Um eine Übersicht über ältere Beiträge zu bieten.

Das Widget hilft dabei, Inhalte übersichtlich und ansprechend zu präsentieren, was die Benutzererfahrung verbessert und die Interaktion mit den Besuchern fördert.

---

 

---

1. Inhalt

Im Bereich Inhalt legen Sie fest, welche Beiträge angezeigt werden und wie sie strukturiert sind.

• Query (Abfrage):
  • Post Type:
    Wählen Sie den Typ der Beiträge aus, die angezeigt werden sollen. Standardmäßig sind dies „Beiträge“, aber Sie können auch benutzerdefinierte Post-Typen auswählen.
  • Source:
    Hier können Sie festlegen, ob Sie alle Beiträge, nur bestimmte Kategorien oder Schlagwörter anzeigen möchten. Zum Beispiel können Sie nur Beiträge aus der Kategorie „Neuigkeiten“ auswählen.
  • Include/Exclude:
    Sie können spezifische Beiträge hinzufügen oder bestimmte Beiträge ausschließen, indem Sie deren IDs eingeben.
• Layout:
  • Layout-Typ:
    Wählen Sie zwischen verschiedenen Layouts wie „Masonary“, „Grid“ oder „Carousel“. Jedes Layout hat seine eigene Darstellung.
  • Beitragsanzahl:
    Legen Sie fest, wie viele Beiträge auf einmal angezeigt werden sollen, z. B. 6 oder 12.
• Beitragsinhalt:
  • Titel:
    Aktivieren oder deaktivieren Sie die Anzeige des Beitragstitels.
  • Auszug:
    Wählen Sie, ob der Auszug des Beitrags angezeigt werden soll. Dies gibt den Lesern einen kurzen Überblick über den Inhalt.
  • Bild:
    Aktivieren Sie die Anzeige des Beitragsbildes und wählen Sie die Bildgröße aus (z. B. Thumbnail, Medium, Full).

---

 

---

2. Stil

Im Bereich Stil können Sie das Aussehen der Beiträge anpassen.

• Beitragslayout:
  • Hintergrundfarbe:
    Wählen Sie eine Hintergrundfarbe für die Beitragsboxen, um sie hervorzuheben.
  • Abstände:
    Passen Sie die Innen- und Außenabstände der Beitragsboxen an, um den Abstand zwischen den einzelnen Beiträgen zu steuern.
• Textstil:
  • Titel:
    Passen Sie Schriftart, Größe, Farbe und Gewicht des Beitragstitels an, um ihn hervorzuheben.
  • Auszug:
    Stellen Sie die Schriftart, Größe und Farbe des Auszugs ein, um die Lesbarkeit zu verbessern.
• Bildstil:
  • Bildrahmen:
    Fügen Sie einen Rahmen um das Beitragsbild hinzu und passen Sie die Farbe und Dicke an.
  • Bildabstände:
    Stellen Sie die Abstände um das Bild ein, um es optisch ansprechend zu gestalten.

---

 

---

3. Erweitert

Im Bereich Erweitert können Sie zusätzliche Anpassungen vornehmen.

• CSS-Klasse:
  Fügen Sie eine benutzerdefinierte CSS-Klasse hinzu, um das Widget weiter anzupassen. Dies ist nützlich, wenn Sie spezifische Stile anwenden möchten, die nicht in den Standardoptionen verfügbar sind.
• Animation:
  • Erscheinungsanimation:
    Wählen Sie eine Animation für das Erscheinen der Beiträge, wie z. B. „Fade“ oder „Slide“, um den visuellen Effekt zu verbessern.
• Responsive Einstellungen:
  • Sichtbarkeit:
    Passen Sie an, ob das Widget auf mobilen Geräten sichtbar sein soll. Sie können das Widget für bestimmte Bildschirmgrößen ausblenden.
  • Layout-Anpassungen:
    Stellen Sie sicher, dass das Layout auf verschiedenen Bildschirmgrößen gut aussieht, indem Sie die Anzahl der Spalten oder die Größe der Bilder anpassen.
• Z-Index:
  Stellen Sie den Z-Index ein, um die Schichtung von Elementen zu steuern. Dies ist nützlich, wenn Sie mehrere überlappende Elemente haben.

 

 

---

 

---

Posts bearbeiten / Inhalt / Layout

Das Post-Widget in Elementor bietet zahlreiche Anpassungsmöglichkeiten, um Ihre Beiträge ansprechend darzustellen. Hier sind die einzelnen Positionen mit ihren deutschen Bezeichnungen und Beispielen erklärt:

1. Posts per Page (Beiträge pro Seite)

• Erklärung: Diese Einstellung legt fest, wie viele Beiträge auf einer Seite angezeigt werden sollen.
• Beispiel: Wenn Sie „5“ eingeben, werden auf der Seite fünf Beiträge angezeigt. Dies hilft, die Übersichtlichkeit zu wahren und die Benutzererfahrung zu verbessern.

2. Image Position (Bildposition)

• Erklärung: Hier können Sie festlegen, wo das Beitragsbild angezeigt wird, z.B. oben, unten oder links vom Beitrag.
• Beispiel: Wenn Sie „Oben“ wählen, wird das Bild über dem Titel des Beitrags angezeigt, was eine ansprechende visuelle Darstellung schafft.

3. Masonry (Mauerwerk)

• Erklärung: Diese Option ermöglicht ein „Mauerwerk“-Layout, bei dem die Beiträge in einem flexiblen Raster angeordnet werden, das sich an die Größe der Bilder anpasst.
• Beispiel: Wenn Sie Masonry aktivieren, können die Beiträge unterschiedlich hohe Bilder haben, was zu einem dynamischen und kreativen Layout führt.

4. Image Resolution (Bildauflösung)

• Erklärung: Hier können Sie die Auflösung der angezeigten Bilder festlegen, um die Ladezeiten und die Bildqualität zu optimieren.
• Beispiel: Wenn Sie „Medium“ wählen, werden die Bilder in mittlerer Auflösung angezeigt, was eine gute Balance zwischen Qualität und Ladegeschwindigkeit bietet.

5. Image Ratio (Bildverhältnis)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, das Seitenverhältnis der Bilder festzulegen, z.B. 16:9 oder 4:3.
• Beispiel: Wenn Sie ein Seitenverhältnis von 16:9 wählen, werden alle Bilder in diesem Format zugeschnitten, was ein einheitliches Erscheinungsbild gewährleistet.

6. Image Width (Bildbreite)

• Erklärung: Hier können Sie die Breite der Bilder anpassen, um sicherzustellen, dass sie gut in das Layout passen.
• Beispiel: Wenn Sie „100%“ wählen, wird das Bild die gesamte Breite des Containers einnehmen, was es hervorhebt.

7. Title (Titel)

• Erklärung: Diese Option ermöglicht es Ihnen, den Titel des Beitrags anzuzeigen oder auszublenden.
• Beispiel: Wenn Sie den Titel aktivieren, wird der Titel des Beitrags prominent angezeigt, was den Lesern hilft, den Inhalt schnell zu erfassen.

8. Title HTML-Tag (HTML-Tag für den Titel)

• Erklärung: Hier können Sie den HTML-Tag für den Titel festlegen, z.B. H1, H2 oder H3.
• Beispiel: Wenn Sie „H2“ wählen, wird der Titel als H2-Tag formatiert, was für die SEO-Optimierung wichtig sein kann.

9. Excerpt (Auszug)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, den Auszug des Beitrags anzuzeigen oder auszublenden.
• Beispiel: Wenn Sie den Auszug aktivieren, wird eine kurze Zusammenfassung des Beitrags angezeigt, die den Lesern einen Vorgeschmack auf den Inhalt gibt.

10. Excerpt Length (Länge des Auszugs)

• Erklärung: Hier können Sie die Länge des Auszugs festlegen, z.B. die Anzahl der Wörter.
• Beispiel: Wenn Sie „30“ eingeben, wird der Auszug auf 30 Wörter begrenzt, was hilft, die Übersichtlichkeit zu wahren.

11. Apply to Custom Excerpt
      (Benutzerdefinierten Auszug anwenden)

• Erklärung: Diese Option ermöglicht es Ihnen, einen benutzerdefinierten Auszug anstelle des Standardauszugs zu verwenden.
• Beispiel: Wenn Sie einen benutzerdefinierten Auszug für einen bestimmten Beitrag erstellt haben, können Sie diese Option aktivieren, um diesen anzuzeigen.

12. Meta Data (Metadaten)

• Erklärung: Hier können Sie festlegen, ob Metadaten wie Datum, Autor und Kategorien angezeigt werden sollen.
• Beispiel: Wenn Sie die Metadaten aktivieren, wird das Veröffentlichungsdatum und der Autor unter dem Titel angezeigt, was den Lesern zusätzliche Informationen bietet.

13. Separator Between (Trenner zwischen)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, einen Trenner zwischen den Metadaten anzuzeigen.
• Beispiel: Wenn Sie einen Schrägstrich (/) als Trenner wählen, wird zwischen dem Datum und dem Autor ein Schrägstrich angezeigt, was die Lesbarkeit verbessert.

14. Read More (Weiterlesen)

• Erklärung: Hier können Sie festlegen, ob ein „Weiterlesen“-Link angezeigt werden soll.
• Beispiel: Wenn Sie diese Option aktivieren, wird ein Link angezeigt, der die Leser zu dem vollständigen Beitrag führt.

15. Read More Text (Text für „Weiterlesen“)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, den Text des „Weiterlesen“-Links anzupassen.
• Beispiel: Wenn Sie „Mehr erfahren“ eingeben, wird dieser Text anstelle des Standardtextes angezeigt, was die Benutzererfahrung personalisiert.

16. Automatically Align Button (Button automatisch ausrichten)

• Erklärung: Diese Option sorgt dafür, dass der „Weiterlesen“-Button automatisch ausgerichtet wird, je nach Layout.
• Beispiel: Wenn Sie diese Option aktivieren, wird der Button immer zentriert oder rechtsbündig angezeigt, je nach gewähltem Layout.

17. Open in a New Window (In neuem Fenster öffnen)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, den Link zum vollständigen Beitrag in einem neuen Fenster zu öffnen.
• Beispiel: Wenn Sie diese Option aktivieren, wird beim Klicken auf den „Weiterlesen“-Link ein neues Browserfenster geöffnet, was es den Lesern ermöglicht, die ursprüngliche Seite offenzulassen.

---

 

---

Posts bearbeiten / Inhalt / Query

Im Post-Widget von Elementor können Sie die Abfrage (Query) anpassen, um genau die Beiträge anzuzeigen, die Sie möchten. Hier sind die einzelnen Positionen mit ihren deutschen Bezeichnungen und Beispielen erklärt:

1. Source (Quelle)

• Erklärung: Diese Einstellung legt fest, aus welcher Quelle die Beiträge abgerufen werden sollen. Sie können zwischen verschiedenen Quellen wählen, wie z.B. „Alle Beiträge“, „Bestimmte Kategorien“ oder „Benutzerdefinierte Beitragstypen“.
• Beispiel: Wenn Sie „Bestimmte Kategorien“ auswählen und die Kategorie „News“ angeben, werden nur die Beiträge aus der Kategorie „News“ angezeigt.

2. Include By (Einbeziehen nach)

• Erklärung: Hier können Sie festlegen, nach welchen Kriterien die Beiträge einbezogen werden sollen, z.B. nach Kategorien, Tags oder benutzerdefinierten Taxonomien.
• Beispiel: Wenn Sie „Tags“ auswählen und den Tag „Technologie“ angeben, werden nur die Beiträge angezeigt, die mit dem Tag „Technologie“ versehen sind.

3. Date (Datum)

• Erklärung: Diese Option ermöglicht es Ihnen, Beiträge nach einem bestimmten Datum oder Datumsbereich zu filtern.

• Beispiel: Wenn Sie Beiträge vom „1. Januar 2025 bis 31. Januar 2025“ auswählen, werden nur die Beiträge angezeigt, die in diesem Zeitraum veröffentlicht wurden.

4. Order By (Sortieren nach)

• Erklärung: Hier können Sie festlegen, nach welchem Kriterium die Beiträge sortiert werden sollen, z.B. nach Datum, Titel oder Anzahl der Kommentare.
• Beispiel: Wenn Sie „Datum“ auswählen, werden die neuesten Beiträge zuerst angezeigt, was für Blogs sinnvoll ist, die aktuelle Inhalte hervorheben möchten.

5. Order (Reihenfolge)

• Erklärung: Diese Einstellung legt die Reihenfolge der sortierten Beiträge fest, entweder aufsteigend oder absteigend.
• Beispiel: Wenn Sie „Absteigend“ wählen, werden die neuesten Beiträge zuerst angezeigt, während bei „Aufsteigend“ die ältesten Beiträge zuerst angezeigt werden.

6. Ignore Sticky Posts (Sticky-Beiträge ignorieren)

• Erklärung: Diese Option ermöglicht es Ihnen, festzulegen, ob „Sticky-Beiträge“ (Beiträge, die oben auf der Seite angeheftet sind) in der Abfrage berücksichtigt werden sollen oder nicht.
• Beispiel: Wenn Sie diese Option aktivieren, werden die Sticky-Beiträge nicht angezeigt, was nützlich sein kann, wenn Sie nur die neuesten regulären Beiträge präsentieren möchten.

7. Query ID (Abfrage-ID)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, eine eindeutige ID für die Abfrage festzulegen, die nützlich sein kann, wenn Sie mehrere Abfragen auf derselben Seite haben und diese voneinander unterscheiden möchten.
• Beispiel: Wenn Sie „meine_abfrage_1“ eingeben, können Sie diese ID später verwenden, um spezifische Anpassungen oder Stile für diese Abfrage vorzunehmen.

---

---

Posts bearbeiten / Inhalt / Pagination

1. None (Keine)

• Erklärung: Wenn Sie diese Option wählen, wird keine Paginierung angezeigt. Alle Beiträge werden auf einer einzigen Seite angezeigt.
• Beispiel: Wenn Sie eine kleine Anzahl von Beiträgen haben, z.B. nur drei, können Sie „Keine“ auswählen, sodass alle drei Beiträge direkt untereinander angezeigt werden, ohne dass eine Paginierung erforderlich ist.

2. Numbers (Zahlen)

• Erklärung: Diese Einstellung zeigt die Paginierung in Form von Zahlen an, die es den Benutzern ermöglichen, zwischen den Seiten zu navigieren.
• Beispiel: Wenn Sie „Zahlen“ auswählen und fünf Beiträge pro Seite anzeigen, wird am Ende der Seite eine Navigationsleiste mit den Seitenzahlen „1, 2, 3, ...“ angezeigt, sodass die Benutzer leicht zu einer bestimmten Seite springen können.

3. Previous/Next (Vorherige/Nächste)

• Erklärung: Diese Option zeigt Links für die vorherige und die nächste Seite an, sodass die Benutzer einfach zwischen den Seiten navigieren können.
• Beispiel: Wenn Sie „Vorherige/Nächste“ aktivieren, wird am Ende der Seite ein Link „Vorherige“ und ein Link „Nächste“ angezeigt, was es den Benutzern erleichtert, durch die Beiträge zu blättern, ohne die Seitenzahlen im Detail betrachten zu müssen.

4. Load on Click (Beim Klicken laden)

• Erklärung: Diese Einstellung ermöglicht es den Benutzern, weitere Beiträge zu laden, indem sie auf einen Button klicken, anstatt zwischen Seiten zu navigieren.
• Beispiel: Wenn Sie „Beim Klicken laden“ auswählen, wird ein Button mit der Aufschrift „Mehr laden“ angezeigt. Wenn die Benutzer darauf klicken, werden zusätzliche Beiträge auf derselben Seite geladen, was eine flüssige Benutzererfahrung bietet.

5. Infinite Scroll (Unendliches Scrollen)

• Erklärung: Diese Option ermöglicht es, dass beim Scrollen nach unten automatisch weitere Beiträge geladen werden, ohne dass der Benutzer auf einen Button klicken oder die Seite wechseln muss.
• Beispiel: Wenn Sie „Unendliches Scrollen“ aktivieren, werden beim Herunterscrollen automatisch neue Beiträge geladen, sodass die Benutzer kontinuierlich Inhalte sehen können, ohne aktiv nach weiteren Seiten suchen zu müssen.

---

---

Paginierung anpassen 

Im Post-Widget von Elementor können Sie die Paginierung (Pagination) anpassen, um die Navigation durch Ihre Beiträge zu erleichtern. 

1. Pagination (Paginierung)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, die Paginierung für die angezeigten Beiträge zu aktivieren oder zu deaktivieren. Paginierung ist wichtig, um die Benutzerfreundlichkeit zu verbessern, insbesondere wenn Sie viele Beiträge haben.
• Beispiel: Wenn Sie die Paginierung aktivieren, wird am Ende der Beitragsliste eine Navigationsleiste angezeigt, die es den Benutzern ermöglicht, zwischen den Seiten zu blättern (z.B. „1, 2, 3, ...“). Dies ist besonders nützlich, wenn Sie eine große Anzahl von Blogbeiträgen haben und die Leser nicht alle auf einmal sehen möchten.

2. Pagination Type (Paginierungstyp)

• Erklärung: Hier können Sie den Typ der Paginierung auswählen, z.B. „Numerisch“ oder „Load More“ (Mehr laden).
• Beispiel: Wenn Sie „Load More“ auswählen, wird ein Button angezeigt, der es den Benutzern ermöglicht, weitere Beiträge zu laden, anstatt zwischen Seiten zu navigieren. Dies kann die Benutzererfahrung verbessern, da die Leser nicht auf eine neue Seite wechseln müssen.

3. Pagination Alignment (Ausrichtung der Paginierung)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, die Ausrichtung der Paginierung festzulegen, z.B. zentriert, linksbündig oder rechtsbündig.
• Beispiel: Wenn Sie die Ausrichtung auf „Zentriert“ setzen, wird die Paginierungsleiste in der Mitte des Containers angezeigt, was ein ausgewogenes und ansprechendes Layout schafft.

4. Pagination Style (Stil der Paginierung)

• Erklärung: Hier können Sie das Aussehen der Paginierung anpassen, einschließlich Schriftart, Farbe und Abstände.
• Beispiel: Wenn Sie die Schriftfarbe auf „Blau“ ändern, wird die Paginierung in blauer Schrift angezeigt, was sie hervorhebt und die Sichtbarkeit erhöht.

5. Show on Mobile (Auf Mobilgeräten anzeigen)

• Erklärung: Diese Option ermöglicht es Ihnen, die Paginierung auf mobilen Geräten ein- oder auszublenden.
• Beispiel: Wenn Sie diese Option aktivieren, wird die Paginierung auch auf Smartphones angezeigt, was wichtig ist, um sicherzustellen, dass mobile Benutzer ebenfalls durch die Beiträge navigieren können.

---

---

Posts bearbeiten / Stil / Layout

Im Post-Widget von Elementor können Sie das Layout Ihrer Beiträge anpassen, um eine ansprechende und benutzerfreundliche Darstellung zu gewährleisten.

1. Columns Gap (Spaltenabstand)

• Erklärung: Diese Einstellung legt den Abstand zwischen den Spalten fest, in denen die Beiträge angezeigt werden. Ein angemessener Spaltenabstand sorgt dafür, dass die Inhalte nicht zu gedrängt wirken.
• Beispiel: Wenn Sie einen Spaltenabstand von „20px“ einstellen, wird zwischen jeder Spalte ein Abstand von 20 Pixeln eingefügt. Dies schafft mehr Raum und verbessert die Lesbarkeit der Beiträge.

2. Rows Gap (Reihenabstand)

• Erklärung: Hier können Sie den Abstand zwischen den Reihen der Beiträge festlegen. Ein ausreichender Reihenabstand trägt dazu bei, dass die Beiträge klar voneinander getrennt sind.
• Beispiel: Wenn Sie einen Reihenabstand von „30px“ wählen, wird zwischen den verschiedenen Reihen der Beiträge ein Abstand von 30 Pixeln eingefügt, was die visuelle Trennung der Inhalte unterstützt.

3. Alignment (Ausrichtung)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, die Ausrichtung der Beiträge innerhalb des Containers festzulegen, z.B. linksbündig, zentriert oder rechtsbündig.
• Beispiel: Wenn Sie die Ausrichtung auf „Zentriert“ setzen, werden alle Beiträge in der Mitte des Containers angezeigt, was ein harmonisches und ausgewogenes Layout schafft.

---

 

 

---

Posts bearbeiten / Stil / Box

Im Post-Widget von Elementor können Sie das Box-Layout anpassen, um das Erscheinungsbild Ihrer Beiträge zu gestalten. 

1. Border Width (Rahmenbreite)

• Erklärung: Diese Einstellung legt die Breite des Rahmens um die Box fest. Ein Rahmen kann helfen, die Beiträge visuell abzugrenzen.
• Beispiel: Wenn Sie die Rahmenbreite auf „2px“ setzen, wird um jeden Beitrag ein 2 Pixel breiter Rahmen angezeigt, was die Beiträge hervorhebt.

2. Border Radius (Eckenradius)

• Erklärung: Hiermit können Sie die Rundung der Ecken der Box anpassen. Ein abgerundeter Rahmen kann ein modernes und ansprechendes Design erzeugen.
• Beispiel: Wenn Sie den Eckenradius auf „10px“ einstellen, werden die Ecken der Boxen abgerundet, was zu einem weicheren Erscheinungsbild führt.

3. Padding (Innenabstand)

• Erklärung: Diese Einstellung definiert den Innenabstand innerhalb der Box, also den Abstand zwischen dem Inhalt und dem Rand der Box.
• Beispiel: Wenn Sie das Padding auf „15px“ setzen, wird der Inhalt (z.B. Text und Bilder) 15 Pixel vom Rand der Box entfernt angezeigt, was die Lesbarkeit verbessert.

4. Content Padding (Inhalts-Padding)

• Erklärung: Diese Option ermöglicht es Ihnen, den Innenabstand speziell für den Inhalt der Box festzulegen, unabhängig vom allgemeinen Padding.
• Beispiel: Wenn Sie das Content Padding auf „20px“ einstellen, wird der Inhalt innerhalb der Box zusätzlich zu dem allgemeinen Padding um 20 Pixel vom Rand entfernt, was eine klare Trennung zwischen Inhalt und Rahmen schafft.

5. Box Shadow (Box-Schatten)

• Erklärung: Diese Einstellung fügt der Box einen Schatten hinzu, der Tiefe und Dimension verleiht.
• Beispiel: Wenn Sie einen Box-Schatten mit den Werten „0px 4px 10px rgba(0, 0, 0, 0.5)“ einstellen, wird ein Schatten erzeugt, der 4 Pixel nach unten und 0 Pixel zur Seite versetzt ist, was den Eindruck erweckt, dass die Box über dem Hintergrund schwebt.

6. Background Color (Hintergrundfarbe)

• Erklärung: Hier können Sie die Hintergrundfarbe der Box festlegen, um die visuelle Attraktivität zu erhöhen.
• Beispiel: Wenn Sie die Hintergrundfarbe auf „#f0f0f0“ setzen, wird die Box in einem hellen Grauton angezeigt, was einen sanften Kontrast zu den Inhalten bietet.

7. Border Color (Rahmenfarbe)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, die Farbe des Rahmens um die Box festzulegen.
• Beispiel: Wenn Sie die Rahmenfarbe auf „#0073e6“ setzen, wird der Rahmen in einem kräftigen Blau angezeigt, was die Box hervorhebt und die Aufmerksamkeit der Leser auf sich zieht.

---

 

---

Posts bearbeiten / Stil / Image 

1. Border Radius (Eckenradius)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, die Rundung der Ecken des Bildes anzupassen. Ein abgerundeter Eckenradius kann das Bild weicher und ansprechender wirken lassen.
• Beispiel: Wenn Sie den Eckenradius auf „15px“ setzen, werden die Ecken des Bildes abgerundet, was zu einem modernen und freundlichen Design führt.

2. Spacing (Abstand)

• Erklärung: Diese Option legt den Abstand um das Bild herum fest. Ein angemessener Abstand sorgt dafür, dass das Bild nicht zu nah an anderen Elementen platziert ist.
• Beispiel: Wenn Sie den Abstand auf „20px“ einstellen, wird das Bild 20 Pixel von den angrenzenden Elementen entfernt, was die visuelle Klarheit erhöht.

3. CSS Filters 

Mit CSS-Filtern können Sie verschiedene visuelle Effekte auf das Bild anwenden, um dessen Erscheinungsbild zu verändern.

• Verwischen (Blur):
  • Beispiel: Wenn Sie den Verwischungsfilter auf „5px“ setzen, wird das Bild um 5 Pixel verwischt, was einen sanften, verschwommenen Effekt erzeugt.
• Helligkeit (Brightness):
  • Beispiel: Wenn Sie die Helligkeit auf „150%“ einstellen, wird das Bild um 50% heller, was es lebendiger erscheinen lässt.
• Kontrast (Contrast):
  • Beispiel: Wenn Sie den Kontrast auf „120%“ erhöhen, wird der Unterschied zwischen den hellen und dunklen Bereichen des Bildes verstärkt, was zu einem dynamischeren Look führt.
    
    
• Sättigung (Saturation):
  • Beispiel: Wenn Sie die Sättigung auf „200%“ setzen, werden die Farben des Bildes intensiver, was es auffälliger macht.
• Tönung (Hue):
  • Beispiel: Wenn Sie die Tönung auf „180°“ einstellen, wird das Bild in einen anderen Farbton verschoben, was kreative Effekte ermöglicht.

---

---

Posts bearbeiten / Stil / Content 

Im Post-Widget von Elementor können Sie das Erscheinungsbild des Inhalts anpassen, um die Lesbarkeit und visuelle Attraktivität Ihrer Beiträge zu verbessern.

1. Title / Color (Titel / Farbe)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, die Farbe des Titeltextes festzulegen.
• Beispiel: Wenn Sie die Titel-Farbe auf „#333333“ setzen, wird der Titel in einem dunklen Grauton angezeigt, was die Lesbarkeit erhöht.

2. Title / Typografie (Titel / Typografie)

• Erklärung: Hier können Sie Schriftart, Schriftgröße, Schriftgewicht und andere typografische Einstellungen für den Titel anpassen.
• Beispiel: Wenn Sie die Schriftgröße auf „24px“ und das Schriftgewicht auf „bold“ setzen, wird der Titel groß und auffällig dargestellt, was die Aufmerksamkeit der Leser auf sich zieht.

3. Title / Textumrandung (Titel / Textumrandung)

• Erklärung: Diese Option ermöglicht es Ihnen, eine Umrandung um den Titeltext hinzuzufügen.
• Beispiel: Wenn Sie eine Umrandung von „1px solid #0073e6“ festlegen, wird der Titel von einem blauen Rahmen umgeben, der ihm mehr Struktur verleiht.

4. Title / Spacing (Titel / Abstand)

• Erklärung: Diese Einstellung legt den Abstand um den Titel fest, um mehr Platz zwischen dem Titel und anderen Elementen zu schaffen.
• Beispiel: Wenn Sie den Abstand auf „10px“ setzen, wird der Titel 10 Pixel vom nächsten Element entfernt, was die visuelle Klarheit verbessert.

5. Meta / Color (Meta / Farbe)

• Erklärung: Hiermit können Sie die Farbe des Metatextes (z.B. Autor, Datum) anpassen.
• Beispiel: Wenn Sie die Meta-Farbe auf „#888888“ setzen, wird der Metatext in einem hellen Grauton angezeigt, was ihn subtiler erscheinen lässt.

6. Meta / Separator Color (Meta / Trennfarbe)

• Erklärung: Diese Einstellung legt die Farbe des Trennzeichens zwischen den Meta-Elementen fest.
• Beispiel: Wenn Sie die Separator-Farbe auf „#cccccc“ setzen, wird das Trennzeichen in einem hellen Grau angezeigt, was einen sanften Übergang zwischen den Meta-Informationen schafft.

7. Meta / Typografie (Meta / Typografie)

• Erklärung: Hier können Sie die Schriftart und andere typografische Einstellungen für den Metatext anpassen.
• Beispiel: Wenn Sie die Schriftgröße auf „14px“ und das Schriftgewicht auf „normal“ einstellen, wird der Metatext in einer gut lesbaren Größe dargestellt.

8. Meta / Spacing (Meta / Abstand)

• Erklärung: Diese Einstellung legt den Abstand um den Metatext fest, um ihn visuell von anderen Inhalten zu trennen.
• Beispiel: Wenn Sie den Abstand auf „5px“ setzen, wird der Metatext 5 Pixel vom Titel entfernt, was eine klare Trennung zwischen den Elementen schafft.

9. Excerpt / Color (Auszug / Farbe)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, die Farbe des Auszugstextes (Zusammenfassung des Beitrags) festzulegen.
• Beispiel: Wenn Sie die Auszug-Farbe auf „#444444“ setzen, wird der Auszug in einem dunklen Grau angezeigt, was die Lesbarkeit erhöht.

10. Excerpt / Typografie (Auszug / Typografie)

• Erklärung: Hier können Sie die Schriftart und typografische Einstellungen für den Auszugstext anpassen.
• Beispiel: Wenn Sie die Schriftgröße auf „16px“ und das Schriftgewicht auf „normal“ setzen, wird der Auszug in einer leserfreundlichen Größe angezeigt.

11. Excerpt / Spacing (Auszug / Abstand)

• Erklärung: Diese Einstellung legt den Abstand um den Auszug fest, um ihn von anderen Elementen abzugrenzen.
• Beispiel: Wenn Sie den Abstand auf „15px“ setzen, wird der Auszug 15 Pixel vom vorherigen Element entfernt, was die visuelle Klarheit verbessert.

12. Read More / Color (Mehr lesen / Farbe)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, die Farbe des „Mehr lesen“-Links anzupassen.
• Beispiel: Wenn Sie die Farbe auf „#0073e6“ setzen, wird der „Mehr lesen“-Link in einem kräftigen Blau angezeigt, was ihn hervorhebt.

13. Read More / Typografie (Mehr lesen / Typografie)

• Erklärung: Hier können Sie die Schriftart und typografische Einstellungen für den „Mehr lesen“-Link anpassen.
• Beispiel: Wenn Sie die Schriftgröße auf „16px“ und das Schriftgewicht auf „bold“ setzen, wird der Link deutlich und auffällig dargestellt.

14. Read More / Spacing (Mehr lesen / Abstand)

• Erklärung: Diese Einstellung legt den Abstand um den „Mehr lesen“-Link fest, um ihn visuell von anderen Inhalten zu trennen.
• Beispiel: Wenn Sie den Abstand auf „10px“ setzen, wird der „Mehr lesen“-Link 10 Pixel vom vorherigen Element entfernt, was die Benutzerführung verbessert.

---

---

Posts bearbeiten / Erweitert / Layout 

Im Post-Widget von Elementor können Sie erweiterte Layout-Einstellungen vornehmen, um das Verhalten und die Darstellung Ihrer Beiträge weiter anzupassen. 

1. Außenabstand (Margin)

• Erklärung: Der Außenabstand legt den Abstand um das Element herum fest. Dieser Abstand beeinflusst, wie viel Platz zwischen diesem Element und anderen Elementen auf der Seite besteht.
• Beispiel: Wenn Sie den Außenabstand auf „20px“ setzen, wird das Element 20 Pixel von den angrenzenden Elementen entfernt, was für mehr Übersichtlichkeit sorgt.

2. Innenabstand (Padding)

• Erklärung: Der Innenabstand definiert den Abstand innerhalb des Elements, also zwischen dem Inhalt und dem Rand des Elements.
• Beispiel: Wenn Sie den Innenabstand auf „15px“ einstellen, wird der Inhalt (z.B. Text) 15 Pixel vom Rand des Elements entfernt, was die Lesbarkeit erhöht.

3. Breite (Width)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, die Breite des Elements festzulegen. Es gibt mehrere Optionen:
  • Standard (Default): Die Breite wird automatisch angepasst.
  • Anpassbar (Custom): Sie können eine spezifische Breite in Pixel oder Prozent angeben.
  • Vollständig (Full Width): Das Element erstreckt sich über die gesamte Breite des Containers.
  • Inhalt (Inline): Das Element nimmt nur so viel Platz ein, wie der Inhalt benötigt.
• Beispiel: Wenn Sie die Breite auf „50%“ setzen, wird das Element 50% der verfügbaren Breite des Containers einnehmen.

4. Align Self (Selbst ausrichten)

• Erklärung: Diese Einstellung bestimmt, wie sich das Element innerhalb seines Containers ausrichten soll (z.B. oben, unten, zentriert).
• Beispiel: Wenn Sie „Zentriert“ wählen, wird das Element in der Mitte seines Containers ausgerichtet, was eine ausgewogene Darstellung ermöglicht.

5. Sortierung (Order)

• Erklärung: Diese Einstellung legt die Reihenfolge fest, in der das Element innerhalb seines Containers angezeigt wird, insbesondere bei flexiblen Layouts.
• Beispiel: Wenn Sie die Sortierung auf „2“ setzen, wird das Element an zweiter Stelle innerhalb seiner flexiblen Container angezeigt, unabhängig von der Reihenfolge im HTML.

6. Größe (Size)

• Erklärung: Hier können Sie die Größe des Elements anpassen (z.B. klein, mittel, groß, oder benutzerdefiniert).
• Beispiel: Wenn Sie die Größe auf „Groß“ einstellen, wird das Element größer dargestellt, was es auffälliger macht.

7. Position (Position)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, die Position des Elements relativ zu seinem Container festzulegen (z.B. statisch, relativ, absolut, fixiert).
• Beispiel: Wenn Sie die Position auf „Absolut“ setzen, können Sie das Element genau an einer bestimmten Stelle innerhalb des Containers platzieren.

8. Z-Index (Z-Index)

• Erklärung: Der Z-Index legt die Stapelreihenfolge des Elements fest. Ein höherer Z-Index bedeutet, dass das Element über anderen Elementen angezeigt wird.
• Beispiel: Wenn Sie den Z-Index auf „10“ setzen, wird das Element über anderen Elementen mit einem niedrigeren Z-Index angezeigt, was bei Überlappungen wichtig sein kann.

9. CSS-ID (CSS ID)

• Erklärung: Hier können Sie eine eindeutige ID für das Element festlegen, um es gezielt mit CSS zu stylen.
• Beispiel: Wenn Sie die CSS-ID „mein-element“ festlegen, können Sie in Ihrem CSS-Stil spezifische Anpassungen für dieses Element vornehmen.

10. CSS-Klassen (CSS Classes)

• Erklärung: Hier können Sie eine oder mehrere CSS-Klassen für das Element festlegen, um es in CSS anzusprechen.
• Beispiel: Wenn Sie die CSS-Klasse „mein-klasse“ hinzufügen, können Sie in Ihrem CSS spezifische Stile für alle Elemente mit dieser Klasse anwenden.

11. Display Conditions (Anzeige-Bedingungen)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, Bedingungen festzulegen, unter denen das Element angezeigt wird (z.B. nur auf bestimmten Seiten oder Geräten).
• Beispiel: Wenn Sie eine Bedingung festlegen, dass das Element nur auf der Startseite angezeigt werden soll, wird es nur dort sichtbar sein.

12. Cache Settings (Cache-Einstellungen)

• Erklärung: Diese Option ermöglicht es Ihnen, die Cache-Einstellungen für das Element zu steuern, um sicherzustellen, dass Änderungen sofort sichtbar sind.
• Beispiel: Wenn Sie den Cache für das Element deaktivieren, werden alle Änderungen sofort angezeigt, ohne dass die Seite neu geladen werden muss.

---

---

Posts bearbeiten / Erweitert / Bewegungseffekte 

Im Post-Widget von Elementor können Sie Bewegungseffekte hinzufügen, um die Benutzererfahrung zu verbessern und Ihre Inhalte dynamischer zu gestalten. 

1. Scrolling Effects (Scroll-Effekte)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, Effekte zu definieren, die beim Scrollen der Seite auf das Element angewendet werden. Dies kann helfen, das Element hervorzuheben oder eine visuelle Tiefe zu erzeugen.
• Beispiel: Wenn Sie den Parallax-Effekt aktivieren, wird das Element langsamer scrollen als der Hintergrund, was einen interessanten Tiefeneffekt erzeugt.

2. Mouse Effects (Maus-Effekte)

• Erklärung: Hier können Sie Effekte festlegen, die auf die Bewegungen der Maus reagieren, wodurch eine interaktive Benutzererfahrung entsteht.
• Beispiel: Wenn Sie den Hover-Effekt aktivieren, könnte das Element seine Farbe ändern oder sich leicht bewegen, wenn der Benutzer mit der Maus darüber fährt.

3. Sticky (Sticky-Effekte)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, das Element „klebrig“ zu machen, sodass es beim Scrollen an einer bestimmten Position bleibt, z.B. oben im Sichtfeld.
• Beispiel: Wenn Sie das Sticky-Element aktivieren und auf „Oben“ setzen, bleibt das Element beim Scrollen am oberen Rand des Bildschirms sichtbar, was die Sichtbarkeit erhöht.

4. Eingangsanimation (Entrance Animation)

• Erklärung: Diese Option legt fest, mit welcher Animation das Element beim Erscheinen auf der Seite eingeblendet wird. Dies trägt zur visuellen Attraktivität bei und kann die Aufmerksamkeit der Benutzer auf sich ziehen.
• Möglichkeiten:
  • Fading (Fading): Das Element blendet allmählich ein.
  • Fade In (Einblenden): Das Element erscheint langsam aus der Transparenz.
  • Slide In (Hineinschieben): Das Element wird von außerhalb des Sichtfelds hereingeschoben.
  • Zoom In (Hineinzoomen): Das Element erscheint, während es größer wird.
  • Flip (Umdrehen): Das Element dreht sich beim Einblenden.
  • Bounce (Hüpfen): Das Element „hüpfend“ erscheint, was eine lebhafte Animation erzeugt.
• Beispiel: Wenn Sie die Eingangsanimation auf „Slide In“ setzen, wird das Element von der Seite hereingeschoben, wenn die Seite geladen wird, was die Aufmerksamkeit auf sich zieht.

---

---

Posts bearbeiten / Erweitert / Transformieren 

Im Post-Widget von Elementor können Sie Transformationsoptionen nutzen, um das Erscheinungsbild und die Position Ihrer Inhalte zu ändern. 

1. Drehung (Rotation)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, das Element um einen bestimmten Winkel zu drehen.
• Einstellmöglichkeiten:
  • Z-Achse (Z-axis): Dreht das Element um die vertikale Achse.
  • X-Achse (X-axis): Dreht das Element um die horizontale Achse.
  • Y-Achse (Y-axis): Dreht das Element um die Tiefe.
• Beispiel: Wenn Sie die Drehung um die Z-Achse auf „30°“ setzen, wird das Element um 30 Grad gedreht, was einen dynamischen Effekt erzeugt.

2. Versatz (Translation)

• Erklärung: Diese Option legt fest, wie das Element entlang der X- und Y-Achse verschoben wird.
• Einstellmöglichkeiten:
  • Horizontal (X-Achse): Verschiebt das Element nach links oder rechts.
  • Vertikal (Y-Achse): Verschiebt das Element nach oben oder unten.
• Beispiel: Wenn Sie den horizontalen Versatz auf „20px“ setzen, wird das Element um 20 Pixel nach rechts verschoben, was ihm eine interessante Positionierung verleiht.

3. Maßstab (Scale)

• Erklärung: Diese Einstellung ändert die Größe des Elements.
• Einstellmöglichkeiten:
  • Skalierung (Scale): Vergrößert oder verkleinert das Element gleichmäßig.
  • Horizontal (X-Achse): Verändert die Breite des Elements.
  • Vertikal (Y-Achse): Verändert die Höhe des Elements.
• Beispiel: Wenn Sie die Skalierung auf „1.5“ setzen, wird das Element um 150% seiner ursprünglichen Größe dargestellt, was es hervorhebt.

4. Schräge (Skew)

• Erklärung: Diese Option ermöglicht es Ihnen, das Element schräg zu verzerren.
• Einstellmöglichkeiten:
  • Horizontal (X-Achse): Verzerrt das Element entlang der horizontalen Achse.
  • Vertikal (Y-Achse): Verzerrt das Element entlang der vertikalen Achse.
• Beispiel: Wenn Sie die schräge Verzerrung auf „10°“ für die X-Achse setzen, wird das Element um 10 Grad in horizontaler Richtung verzogen, was einen einzigartigen visuellen Effekt erzeugt.

5. Horizontal drehen (Rotate X)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, das Element um die horizontale Achse zu drehen.
• Einstellmöglichkeiten:
  • Grad (Degree): Bestimmen Sie den Grad der Drehung.
• Beispiel: Wenn Sie die horizontale Drehung auf „15°“ setzen, wird das Element um 15 Grad um die X-Achse gedreht, was einen interessanten 3D-Effekt erzeugt.

6. Vertikal drehen (Rotate Y)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, das Element um die vertikale Achse zu drehen.
• Einstellmöglichkeiten:
  • Grad (Degree): Bestimmen Sie den Grad der Drehung.
• Beispiel: Wenn Sie die vertikale Drehung auf „20°“ setzen, wird das Element um 20 Grad um die Y-Achse gedreht, was ebenfalls einen ansprechenden 3D-Effekt erzeugt.

---

---

Posts bearbeiten / Erweitert / Hintergrund 

Im Post-Widget von Elementor können Sie den Hintergrund Ihrer Inhalte anpassen, um eine ansprechende visuelle Gestaltung zu erreichen. 

1. Background Type (Hintergrundtyp)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, den Typ des Hintergrunds für das Element auszuwählen. Es gibt verschiedene Optionen, wie z.B. Farbe, Bild, Gradient (Verlauf) oder Video.
• Beispiel: Wenn Sie den Hintergrundtyp auf „Bild“ setzen, können Sie ein Bild auswählen, das als Hintergrund für das Element dient, was eine visuelle Tiefe schafft.

2. Farbe (Color)

• Erklärung: Hier können Sie eine Hintergrundfarbe für das Element festlegen. Dies kann eine einfarbige Fläche oder eine transparente Farbe sein.
• Beispiel: Wenn Sie die Hintergrundfarbe auf „#ffcc00“ setzen, wird der Hintergrund des Elements in einem hellen Gelbton angezeigt, was es hervorhebt.

3. Second Color (Zweite Farbe)

• Erklärung: Diese Option wird häufig in Verbindung mit einem Farbverlauf verwendet, um eine zweite Farbe für den Hintergrund festzulegen.
• Beispiel: Wenn Sie die zweite Farbe auf „#ff6600“ setzen, wird diese Farbe in einem Verlauf zusammen mit der ersten Farbe verwendet, was einen ansprechenden visuellen Effekt erzeugt.

4. Art (Art)

• Erklärung: Diese Einstellung bezieht sich auf die Art des Hintergrunds, insbesondere wenn Sie einen Farbverlauf verwenden. Hier können Sie den Verlaufstyp auswählen, z.B. linear oder radial.
• Möglichkeiten:
  • Linear (Linear): Der Verlauf verläuft in einer geraden Linie.
  • Radial (Radial): Der Verlauf strahlt von einem zentralen Punkt aus.
    
    

Beispiel: Wenn Sie den Verlaufstyp auf „Linear“ setzen, wird der Hintergrund in einem geraden Verlauf von der ersten zur zweiten Farbe angezeigt, was einen modernen Look erzeugt.

---

---

Posts bearbeiten / Erweitert / Rahmen 

Im Post-Widget von Elementor können Sie Rahmenoptionen nutzen, um das Erscheinungsbild Ihrer Inhalte weiter zu individualisieren. 

1. Border Type (Rahmentyp)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, den Stil des Rahmens um das Element festzulegen. Es gibt verschiedene Variationsmöglichkeiten:
  • Durchgezogen (Solid): Ein fester, durchgehender Rahmen.
  • Doppelt (Double): Zwei parallele Linien, die den Rahmen bilden.
  • Gestrichelt (Dashed): Ein Rahmen aus gestrichelten Linien.
  • Gepunktet (Dotted): Ein Rahmen aus Punkten.
  • Groove: Ein 3D-Effekt, der den Eindruck eines vertieften Rahmens vermittelt.
• Beispiel: Wenn Sie den Rahmentyp auf „Gestrichelt“ setzen, wird der Rahmen um das Element mit gestrichelten Linien angezeigt, was einen kreativen und modernen Look erzeugt.

2. Eckenradius (Border Radius)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, die Rundung der Ecken des Rahmens anzupassen. Ein größerer Wert führt zu stärker abgerundeten Ecken.
• Beispiel: Wenn Sie den Eckenradius auf „10px“ setzen, werden die Ecken des Rahmens um 10 Pixel abgerundet, was dem Element ein weicheres und freundlicheres Aussehen verleiht.

3. Box Shadow (Box-Schatten)

• Erklärung: Diese Option ermöglicht es Ihnen, einen Schatten um das Element zu erstellen, um Tiefe und Dimension zu erzeugen. Sie können verschiedene Einstellungen anpassen:
  • Horizontaler Abstand (Horizontal Offset): Bestimmt, wie weit der Schatten horizontal vom Element entfernt ist.
  • Vertikaler Abstand (Vertical Offset): Bestimmt, wie weit der Schatten vertikal vom Element entfernt ist.
  • Unschärferadius (Blur Radius): Legt fest, wie verschwommen der Schatten ist.
  • Farbwahl (Color): Bestimmt die Farbe des Schattens.

Beispiel: Wenn Sie den horizontalen Abstand auf „5px“, den vertikalen Abstand auf „5px“, den Unschärferadius auf „10px“ und die Farbe auf „rgba(0, 0, 0, 0.5)“ setzen, wird ein weicher, grauer Schatten erzeugt, der dem Element mehr Tiefe verleiht.

---

---

Posts bearbeiten / Erweitert / Maskieren 

Im Post-Widget von Elementor können Sie Maskierungsoptionen nutzen, um die Darstellung Ihrer Inhalte weiter zu gestalten und anzupassen. Hier sind die einzelnen Positionen mit ihren deutschen und englischen Bezeichnungen sowie Beispielen erklärt:

1. Maskieren (Mask)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, eine Maske auf das Element anzuwenden, um bestimmte Bereiche sichtbar oder unsichtbar zu machen. Dies kann verwendet werden, um kreative Effekte zu erzielen.
• Beispiel: Wenn Sie eine runde Maske anwenden, wird das Element nur innerhalb eines kreisförmigen Bereichs angezeigt, was einen interessanten visuellen Effekt erzeugt.

2. Darstellung (Display)

• Erklärung: Hier können Sie festlegen, wie die Maske auf das Element angewendet wird. Es gibt verschiedene Optionen, um die Art der Maskierung zu bestimmen.
• Variationsmöglichkeiten:
  • Normal (Normal): Das Element wird in seiner normalen Form angezeigt.
  • Invertiert (Inverted): Die Maske wird umgekehrt, sodass nur der maskierte Bereich sichtbar ist.
• Beispiel: Wenn Sie die Darstellung auf „Invertiert“ setzen, wird nur der Bereich außerhalb der Maske sichtbar, was einen dramatischen Effekt erzeugt.

3. Größe (Size)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, die Größe der Maske anzupassen, um den gewünschten Effekt zu erzielen.
• Variationsmöglichkeiten:
  • Prozentual (Percentage): Legen Sie die Größe der Maske in Prozent fest.
  • Pixel (Pixels): Legen Sie die Größe der Maske in Pixeln fest.
• Beispiel: Wenn Sie die Größe auf „50%“ setzen, wird die Maske auf die Hälfte der Größe des Elements angewendet, was einen interessanten Fokus auf den Inhalt ermöglicht.

4. Position (Position)

• Erklärung: Hier können Sie die Position der Maske innerhalb des Elements anpassen, um den gewünschten visuellen Effekt zu erzielen.
• Variationsmöglichkeiten:
  • Oben (Top): Die Maske wird von oben angewendet.
  • Unten (Bottom): Die Maske wird von unten angewendet.
  • Links (Left): Die Maske wird von links angewendet.
  • Rechts (Right): Die Maske wird von rechts angewendet.
• Beispiel: Wenn Sie die Position auf „Unten“ setzen, wird die Maske von der unteren Seite des Elements angewendet, was einen interessanten visuellen Effekt erzeugt.

5. Wiederholen (Repeat)

• Erklärung: Diese Einstellung bestimmt, wie die Maske wiederholt wird, falls sie kleiner als das Element ist.
• Variationsmöglichkeiten:
  • Keine Wiederholung (No Repeat): Die Maske wird nur einmal angewendet.
  • Horizontale Wiederholung (Repeat X): Die Maske wird horizontal wiederholt.
  • Vertikale Wiederholung (Repeat Y): Die Maske wird vertikal wiederholt.
  • Beidseitige Wiederholung (Repeat): Die Maske wird sowohl horizontal als auch vertikal wiederholt.

Beispiel: Wenn Sie die Wiederholung auf „Repeat“ setzen, wird die Maske sowohl horizontal als auch vertikal angewendet, was einen interessanten Muster-Effekt erzeugt.

---

---

Posts bearbeiten / Erweitert / Responsiv 

Im Post-Widget von Elementor können Sie die Sichtbarkeit Ihrer Inhalte für verschiedene Geräte anpassen. Dies ist besonders wichtig, um sicherzustellen, dass Ihre Website auf Desktop, Tablet und Mobilgeräten optimal aussieht. 

1. Auf Desktop ausblenden (Hide On Desktop)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, das Element auf Desktop-Geräten auszublenden. Dies kann nützlich sein, wenn Sie Inhalte haben, die nur auf mobilen Geräten oder Tablets angezeigt werden sollen.
• Beispiel: Wenn Sie ein spezielles Banner haben, das nur für mobile Benutzer relevant ist, können Sie die Option „Auf Desktop ausblenden“ aktivieren, sodass es auf Desktop-Computern nicht angezeigt wird.

2. Auf Tablet Portrait ausblenden (Hide On Tablet Portrait)

• Erklärung: Mit dieser Einstellung können Sie das Element auf Tablets im Hochformat ausblenden. Dies ist hilfreich, um Inhalte zu optimieren, die möglicherweise nicht gut auf dieser Bildschirmgröße dargestellt werden.
• Beispiel: Wenn Sie ein Bild oder einen Text haben, der auf Tablets im Hochformat nicht gut aussieht, können Sie die Option „Auf Tablet Portrait ausblenden“ aktivieren, um sicherzustellen, dass es nur auf anderen Geräten sichtbar ist.

3. Auf Mobile Portrait ausblenden (Hide On Mobile Portrait)

• Erklärung: Diese Einstellung ermöglicht es Ihnen, das Element auf Mobilgeräten im Hochformat auszublenden. Dies ist besonders nützlich, wenn bestimmte Inhalte nicht für mobile Benutzer geeignet sind.

Beispiel: Wenn Sie ein komplexes Layout haben, das auf kleinen Bildschirmen nicht gut funktioniert, können Sie die Option „Auf Mobile Portrait ausblenden“ aktivieren, sodass es nur auf größeren Geräten angezeigt wird.

---

 

---

Posts bearbeiten / Erweitert / Attributes 

Im Post-Widget von Elementor können Sie benutzerdefinierte Attribute hinzufügen, um zusätzliche Informationen oder Funktionen zu Ihren Elementen hinzuzufügen. Diese Attribute können für verschiedene Zwecke verwendet werden, wie z.B. zur Verbesserung der SEO, zur Anpassung von Stilen oder zur Interaktion mit JavaScript. 

1. Benutzerdefinierte Attribute
    (Custom Attributes)

• Erklärung

  : Benutzerdefinierte Attribute ermöglichen es Ihnen, zusätzliche Informationen zu einem HTML-Element hinzuzufügen, die nicht standardmäßig vorhanden sind. Diese Attribute können von Entwicklern oder Designern verwendet werden, um spezifische Funktionen oder Stile zu implementieren.

Beispiele für Benutzerdefinierte Attribute

1. data-category
   • Erklärung: Dieses Attribut kann verwendet werden, um die Kategorie eines Beitrags zu kennzeichnen. Es kann für Filter- oder Sortierfunktionen in JavaScript verwendet werden.
   • Beispiel: data-category="Technologie"
2. data-id
   • Erklärung: Ein Attribut, das eine eindeutige ID für ein Element angibt. Dies kann nützlich sein, um spezifische Elemente in Skripten anzusprechen.
   • Beispiel: data-id="12345"
3. data-toggle
   • Erklärung: Dieses Attribut kann verwendet werden, um anzugeben, dass ein Element ein Toggle-Element ist, das bei einem Klick ein anderes Element ein- oder ausblendet.
   • Beispiel: data-toggle="collapse"
4. data-tooltip
   • Erklärung: Ein Attribut, das den Text für ein Tooltip angibt, das beim Hover über das Element angezeigt wird.
   • Beispiel: data-tooltip="Mehr Informationen hier"
5. data-target
   • Erklärung: Dieses Attribut gibt an, welches Element durch eine Aktion (z.B. einen Klick) angesprochen werden soll.
   • Beispiel: data-target="#modal1"
6. data-animation
   • Erklärung: Ein Attribut, das angibt, welche Animation auf das Element angewendet werden soll, wenn es sichtbar wird.
   • Beispiel: data-animation="fadeIn"
7. data-color
   • Erklärung: Dieses Attribut kann verwendet werden, um eine spezifische Farbe für das Element festzulegen, die in CSS oder JavaScript verwendet werden kann.
   • Beispiel: data-color="#ff0000"
8. data-role
   • Erklärung: Ein Attribut, das die Rolle des Elements innerhalb einer Anwendung oder eines Layouts beschreibt, z.B. ob es ein Button, ein Link oder ein Container ist.
   • Beispiel: data-role="button"
9. data-visibility
   • Erklärung: Dieses Attribut kann verwendet werden, um die Sichtbarkeit des Elements zu steuern, z.B. ob es auf bestimmten Geräten angezeigt werden soll.
   • Beispiel: data-visibility="mobile"
10. data-custom
    • Erklärung: Ein allgemeines benutzerdefiniertes Attribut, das für beliebige zusätzliche Informationen verwendet werden kann, die nicht in anderen Attributen enthalten sind.
    • Beispiel: data-custom="wert"

---

 

---

Posts bearbeiten / Erweitert /
Benutzerdefiniertes CSS 

mit KI bearbeiten, dann werden dort das CSS generiert.

Im Post-Widget von Elementor können Sie benutzerdefiniertes CSS hinzufügen, um das Aussehen und Verhalten Ihrer Elemente weiter anzupassen. Dies ermöglicht Ihnen, spezifische Stile zu definieren, die nicht standardmäßig in Elementor verfügbar sind. 

Benutzerdefiniertes CSS (Custom CSS)

• Erklärung: Benutzerdefiniertes CSS ermöglicht es Ihnen, spezifische Stile für Ihre Elementor-Elemente zu definieren. Sie können damit das Design Ihrer Website anpassen, indem Sie CSS-Regeln hinzufügen, die auf bestimmte Elemente angewendet werden. Dies ist besonders nützlich, um einzigartige Designs zu erstellen, die über die Standardoptionen hinausgehen.

Beispiele für Benutzerdefiniertes CSS

1. Ändern der Hintergrundfarbe
   • CSS:css
   • selector { background-color: #ffcc00; }
   • Erklärung: Mit diesem CSS wird die Hintergrundfarbe des Elements auf ein helles Gelb gesetzt. Dies kann verwendet werden, um das Element hervorzuheben.
2. Anpassen der Schriftgröße
   • CSS:css
   • selector { font-size: 24px; }
   • Erklärung: Dieses CSS ändert die Schriftgröße des Textes im Element auf 24 Pixel, was es größer und auffälliger macht.
3. Hinzufügen eines Rahmens
   • CSS:css
   • selector { border: 2px solid #000000; }
   • Erklärung: Hiermit wird ein schwarzer, durchgezogener Rahmen mit einer Dicke von 2 Pixeln um das Element hinzugefügt, was dem Element mehr Struktur verleiht.
4. Rundung der Ecken
   • CSS:css
   • selector { border-radius: 15px; }
   • Erklärung: Dieses CSS rundet die Ecken des Elements um 15 Pixel, was ein weicheres und moderneres Aussehen erzeugt.
5. Hinzufügen eines Schattens
   • CSS:css
   • selector { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
   • Erklärung: Mit diesem CSS wird ein Schatten unter dem Element hinzugefügt, der ihm Tiefe verleiht. Der Schatten hat eine horizontale und vertikale Verschiebung von 0 und 4 Pixeln sowie eine Unschärfe von 8 Pixeln.

KI-gestützte Bearbeitung

Erklärung: Mit der Integration von KI-Funktionen in Elementor können Sie auch KI-gestützte Anpassungen vornehmen. Dies bedeutet, dass Sie Vorschläge für CSS-Änderungen erhalten können, die auf den besten Praktiken basieren. Die KI kann Ihnen helfen, das Design zu optimieren, indem sie automatisch Stile vorschlägt, die gut zusammenpassen oder die Benutzererfahrung verbessern.