Einstellung der Dimension von Widget-Containern

  • Created : May, 12, 2016
  • Last Updated: Sep, 5, 2021

Easy Steps

Breite und Höhe des Containers einstellen
  1. Öffnen Sie Ihr Widget zur Bearbeitung (oder erstellen Sie ein neues)
  2. Gehen Sie zum Abschnitt "Allgemein" des Einrichtungsbildschirms
  3. Geben Sie die Containerbreite in Pixel ein oder wählen Sie die reagierende (automatische) Breite
  4. Geben Sie die Höhe des Containers in Pixeln ein oder bestimmen Sie die Höhe durch die Anzahl der Beiträge, die Sie anzeigen möchten
  5. Klicken Sie auf die Schaltfläche Speichern & Code abrufen, um Ihre Änderungen zu speichern - Ihr Widget wird nach der Installation automatisch aktualisiert

Einstellung der Dimension von Widget-Containern

Containerbreite

Sie können die Breite des FeedWind-Widget-Containers mit zwei Methoden angeben:

1. Feste Anzahl von Pixeln (px)

Sie können die Containerbreite mit einer bestimmten Pixelgröße einstellen.

2. Reagierende (mobilfreundliche) Breite

Mit dieser Einstellung wird die Größe des Containers automatisch angepasst, wenn die Größe des Browserfensters geändert wird. Diese Option ist für die meisten Anwendungen am besten geeignet, da die meisten Webseiten eine reagierende Option erfordern (auch “mobilfreundlich” genannt, da mobile Browsers die Größe des Widgets automatisch an jede Bildschirmgröße anpassen können).

Containerhöhe

Um maximale Flexibilität zu erreichen, bietet FeedWind zwei verschiedene Methoden zur Angabe der Containerhöhe:

1. Feste Anzahl von Pixeln (px)

Sie können die Containerhöhe mit einer bestimmten Pixelgröße einstellen. Auf diese Weise kann die Größe Ihres Widget-Containers an die Dimension Ihres Webseite-Layouts angepasst werden. Sie können dies einfach tun, indem Sie die Anzahl der Pixel für die Höhe im Abschnitt “Allgemein” auf der FeedWind-Einstellungsbildschirm eingeben.

2. Feste Anzahl von Feed-Inhalten

Oder Sie können die Anzahl der Feed-Inhalte angeben, die angezeigt werden sollen. Die Containerhöhe passt sich dann automatisch an die Länge und Anzahl der anzezeigenden Inhalte an.


Benutzerdefinierte Containergröße mit CSS

Um den gewünschten Container genauer zu erstellen, könnte unser fortgeschrittenes Tutorial zum Anpassen Ihres RSS-Widgets mithilfe von CSS hilfreich sein.

Anpassen von Containern mit prozentualen Abmessungen (Responsive Sizing)

Wenn Sie Widgets beispielsweise für mobile Geräte erstellen, wäre es besser, eine Container-Dimensionierung zu verwenden, die im Verhältnis zur Containergröße steht. FeedWind unterstützt die prozentuale Größenanpassung (Auto-Sizing), die unter der Einstellung Responsive (mobile friendly) > Allgemein ausgewählt werden kann (siehe Screenshot oben). Diese reagiert auf die Größe des verfügbaren Displays. Wenn Sie Standardbefehle verwenden, können HTML/CSS-Container auch prozentual angepasst werden. Sie können die prozentuale Dimensionirung erreichen, indem Sie das FeedWind RSS-Widget innerhalb von verschachtelten Containern (ein Container innerhalb eines anderen Containers) platzieren. Der erste Container kann die Seite selbst oder ein Container auf einer Seite sein, und der zweite wird einfach in den ersten geschachtelt.

Wenn Sie einen Container innerhalb der Seite erstellen, werden zwei Container erstellt. Der erste hat die maximale Containergröße, in die Sie das RSS-Feed-Widget einfügen möchten. Der zweite wird als Prozentsatz des ersten definiert und wird daher in den inneren Container mit dem gewünschten Prozentsatz verschachtelt.

Beispiel mit verschachteltem <div>:

*** Blue area is the outer container
*** Yellow is the Inner Container ***

Warum nicht den Befehl Zoom anstatt des <div>-Tags verwenden?

Der Befehl Zoom scheint zwar eine gute Lösung zu sein, aber dieser funktioniert nur im Microsoft Internet Explorer (IE) richtig. Bei Verwendung in anderen Browsern, Zoom ändert nur die Größe des inneren Containers relativ zum äußeren, und hat keinen Vergrößerungs- oder Verkleinerungseffekt. Ein tatsächliches vergrößerungsartiges Ein- und Auszoomen ist in HTML oder CSS außer im IE nicht möglich. Das funktioniert aber nur bei einem kleinen Prozentsatz der Internetnutzer.

Wenn Sie <div> mit prozentualer Größenanpassung verwenden, hat es auch KEINEN Vergrößerungseffekt. Mit der prozentualen Größenanpassung können Sie die Dimensionen in direkter Proportion zum verfügbaren Bildschirmplazt einschränken. Klicken Sie mit der rechten Maustaste auf das Beispiel unten und verwenden Sie die Konsole (Drücken Sie F12 oder wählen Sie “Element untersuchen”), um den HTML-Code zu sehen.

In W3Schools können Sie herausfinden, wie das alles funktioniert, und lernen, die verfügbaren CSS zu nutzen, um die optimale Erstellung Ihres FeedWind RSS-Widgets zu erreichen. Verwenden Sie diesen Link, um CSS- oder HTML-Code selbst auszuprobieren.


   
Start your free trial. FeedWind is the easiest way to add dynamic content on your website.
Create Now